refractor: replace select by autocomplete
Replace select by autocomplete fields for search journal entries component filters.
This commit is contained in:
abhay_1806
@@ -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) {
|
||||
console.log('Order By:', orderBy);
|
||||
console.log('Sort By:', sortBy);
|
||||
console.log('Filter By:', filterBy);
|
||||
getJournalEntries(filterBy: any, orderBy: string, sortOrder: string, offset: number, limit: number) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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 recordsSubject = new BehaviorSubject<number>(0);
|
||||
private journalEntriesSubject = new BehaviorSubject<any[]>([]);
|
||||
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) {
|
||||
this.journalEntriesSubject.next([]);
|
||||
orderBy = (orderBy === 'debit' || orderBy === 'credit') ? 'amount' : orderBy;
|
||||
this.accountingService.getJournalEntries(filterBy, orderBy, sortBy, offset, limit)
|
||||
.subscribe((journalEntries: any) => {
|
||||
console.log(journalEntries);
|
||||
this.recordsSubject.next(journalEntries.totalFilteredRecords);
|
||||
this.journalEntriesSubject.next(journalEntries.pageItems);
|
||||
});
|
||||
}
|
||||
getJournalEntries(filterBy: any, orderBy: string = '', sortOrder: string = '', offset: number = 0, limit: number = 10) {
|
||||
this.journalEntriesSubject.next([]);
|
||||
orderBy = (orderBy === 'debit' || orderBy === 'credit') ? 'amount' : orderBy;
|
||||
this.accountingService.getJournalEntries(filterBy, orderBy, sortOrder, offset, limit)
|
||||
.subscribe((journalEntries: any) => {
|
||||
this.recordsSubject.next(journalEntries.totalFilteredRecords);
|
||||
this.journalEntriesSubject.next(journalEntries.pageItems);
|
||||
});
|
||||
}
|
||||
|
||||
connect(collectionViewer: CollectionViewer): Observable<any[]> {
|
||||
return this.journalEntriesSubject.asObservable();
|
||||
}
|
||||
connect(collectionViewer: CollectionViewer): Observable<any[]> {
|
||||
return this.journalEntriesSubject.asObservable();
|
||||
}
|
||||
|
||||
disconnect(collectionViewer: CollectionViewer): void {
|
||||
this.journalEntriesSubject.complete();
|
||||
this.recordsSubject.complete();
|
||||
}
|
||||
disconnect(collectionViewer: CollectionViewer): void {
|
||||
this.journalEntriesSubject.complete();
|
||||
this.recordsSubject.complete();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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')">
|
||||
<mat-option *ngFor="let office of officeData" [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<input matInput placeholder="Office Name" [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="31%">
|
||||
<mat-select placeholder="Affected GL Entry" [formControl]="glAccountCode" (selectionChange)="applyFilter($event.value, 'glAccountId')">
|
||||
<mat-option *ngFor="let affectedGLEntry of glAccountData" [value]="affectedGLEntry.id">
|
||||
{{ affectedGLEntry.name + ' (' + affectedGLEntry.glCode + ')' }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<input matInput placeholder="GL Account Name or Code" [formControl]="glAccount" [matAutocomplete]="glAccountAutocomplete">
|
||||
</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>
|
||||
|
||||
@@ -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);
|
||||
this.filterBy[findIndex].value = filterValue;
|
||||
const findIndex = this.filterJournalEntriesBy.findIndex(filter => filter.type === property);
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user