Add ปุ่มอนุมัติได้

src/app/pages/admin-pending/admin-pending.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
 import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+import { Equirment } from 'src/app/models/equirment.model';
 import { itemDetail } from 'src/app/models/itemDetail.model';
+import { itemDetailService } from 'src/app/service/item-detail.service';
+import { roomDetail } from 'src/app/models/roomDetail.model';
+import { roomDetailService } from 'src/app/service/room-detail.service';
+import { Room } from 'src/app/models/rooms.model';
 
 @Component({
   selector: 'app-admin-pending',
@@ -41,21 +46,28 @@ export class AdminPendingComponent implements OnInit {
 
   closeResult = '';
 
-  item: itemDetail[] = [];
+  listitemDetail : itemDetail[] = [];
+  listroomDetail : roomDetail[] = [];
 
-  collectionSize = this.item.length;
+  modelEquirment = new Equirment();
+  modelRoom = new Room();
+  modelitemDetail = new itemDetail();
+  modelroomDetail = new roomDetail();
+
+  collectionSize = this.listitemDetail.length;
   hoveredDate: NgbDate | null = null;
+
   fromDate: NgbDate | null;
   toDate: NgbDate | null;
 
-  constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter , private modalService: NgbModal) {
+  constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter, private modalService: NgbModal, private itemDetailService: itemDetailService, private roomDetailService: roomDetailService) {
     this.fromDate = calendar.getToday();
     this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
     this.refreshitemDetail();
   }
 
   refreshitemDetail() {
-    this.item = this.item
+    this.listitemDetail = this.listitemDetail
       .map((country, i) => ({ id: i + 1, ...country }))
       .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
   }
@@ -79,6 +91,26 @@ export class AdminPendingComponent implements OnInit {
     });
   }
 
+  openItemDetail(content : string ,item : itemDetail) {
+    this.modelitemDetail = item ;
+    console.log(item);
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+
+  openRoomDetail(content : string ,item : roomDetail) {
+    this.modelroomDetail = item ;
+    console.log(item);
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+
   private getDismissReason(reason: any): string {
     if (reason === ModalDismissReasons.ESC) {
       return 'by pressing ESC';
@@ -107,8 +139,12 @@ export class AdminPendingComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.listitemDetail = this.itemDetailService.getListitemDetail();
+    this.listroomDetail = this.roomDetailService.getListroomDetail();
+    console.log(this.listitemDetail);
   }
 
+
 }
 
 export class NgbdDropdownBasic {

src/app/pages/pending/pending.component.html

@@ -182,9 +182,9 @@
     <div [ngbNavOutlet]="nav"></div>
 </div>
 
-<ng-template #Room let-modal style="padding: 0; ">
-    <div class=" col-md-12">
-        <div class="card">
+<ng-template #Room let-modal>
+    <div class=" col-md-12" style="padding: 0; ">
+        <div class="card" style="margin: 0; ">
             <div class=" card-header">
                 <h5 class=" title">การจอง</h5>
             </div>
@@ -253,9 +253,9 @@
     </div>
 </ng-template>
 
-<ng-template #lend let-modal style="padding: 0; ">
-    <div class=" col-md-12">
-        <div class="card">
+<ng-template #lend let-modal>
+    <div class=" col-md-12" style="padding: 0; ">
+        <div class="card" style="margin: 0; ">
             <div class=" card-header">
                 <h5 class=" title">Lend Equirment</h5>
             </div>
@@ -329,3 +329,4 @@
         </div>
     </div>
 </ng-template>
+