Update เพิ่มหน้าและปุ่มค้นหาclickได้

src/app/pages/contact-admin/contact-admin.component.html

@@ -28,7 +28,7 @@
             </div>
             <div class="card-footer">
                 <div class="d-grid gap-2 d-md-flex justify-content-md-center">
-                    <button type="button" class="btn btn-primary btn-sm ">บันทึก</button>
+                    <button type="button" class="btn btn-primary btn-sm " (click)="saveContact()">บันทึก</button>
                     <button type="button" class="btn btn-primary btn-sm ">ยกเลิก</button>
                 </div>
             </div>
@@ -61,16 +61,73 @@
                                 <td *ngIf="item.ctStatus==2">ยกเลิก</td>
                                 <div class="col-auto align-self-sm-center">
                                     <button type="button" class="btn btn-info btn-sm btn-circle "
-                                        style="line-height: 0px" (click)="openRoomDetail(Room,item)"><i
+                                        style="line-height: 0px" (click)="openContact(Alllist,item)"><i
                                             class="fa fa-search"></i> </button>
                                 </div>
                             </tr>
                         </tbody>
                     </table>
+                    <div class="d-flex justify-content-between p-2">
+                        <ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
+                            [pageSize]="pageSizeListRoom">
+                            <ng-template ngbPaginationPrevious>Previous</ng-template>
+                            <ng-template ngbPaginationNext>Next</ng-template>
+                        </ngb-pagination>
+
+                        <select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
+                            (ngModelChange)="pageListRoom=1">
+                            <option [ngValue]="10">10 items per page</option>
+                            <option [ngValue]="50">50 items per page</option>
+                            <option [ngValue]="100">100 items per page</option>
+                        </select>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 
-
+    <ng-template #Alllist 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>
+                <div class=" card-body">
+                    <div class=" row">
+                        <div class=" col-md-12">
+                            <div class=" form-group">
+                                <label> ชื่อหัวข้อ </label>
+                                <input readonly class=" form-control" placeholder="" type="text"
+                                    [(ngModel)]="modelContatc.ctHead" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class=" row">
+                        <div class=" col-md-12">
+                            <div class=" form-group">
+                                <label> หน้าต่างที่มี BUG </label>
+                                <input readonly class=" form-control" placeholder="" type="text"
+                                    [(ngModel)]="modelContatc.ctTab" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class=" row">
+                        <div class=" col-md-12">
+                            <div class=" form-group">
+                                <label> ชื่อผู้แจ้ง </label>
+                                <input readonly class=" form-control" placeholder="" type="text"
+                                    [(ngModel)]="modelContatc.ctName" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-12 mb-1">
+                            <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
+                            <input readonly type="date" class="form-control" [(ngModel)]="sDate">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-template>
 </div>
\ No newline at end of file

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

 import { Component, OnInit, ViewChild } from '@angular/core';
-import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ModalDismissReasons, NgbModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
 import { debounceTime, distinctUntilChanged, filter, map, merge, Observable, OperatorFunction } from 'rxjs';
 import { Subject } from 'rxjs/internal/Subject';
 import { Contact } from 'src/app/models/contact.model';
@@ -15,16 +16,33 @@ const pages = ['หน้าหลัก','รายการอุปกรณ
 export class ContactAdminComponent implements OnInit {
   model: any;
 
+  closeResult = '';
+
+  page = 1;
+  pageSize = 10;
+  collectionSize = 0;
+
+  pageListRoom = 1;
+  pageSizeListRoom = 10;
+  collectionSizeListRoom = 0;
+
   listContact: Contact[] = [];
 
+  modelcontact = new Contact();
+
+  myFromContact : FormGroup;
+
+
   @ViewChild('instance', {static: true}) instance: NgbTypeahead;
   focus$ = new Subject<string>();
   click$ = new Subject<string>();
+  sDate: string;
 
-  constructor(private ContactService : ContactService) { }
+  constructor(private ContactService : ContactService,private modalService: NgbModal) { }
 
   ngOnInit(): void {
     this.listContact = this.ContactService.getListContact();
+    this.collectionSizeListRoom = this.listContact.length;
   }
 
   search: OperatorFunction<string, readonly string[]> = (text$: Observable<string>) => {
@@ -38,4 +56,42 @@ export class ContactAdminComponent implements OnInit {
     );
   }
 
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return `with: ${reason}`;
+    }
+  }
+
+  openContact(content : string ,item : Contact) {
+    this.modelcontact = item ;
+
+    let sDate = this.modelcontact.sDate.split('/')
+    this.sDate = sDate[0]+"-"+sDate[1]+"-"+sDate[2]
+
+    this.myFromContact = new FormGroup({
+      ctName: new FormControl(this.modelcontact.ctName, [Validators.required]),
+      ctDesc: new FormControl(this.modelcontact.ctDesc, [Validators.required]),
+      ctTab: new FormControl(this.modelcontact.ctTab, [Validators.required]),
+      ctHead: new FormControl(this.modelcontact.ctHead, [Validators.required]),
+      sDate: new FormControl(this.modelcontact.sDate, [Validators.required]),
+      ctStatus: new FormControl(this.modelcontact.ctStatus)
+    });
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+
+  saveContact() {
+    this.modelcontact.ctStatus = 0 ;
+    console.log("save",this.modelcontact)
+    this.ContactService.addContact(this.modelcontact);
+    this.modalService.dismissAll();
+    this.ngOnInit();
+  }
 }

src/app/service/contact.service.ts

 import { Injectable } from '@angular/core';
-import { Contact } from "../models/contact.model"; 
+import { Contact } from "../models/contact.model";
 
 @Injectable({ providedIn: 'root' })
 export class ContactService {
     listContact: Contact[] = [
         {
-            id : 1,
-            ctName : 'เกม',
-            ctDesc : 'กดจองแล้ว รายการจองไม่ขึ้น',
+            id: 1,
+            ctName: 'เกม',
+            ctDesc: 'กดจองแล้ว รายการจองไม่ขึ้น',
             ctTab: 'รายการอุปกรณ์',
-            ctHead : 'กดจองไม่ได้',
+            ctHead: 'กดจองไม่ได้',
             ctStatus: 0,
             sDate: '2021/12/17'
         },
     ]
+    addContact(model: Contact) {
+        this.listContact.push(model);
+    }
 
     getListContact() {
         return this.listContact;