From 1664be0c8b656fca8c9e7aef3e0ed2aee1a34a35 Mon Sep 17 00:00:00 2001
From: x2Skyz <nuttakitpothong86@gmail.com>
Date: Thu, 13 Nov 2025 15:37:50 +0700
Subject: [PATCH] dropdown

---
 .../src/app/app.component.html                |  1 +
 .../main-dashboard.component.css              | 11 ++++++++
 .../main-dashboard.component.html             | 26 ++++++++++++++-----
 .../main-dashboard.component.ts               | 13 +++++-----
 .../main-dashboard-content.component.ts       |  4 +--
 .../src/app/interfaces/dashboard.interface.ts |  9 +++++++
 .../services/state/dashboard-state.service.ts | 14 +++++-----
 7 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/accounting-ng-nuttakit/src/app/app.component.html b/accounting-ng-nuttakit/src/app/app.component.html
index 0680b43..79be59c 100644
--- a/accounting-ng-nuttakit/src/app/app.component.html
+++ b/accounting-ng-nuttakit/src/app/app.component.html
@@ -1 +1,2 @@
+
 <router-outlet></router-outlet>
diff --git a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.css b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.css
index d7ecda0..b101bba 100644
--- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.css
+++ b/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;
+}
diff --git a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html
index 9990b96..c6f92e3 100644
--- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html
+++ b/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>
diff --git a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts
index 07ed5c0..065914a 100644
--- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts
+++ b/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(){
diff --git a/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts b/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts
index b4fd23d..bfa35a5 100644
--- a/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts
+++ b/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ChartConfiguration, ChartOptions } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 import { GeneralService } from '../../services/generalservice';
-import { IDropAct } from '../../interfaces/dashboard.interface';
+import { IDropAct, IStateDrop } from '../../interfaces/dashboard.interface';
 
 
 @Component({
@@ -14,7 +14,7 @@ import { IDropAct } from '../../interfaces/dashboard.interface';
 })
 export class MainDashboardContentComponent implements OnInit {
   @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
-  myDropAct!: IDropAct;
+  myDropAct!: IStateDrop;
 
   constructor(
     private generalService: GeneralService,
diff --git a/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts b/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts
index a5a51b3..a95cb80 100644
--- a/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts
+++ b/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts
@@ -1,8 +1,17 @@
+export interface IStateDrop {
+  income: IDropAct[];
+  expense: IDropAct[];
+}
+
 export interface IDropAct {
   dtlnam?: string,
   dtlcod?: string
 }
 
+export interface IStateResultResponse {
+  data: IStateDrop;
+}
+
 // ข้อมูลสินค้าหลัก
 // export interface IProduct {
 //   id: string;
diff --git a/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts b/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts
index 9be2271..1a47aa2 100644
--- a/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts
+++ b/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts
@@ -1,27 +1,27 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { IDropAct } from '../../interfaces/dashboard.interface';
+import { IDropAct, IStateDrop } from '../../interfaces/dashboard.interface';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DashboardStateService {
   // ประกาศ BehaviorSubject ด้วย Interface
-  private productState = new BehaviorSubject<IDropAct | null>(null);
+  private dashboardState = new BehaviorSubject<IStateDrop | null>(null);
 
   // ส่ง Observable ไปให้ components subscribe
-  getStateResult(): Observable<IDropAct | null> {
-    return this.productState.asObservable();
+  getStateResult(): Observable<IStateDrop | null> {
+    return this.dashboardState.asObservable();
   }
 
   // เซ็ท state
-  setStateResult(product: IDropAct): void {
-    this.productState.next(product);
+  setStateResult(product: IStateDrop): void {
+    this.dashboardState.next(product);
   }
 
   // เคลียร์ state
   clearState(): void {
-    this.productState.next(null);
+    this.dashboardState.next(null);
   }
 
   // ดึงค่า current state (ไม่ใช่ observable)