customers

import { Component, OnInit } from '@angular/core';
import {MatDialog, MatSnackBar, MatTableDataSource} from '@angular/material';
import {ActivatedRoute, Router} from '@angular/router';
import {FormControl} from '@angular/forms';
import {debounceTime} from 'rxjs/operators';
import {CustomerService} from '../../services/customer.service';
import {CustomerFormComponent} from './customer-form/customer-form.component';

@Component({
  selector: 'bonito-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.styl']
})
export class CustomersComponent implements OnInit {
    data: MatTableDataSource<any> = new MatTableDataSource([]);

    searchCtrl: FormControl = new FormControl();
    columns = [
        'name',
        'identifier',
        'contact',
        'emails',
        'address',
        'tin',
        'created_at',
        'actions',
    ];

    constructor(private customerService: CustomerService,
                private dialog: MatDialog,
                private router: Router,
                private activatedRoute: ActivatedRoute,
                private snackBar: MatSnackBar) {
    }

    ngOnInit() {
        this.activatedRoute.queryParamMap.subscribe(params => {
            if (params.has('form')) {
                this.showCustomerForm();
            }
            if (params.has('search')) {
                this.searchCtrl.patchValue(params.get('search'));
                this.loadCustomer({
                    search: params.get('search')
                });
                return;
            }
        });

        this.searchCtrl.valueChanges.pipe(debounceTime(250)).subscribe(val => this.search(val));

        this.loadCustomer();
    }

    showCustomerForm(data = {}) {
        const dialog = this.dialog.open(CustomerFormComponent, {data});
        dialog.afterClosed().subscribe(res => {
            if (res && res.updated) {
                // TODO: Modify to not load all Data;
                this.loadCustomer();
            }
            this.router.navigate(['.'], {relativeTo: this.activatedRoute, queryParams: {}});
        });
    }

    search(search) {
        this.router.navigate([], {queryParams: {search}});
    }

    private loadCustomer(params = {}) {
        this.customerService.list(params).subscribe((res) => {

            this.data = res.dataor;
        });
    }


}