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 { MyRoom, Room } from 'src/app/models/rooms.model'; import { EquirmentService } from 'src/app/service/equirment.service'; import { RoomService } from 'src/app/service/room.service'; import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-admin-pending', templateUrl: './admin-pending.component.html', styleUrls: ['./admin-pending.component.scss'], styles: [` .form-group.hidden { width: 0; margin: 0; border: none; padding: 0; } .custom-day { text-align: center; padding: 0.185rem 0.25rem; display: inline-block; height: 2rem; width: 2rem; } .custom-day.focused { background-color: #e6e6e6; } .custom-day.range, .custom-day:hover { background-color: rgb(2, 117, 216); color: white; } .custom-day.faded { background-color: rgba(2, 117, 216, 0.5); } `] }) export class AdminPendingComponent implements OnInit { time = { hour: 13, minute: 30 }; page = 1; pageSize = 10; collectionSize = 0; pageListRoom = 1; pageSizeListRoom = 10; collectionSizeListRoom = 0; closeResult = ''; listItemDetail: ItemDetail[] = []; listRoomDetail: RoomDetail[] = []; modelEquirment = new Equirment(); modelRoom = new MyRoom(); modelItemDetail = new ItemDetail(); modelRoomDetail = new RoomDetail(); hoveredDate: NgbDate | null = null; fromDate: NgbDate | null; toDate: NgbDate | null; constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter, private modalService: NgbModal, private ItemDetailService: ItemDetailService, private RoomDetailService: RoomDetailService , private equirmentService: EquirmentService, private roomService: RoomService) { this.fromDate = calendar.getToday(); this.toDate = calendar.getNext(calendar.getToday(), 'd', 10); this.refreshitemDetail(); } refreshitemDetail() { this.listItemDetail = this.listItemDetail .map((item, i) => ({ id: i + 1, ...item })) .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize); } onDateSelection(date: NgbDate) { if (!this.fromDate && !this.toDate) { this.fromDate = date; } else if (this.fromDate && !this.toDate && date && date.after(this.fromDate)) { this.toDate = date; } else { this.toDate = null; this.fromDate = date; } } open(content) { this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } sDate = "" eDate = "" openItemDetail(content: string, item: ItemDetail) { this.modelItemDetail = item; let sDate = this.modelItemDetail.sDate.split('/') this.sDate = sDate[0] + "-" + sDate[1] + "-" + sDate[2] let eDate = this.modelItemDetail.eDate.split('/') this.eDate = eDate[0] + "-" + eDate[1] + "-" + eDate[2] this.myFormEquir = new FormGroup({ userNameForm: new FormControl(this.modelItemDetail.userName, [Validators.required]), eTelephone: new FormControl(this.modelItemDetail.eTelephone, [Validators.required]), email: new FormControl(this.modelItemDetail.email, [Validators.required, Validators.email]), eqName: new FormControl(this.modelItemDetail.equirments.eqName, [Validators.required]), eqDesc: new FormControl(this.modelItemDetail.equirments.eqDesc, [Validators.required]), eqType: new FormControl(this.modelItemDetail.equirments.eqType, [Validators.required]), sDate: new FormControl(this.modelItemDetail.sDate, [Validators.required]), eDate: new FormControl(this.modelItemDetail.eDate, [Validators.required]), sTime: new FormControl(this.modelItemDetail.sTime, [Validators.required]), eTime: new FormControl(this.modelItemDetail.eTime, [Validators.required]), Quantity: new FormControl(this.modelItemDetail.quantity, [Validators.required]), remark: new FormControl(this.modelItemDetail.remark), eStatus: new FormControl(this.modelItemDetail.eStatus), allDay: new FormControl(this.modelItemDetail.allDay), returnItem: new FormControl(this.modelItemDetail.returnItem) }) this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } rDate(item: string, item2: string) { let Dates = item.split("/") let dates = Dates[0] + "-" + Dates[1] + "-" + Dates[2] if (item2 == "sdate") { this.modelRoomDetail.sDate = dates } if (item2 == "edate") { this.modelRoomDetail.eDate = dates } } openRoomDetail(content: string, item: RoomDetail) { this.modelRoomDetail = item; let sDate = this.modelRoomDetail.sDate.split('/') this.sDate = sDate[0] + "-" + sDate[1] + "-" + sDate[2] let eDate = this.modelRoomDetail.eDate.split('/') this.eDate = eDate[0] + "-" + eDate[1] + "-" + eDate[2] console.log(this.modelRoomDetail) this.myFormRoom = new FormGroup({ userNameForm: new FormControl(this.modelRoomDetail.userName, [Validators.required]), rTelephone: new FormControl(this.modelRoomDetail.rTelephone, [Validators.required]), email: new FormControl(this.modelRoomDetail.email, [Validators.required, Validators.email]), rName: new FormControl(this.modelRoomDetail.room.rName, [Validators.required]), rDesc: new FormControl(this.modelRoomDetail.room.rDesc, [Validators.required]), rType: new FormControl(this.modelRoomDetail.room.rType, [Validators.required]), sDate: new FormControl(this.modelRoomDetail.sDate, [Validators.required]), eDate: new FormControl(this.modelRoomDetail.eDate, [Validators.required]), sTime: new FormControl(this.modelRoomDetail.sTime, [Validators.required]), eTime: new FormControl(this.modelRoomDetail.eTime, [Validators.required]), remark: new FormControl(this.modelRoomDetail.remark), rStatus: new FormControl(this.modelRoomDetail.rStatus), allDay: new FormControl(this.modelRoomDetail.allDay) }); 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'; } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { return 'by clicking on a backdrop'; } else { return `with: ${reason}`; } } isHovered(date: NgbDate) { return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate); } isInside(date: NgbDate) { return this.toDate && date.after(this.fromDate) && date.before(this.toDate); } isRange(date: NgbDate) { return date.equals(this.fromDate) || (this.toDate && date.equals(this.toDate)) || this.isInside(date) || this.isHovered(date); } validateInput(currentValue: NgbDate | null, input: string): NgbDate | null { const parsed = this.formatter.parse(input); return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue; } myFormRoom: FormGroup; myFormEquir: FormGroup; ngOnInit(): void { this.ItemDetailService.getListItemDetail().subscribe( result => { this.listItemDetail = result; }); this.RoomDetailService.getListRoomDetail().subscribe( result => { this.listRoomDetail = result; }); this.collectionSizeListRoom = this.listItemDetail.length; } saveEquirment() { this.equirmentService.addEquirment(this.modelEquirment); this.modalService.dismissAll(); this.ngOnInit(); } saveRoom() { this.roomService.addRoom(this.modelRoom); this.modalService.dismissAll(); this.ngOnInit(); } saveStatusRoom() { console.log("this.modelRoomDetail", this.modelRoomDetail) console.log("form", this.myFormRoom) this.modelRoomDetail.userName = this.myFormRoom.value.userNameForm; this.modelRoomDetail.rTelephone = this.myFormRoom.value.rTelephone this.modelRoomDetail.email = this.myFormRoom.value.email this.modelRoomDetail.room.rName = this.myFormRoom.value.rName this.modelRoomDetail.room.rDesc = this.myFormRoom.value.rDesc this.modelRoomDetail.room.rType = this.myFormRoom.value.rType this.modelRoomDetail.sDate = this.myFormRoom.value.sDate this.modelRoomDetail.eDate = this.myFormRoom.value.eDate this.modelRoomDetail.sTime = this.myFormRoom.value.sTime this.modelRoomDetail.eTime = this.myFormRoom.value.eTime this.modelRoomDetail.remark = this.myFormRoom.value.remark this.modelRoomDetail.rStatus = this.myFormRoom.value.rStatus this.modelRoomDetail.allDay = this.myFormRoom.value.allDay console.log("this.modelRoomDetail", this.modelRoomDetail) this.RoomDetailService.updateRoomDetail(this.modelRoomDetail) this.modalService.dismissAll(); this.ngOnInit(); } saveStatusEquirment() { console.log("this.modelItemDetail", this.modelItemDetail) console.log("form", this.myFormEquir) this.modelItemDetail.userName = this.myFormEquir.value.userNameForm; this.modelItemDetail.eTelephone = this.myFormEquir.value.eTelephone this.modelItemDetail.email = this.myFormEquir.value.email this.modelItemDetail.equirments.eqName = this.myFormEquir.value.eqName this.modelItemDetail.equirments.eqDesc = this.myFormEquir.value.eqDesc this.modelItemDetail.equirments.eqType = this.myFormEquir.value.eqType this.modelItemDetail.sDate = this.myFormEquir.value.sDate this.modelItemDetail.eDate = this.myFormEquir.value.eDate this.modelItemDetail.sTime = this.myFormEquir.value.sTime this.modelItemDetail.eTime = this.myFormEquir.value.eTime this.modelItemDetail.remark = this.myFormEquir.value.remark this.modelItemDetail.eStatus = this.myFormEquir.value.eStatus this.modelItemDetail.allDay = this.myFormEquir.value.allDay console.log("this.modelItemDetail", this.modelItemDetail) this.ItemDetailService.updateItemDetail(this.modelItemDetail) this.modalService.dismissAll(); this.ngOnInit(); } }