cic-staff-client/src/app/pages/accounts/account-details/account-details.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';
import {SelectionModel} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {LocationService, TransactionService, UserService} from '@app/_services';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {first} from 'rxjs/operators';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {CustomErrorStateMatcher} from '@app/_helpers';

@Component({
  selector: 'app-account-details',
  templateUrl: './account-details.component.html',
  styleUrls: ['./account-details.component.scss']
})
export class AccountDetailsComponent implements OnInit {
  transactionsDataSource: MatTableDataSource<any>;
  transactionsDisplayedColumns = ['view', 'sender', 'senderLocation', 'recipient', 'recipientLocation', 'token', 'value', 'created', 'type'];
  @ViewChild('TransactionTablePaginator', {static: true}) transactionTablePaginator: MatPaginator;
  @ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort;

  userDataSource: MatTableDataSource<any>;
  userDisplayedColumns = ['name', 'phone', 'created', 'balance', 'type', 'status', 'location', 'failedPinAttempts'];
  @ViewChild('UserTablePaginator', {static: true}) userTablePaginator: MatPaginator;
  @ViewChild('UserTableSort', {static: true}) userTableSort: MatSort;

  historyDataSource: MatTableDataSource<any>;
  historyDisplayedColumns = ['user', 'action', 'staff', 'timestamp'];
  @ViewChild('HistoryTablePaginator', {static: true}) historyTablePaginator: MatPaginator;
  @ViewChild('HistoryTableSort', {static: true}) historyTableSort: MatSort;

  accountInfoForm: FormGroup;
  account: any;
  accounts: any[] = [];
  accountsType = 'all';
  initialSelection = [];
  allowMultiSelect = true;
  selection: SelectionModel<any>;
  date: string;
  time: number;
  isDisbursing = false;
  locations: any;
  transaction: any;
  transactions: any[];
  transactionsType = 'all';
  matcher = new CustomErrorStateMatcher();
  submitted: boolean = false;

  constructor(
    private formBuilder: FormBuilder,
    private locationService: LocationService,
    private transactionService: TransactionService,
    private userService: UserService,
    private route: ActivatedRoute,
    private router: Router
  ) {
    this.accountInfoForm = this.formBuilder.group({
      status: ['', Validators.required],
      name: ['', Validators.required],
      phoneNumber: ['', Validators.required],
      type: ['', Validators.required],
      token: ['', Validators.required],
      failedPinAttempts: ['', Validators.required],
      bio: ['', Validators.required],
      gender: ['', Validators.required],
      businessCategory: ['', Validators.required],
      userLocation: ['', Validators.required],
      location: ['', Validators.required],
      referrer: ['', Validators.required]
    });
    this.route.paramMap.subscribe((params: Params) => {
      this.userService.getAccountById(params.get('id')).pipe(first()).subscribe(account => {
        this.account = account;
        this.userService.getHistoryByUser(this.account?.id).pipe(first()).subscribe(history => {
          this.historyDataSource = new MatTableDataSource<any>(history);
          this.historyDataSource.paginator = this.historyTablePaginator;
          this.historyDataSource.sort = this.historyTableSort;
        });
        this.accountInfoForm.patchValue({
          status: account.status,
          name: account.name,
          phoneNumber: account.phone,
          type: account.type,
          token: account.token,
          failedPinAttempts: account.failedPinAttempts,
          bio: account.bio,
          gender: account.gender,
          businessCategory: account.category,
          // userLocation: account.userLocation,
          location: account.location,
          referrer: account.referrer
        });
      });
    });
    this.userService.getAccounts();
    this.locationService.getLocations();
    this.locationService.locationsSubject.subscribe(locations => {
      this.locations = locations;
    });
  }

  ngOnInit(): void {
    this.userService.accountsSubject.subscribe(accounts => {
      this.userDataSource = new MatTableDataSource<any>(accounts);
      this.userDataSource.paginator = this.userTablePaginator;
      this.userDataSource.sort = this.userTableSort;
      this.accounts = accounts;
    });

    this.transactionService.transactionsSubject.subscribe(transactions => {
      this.transactionsDataSource = new MatTableDataSource<any>(transactions);
      this.transactionsDataSource.paginator = this.transactionTablePaginator;
      this.transactionsDataSource.sort = this.transactionTableSort;
      this.transactions = transactions;
    });
    this.selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);

    const d = new Date();
    this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`;
  }

  addTransfer(): void {
    this.isDisbursing = !this.isDisbursing;
  }

  doTransactionFilter(value: string): void {
    this.transactionsDataSource.filter = value.trim().toLocaleLowerCase();
  }

  doUserFilter(value: string): void {
    this.userDataSource.filter = value.trim().toLocaleLowerCase();
  }

  doHistoryFilter(value: string): void {
    this.historyDataSource.filter = value.trim().toLocaleLowerCase();
  }

  viewTransaction(transaction): void {
    this.transaction = transaction;
  }

  viewAccount(account): void {
    (function smoothscroll(): void {
      const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
      if (currentScroll > 0) {
        window.requestAnimationFrame(smoothscroll);
        window.scrollTo(0, currentScroll - (currentScroll / 8));
      }
    })();
    window.scrollTo(0, 0);
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    this.router.navigateByUrl(`/accounts/${account.id}`);
  }

  get accountInfoFormStub(): any { return this.accountInfoForm.controls; }

  saveInfo(): void {
    this.submitted = true;
    if (this.accountInfoForm.invalid) { return; }
    this.userService.changeAccountInfo(
      this.account.address,
      this.accountInfoFormStub.status.value,
      this.accountInfoFormStub.name.value,
      this.accountInfoFormStub.phoneNumber.value,
      this.accountInfoFormStub.type.value,
      this.accountInfoFormStub.token.value,
      this.accountInfoFormStub.failedPinAttempts.value,
      this.accountInfoFormStub.bio.value,
      this.accountInfoFormStub.gender.value,
      this.accountInfoFormStub.businessCategory.value,
      this.accountInfoFormStub.userLocation.value,
      this.accountInfoFormStub.location.value,
      this.accountInfoFormStub.referrer.value,
    ).then(res => console.log(res));
    this.submitted = false;
  }

  filterAccounts(): void {
    if (this.accountsType === 'all') {
      this.userService.accountsSubject.subscribe(accounts => {
        this.userDataSource.data = accounts;
        this.accounts = accounts;
      });
    } else {
      this.userDataSource.data = this.accounts.filter(account => account.type === this.accountsType);
    }
  }

  filterTransactions(): void {
    if (this.transactionsType === 'all') {
      this.transactionService.transactionsSubject.subscribe(transactions => {
        this.transactionsDataSource.data = transactions;
        this.transactions = transactions;
      });
    } else {
      this.transactionsDataSource.data = this.transactions.filter(transaction => transaction.type === this.transactionsType);
    }
  }

  resetPin(): void {
    this.userService.resetPin(this.account.phone).pipe(first()).subscribe(res => {
      console.log(res);
    });
  }

  setDefault(formStub: any, name: string, value: string): void {
    formStub[name].value = value;
  }
}