diff --git a/src/app/pages/contact-admin/contact-admin.component.html b/src/app/pages/contact-admin/contact-admin.component.html index d64eb91..69de120 100644 --- a/src/app/pages/contact-admin/contact-admin.component.html +++ b/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 diff --git a/src/app/pages/contact-admin/contact-admin.component.ts b/src/app/pages/contact-admin/contact-admin.component.ts index 7e184fe..09c31d5 100644 --- a/src/app/pages/contact-admin/contact-admin.component.ts +++ b/src/app/pages/contact-admin/contact-admin.component.ts @@ -1,5 +1,6 @@ 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(); + } } diff --git a/src/app/service/contact.service.ts b/src/app/service/contact.service.ts index 2c39ab3..9d9e31d 100644 --- a/src/app/service/contact.service.ts +++ b/src/app/service/contact.service.ts @@ -1,19 +1,22 @@ 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;