admin-pending.component.ts

import { Component, OnInit } from '@angular/core';
import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';

interface Country {
  id?: number;
  catagory: string;
  type: string;
  detail: string;
  name: string;
  sdate: string;
  edate: string;
  status: string;
}


@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;

  countries: Country[] = [
      {
        catagory: 'string',
        type: 'string',
        detail: 'Moniter',
        name: 'a',
        sdate: '2021-11-25',
        edate: '2021-11-25',
        status: 'waiting',
      },
      {
        catagory: 'string',
        type: 'string',
        detail: 'Mouse',
        name: 'b',
        sdate: '2021-11-25',
        edate: '2021-11-25',
        status: 'waiting',
      }
  ];

  collectionSize = this.countries.length;
  hoveredDate: NgbDate | null = null;
  fromDate: NgbDate | null;
  toDate: NgbDate | null;

  constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
    this.refreshCountries();
  }

  refreshCountries() {
    this.countries = this.countries
      .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;
    }
  }

  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 {
  }

}

export class NgbdDropdownBasic {
}