135 lines
4.2 KiB
TypeScript
135 lines
4.2 KiB
TypeScript
import { CurrencyPipe } from '@angular/common';
|
|
import { Component, inject, input, computed, linkedSignal, signal, afterNextRender } from '@angular/core';
|
|
import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
|
|
export interface BalanceSheetFormData {
|
|
date: Date;
|
|
}
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
|
|
import { MatSortModule, Sort } from '@angular/material/sort';
|
|
import { MatTableModule } from '@angular/material/table';
|
|
import { Router } from '@angular/router';
|
|
import moment from 'moment';
|
|
|
|
import { ClearPipe } from '../shared/clear.pipe';
|
|
import { ErrorStateComponent } from '../shared/error-state/error-state.component';
|
|
import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
|
|
import { BalanceSheet } from './balance-sheet';
|
|
import { BalanceSheetService } from './balance-sheet.service';
|
|
|
|
@Component({
|
|
selector: 'app-balance-sheet',
|
|
templateUrl: './balance-sheet.component.html',
|
|
styleUrls: ['./balance-sheet.component.css'],
|
|
host: {
|
|
'(window:keydown.f2)': 'focusDate($event)',
|
|
},
|
|
imports: [
|
|
FormField,
|
|
FormRoot,
|
|
MatFormFieldModule,
|
|
MatInputModule,
|
|
MatDatepickerModule,
|
|
MatButtonModule,
|
|
MatTableModule,
|
|
MatSortModule,
|
|
MatPaginatorModule,
|
|
CurrencyPipe,
|
|
ClearPipe,
|
|
SkeletonLoaderComponent,
|
|
ErrorStateComponent,
|
|
],
|
|
})
|
|
export class BalanceSheetComponent {
|
|
private router = inject(Router);
|
|
private ser = inject(BalanceSheetService);
|
|
pageSize = signal(50);
|
|
pageIndex = signal(0);
|
|
date = input(null, { transform: (v: string | null | undefined) => v ?? null });
|
|
infoResource = this.ser.list(this.date);
|
|
info = computed(() => this.infoResource.value() ?? new BalanceSheet());
|
|
|
|
sortActive = signal('');
|
|
sortDirection = signal('');
|
|
|
|
formModel = linkedSignal<import('./balance-sheet').BalanceSheet, BalanceSheetFormData>({
|
|
source: this.info,
|
|
computation: (info: BalanceSheet): BalanceSheetFormData => ({
|
|
date: info.date ? moment(info.date, 'DD-MMM-YYYY').toDate() : new Date(),
|
|
}),
|
|
});
|
|
|
|
form = createForm(this.formModel);
|
|
sortedList = computed(() => {
|
|
const data = this.info().body ?? [];
|
|
const active = this.sortActive();
|
|
const direction = this.sortDirection();
|
|
|
|
if (!active || direction === '') {
|
|
return data;
|
|
}
|
|
|
|
return [...data].sort((a, b) => {
|
|
const isAsc = direction === 'asc';
|
|
switch (active) {
|
|
case 'group':
|
|
return compare(a.group ?? '', b.group ?? '', isAsc);
|
|
case 'name':
|
|
return compare(a.name ?? '', b.name ?? '', isAsc);
|
|
case 'subAmount':
|
|
return compare(a.subAmount ?? 0, b.subAmount ?? 0, isAsc);
|
|
case 'total':
|
|
return compare(a.amount ?? 0, b.amount ?? 0, isAsc);
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
});
|
|
|
|
dataSource = computed(() => {
|
|
const data = this.sortedList();
|
|
const pageIndex = this.pageIndex();
|
|
const pageSize = this.pageSize();
|
|
return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
|
|
});
|
|
|
|
constructor() {
|
|
afterNextRender(() => {
|
|
this.form().focusBoundControl();
|
|
});
|
|
}
|
|
|
|
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
|
displayedColumns = ['group', 'name', 'subAmount', 'total'];
|
|
|
|
focusDate(event: Event) {
|
|
event.preventDefault();
|
|
this.form().focusBoundControl();
|
|
}
|
|
|
|
show() {
|
|
const date = this.getDate();
|
|
this.router.navigate(['balance-sheet', date]);
|
|
}
|
|
|
|
getDate(): string {
|
|
const formModel = this.formModel();
|
|
return moment(formModel.date).format('DD-MMM-YYYY');
|
|
}
|
|
|
|
handlePageEvent(e: PageEvent) {
|
|
this.pageSize.set(e.pageSize);
|
|
this.pageIndex.set(e.pageIndex);
|
|
}
|
|
|
|
sortData(sort: Sort) {
|
|
this.sortActive.set(sort.active);
|
|
this.sortDirection.set(sort.direction);
|
|
}
|
|
}
|
|
const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
|
|
(a < b ? -1 : 1) * (isAsc ? 1 : -1);
|