ts

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

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

import { GaResponse } from '../../../../../gaji-id-resources/gaji-id-api-response.model';
import { DataClass } from '../../../../../gaji-id-resources/data/data.model';

import { ContentAlertService } from '../../../../../components/messages/alerts/content-alert/content-alert.service';
import { DataService } from '../../../../../gaji-id-resources/data/data.servuce';
import { UiBlockService } from '../../../../../components/ui-block/ui-block.service';

import * as _ from 'lodash';

@Component({
  selector: 'app-data-browse',
  templateUrl: './data-browse.component.html'
})
export class DataBrowseComponent implements OnInit, OnDestroy {

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

  public filterForm: FormGroup;
  public data: DataClass[] = [];
  public sorts: DataSortInterface = {};

  private ngUnsubscribe: Subject<boolean> = new Subject();

  constructor(
    private fb: FormBuilder,
    private contentAlertService: ContentAlertService,
    private dataService: DataService,
    private uiBlockService: UiBlockService,
  ) {
    this.initForm();
  }

  ngOnInit() { }

  public ngOnDestroy() {
    this.ngUnsubscribe.next(true);
    this.ngUnsubscribe.complete();
  }

  public doInstantFilter() {
    this.contentAlertService.clear();

    this.uiBlockService.showUiBlock();
    this.dataService
      .search(this.filterForm.value, this.sorts)
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(
        (result: GaResponse<DataClass[]>) => {
          this.uiBlockService.hideUiBlock();
          this.data = result.data;
        },
        (error) => {
          this.uiBlockService.hideUiBlock();
          this.contentAlertService.error(error);
        },
        () => { this.uiBlockService.hideUiBlock(); }
      );
  }

  private initForm() {
    this.filterForm = this.fb.group({
      // Form rules here
    });
  }

  public add() {
    this.onAdd.emit(DataClass);
  }

  public edit(data: DataClass) {
    this.onEdit.emit(DataClass);
  }
}