EmployeeStatusBrowseComponent

import { Component, OnInit, EventEmitter, Output, OnDestroy, ViewChild } from '@angular/core';

import { Subject, of } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { DragulaService } from 'ng2-dragula';

import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

import { ActiveStates } from '../../../../../../../gaji-id-resources/combo-constants/active-states.constant';
import { DaResponse } from '../../../../../../../gaji-id-resources/gaji-id-api-response.model';
import { ComboConstant } from '../../../../../../../gaji-id-resources/combo-constants/combo-constant.interface';
import { EmployeeStatus } from '../../../../../../../gaji-id-resources/resources/employee-status/employee-status.model';
import { EmployeeStatusSearchParams, EmployeeStatusSorts } from '../../../../../../../gaji-id-resources/resources/employee-status/employee-status.service';
import { GroupEarnersType } from '../../../../../../../gaji-id-resources/combo-constants/group-earners-type.constant';
import { PkwtType } from '../../../../../../../gaji-id-resources/combo-constants/pkwt-type.constant';

import { ContentAlertService } from '../../../../../../../components/messages/alerts/content-alert/content-alert.service';
import { ConfirmDialogService } from '../../../../../../../components/confirm-dialog/confirm-dialog.service';
import { EmployeeStatusService } from '../../../../../../../gaji-id-resources/resources/employee-status/employee-status.service';
import { SnackBarService } from '../../../../../../../components/messages/snackbar/snackbar.service';

import * as _ from 'lodash';
import { DaPagingRequest } from '../../../../../../../gaji-id-resources/gaji-id-api-request.model';

interface EmployeeStatusRow {
  employeeStatus: EmployeeStatus;
  pkwtType: ComboConstant;
  groupEarnersType: ComboConstant;
}

@Component({
  selector: 'app-employee-status-browse',
  templateUrl: './employee-status-browse.component.html',
  styleUrls: ['./employee-status-browse.component.scss']
})
export class EmployeeStatusBrowseComponent implements OnInit, OnDestroy {

  // @ViewChild('mainPaginator') mainPaginator: MatPaginator;
  // @ViewChild(MatSort) sort: MatSort;

  @Output() public onAdd: EventEmitter<any> = new EventEmitter();
  @Output() public onEdit: EventEmitter<any> = new EventEmitter();

  public searchParams: EmployeeStatusSearchParams = {};
  public activeStates = ActiveStates.getValues();
  public displayedColumns = ['action', 'statusName', 'pkwtType', 'groupEarners'];
  public employeeStatuses: MatTableDataSource<EmployeeStatusRow>;
  public employeeStatusRows: EmployeeStatusRow[] = [];

  public sorts: EmployeeStatusSorts = null;
  public paging: DaPagingRequest = null;
  public totalRows: number = 0;
  private realTimeSearch: Subject<EmployeeStatusSearchParams> = new Subject();
  private ngUnsubscribe: Subject<boolean> = new Subject();

  private isLoadingResults: boolean = false;

  constructor(
    private contentAlertService: ContentAlertService,
    private confirmDialogService: ConfirmDialogService,
    private employeeStatusService: EmployeeStatusService,
    private snackbarService: SnackBarService
  ) {
    this.sorts = { statusName: 'asc' };
    this.paging = { page: 1, perPage: 10 };
    this.initSearchTerms();
  }

  ngOnInit() {
    this.searchParams.isActive = true;
    this.doInstantFilter();
  }

  public ngOnDestroy() {
    this.realTimeSearch.complete();

    this.ngUnsubscribe.next(true);
    this.ngUnsubscribe.complete();
  }

  public initSearchTerms() {
    this.employeeStatusService
      .realTimeSearch(this.realTimeSearch, this.sorts, this.paging)
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(
        (results: DaResponse<EmployeeStatus[]>) => {
          this.employeeStatusRows = [];
          results.data.forEach(item => {
            this.employeeStatusRows.push({
              employeeStatus: item,
              pkwtType: PkwtType.getValues().find(pkwtType => pkwtType.value === item.pkwtType),
              groupEarnersType: GroupEarnersType.getValues().find(groupEarnersType => groupEarnersType.value === item.groupEarners)
            });
          });
          this.employeeStatuses = new MatTableDataSource<EmployeeStatusRow>(this.employeeStatusRows);
          // this.employeeStatuses.paginator = this.mainPaginator;
          // this.employeeStatuses.sort = this.sort;
          if (!_.isEmpty(results.meta)) {
            this.totalRows = results.meta.pagination.dataCount;
          }
        },
        (error) => {
          this.contentAlertService.error(error);
        }
      );
  }

