update ระบบยืมคืน

Web-Manage/src/app/DPU/company-management/emp-borrow-return-status/emp-borrow-return-status.component.ts

@@ -17,8 +17,12 @@ import { EquipmentModel, EquipmentStockModel } from "../../models/equipments.mod
 import { ProjectEquipmentModel } from "../../models/project-equipments";
 import { ProjectMemberModel } from '../../models/project-members';
 import { HttpClient } from '@angular/common/http';
-import { FileUploader } from 'ng2-file-upload';
 import { ProjectModel } from '../../models/project.model';
+import { ChangeDetectorRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+
 
 @Component({
   selector: 'app-emp-borrow-return-status',
@@ -46,7 +50,6 @@ export class EmpBorrowReturnStatusComponent {
   projectList:ProjectModel;
   allSelected = false;
   someSelected = false;
-  uploaderProfile: FileUploader | undefined;
   uploadErrorMsg: string = "";
   itemsList: ProjectEquipmentModel[] = [];
   filterList: ProjectEquipmentModel[] = [];
@@ -76,9 +79,11 @@ export class EmpBorrowReturnStatusComponent {
   isEdit = false;
   empList: ProjectMemberModel[] = []
   hisList: BorrowTransactionsModel [] = [];
-  selectedStatus: string = 'all';
+  selectedStatus: string = '!requested,!rejected';
+  isProcessing = false;
   constructor(
     private http: HttpClient,
+    private cdr: ChangeDetectorRef,
     private eqService: EquipmentService,
     public translate: TranslateService,
     private tokenService: TokenService,
@@ -101,13 +106,28 @@ export class EmpBorrowReturnStatusComponent {
 
   }
   loadReturnList(): void {
-    this.borrowTransactionsService.getLists().subscribe(result => {
-      this.hisList = result;
-      // เรียงลำดับจากวันที่ล่าสุด
-      this.hisList.sort((a, b) =>
-        new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-      );
-      this.applyFilter();
+    this.borrowTransactionsService.getLists().subscribe({
+      next: (result) => {
+        // เก็บข้อมูลทั้งหมด
+        this.hisList = result;
+
+        // เรียงลำดับจากวันที่ล่าสุด
+        this.hisList.sort((a, b) =>
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        );
+
+        // กรองเฉพาะรายการที่ต้องคืน (is_returnable === true)
+        this.hisList = this.hisList.filter(item =>
+          item.project_equipment?.equipment?.is_returnable === true
+        );
+
+        // ใช้ applyFilter เพื่อกรองตามเงื่อนไขอื่นๆ
+        this.applyFilter();
+      },
+      error: (err) => {
+        console.error('Error loading return list:', err);
+        // สามารถเพิ่มการแจ้งเตือนผู้ใช้ที่นี่
+      }
     });
   }
 
@@ -119,10 +139,30 @@ export class EmpBorrowReturnStatusComponent {
   applyFilter(): void {
     let filtered = [...this.hisList];
 
-    // กรองตามสถานะ
-    if (this.selectedStatus !== 'all') {
-      filtered = filtered.filter(item => item.status === this.selectedStatus);
-    }
+    // แยกค่าสถานะเป็น Array
+    const statusConditions = this.selectedStatus.split(',');
+
+    // กรองตามเงื่อนไขสถานะ
+    filtered = filtered.filter(item => {
+      if (!item.status) return false;
+
+      // ตรวจสอบแต่ละเงื่อนไข
+      for (const condition of statusConditions) {
+        if (condition.startsWith('!')) {
+          // กรณีเงื่อนไขแบบยกเว้น (!status)
+          const excludedStatus = condition.substring(1);
+          if (item.status === excludedStatus) {
+            return false;
+          }
+        } else {
+          // กรณีเงื่อนไขแบบบังคับ (status)
+          if (item.status !== condition) {
+            return false;
+          }
+        }
+      }
+      return true;
+    });
 
     // กรองตามคำค้นหา
     if (this.searchTerm) {
@@ -135,7 +175,6 @@ export class EmpBorrowReturnStatusComponent {
     }
 
     this.filteredList = filtered;
-
   }
 
 
@@ -180,7 +219,7 @@ export class EmpBorrowReturnStatusComponent {
   getStatusText(status: string): string {
     switch(status) {
       case 'requested': return 'รออนุมัติ';
-      case 'approved': return 'อนุมัติแล้ว';
+      case 'approved': return 'รอคืนอุปกรณ์';
       case 'rejected': return 'ไม่อนุมัติ';
       case 'returned': return 'คืนแล้ว';
       case 'repairing': return 'กำลังซ่อม';

Web-Manage/src/app/DPU/company-management/emp-borrow-status/emp-borrow-status.component.html

 <app-page-header
-  [title]="'อนุมัตการยืมอุปกรณ์'"
+  [title]="'อนุมัติการยืมอุปกรณ์'"
   [activeTitle]="'ผู้ดูแลระบบ'"
-  [title1]="'อนุมัตการยืมอุปกรณ์'"
+  [title1]="'อนุมัติการยืมอุปกรณ์'"
 ></app-page-header>
 
 <div class="grid grid-cols-12 gap-x-6">
@@ -12,47 +12,47 @@
           {{ "รายการทั้งหมด" | translate }}
           <span
             class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle"
-            >{{ hisList.length }}</span
+            >{{ filteredList.length }}</span
           >
         </div>
-          <!-- แท็บสถานะ -->
-          <div class="flex flex-wrap gap-2">
-            <!-- สถานะทั้งหมด -->
-            <div>
-              <button
-                class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200"
-                (click)="filterByStatus('all')"
-              >
-                ทั้งหมด
-              </button>
-            </div>
-            <!-- สถานะรออนุมัติ -->
-            <div>
-              <button
-                class="px-4 py-2 rounded-full border text-sm font-medium bg-warning/10 text-warning border-warning/20"
-                (click)="filterByStatus('requested')"
-              >
-                รออนุมัติ
-              </button>
-            </div>
-            <!-- สถานะอนุมัติแล้ว -->
-            <div>
-              <button
-                class="px-4 py-2 rounded-full border text-sm font-medium bg-success/10 text-success border-success/20"
-                (click)="filterByStatus('approved')"
-              >
-                อนุมัติแล้ว
-              </button>
-            </div>
-            <div>
-              <button
-                class="px-4 py-2 rounded-full border text-sm font-medium bg-danger/10 text-danger border-danger/20"
-                (click)="filterByStatus('rejected')"
-              >
-              ไม่อนุมันติ
-              </button>
-            </div>
+        <!-- แท็บสถานะ -->
+        <div class="flex flex-wrap gap-2">
+          <!-- สถานะทั้งหมด -->
+          <div>
+            <button
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200"
+              (click)="selectedStatus = '!returned'; applyFilter()"
+            >
+              ทั้งหมด
+            </button>
+          </div>
+          <!-- สถานะรออนุมัติ -->
+          <div>
+            <button
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-warning/10 text-warning border-warning/20"
+              (click)="selectedStatus = 'requested'; applyFilter()"
+            >
+              รออนุมัติ
+            </button>
+          </div>
+          <!-- สถานะอนุมัติแล้ว -->
+          <div>
+            <button
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-success/10 text-success border-success/20"
+              (click)="selectedStatus = 'approved'; applyFilter()"
+            >
+              อนุมัติแล้ว
+            </button>
+          </div>
+          <div>
+            <button
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-danger/10 text-danger border-danger/20"
+              (click)="selectedStatus = 'rejected'; applyFilter()"
+            >
+              ไม่อนุมัติ
+            </button>
           </div>
+        </div>
         <div class="flex flex-wrap gap-2">
           <div>
             <input
@@ -61,6 +61,7 @@
               type="text"
               placeholder="{{ 'ค้นหารายการ...' | translate }}"
               aria-label=".form-control-sm example"
+              (input)="applyFilter()"
             />
           </div>
         </div>
@@ -71,11 +72,11 @@
           <table class="table whitespace-nowrap table-bordered min-w-full">
             <thead class="bg-light">
               <tr>
+                <th scope="col" class="text-start">โปรเจค</th>
                 <th scope="col" class="text-start">อุปกรณ์ที่ยืม</th>
                 <th scope="col" class="text-start">พนักงาน</th>
                 <th scope="col" class="text-start">จำนวน</th>
                 <th scope="col" class="text-start">วันที่ยืม</th>
-                <th scope="col" class="text-start">วันที่คืน</th>
                 <th scope="col" class="text-start">สถานะ</th>
                 <th scope="col" class="text-start">ผู้อนุมัติ</th>
                 <th scope="col" class="text-start">การดำเนินการ</th>
@@ -84,8 +85,9 @@
             <tbody>
               @for(product of filteredList;track product.peId){
               <tr class="product-list">
+                <td>{{ product.project_equipment?.project?.project_name }}</td>
                 <td>
-                  {{ product.project_equipment?.equipment?.equipmentName}}
+                  {{ product.project_equipment?.equipment?.equipmentName }}
                 </td>
                 <td>
                   <div class="flex items-center">
@@ -95,28 +97,34 @@
                   </div>
                 </td>
                 <td>{{ product.quantity_borrowed }}</td>
-                <td>{{ product.created_at | date:'dd/MM/yyyy HH:mm' }}</td>
-                <td>{{ product.returned_date | date:'dd/MM/yyyy HH:mm' }}</td>
+                <td>{{ product.created_at | date : "dd/MM/yyyy HH:mm" }}</td>
                 <td>
-                  <span class="badge" [ngClass]="{
-                    'bg-success/10 text-success': product.status === 'approved',
-                    'bg-warning/10 text-warning': product.status === 'requested',
-                    'bg-danger/10 text-danger': product.status === 'rejected',
-                    'bg-info/10 text-info': product.status === 'returned'
-                  }">
+                  <span
+                    class="badge"
+                    [ngClass]="{
+                      'bg-success/10 text-success':
+                        product.status === 'approved',
+                      'bg-warning/10 text-warning':
+                        product.status === 'requested',
+                      'bg-danger/10 text-danger': product.status === 'rejected',
+                      'bg-info/10 text-info': product.status === 'returned'
+                    }"
+                  >
                     {{ getStatusText(product.status) }}
                   </span>
                 </td>
-                <td>{{ product.approved_by_member?.getFullname() || '-' }}</td>
+                <td>{{ product.approved_by_member?.getFullname() || "-" }}</td>
                 <td>
-                  <button *ngIf="product.status === 'requested'"
+                  <button
+                    *ngIf="product.status === 'requested'"
                     aria-label="button"
                     (click)="approve(product)"
                     class="ti-btn ti-btn-sm ti-btn-success me-1"
                   >
                     <i class="ri-check-line"></i>
                   </button>
-                  <button *ngIf="product.status === 'requested'"
+                  <button
+                    *ngIf="product.status === 'requested'"
                     aria-label="button"
                     (click)="reject(product)"
                     class="ti-btn ti-btn-sm ti-btn-danger"

Web-Manage/src/app/DPU/company-management/emp-borrow-status/emp-borrow-status.component.ts

@@ -68,7 +68,7 @@ export class EmpBorrowStatusComponent {
   isEdit = false;
   empList: ProjectMemberModel[] = []
   hisList: BorrowTransactionsModel [] = [];
-  selectedStatus: string = 'all';
+  selectedStatus: string = '!returned';
   constructor(
     private http: HttpClient,
     private eqService: EquipmentService,
@@ -86,13 +86,23 @@ export class EmpBorrowStatusComponent {
   }
 
   loadBorrowHistory(): void {
-    this.borrowTransactionsService.getLists().subscribe(result => {
-      this.hisList = result;
-      // เรียงลำดับจากวันที่ล่าสุด
-      this.hisList.sort((a, b) =>
-        new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-      );
-      this.applyFilter();
+    this.borrowTransactionsService.getLists().subscribe({
+      next: (result) => {
+        // เก็บข้อมูลทั้งหมด
+        this.hisList = result;
+
+        // เรียงลำดับจากวันที่ล่าสุด
+        this.hisList.sort((a, b) =>
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        );
+
+        // ใช้ applyFilter เพื่อกรองตามเงื่อนไขอื่นๆ
+        this.applyFilter();
+      },
+      error: (err) => {
+        console.error('Error loading return list:', err);
+        // สามารถเพิ่มการแจ้งเตือนผู้ใช้ที่นี่
+      }
     });
   }
 
@@ -194,10 +204,30 @@ export class EmpBorrowStatusComponent {
   applyFilter(): void {
     let filtered = [...this.hisList];
 
-    // กรองตามสถานะ
-    if (this.selectedStatus !== 'all') {
-      filtered = filtered.filter(item => item.status === this.selectedStatus);
-    }
+    // แยกค่าสถานะเป็น Array
+    const statusConditions = this.selectedStatus.split(',');
+
+    // กรองตามเงื่อนไขสถานะ
+    filtered = filtered.filter(item => {
+      if (!item.status) return false;
+
+      // ตรวจสอบแต่ละเงื่อนไข
+      for (const condition of statusConditions) {
+        if (condition.startsWith('!')) {
+          // กรณีเงื่อนไขแบบยกเว้น (!status)
+          const excludedStatus = condition.substring(1);
+          if (item.status === excludedStatus) {
+            return false;
+          }
+        } else {
+          // กรณีเงื่อนไขแบบบังคับ (status)
+          if (item.status !== condition) {
+            return false;
+          }
+        }
+      }
+      return true;
+    });
 
     // กรองตามคำค้นหา
     if (this.searchTerm) {
@@ -210,8 +240,6 @@ export class EmpBorrowStatusComponent {
     }
 
     this.filteredList = filtered;
-
   }
 
-
 }