update

Web-Manage/src/app/DPU/common/home-common/home-common.component.html

@@ -69,6 +69,37 @@
               </label>
 
             </div>
+          </div>
+            <!-- Dropdown Checkbox -->
+          <div
+            class="relative inline-block"
+            (clickOutside)="isDropdownOpen1 = false"
+          >
+            <!-- Dropdown button -->
+            <button
+              (click)="toggleDropdown1()"
+              class="border rounded px-4 py-2 bg-white shadow w-48 text-left"
+            >
+              {{ getSelected() }}
+            </button>
+
+            <!-- Dropdown content -->
+            <div
+              *ngIf="isDropdownOpen1"
+              class="absolute z-10 mt-1 w-48 bg-white border rounded shadow"
+            >
+              <label
+                *ngFor="let item of equipmentList"
+                class="flex items-center px-4 py-2 hover:bg-gray-100"
+              >
+                <input
+                  type="checkbox"
+                  [value]="item"
+                  [(ngModel)]="  itemSelection [item.equipmentName]"
+                  class="mr-2"
+                />
+                {{ item.equipmentName }}
+              </label>
 
             </div>
         </div>
@@ -80,6 +111,7 @@
         </div>
         </div>
     </div>
+  </div>
   <div class="xxxl:col-span-6 col-span-12">
     <div class="grid grid-cols-12 gap-x-6">
       <div class="xxl:col-span-4 md:col-span-6 col-span-12">
@@ -234,13 +266,6 @@
         <div class="box-title">อุปกรณ์ที่ยืม</div>
         <div>
           <div class="flex gap-4 flex-wrap">
-            <select>
-              <option value="">ALL</option>
-              <option value="">จอบ</option>
-              <option value="">เสียม</option>
-              <option value="">ตะปู</option>
-              <option value="">เครื่องขุด</option>
-            </select>
           </div>
         </div>
       </div>
@@ -297,24 +322,6 @@
       <div class="box-header justify-between items-center flex-wrap gap-4">
         <div class="box-title">จำนวนอุปกรณ์คงเหลือ</div>
         <div class="flex gap-4 flex-wrap">
-          <!-- Select: เดือน -->
-          <select>
-            <option value="">ALL</option>
-            <option value="">มกราคม</option>
-            <option value="">กุมภาพันธ์</option>
-            <option value="">มีนาคม</option>
-            <option value="">เมษายน</option>
-          </select>
-
-          <!-- Select: โปรเจค -->
-          <select>
-            <option value="">โปรเจคทั้งหมด</option>
-            <option value="">DPU001</option>
-            <option value="">DPU002</option>
-            <option value="">DPU003</option>
-            <option value="">DPU004</option>
-          </select>
-
           <div
             class="inline-flex rounded-md shadow-sm"
             role="group"
@@ -379,23 +386,6 @@
     <div class="box-header justify-between items-center flex-wrap gap-4">
       <div class="box-title">จำนวนอุปกรณ์ทั้งหมด</div>
       <div class="flex gap-4 flex-wrap">
-        <!-- Select: เดือน -->
-        <select>
-          <option value="">ALL</option>
-          <option value="">มกราคม</option>
-          <option value="">กุมภาพันธ์</option>
-          <option value="">มีนาคม</option>
-          <option value="">เมษายน</option>
-        </select>
-
-        <!-- Select: โปรเจค -->
-        <select>
-          <option value="">โปรเจคทั้งหมด</option>
-          <option value="">DPU001</option>
-          <option value="">DPU002</option>
-          <option value="">DPU003</option>
-          <option value="">DPU004</option>
-        </select>
 
         <div
           class="inline-flex rounded-md shadow-sm"

Web-Manage/src/app/DPU/common/home-common/home-common.component.ts

@@ -46,10 +46,13 @@ export class HomeCommonComponent {
   someSelected = false;
   startDate: string = '';
   endDate: string = '';
+  itmes:string='';
   selectedProjects: string[] = [];
   selectedEquipmentType: string = 'ALL';
   isDropdownOpen = false;
+  isDropdownOpen1 = false;
   projectSelection: { [key: string]: boolean } = {};
+  itemSelection: { [key: string]: boolean } = {};
   confirmPassword = ""
   dashbordList:string[] = [];
   equipmentList: EquipmentModel[] = []
@@ -843,6 +846,10 @@ export class HomeCommonComponent {
     this.isDropdownOpen = !this.isDropdownOpen;
   }
 
+   toggleDropdown1() {
+    this.isDropdownOpen1= !this.isDropdownOpen1;
+  }
+
 
   getSelectedLabel(): string {
     const selectedIds = Object.keys(this.projectSelection).filter(
@@ -860,6 +867,23 @@ export class HomeCommonComponent {
     return selectedNames.join(', ');
   }
 
+  getSelected(): string {
+    const selectedIds = Object.keys(this.itemSelection).filter(
+      id => this.itemSelection[id]
+    );
+
+    if (selectedIds.length === 0) return 'เลือกอุปกรณ์';
+    if (selectedIds.length === this.equipmentList.length) return 'อุปกรณ์ทั้งหมด';
+
+
+    const selectedNames = this.equipmentList
+      .filter(equipmentList => selectedIds.includes(equipmentList.equipmentName))
+      .map(equipmentList => equipmentList.equipmentName);
+
+    return selectedNames.join(', ');
+  }
+
+
 
   ngOnInit(): void {
     this.userService.getLists().subscribe(result => {