dropdown

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

@@ -1 +1,2 @@
+
 <router-outlet></router-outlet>

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 }}
+            @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) {
+      if (data) {
         this.myDropAct = data;
       }
-      }
-    )
+    });
   }
 
   setupFormControl(){

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,

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;

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)