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'; @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 { page = 1; pageSize = 10; closeResult = ''; listItemDetail : ItemDetail[] = []; listRoomDetail : RoomDetail[] = []; modelEquirment = new Equirment(); modelRoom = new MyRoom(); 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, private ItemDetailService: ItemDetailService, private RoomDetailService: RoomDetailService) { this.fromDate = calendar.getToday(); this.toDate = calendar.getNext(calendar.getToday(), 'd', 10); this.refreshItemDetail(); } refreshItemDetail() { this.listItemDetail = this.listItemDetail .map((country, i) => ({ id: i + 1, ...country })) .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)}`; }); } 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'; } 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; } ngOnInit(): void { this.listItemDetail = this.ItemDetailService.getListItemDetail(); this.listRoomDetail = this.RoomDetailService.getListRoomDetail(); console.log(this.listItemDetail); } } export class NgbdDropdownBasic { }