dropdown

accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.css

@@ -627,3 +627,14 @@
     text-align: left;
   }
 }
+
+.quick-log__form select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+}

accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html

@@ -77,13 +77,25 @@
         <div class="quick-log__grid">
           <label>
             <span>หมวดหมู่</span>
-            <select>
-            <!-- @for(){
-              <option>
-                {{ country.name }}
-              </option>
-            } -->
-            </select>
+            @if(mode == 'i'){
+                <select class="w-full h-full px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-50 transition-all bg-white">
+                <option value="">ไม่เลือก</option>
+                @for (item of myDropAct.income; track item.dtlcod) {
+                  <option [value]="item.dtlcod">
+                    {{ item.dtlnam }}
+                  </option>
+                }
+              </select>
+            }@else if(mode == 'e'){
+                <select class="w-full h-full px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-50 transition-all bg-white">
+                <option value="">ไม่เลือก</option>
+                @for (item of myDropAct.expense; track item.dtlcod) {
+                  <option [value]="item.dtlcod">
+                    {{ item.dtlnam }}
+                  </option>
+                }
+              </select>
+            }
           </label>
           <label>
             <span>ยอดเงิน (฿)</span>

accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { GeneralService } from '../../services/generalservice';
-import { IDropAct } from '../../interfaces/dashboard.interface'
+import { IDropAct, IStateDrop, IStateResultResponse } from '../../interfaces/dashboard.interface'
 import { DashboardStateService } from '../../services/state/dashboard-state.service';
 
 @Component({
@@ -17,7 +17,9 @@ export class MainDashboardComponent implements OnInit {
   isSubmitting: boolean = false;
   arrearsForm!: FormGroup;
   saveFrm!: FormGroup;
-  myDropAct!: IDropAct;
+  // myDropAct: IStateDrop[] = [];
+  myDropAct: IStateDrop = { income: [], expense: [] };
+
 
   readonly ownerName = 'Nuttakit';
 
@@ -185,11 +187,10 @@ export class MainDashboardComponent implements OnInit {
   ngOnInit(): void {
     this.setupFormControl();
     this.dashboardStateService.getStateResult().subscribe(data => {
-        if(data) {
-          this.myDropAct = data;
-        }
+      if (data) {
+        this.myDropAct = data;
       }
-    )
+    });
   }
 
   setupFormControl(){