Datatables enhacements to support products (#1641)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
2023-01-13 02:07:51 -06:00
committed by GitHub
co-authored by Jose Alberto Hernandez
parent 08a327fdbf
commit f330e91aa4
161 changed files with 2985 additions and 4971 deletions
@@ -1,6 +1,6 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Dates } from 'app/core/utils/dates';
import { Datatables } from 'app/core/utils/datatables';
import { SettingsService } from 'app/settings/settings.service';
@Component({
@@ -18,12 +18,10 @@ export class ClientDatatableStepComponent implements OnInit {
constructor(private formBuilder: FormBuilder,
private settingsService: SettingsService,
private dateUtils: Dates) { }
private datatableService: Datatables) { }
ngOnInit(): void {
this.datatableInputs = this.datatableData.columnHeaderData.filter((column: any) => {
return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
});
this.datatableInputs = this.datatableService.filterSystemColumns(this.datatableData.columnHeaderData);
const inputItems: any = {};
this.datatableInputs.forEach((input: any) => {
input.controlName = this.getInputName(input);
@@ -41,68 +39,44 @@ export class ClientDatatableStepComponent implements OnInit {
}
getInputName(datatableInput: any): string {
if (datatableInput.columnName && datatableInput.columnName.includes('_cd_')) {
return datatableInput.columnName.split('_cd_')[0];
}
return datatableInput.columnName;
return this.datatableService.getInputName(datatableInput);
}
isNumeric(columnType: string) {
return this.isColumnType(columnType, 'INTEGER') || this.isColumnType(columnType, 'DECIMAL');
return this.datatableService.isNumeric(columnType);
}
isDate(columnType: string) {
return this.isColumnType(columnType, 'DATE') || this.isColumnType(columnType, 'DATETIME');
return this.datatableService.isDate(columnType);
}
isBoolean(columnType: string) {
return this.isColumnType(columnType, 'BOOLEAN');
return this.datatableService.isBoolean(columnType);
}
isDropdown(columnType: string) {
return this.isColumnType(columnType, 'CODELOOKUP');
return this.datatableService.isDropdown(columnType);
}
isString(columnType: string) {
return this.isColumnType(columnType, 'STRING');
return this.datatableService.isString(columnType);
}
isText(columnType: string) {
return this.isColumnType(columnType, 'TEXT');
}
isColumnType(columnType: string, expectedType: string) {
return (columnType === expectedType);
return this.datatableService.isText(columnType);
}
get payload(): any {
const dateFormat = this.settingsService.dateFormat;
const datatableDataValues = this.datatableForm.value;
const data = {
locale: this.settingsService.language.code
};
let existDate = false;
this.datatableInputs.forEach((input: any) => {
const controlName = this.getInputName(input);
if (this.isNumeric(input.columnDisplayType)) {
data[input.columnName] = datatableDataValues[controlName] * 1;
} else if (this.isDate(input.columnDisplayType)) {
data[input.columnName] = this.dateUtils.formatDate(datatableDataValues[controlName], dateFormat);
existDate = true;
} else {
data[input.columnName] = datatableDataValues[controlName];
}
});
if (existDate) {
data['dateFormat'] = dateFormat;
}
const data = this.datatableService.buildPayload(this.datatableInputs, datatableDataValues, dateFormat,
{ locale: this.settingsService.language.code });
const payload = {
return {
registeredTableName: this.datatableData.registeredTableName,
data: data
};
return payload;
}
}
@@ -1,4 +1,9 @@
<div>
<mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="clientDatatable"></mifosx-multi-row>
<mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="clientDatatable"></mifosx-single-row>
</div>
<div class="tab-container mat-typography">
<mifosx-entity-datatable-tab
entityType="Client"
[entityId]="entityId"
[multiRowDatatableFlag]="multiRowDatatableFlag"
[entityDatatable]="entityDatatable"
>
</mifosx-entity-datatable-tab>
</div>
@@ -7,14 +7,17 @@ import { ActivatedRoute } from '@angular/router';
styleUrls: ['./datatable-tab.component.scss']
})
export class DatatableTabComponent implements OnInit {
clientDatatable: any;
entityId: string;
entityDatatable: any;
multiRowDatatableFlag: boolean;
constructor(private route: ActivatedRoute) {
this.route.data.subscribe((data: { clientDatatable: any }) => {
this.clientDatatable = data.clientDatatable;
this.multiRowDatatableFlag = this.clientDatatable.columnHeaders[0].columnName === 'id' ? true : false;
});
constructor(private route: ActivatedRoute) {
this.entityId = this.route.parent.parent.snapshot.paramMap.get('clientId');
this.route.data.subscribe((data: { clientDatatable: any }) => {
this.entityDatatable = data.clientDatatable;
this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
});
}
ngOnInit() {
@@ -1,20 +0,0 @@
<div class="tab-container mat-typography">
<h3>{{datatableName}}</h3>
<div fxLayout="row" fxLayoutAlign="flex-end">
<button mat-raised-button color="primary" (click)="add()">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
</button>
<button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
<fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
</button>
</div>
<table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData">
<ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
<th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
<td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
</table>
</div>
@@ -1,8 +0,0 @@
.tab-container {
padding: 1%;
margin: 1%;
table {
width: 100%;
}
}
@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MultiRowComponent } from './multi-row.component';
describe('MultiRowComponent', () => {
let component: MultiRowComponent;
let fixture: ComponentFixture<MultiRowComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MultiRowComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MultiRowComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -1,130 +0,0 @@
import { Component, OnInit, Input, OnChanges, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MatTable } from '@angular/material/table';
import { MatDialog } from '@angular/material/dialog';
import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
/** Custom Components */
import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
/** Custom Services */
import { ClientsService } from '../../../clients.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { Datatables } from 'app/core/utils/datatables';
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
import { DecimalPipe } from '@angular/common';
@Component({
selector: 'mifosx-multi-row',
templateUrl: './multi-row.component.html',
styleUrls: ['./multi-row.component.scss']
})
export class MultiRowComponent implements OnInit, OnChanges {
@ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
@Input() dataObject: any;
datatableName: string;
datatableColumns: string[] = [];
datatableData: any;
clientId: string;
showDeleteBotton: boolean;
/**
* Fetches Client Id from parent route params.
* @param {ActivatedRoute} route Activated Route.
* @param {Dates} dateUtils Date Utils.
* @param {ClientsService} clientsService Clients Service.
* @param {MatDialog} dialog Dialog Service.
* @param {SettingsService} settingsService Settings Service
* @param {Datatables} datatables Datatable utils
*/
constructor(private route: ActivatedRoute,
private dateUtils: Dates,
private clientsService: ClientsService,
private dialog: MatDialog,
private settingsService: SettingsService,
private datatables: Datatables,
private dateFormat: DateFormatPipe,
private dateTimeFormat: DatetimeFormatPipe,
private numberFormat: DecimalPipe) {
this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
}
ngOnInit() {
this.route.params.subscribe((routeParams: any) => {
this.datatableName = routeParams.datatableName;
});
}
ngOnChanges() {
this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
return columnHeader.columnName;
});
this.datatableData = this.dataObject.data;
this.showDeleteBotton = this.datatableData[0] ? true : false;
}
add() {
let dataTableEntryObject: any = {
locale: this.settingsService.language.code
};
const dateTransformColumns: string[] = [];
const columns = this.dataObject.columnHeaders.filter((column: any) => {
return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
});
const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
const data = {
title: 'Add ' + this.datatableName,
formfields: formfields
};
const addDialogRef = this.dialog.open(FormDialogComponent, { data });
addDialogRef.afterClosed().subscribe((response: any) => {
if (response.data) {
// format Dates
dateTransformColumns.forEach((column) => {
response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
});
dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
this.clientsService.addClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
this.datatableData = dataObject.data;
this.dataTableRef.renderRows();
});
});
}
});
}
delete() {
const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
data: { deleteContext: `the contents of ${this.datatableName}` }
});
deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
if (response.delete) {
this.clientsService.deleteDatatableContent(this.clientId, this.datatableName)
.subscribe(() => {
this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
this.datatableData = dataObject.data;
this.showDeleteBotton = false;
this.dataTableRef.renderRows();
});
});
}
});
}
formatValue(index: number, value: any): any {
const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
if (columnDisplayType === 'DATE') {
return this.dateFormat.transform(value);
} else if (columnDisplayType === 'DATETIME') {
return this.dateTimeFormat.transform(value);
} else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
return this.numberFormat.transform(value);
}
return value;
}
}
@@ -1,42 +0,0 @@
<div class="tab-container mat-typography">
<h3>{{datatableName}}</h3>
<div fxLayout="row" fxLayoutAlign="flex-end">
<button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
<fa-icon icon="plus" class="m-r-10"></fa-icon>Add
</button>
<button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
<fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
</button>
<button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
<fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
</button>
</div>
<mat-divider></mat-divider>
<ng-container *ngIf="dataObject.data.length > 0">
<div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
<div fxFlex="45%" class="mat-body-strong left">
{{columnHeader.columnName}}
</div>
<div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
<span *ngSwitchCase="'DATE'">
{{dataObject.data[0].row[i] | dateFormat}}
</span>
<span *ngSwitchCase="'DATETIME'">
{{dataObject.data[0].row[i] | datetimeFormat}}
</span>
<span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
{{dataObject.data[0].row[i] | number}}
</span>
<span *ngSwitchDefault>
{{dataObject.data[0].row[i]}}
</span>
</div>
</div>
</ng-container>
</div>
@@ -1,13 +0,0 @@
.tab-container {
padding: 1%;
margin: 1%;
.delete-button {
margin-left: 1%;
}
}
.table-data {
margin-top: 20px;
align-items: center;
}
@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SingleRowComponent } from './single-row.component';
describe('SingleRowComponent', () => {
let component: SingleRowComponent;
let fixture: ComponentFixture<SingleRowComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SingleRowComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SingleRowComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -1,131 +0,0 @@
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
/** Custom Components */
import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
/** Custom Services */
import { ClientsService } from '../../../clients.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { Datatables } from 'app/core/utils/datatables';
@Component({
selector: 'mifosx-single-row',
templateUrl: './single-row.component.html',
styleUrls: ['./single-row.component.scss']
})
export class SingleRowComponent implements OnInit {
@Input() dataObject: any;
datatableName: string;
clientId: string;
/**
* Fetches Client Id from parent route params.
* @param {ActivatedRoute} route Activated Route.
* @param {Dates} dateUtils Date Utils.
* @param {ClientsService} clientsService Clients Service.
* @param {SettingsService} settingsService Settings Service
* @param {Datatables} datatables Datatable utils
*/
constructor(private route: ActivatedRoute,
private dateUtils: Dates,
private dialog: MatDialog,
private clientsService: ClientsService,
private settingsService: SettingsService,
private datatables: Datatables) {
this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
}
ngOnInit() {
this.route.params.subscribe((routeParams: any) => {
this.datatableName = routeParams.datatableName;
});
}
add() {
let dataTableEntryObject: any = {
locale: this.settingsService.language.code
};
const dateTransformColumns: string[] = [];
const columns = this.dataObject.columnHeaders.filter((column: any) => {
return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
});
const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
const data = {
title: 'Add ' + this.datatableName,
formfields: formfields
};
const addDialogRef = this.dialog.open(FormDialogComponent, { data });
addDialogRef.afterClosed().subscribe((response: any) => {
if (response.data) {
// format Dates
dateTransformColumns.forEach((column) => {
response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
});
dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
this.clientsService.addClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
this.dataObject = dataObject;
});
});
}
});
}
edit() {
let dataTableEntryObject: any = {
locale: this.settingsService.language.code
};
const dateTransformColumns: string[] = [];
const columns = this.dataObject.columnHeaders.filter((column: any) => {
return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
});
let formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
formfields = formfields.map((formfield: FormfieldBase, index: number) => {
formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
return formfield;
});
const data = {
title: 'Edit ' + this.datatableName,
formfields: formfields
};
const editDialogRef = this.dialog.open(FormDialogComponent, { data });
editDialogRef.afterClosed().subscribe((response: any) => {
if (response.data) {
// format Dates
dateTransformColumns.forEach((column) => {
response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
});
dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
this.clientsService.editClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
this.dataObject = dataObject;
});
});
}
});
}
delete() {
const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
data: { deleteContext: `the contents of ${this.datatableName}` }
});
deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
if (response.delete) {
this.clientsService.deleteDatatableContent(this.clientId, this.datatableName)
.subscribe(() => {
this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
this.dataObject = dataObject;
});
});
}
});
}
}
-4
View File
@@ -20,8 +20,6 @@ import { NotesTabComponent } from './clients-view/notes-tab/notes-tab.component'
import { EditNotesDialogComponent } from './clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component';
import { DocumentsTabComponent } from './clients-view/documents-tab/documents-tab.component';
import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-tab.component';
import { MultiRowComponent } from './clients-view/datatable-tab/multi-row/multi-row.component';
import { SingleRowComponent } from './clients-view/datatable-tab/single-row/single-row.component';
import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
import { ChargesOverviewComponent } from './clients-view/charges/charges-overview/charges-overview.component';
import { ClientActionsComponent } from './clients-view/client-actions/client-actions.component';
@@ -86,8 +84,6 @@ import { ClientDatatableStepComponent } from './client-stepper/client-datatable-
EditNotesDialogComponent,
DocumentsTabComponent,
DatatableTabComponent,
MultiRowComponent,
SingleRowComponent,
AddressTabComponent,
ChargesOverviewComponent,
ClientActionsComponent,