refractor: replace select by autocomplete

Replace select by autocomplete fields for search journal entries
component filters.

src/app/accounting/accounting.service.ts

@@ -37,17 +37,14 @@ export class AccountingService {
   }
 
   // filterBy: officeId, glAccountId, manualEntriesOnly, fromDate, toDate, transactionId
-  getJournalEntries(filterBy: any, orderBy: any, sortBy: any, offset: number, limit: number) {
+  getJournalEntries(filterBy: any, orderBy: string, sortOrder: string, offset: number, limit: number) {
-    console.log('Order By:', orderBy);
-    console.log('Sort By:', sortBy);
-    console.log('Filter By:', filterBy);
     let httpParams = new HttpParams()
       .set('offset', offset.toString())
       .set('limit', limit.toString())
-      .set('sortBy', sortBy)
+      .set('sortOrder', sortOrder)
       .set('orderBy', orderBy);
     filterBy.forEach(function (filter: any) {
-      if(filter.value) {
+      if (filter.value) {
         httpParams = httpParams.set(filter.type, filter.value);
       }
     });

src/app/accounting/search-journal-entry/journal-entry.datasource.ts

@@ -1,36 +1,35 @@
-import { CollectionViewer, DataSource } from "@angular/cdk/collections";
+import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 
-import { Observable, BehaviorSubject } from "rxjs";
+import { Observable, BehaviorSubject } from 'rxjs';
 
-import { AccountingService } from "../accounting.service";
+import { AccountingService } from '../accounting.service';
 
 export class JournalEntriesDataSource implements DataSource<any> {
 
-    private journalEntriesSubject = new BehaviorSubject<any[]>([]);
+  private journalEntriesSubject = new BehaviorSubject<any[]>([]);
-    private recordsSubject = new BehaviorSubject<number>(0);
+  private recordsSubject = new BehaviorSubject<number>(0);
 
-    public records$ = this.recordsSubject.asObservable();
+  public records$ = this.recordsSubject.asObservable();
 
-    constructor(private accountingService: AccountingService) {  }
+  constructor(private accountingService: AccountingService) {  }
 
-    loadJournalEntries(filterBy: any, orderBy = '', sortBy = '', offset = 0, limit = 10) {
+  getJournalEntries(filterBy: any, orderBy: string = '', sortOrder: string = '', offset: number = 0, limit: number = 10) {
-      this.journalEntriesSubject.next([]);
+    this.journalEntriesSubject.next([]);
-      orderBy = (orderBy === 'debit' || orderBy === 'credit') ? 'amount' : orderBy;
+    orderBy = (orderBy === 'debit' || orderBy === 'credit') ? 'amount' : orderBy;
-      this.accountingService.getJournalEntries(filterBy, orderBy, sortBy, offset, limit)
+    this.accountingService.getJournalEntries(filterBy, orderBy, sortOrder, offset, limit)
-        .subscribe((journalEntries: any) => {
+      .subscribe((journalEntries: any) => {
-          console.log(journalEntries);
+        this.recordsSubject.next(journalEntries.totalFilteredRecords);
-          this.recordsSubject.next(journalEntries.totalFilteredRecords);
+        this.journalEntriesSubject.next(journalEntries.pageItems);
-          this.journalEntriesSubject.next(journalEntries.pageItems);
+      });
-        });
+  }
-    }
 
-    connect(collectionViewer: CollectionViewer): Observable<any[]> {
+  connect(collectionViewer: CollectionViewer): Observable<any[]> {
-      return this.journalEntriesSubject.asObservable();
+    return this.journalEntriesSubject.asObservable();
-    }
+  }
 
-    disconnect(collectionViewer: CollectionViewer): void {
+  disconnect(collectionViewer: CollectionViewer): void {
-      this.journalEntriesSubject.complete();
+    this.journalEntriesSubject.complete();
-      this.recordsSubject.complete();
+    this.recordsSubject.complete();
-    }
+  }
 
 }

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -1,92 +1,106 @@
-<div class="container" fxLayout="row wrap" fxLayoutGap="2%">
+<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
   <mat-form-field fxFlex="31%">
-    <mat-select placeholder="Office" [formControl]="officeName" (selectionChange)="applyFilter($event.value, 'officeId')">
+    <input matInput placeholder="Office Name" [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
-      <mat-option *ngFor="let office of officeData" [value]="office.id">
-        {{ office.name }}
-      </mat-option>
-    </mat-select>
   </mat-form-field>
+
   <mat-form-field fxFlex="31%">
-    <mat-select placeholder="Affected GL Entry" [formControl]="glAccountCode" (selectionChange)="applyFilter($event.value, 'glAccountId')">
+    <input matInput placeholder="GL Account Name or Code" [formControl]="glAccount" [matAutocomplete]="glAccountAutocomplete">
-      <mat-option *ngFor="let affectedGLEntry of glAccountData" [value]="affectedGLEntry.id">
-        {{ affectedGLEntry.name + ' (' + affectedGLEntry.glCode + ')' }}
-      </mat-option>
-    </mat-select>
   </mat-form-field>
+
   <mat-form-field fxFlex="31%">
     <mat-select placeholder="Filter" [formControl]="filter" (selectionChange)="applyFilter($event.value, 'manualEntriesOnly')">
-      <mat-option *ngFor="let filter of filterData" [value]="filter.value">
+      <mat-option *ngFor="let filter of entryTypeFilterData" [value]="filter.value">
         {{ filter.option }}
       </mat-option>
     </mat-select>
   </mat-form-field>
+
   <mat-form-field fxFlex="31%">
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateFromPicker" placeholder="Transaction Date From" [formControl]="transactionDateFrom">
     <mat-datepicker-toggle matSuffix [for]="transactionDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateFromPicker></mat-datepicker>
   </mat-form-field>
+
   <mat-form-field fxFlex="31%">
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateToPicker" placeholder="Transaction Date To" [formControl]="transactionDateTo">
     <mat-datepicker-toggle matSuffix [for]="transactionDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateToPicker></mat-datepicker>
   </mat-form-field>
+
   <mat-form-field fxFlex="31%">
-    <input matInput placeholder="Transaction ID" [formControl]="transactionId" (keyup)="applyFilter($event.target.value, 'transactionId')">
+    <input matInput placeholder="Transaction ID" [formControl]="transactionId">
   </mat-form-field>
+
 </div>
 
+
+<!-- Autocomplete data -->
+<mat-autocomplete autoActiveFirstOption #officeNameAutocomplete="matAutocomplete" [displayWith]="displayOfficeName">
+  <mat-option *ngFor="let office of filteredOfficeData | async" [value]="{ id: office.id, name: office.name }">
+    {{ office.name }}
+  </mat-option>
+</mat-autocomplete>
+
+<mat-autocomplete autoActiveFirstOption #glAccountAutocomplete="matAutocomplete" [displayWith]="displayGLAccount">
+  <mat-option *ngFor="let glAccount of filteredGLAccountData | async" [value]="{ id: glAccount.id, name: glAccount.name, glCode: glAccount.glCode }">
+    {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
+  </mat-option>
+</mat-autocomplete>
+
+
 <div class="mat-elevation-z8 container">
 
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry ID </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.id }} </td>
     </ng-container>
 
     <ng-container matColumnDef="officeName">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.officeName }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.officeName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="transactionId">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.transactionId }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionId }} </td>
     </ng-container>
 
     <ng-container matColumnDef="transactionDate">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.transactionDate }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionDate }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
       <th mat-header-cell *matHeaderCellDef> Type </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="createdByUserName">
       <th mat-header-cell *matHeaderCellDef> Created by </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.createdByUserName }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.createdByUserName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Code </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountCode }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountCode }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Name </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountName }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="debit">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit </th>
