Update หน้า calendar หน้าการเบิก

src/app/pages/home-page/home-page-lend-calendar.component.html

+<div class="modal-header">
+    <h4 class="modal-title">รายละเอียดการเบิก</h4>
+    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+<div class=" modal-body">
+    <div class=" row">
+        <div class=" col-md-12">
+            <div class=" form-group">
+                <label> ชื่อผู้เบิก </label>
+                <input readonly class=" form-control" type="text" value={{name}} style="color: aliceblue;" />
+            </div>
+        </div>
+    </div>
+    <div class=" row">
+        <div class=" col-md-12">
+            <div class=" form-group">
+                <label> เบอร์โทร </label>
+                <input readonly class=" form-control" type="text" value={{telephone}} style="color: aliceblue;" />
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 mb-1">
+            <label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
+            <input readonly class="form-control" type="text" value={{eqName}} style="color: aliceblue;">
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 mb-1">
+            <label for="exampleFormControlSelect1">จำนวน</label>
+            <input readonly class="form-control" type="text" value={{quantity}} style="color: aliceblue;"> 
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/pages/home-page/home-page.component.ts

@@ -27,6 +27,20 @@ export class NgbdModalContent {
 }
 
 @Component({
+  selector: 'ngbd-modal-content',
+  templateUrl: './home-page-lend-calendar.component.html',
+})
+
+export class NgbdModalLendContent {
+  @Input() name;
+  telephone;
+  eqName;
+  quantity;
+
+  constructor(public activeModal: NgbActiveModal) { }
+}
+
+@Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss'],
@@ -73,6 +87,7 @@ export class HomePageComponent implements OnInit {
   modelItemDetail = new ItemDetail();
   modelRoomDetail = new RoomDetail();
   selectedRoomDetail = new RoomDetail();
+  selectedItemDetail = new ItemDetail();
 
   hoveredDate: NgbDate | null = null;
 
@@ -115,6 +130,13 @@ export class HomePageComponent implements OnInit {
     this.eventShow();
   }
 
+  handleLendClick(arg) {
+    // alert('date click! ' + arg.dateStr)
+    this.selectedItemDetail = arg.event.extendedProps;
+    console.log(this.selectedItemDetail)
+    this.eventLendShow();
+  }
+
   dateKub() {
     return this.listRoomDetail.length
   }
@@ -230,7 +252,8 @@ export class HomePageComponent implements OnInit {
       themeSystem: 'bootstrap',
       dayMaxEventRows: true,
       locale: "th",
-      events: this.eventEquirment
+      events: this.eventEquirment,
+      eventClick: this.handleLendClick.bind(this),
     };
   }
 
@@ -254,6 +277,15 @@ export class HomePageComponent implements OnInit {
     modalRef.componentInstance.sTime = this.selectedRoomDetail.sTime;
     modalRef.componentInstance.eTime = this.selectedRoomDetail.eTime;
   }
+
+  eventLendShow() {
+    this.listItemDetail = this.ItemDetailService.getListItemDetail();
+    const modalRef = this.modalService.open(NgbdModalLendContent);
+    modalRef.componentInstance.name = this.selectedItemDetail.userName;
+    modalRef.componentInstance.telephone = this.selectedItemDetail.eTelephone;
+    modalRef.componentInstance.eqName = this.selectedItemDetail.equirment.eqName;
+    modalRef.componentInstance.quantity = this.selectedItemDetail.Quantity;
+  }
 }
 
 function content(content: any, arg1: { ariaLabelledBy: string; }) {