  public doInstantFilter() {
    this.contentAlertService.clear();
    this.employeeStatusService
      .search(this.searchParams, this.sorts, this.paging)
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(
        (results: DaResponse<EmployeeStatus[]>) => {
          this.employeeStatusRows = [];
          results.data.forEach(item => {
            this.employeeStatusRows.push({
              employeeStatus: item,
              pkwtType: PkwtType.getValues().find(pkwtType => pkwtType.value === item.pkwtType),
              groupEarnersType: GroupEarnersType.getValues().find(groupEarnersType => groupEarnersType.value === item.groupEarners)
            });
          });
          this.employeeStatuses = new MatTableDataSource<EmployeeStatusRow>(this.employeeStatusRows);
          // this.employeeStatuses.paginator = this.mainPaginator;
          // this.employeeStatuses.sort = this.sort;
          if (!_.isEmpty(results.meta)) {
            this.totalRows = results.meta.pagination.dataCount;
          }
        },
        (error) => {
          this.contentAlertService.error(error);
        }
      );
  }

  public doFilter(filter: any) {
    this.contentAlertService.clear();
    this.realTimeSearch.next(Object.assign({}, this.searchParams));
  }

  public add() {
    this.onAdd.next();
  }

  public edit(employeeStatus: EmployeeStatus) {
    this.onEdit.emit(employeeStatus);
  }

  public delete(employeeStatus: EmployeeStatus) {
    this.confirmDialogService.confirmDelete(employeeStatus.statusName)
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(
        (confirmDelete: boolean) => {
          if (confirmDelete) {
            this.doDelete(employeeStatus);
          }
        }
      );
  }

  public doDelete(employeeStatus: EmployeeStatus) {
    this.contentAlertService.clear();
    this.employeeStatusService.delete(employeeStatus).pipe(takeUntil(this.ngUnsubscribe)).subscribe(
      (result) => {
        this.doInstantFilter();
        this.snackbarService.show('Status kepegawaian telah dihapus');
      },
      (error: any) => this.contentAlertService.error(error.feErrors)
    );
  }

  onTableScroll(e) {
    const tableViewHeight = e.target.offsetHeight; // viewport: ~500px
    const tableScrollHeight = e.target.scrollHeight; // length of all table
    const scrollLocation = e.target.scrollTop; // how far user scrolled

    // If the user has scrolled within 200px of the bottom, add more data
    const buffer = 200;
    const limit = tableScrollHeight - tableViewHeight - buffer;
    if (scrollLocation > limit && this.employeeStatuses.data.length < this.totalRows) {
      console.log(this.totalRows);
      console.log(this.employeeStatuses.data.length);

      this.isLoadingResults = true;
      this.paging.page = this.paging.page + 1;
      this.employeeStatusService
        .search(this.searchParams, this.sorts, this.paging)
        .pipe(takeUntil(this.ngUnsubscribe))
        .subscribe(
          (results: DaResponse<EmployeeStatus[]>) => {
            this.employeeStatusRows = [];
            results.data.forEach(item => {
              this.employeeStatusRows.push({
                employeeStatus: item,
                pkwtType: PkwtType.getValues().find(pkwtType => pkwtType.value === item.pkwtType),
                groupEarnersType: GroupEarnersType.getValues().find(groupEarnersType => groupEarnersType.value === item.groupEarners)
              });
            });
            this.employeeStatuses = new MatTableDataSource<EmployeeStatusRow>(this.employeeStatuses.data.concat(this.employeeStatusRows));
            // this.employeeStatuses.paginator = this.mainPaginator;
            // this.employeeStatuses.sort = this.sort;

            if (!_.isEmpty(results.meta)) {
              this.totalRows = results.meta.pagination.dataCount;
            }
            this.isLoadingResults = false;
          },
          (error) => {
            this.isLoadingResults = false;
            this.contentAlertService.error(error);
          },
          () => { this.isLoadingResults = false; }
        );
    }
  }
}