admin-pending.component.ts

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((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)}`;
    });
  }
  date = '10-12-2561'

  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.equirment.eqName, [Validators.required]),
      eqDesc: new FormControl(this.modelItemDetail.equirment.eqDesc, [Validators.required]),
      eqType: new FormControl(this.modelItemDetail.equirment.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.listItemDetail = this.ItemDetailService.getListItemDetail();
    this.listRoomDetail = this.RoomDetailService.getListRoomDetail();
    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.equirment.eqName  = this.myFormEquir.value.eqName
    this.modelItemDetail.equirment.eqDesc  = this.myFormEquir.value.eqDesc
    this.modelItemDetail.equirment.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();
  }
  

}