-      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) + ' ' + transaction.amount }} </span></td>
+      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ (journalEntry.currency.displaySymbol || journalEntry.currency.code) + ' ' + journalEntry.amount }} </span></td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit </th>
-      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) + ' ' + transaction.amount }} </span></td>
+      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ (journalEntry.currency.displaySymbol || journalEntry.currency.code) + ' ' + journalEntry.amount }} </span></td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/accounting/search-journal-entry/search-journal-entry.component.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator, MatSort } from '@angular/material';
 import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { merge } from 'rxjs';
-import { tap} from 'rxjs/operators';
+import { tap, startWith, map, distinctUntilChanged, debounceTime} from 'rxjs/operators';
 
 import { AccountingService } from '../accounting.service';
 import { JournalEntriesDataSource } from './journal-entry.datasource';
@@ -14,22 +14,22 @@ import { JournalEntriesDataSource } from './journal-entry.datasource';
   templateUrl: './search-journal-entry.component.html',
   styleUrls: ['./search-journal-entry.component.scss']
 })
-export class SearchJournalEntryComponent implements OnInit {
+export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
 
-  // TODO: Update when date and language are set up throughout the application
+  // TODO: Update once language and date settings are setup
   minDate = new Date(2000, 0, 1);
   maxDate = new Date();
+
   officeName = new FormControl();
-  glAccountCode = new FormControl();
-  transactionDateFrom = new FormControl(new Date(2000, 0, 1));
-  transactionDateTo = new FormControl(new Date());
-  transactionId = new FormControl();
-  filter = new FormControl('');
-  displayedColumns: string[] = ['id', 'officeName', 'transactionId', 'transactionDate', 'glAccountType', 'createdByUserName', 'glAccountCode', 'glAccountName', 'debit', 'credit'];
-  dataSource: any;
   officeData: any;
+  filteredOfficeData: any;
+
+  glAccount = new FormControl();
   glAccountData: any;
-  filterData = [
+  filteredGLAccountData: any;
+
+  filter = new FormControl('');
+  entryTypeFilterData = [
     {
       option: 'All',
       value: ''
@@ -43,7 +43,16 @@ export class SearchJournalEntryComponent implements OnInit {
       value: false  // Bug: unable to implement from server side
     }
   ];
-  filterBy = [
+
+  transactionDateFrom = new FormControl(new Date(2000, 0, 1));
+  transactionDateTo = new FormControl(new Date());
+
+  transactionId = new FormControl();
+
+  displayedColumns: string[] = ['id', 'officeName', 'transactionId', 'transactionDate', 'glAccountType', 'createdByUserName', 'glAccountCode', 'glAccountName', 'debit', 'credit'];
+  dataSource: any;
+
+  filterJournalEntriesBy = [
     {
       type: 'officeId',
       value: ''
@@ -91,7 +100,40 @@ export class SearchJournalEntryComponent implements OnInit {
   }
 
   ngAfterViewInit() {
+    this.officeName.valueChanges
+      .pipe(
+        map(value => value.id ? value.id : ''),
+        debounceTime(500),
+        distinctUntilChanged(),
+        tap((filterValue) => {
+          this.applyFilter(filterValue, 'officeId');
+        })
+      )
+      .subscribe();
+
+    this.glAccount.valueChanges
+      .pipe(
+        map(value => value.id ? value.id : ''),
+        debounceTime(500),
+        distinctUntilChanged(),
+        tap((filterValue) => {
+          this.applyFilter(filterValue, 'glAccountId');
+        })
+      )
+      .subscribe();
+
+    this.transactionId.valueChanges
+      .pipe(
+        debounceTime(500),
+        distinctUntilChanged(),
+        tap((filterValue) => {
+          this.applyFilter(filterValue, 'transactionId');
+        })
+      )
+      .subscribe();
+
     this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+
     merge(this.sort.sortChange, this.paginator.page)
       .pipe(
         tap(() => this.loadJournalEntriesPage())
@@ -99,39 +141,67 @@ export class SearchJournalEntryComponent implements OnInit {
       .subscribe();
   }
 
-  getJournalEntries() {
-    this.dataSource = new JournalEntriesDataSource(this.accountingService);
-    this.dataSource.loadJournalEntries(this.filterBy, this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
-  }
-
   loadJournalEntriesPage() {
-    if(!this.sort.direction) {
+    if (!this.sort.direction) {
       delete this.sort.active;
     }
-    this.dataSource.loadJournalEntries(this.filterBy, this.sort.active, this.sort.direction, this.paginator.pageIndex * this.paginator.pageSize, this.paginator.pageSize);
+    this.dataSource.getJournalEntries(this.filterJournalEntriesBy, this.sort.active, this.sort.direction, this.paginator.pageIndex * this.paginator.pageSize, this.paginator.pageSize);
   }
 
   applyFilter(filterValue: string, property: string) {
     this.paginator.pageIndex = 0;
-    let findIndex = this.filterBy.findIndex(filter => filter.type === property);
+    const findIndex = this.filterJournalEntriesBy.findIndex(filter => filter.type === property);
-    this.filterBy[findIndex].value = filterValue;
+    this.filterJournalEntriesBy[findIndex].value = filterValue;
     this.loadJournalEntriesPage();
   }
 
-  getOffices() {
-    this.accountingService.getOffices().subscribe(officeData => {
-      this.officeData = officeData;
-    });
-  }
-
-  getGlAccounts() {
-    this.accountingService.getGlAccounts().subscribe(glAccountData => {
-      this.glAccountData = glAccountData;
-    });
-  }
-
   viewTransaction(journalEntry: any) {
     this.router.navigate(['/accounting/transactions/view', journalEntry.transactionId]);
   }
 
+  displayOfficeName(office?: any): string | undefined {
+    return office ? office.name : undefined;
+  }
+
+  displayGLAccount(glAccount?: any): string | undefined {
+    return glAccount ? glAccount.name + ' (' + glAccount.glCode + ')' : undefined;
+  }
+
+  getOffices() {
+    this.accountingService.getOffices().subscribe(officeData => {
+      this.officeData = officeData;
+      this.filteredOfficeData = this.officeName.valueChanges
+      .pipe(
+        startWith(''),
+        map((office: any) => typeof office === 'string' ? office : office.name),
+        map((officeName: string) => officeName ? this.filterOfficeAutocompleteData(this.officeData, officeName) : this.officeData)
+      );
+    });
+  }
+
+  getGlAccounts() {
+    this.accountingService.getGlAccounts().subscribe(glAccountData => {
+      this.glAccountData = glAccountData;
+      this.filteredGLAccountData = this.glAccount.valueChanges
+      .pipe(
+        startWith(''),
+        map((glAccount: any) => typeof glAccount === 'string' ? glAccount : glAccount.name + ' (' + glAccount.glCode + ')'),
+        map((glAccount: string) => glAccount ? this.filterGLAccountAutocompleteData(this.glAccountData, glAccount) : this.glAccountData)
+      );
+    });
+  }
+
+  private filterOfficeAutocompleteData(officeData: any, officeName: string): any {
+    return officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
+  }
+
+  private filterGLAccountAutocompleteData(glAccountData: any, glAccount: string): any {
+    return glAccountData.filter((option: any) => (option.name + ' (' + option.glCode + ')').toLowerCase().includes(glAccount.toLowerCase()));
+  }
+
+  getJournalEntries() {
+    this.dataSource = new JournalEntriesDataSource(this.accountingService);
+    this.dataSource.getJournalEntries(this.filterJournalEntriesBy, this.sort.active, this.sort.direction, this.paginator.pageIndex * this.paginator.pageSize, this.paginator.pageSize);
+  }
+
 }