merge doing topping and re-save file

client/src/app/features/toppings/toppings.component.html

@@ -1,6 +1,15 @@
-<main class="relative overflow-auto max-h-[80%] h-[88vh]">
+<main class="relative overflow-auto max-h-[80%] h-[88vh] bg-stone-100">
+  <div class="w-full m-4 space-x-4 sticky top-0 bg-stone-100 z-10">
+    <button class="btn" (click)="showToppingBuilder = true">
+      <p>New Topping</p>
+    </button>
+    <button class="btn">
+      <p>Save Changes</p>
+    </button>
+  </div>
+
   <table class="table w-full" [formGroup]="toppingGroupForm">
-    <thead class="text-xs sticky top-0">
+    <thead class="text-xs sticky top-12">
       <tr class="bg-primary">
         <th>Is Use</th>
         <th>ID</th>
@@ -12,28 +21,72 @@
       </tr>
     </thead>
 
-    <tbody formArrayName="toppingGroup"  *ngFor="let tpg of toppingGroup.controls; let i = index">
+    <tbody
-      <tr formGroupName="{{i}}">
+      formArrayName="toppingGroup"
-        <td><input class="toggle" type="checkbox" formControlName="inUse"></td>
+      *ngFor="let tpg of toppingGroup.controls; let i = index"
-        <td><input class="input input-sm" formControlName="groupID"></td>
+    >
-        <td><input class="input input-sm" formControlName="name"></td>
+      <tr formGroupName="{{ i }}">
-        <td><input class="input input-sm" formControlName="otherName"></td>
+        <td>
-        <td><input class="input input-sm" formControlName="Desc"></td>
+          <input class="toggle" type="checkbox" formControlName="inUse" />
+        </td>
+        <td>
+          <input
+            class="input input-sm input-bordered"
+            formControlName="groupID"
+          />
+        </td>
+        <td>
+          <input class="input input-sm input-bordered" formControlName="name" />
+        </td>
+        <td>
+          <input
+            class="input input-sm input-bordered"
+            formControlName="otherName"
+          />
+        </td>
+        <td>
+          <input class="input input-sm input-bordered" formControlName="Desc" />
+        </td>
         <!-- <td>{{tpg.idDefault}}</td> -->
-        <td class=" rounded-md">
+        <td class="grid grid-flow-row grid-cols-3 rounded-md gap-2">
-          <div *ngFor="let m of getMemberByGroupId(getAttrFromForm(i, 'groupID'))">
+          <div
+            *ngFor="let m of getMemberByGroupId(getAttrFromForm(i, 'groupID'))"
+          >
             <button
-              class="button border-solid border-2 border-black rounded-md p-2 hover:bg-yellow-300"
+              class="button border-solid border-2 border-black rounded-md p-2"
-              [ngClass]="{ 'button bg-red-200': m == getAttrFromForm(i, 'idDefault') }"
+              [ngClass]="{
+                'button bg-red-200': m == getAttrFromForm(i, 'idDefault')
+              }"
+              (click)="setDefaultOfToppingGroup(i, m)"
             >
-              {{ returnThisOrElse(getMemberData(getAttrFromForm(i, 'groupID'), m).name, "") }} ({{
+              {{
-                m
+                returnThisOrElse(
-              }})
+                  getMemberData(getAttrFromForm(i, "groupID"), m).name,
+                  ""
+                )
+              }}
+              ({{ m }})
             </button>
+            <!-- <button>Edit</button> -->
           </div>
-
         </td>
       </tr>
     </tbody>
   </table>
 </main>
+
+<!-- modal -->
+<input
+  type="checkbox"
+  id="topping_builder_modal"
+  class="modal-toggle"
+  #checkbox="ngModel"
+  [(ngModel)]="showToppingBuilder"
+/>
+<label for="topping_builder_modal" class="modal">
+  <div class="modal-box max-w-5xl">
+    <h3 class="text-xl font-bold">Topping Builder</h3>
+    <!-- body -->
+
+  </div>
+</label>

client/src/app/features/toppings/toppings.component.ts

@@ -16,7 +16,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 @Component({
   selector: 'app-toppings',
   standalone: true,
-  imports: [CommonModule, NgSelectModule,FormsModule, ReactiveFormsModule],
+  imports: [CommonModule, NgSelectModule, FormsModule, ReactiveFormsModule],
   templateUrl: './toppings.component.html',
 })
 export class ToppingsComponent implements OnInit {
@@ -24,10 +24,12 @@ export class ToppingsComponent implements OnInit {
   toppingGroupList: ToppingGroup[] = [];
   toppingLists: ToppingList[] = [];
 
-  groupMemebersMap: { [key: string]: { [key: string]: any } } = {
+  groupMembersMap: { [key: string]: { [key: string]: any } } = {
     '0': { members: [] },
   };
 
+  showToppingBuilder: boolean = false;
+
   // forms
 
   toppingGroupForm = this._formBuilder.group(
@@ -67,7 +69,7 @@ export class ToppingsComponent implements OnInit {
         'topping groups: ',
         this.toppingGroupList,
         'mapper:',
-        this.groupMemebersMap,
+        this.groupMembersMap,
         'length',
         this.toppingGroupList.length
       );
@@ -103,7 +105,7 @@ export class ToppingsComponent implements OnInit {
         'get topping list',
         this.toppingLists,
         'mapper:',
-        this.groupMemebersMap
+        this.groupMembersMap
       );
 
       console.log('undefined name of topping list', this.findUndefinedName());
@@ -116,26 +118,26 @@ export class ToppingsComponent implements OnInit {
   mapMembers = () => {
     this.toppingGroupList.forEach((tpg) => {
       let spl_mem = tpg.idInGroup.split(',');
-      this.groupMemebersMap[tpg.groupID] = { members: spl_mem };
+      this.groupMembersMap[tpg.groupID] = { members: spl_mem };
     });
   };
 
   // get members of group id
   getMemberByGroupId = (id: string) =>
-    this.groupMemebersMap[id]['members'] as string[];
+    this.groupMembersMap[id]['members'] as string[];
 
   // match name to member
   mapNameToMember = () => {
     if (this.toppingLists.length > 0) {
       this.toppingGroupList.forEach((tpg) => {
-        let members = this.groupMemebersMap[tpg.groupID]['members'];
+        let members = this.groupMembersMap[tpg.groupID]['members'];
         members.forEach((member_id: string) => {
           // do get member data from topping list
           let member_data = this.toppingLists.find(
             (v) => v.id.toString() == member_id.toString()
           );
           // set data to group
-          this.groupMemebersMap[tpg.groupID][member_id] = member_data;
+          this.groupMembersMap[tpg.groupID][member_id] = member_data;
         });
       });
     }
@@ -143,10 +145,10 @@ export class ToppingsComponent implements OnInit {
 
   // get member data from group
   getMemberData = (group: string, member_id: string) => {
-    if (this.groupMemebersMap[group][member_id] == undefined) {
+    // if (this.groupMembersMap[group][member_id] == undefined) {
-      return {};
+    //   return {};
-    }
+    // }
-    return this.groupMemebersMap[group][member_id];
+    return this.groupMembersMap[group][member_id];
   };
 
   // check which list does not have name
@@ -158,11 +160,28 @@ export class ToppingsComponent implements OnInit {
     value == undefined || value == '' ? default_value : value;
 
   // get value from form by given key
-  getAttrFromForm(index: number, key: string){
+  getAttrFromForm(index: number, key: string) {
     let x = this.toppingGroup.controls.at(index) as any;
     return x.value[key];
   }
 
   // diff and find matched
-  comapareFunction = (a: any, b: any) => ( a != undefined && b != undefined)&& (a.toString() === b.toString());
+  comapareFunction = (a: any, b: any) =>
+    a != undefined && b != undefined && a.toString() === b.toString();
+
+  // onclick: set default of topping in the group
+  setDefaultOfToppingGroup = (index: number, member: string) => {
+    // get default of group in form
+    let targetForm = this.toppingGroup.controls.at(index);
+    console.log('get id default', targetForm);
+
+    let targetDefault = targetForm?.get('idDefault');
+
+    // if click on the same index, set 0
+    if (targetDefault?.value == member) {
+      member = '0';
+    }
+
+    targetDefault?.setValue(member);
+  };
 }

server/go.mod

@@ -18,6 +18,12 @@ require (
 	golang.org/x/exp v0.0.0-20230626212559-97b1e661b5df // indirect
 )
 
+require (
+	github.com/cespare/xxhash/v2 v2.2.0 // indirect
+	github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
+	github.com/redis/go-redis/v9 v9.4.0 // indirect
+)
+
 require (
 	cloud.google.com/go/compute v1.23.3 // indirect
 	cloud.google.com/go/compute/metadata v0.2.3 // indirect

server/go.sum

@@ -48,6 +48,8 @@ github.com/BurntSushi/xgb v0.0.0-20160522181843-27f122750802/go.mod h1:IVnqGOEym
 github.com/bmizerany/pat v0.0.0-20170815010413-6226ea591a40 h1:y4B3+GPxKlrigF1ha5FFErxK+sr6sWxQovRMzwMhejo=
 github.com/bmizerany/pat v0.0.0-20170815010413-6226ea591a40/go.mod h1:8rLXio+WjiTceGBHIoTvn60HIbs7Hm7bcHjyrSqYB9c=
 github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
+github.com/cespare/xxhash/v2 v2.2.0 h1:DC2CZ1Ep5Y4k3ZQ899DldepgrayRUGE6BBZ/cd9Cj44=
+github.com/cespare/xxhash/v2 v2.2.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
 github.com/chzyer/logex v1.1.10/go.mod h1:+Ywpsq7O8HXn0nuIou7OrIPyXbp3wmkHB+jjWRnGsAI=
 github.com/chzyer/readline v0.0.0-20180603132655-2972be24d48e/go.mod h1:nSuG5e5PlCu98SY8svDHJxuZscDgtXS6KTTbou5AhLI=
 github.com/chzyer/test v0.0.0-20180213035817-a1ea475d72b1/go.mod h1:Q3SI9o4m/ZMnBNeIyt5eFwwo7qiLfzFZmjNmxjkiQlU=
@@ -58,6 +60,8 @@ github.com/cncf/udpa/go v0.0.0-20201120205902-5459f2c99403/go.mod h1:WmhPx2Nbnht
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f h1:lO4WD4F/rVNCu3HqELle0jiPLLBs70cWOduZpkS1E78=
+github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f/go.mod h1:cuUVRXasLTGF7a8hSLbxyZXjz+1KgoB3wDUb6vlszIc=
 github.com/envoyproxy/go-control-plane v0.9.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/go-control-plane v0.9.4/go.mod h1:6rpuAdCZL397s3pYoYcLgu1mIlRU8Am5FuJP05cCM98=
@@ -188,6 +192,8 @@ github.com/pkg/sftp v1.13.1/go.mod h1:3HaPG6Dq1ILlpPZRO0HVMrsydcdLt6HRDccSgb87qR
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
+github.com/redis/go-redis/v9 v9.4.0 h1:Yzoz33UZw9I/mFhx4MNrB6Fk+XHO1VukNcCa1+lwyKk=
+github.com/redis/go-redis/v9 v9.4.0/go.mod h1:hdY0cQFCN4fnSYT6TkisLufl/4W5UIXyv0b/CLO2V2M=
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/rogpeppe/go-internal v1.11.0 h1:cWPaGQEPrBb5/AsnsZesgZZ9yb1OQ+GOISoDNXVBh4M=
 github.com/rogpeppe/go-internal v1.11.0/go.mod h1:ddIwULY96R17DhadqLgMfk9H9tvdUzkipdSkR5nkCZA=

server/server.go

@@ -20,6 +20,7 @@ import (
 	"strings"
 
 	"github.com/jmoiron/sqlx"
+	"github.com/redis/go-redis/v9"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/cors"
@@ -30,6 +31,7 @@ type Server struct {
 	server    *http.Server
 	data      *data.Data
 	database  *sqlx.DB
+	cache_db  *redis.Client
 	cfg       *config.ServerConfig
 	oauth     oauth.OAuthService
 	taoLogger *logger.TaoLogger
@@ -44,8 +46,9 @@ func NewServer(cfg *config.ServerConfig, oauthService oauth.OAuthService) *Serve
 		server:    &http.Server{Addr: fmt.Sprintf(":%d", cfg.ServerPort)},
 		data:      data.NewData(taoLogger),
 		database:  data.NewSqliteDatabase(),
+		cache_db:  data.NewRedisClient("redis:6379", "", ""),
 		cfg:       cfg,
-		oauth:     oauthService,
+		oauth:     oauth.NewOAuthService(serverCfg),
 		taoLogger: taoLogger,
 	}
 }