From 55d2532e893461d25de73715013304965cf13217 Mon Sep 17 00:00:00 2001 From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com> Date: Sat, 23 May 2020 20:03:06 +0530 Subject: [PATCH] feat: add center view page (datatables-tabs) (#799) Fixes: #775 Fixes: #798 --- src/app/centers/centers-routing.module.ts | 21 +- .../centers-view/centers-view.component.html | 6 + .../centers-view/centers-view.component.ts | 5 + .../datatable-tab.component.html | 4 + .../datatable-tab.component.scss | 0 .../datatable-tab.component.spec.ts | 25 +++ .../datatable-tab/datatable-tab.component.ts | 27 +++ .../multi-row/multi-row.component.html | 34 +++ .../multi-row/multi-row.component.scss | 10 + .../multi-row/multi-row.component.spec.ts | 25 +++ .../multi-row/multi-row.component.ts | 184 ++++++++++++++++ .../single-row/single-row.component.html | 41 ++++ .../single-row/single-row.component.scss | 11 + .../single-row/single-row.component.spec.ts | 25 +++ .../single-row/single-row.component.ts | 207 ++++++++++++++++++ src/app/centers/centers.module.ts | 8 +- src/app/centers/centers.service.ts | 50 +++++ .../center-datatable.resolver.ts | 32 +++ .../center-datatables.resolver.ts | 30 +++ 19 files changed, 742 insertions(+), 3 deletions(-) create mode 100644 src/app/centers/centers-view/datatable-tab/datatable-tab.component.html create mode 100644 src/app/centers/centers-view/datatable-tab/datatable-tab.component.scss create mode 100644 src/app/centers/centers-view/datatable-tab/datatable-tab.component.spec.ts create mode 100644 src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts create mode 100644 src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html create mode 100644 src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.scss create mode 100644 src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.spec.ts create mode 100644 src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts create mode 100644 src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html create mode 100644 src/app/centers/centers-view/datatable-tab/single-row/single-row.component.scss create mode 100644 src/app/centers/centers-view/datatable-tab/single-row/single-row.component.spec.ts create mode 100644 src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts create mode 100644 src/app/centers/common-resolvers/center-datatable.resolver.ts create mode 100644 src/app/centers/common-resolvers/center-datatables.resolver.ts diff --git a/src/app/centers/centers-routing.module.ts b/src/app/centers/centers-routing.module.ts index bbf2feb4a..5f271e39b 100644 --- a/src/app/centers/centers-routing.module.ts +++ b/src/app/centers/centers-routing.module.ts @@ -13,6 +13,7 @@ import { CreateCenterComponent } from './create-center/create-center.component'; import { CentersViewComponent } from './centers-view/centers-view.component'; import { GeneralTabComponent } from './centers-view/general-tab/general-tab.component'; import { NotesTabComponent } from './centers-view/notes-tab/notes-tab.component'; +import { DatatableTabComponent } from './centers-view/datatable-tab/datatable-tab.component'; /** Custom Resolvers */ import { OfficesResolver } from 'app/accounting/common-resolvers/offices.resolver'; @@ -21,6 +22,8 @@ import { SavingsAccountResolver } from './common-resolvers/savings-account.resol import { CenterResourceResolver } from './common-resolvers/center-resource.resolver'; import { CenterSummaryResolver } from './common-resolvers/center-summary.resolver'; import { CenterNotesResolver } from './common-resolvers/center-notes.resolver'; +import { CenterDatatableResolver } from './common-resolvers/center-datatable.resolver'; +import { CenterDatatablesResolver } from './common-resolvers/center-datatables.resolver'; const routes: Routes = [ Route.withShell([ @@ -46,7 +49,8 @@ const routes: Routes = [ component: CentersViewComponent, data: { title: extract('Centers View'), routeParamBreadcrumb: 'centerId' }, resolve: { - centerViewData: CenterViewResolver + centerViewData: CenterViewResolver, + centerDatatables: CenterDatatablesResolver }, children: [ { @@ -66,6 +70,17 @@ const routes: Routes = [ resolve: { centerNotes: CenterNotesResolver } + }, + { + path: 'datatables', + children: [{ + path: ':datatableName', + component: DatatableTabComponent, + data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' }, + resolve: { + centerDatatable: CenterDatatableResolver + } + }] } ] } @@ -83,7 +98,9 @@ const routes: Routes = [ SavingsAccountResolver, CenterResourceResolver, CenterSummaryResolver, - CenterNotesResolver + CenterNotesResolver, + CenterDatatableResolver, + CenterDatatablesResolver ] }) export class CentersRoutingModule { } diff --git a/src/app/centers/centers-view/centers-view.component.html b/src/app/centers/centers-view/centers-view.component.html index dff623dff..d9b2f7830 100644 --- a/src/app/centers/centers-view/centers-view.component.html +++ b/src/app/centers/centers-view/centers-view.component.html @@ -91,6 +91,12 @@ [active]="notes.isActive"> Notes + + + {{centerDatatable.registeredTableName}} + + diff --git a/src/app/centers/centers-view/centers-view.component.ts b/src/app/centers/centers-view/centers-view.component.ts index 79bd80e1f..308b6a2c2 100644 --- a/src/app/centers/centers-view/centers-view.component.ts +++ b/src/app/centers/centers-view/centers-view.component.ts @@ -14,6 +14,9 @@ export class CentersViewComponent implements OnInit { /** Stores Center View Data */ centerViewData: any; + /** Center datatable */ + centerDatatables: any; + /** Meeting data */ meetingData: boolean; /** @@ -23,8 +26,10 @@ export class CentersViewComponent implements OnInit { constructor(private route: ActivatedRoute) { this.route.data.subscribe((data: { centerViewData: any, + centerDatatables: any }) => { this.centerViewData = data.centerViewData; + this.centerDatatables = data.centerDatatables; }); } diff --git a/src/app/centers/centers-view/datatable-tab/datatable-tab.component.html b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.html new file mode 100644 index 000000000..ee8d69aec --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/app/centers/centers-view/datatable-tab/datatable-tab.component.scss b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/centers/centers-view/datatable-tab/datatable-tab.component.spec.ts b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.spec.ts new file mode 100644 index 000000000..1f409cd4e --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DatatableTabComponent } from './datatable-tab.component'; + +describe('DatatableTabComponent', () => { + let component: DatatableTabComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DatatableTabComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DatatableTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts new file mode 100644 index 000000000..777d39400 --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts @@ -0,0 +1,27 @@ +import { Component} from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'mifosx-datatable-tab', + templateUrl: './datatable-tab.component.html', + styleUrls: ['./datatable-tab.component.scss'] +}) +export class DatatableTabComponent { + + /** Center Datatable */ + centerDatatable: any; + /** Multi Row Datatable Flag */ + multiRowDatatableFlag: boolean; + + /** + * Fetches data table data from `resolve` + * @param {ActivatedRoute} route Activated Route. + */ + constructor(private route: ActivatedRoute) { + this.route.data.subscribe((data: { centerDatatable: any }) => { + this.centerDatatable = data.centerDatatable; + this.multiRowDatatableFlag = this.centerDatatable.columnHeaders[0].columnName === 'id' ? true : false; + }); + } + +} diff --git a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html new file mode 100644 index 000000000..2ea73ff82 --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html @@ -0,0 +1,34 @@ +
+ +
+
+

{{datatableName}}

+
+
+ + + + + + +
+
+ + + + + + + + + + + + +
{{datatableColumn}} {{data.row[i]}}
+ +
diff --git a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.scss b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.scss new file mode 100644 index 000000000..d0bc41a6d --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.scss @@ -0,0 +1,10 @@ +.tab-container { + padding: 1%; + margin: 1%; + .action-button{ + margin-left: auto; + } + table { + width: 100%; + } +} diff --git a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.spec.ts b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.spec.ts new file mode 100644 index 000000000..dd46589d8 --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MultiRowComponent } from './multi-row.component'; + +describe('MultiRowComponent', () => { + let component: MultiRowComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MultiRowComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MultiRowComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts new file mode 100644 index 000000000..dc288ab3b --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts @@ -0,0 +1,184 @@ +/** Angular Imports */ +import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { MatTable } from '@angular/material/table'; +import { MatDialog } from '@angular/material'; +import { DatePipe } from '@angular/common'; + +/** Custom Dialogs */ +import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component'; +import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component'; + +/** Custom Models */ +import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base'; +import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base'; +import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base'; +import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base'; +import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base'; + +/** Custom Services */ +import { CentersService } from '../../../centers.service'; + +/** + * Center Multi Row Data Tables + */ +@Component({ + selector: 'mifosx-multi-row', + templateUrl: './multi-row.component.html', + styleUrls: ['./multi-row.component.scss'] +}) +export class MultiRowComponent implements OnInit, OnChanges { + + /** Data Object */ + @Input() dataObject: any; + + /** Data Table Name */ + datatableName: string; + /** Data Table Columns */ + datatableColumns: string[] = []; + /** Data Table Data */ + datatableData: any; + /** Center Id */ + centerId: string; + /** Toggle button visibility */ + showDeleteBotton: boolean; + + /** Data Table Reference */ + @ViewChild('dataTable') dataTableRef: MatTable; + + /** + * Fetches center Id from parent route params. + * @param {ActivatedRoute} route Activated Route. + * @param {DatePipe} datePipe Date Pipe. + * @param {CentersService} centersService Centers Service. + * @param {MatDialog} dialog Mat Dialog. + */ + constructor(private route: ActivatedRoute, + private datePipe: DatePipe, + private centersService: CentersService, + private dialog: MatDialog) { + this.centerId = this.route.parent.parent.snapshot.paramMap.get('centerId'); + } + + /** + * Updates related variables on changes to dataObject. + */ + ngOnChanges() { + this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => { + return columnHeader.columnName; + }); + this.datatableData = this.dataObject.data; + this.showDeleteBotton = this.datatableData[0] ? true : false; + } + + /** + * Fetches data table name from route params. + * subscription is required due to asynchronicity. + */ + ngOnInit() { + this.route.params.subscribe((routeParams: any) => { + this.datatableName = routeParams.datatableName; + }); + } + + /** + * Adds a new row to the given multi row data table. + */ + add() { + let dataTableEntryObject: any = { locale: 'en' }; + const dateTransformColumns: string[] = []; + const columns = this.dataObject.columnHeaders.filter((column: any) => { + return ((column.columnName !== 'id') && (column.columnName !== 'center_id')); + }); + const formfields: FormfieldBase[] = columns.map((column: any) => { + switch (column.columnDisplayType) { + case 'INTEGER': + case 'STRING': + case 'DECIMAL': + case 'TEXT': return new InputBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + type: (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'DECIMAL') ? 'number' : 'text', + required: (column.isColumnNullable) ? false : true + }); + case 'BOOLEAN': return new CheckboxBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + type: 'checkbox', + required: (column.isColumnNullable) ? false : true + }); + case 'CODELOOKUP': return new SelectBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + options: { label: 'value', value: 'id', data: column.columnValues }, + required: (column.isColumnNullable) ? false : true + }); + case 'DATE': { + dateTransformColumns.push(column.columnName); + dataTableEntryObject.dateFormat = 'yyyy-MM-dd'; + return new DatepickerBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + type: 'date', + required: (column.isColumnNullable) ? false : true + }); + } + case 'DATETIME': { + dateTransformColumns.push(column.columnName); + dataTableEntryObject.dateFormat = 'yyyy-MM-dd HH:mm'; + return new DatepickerBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + type: 'datetime-local', + required: (column.isColumnNullable) ? false : true + }); + } + } + }); + const data = { + title: 'Add ' + this.datatableName, + formfields: formfields + }; + const addDialogRef = this.dialog.open(FormDialogComponent, { data }); + addDialogRef.afterClosed().subscribe((response: any) => { + if (response.data) { + dateTransformColumns.forEach((column) => { + response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat); + }); + dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject }; + this.centersService.addCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => { + this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => { + this.datatableData = dataObject.data; + this.dataTableRef.renderRows(); + }); + }); + } + }); + } + + /** + * Deletes all rows of the given multi row data table. + */ + delete() { + const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, { + data: { deleteContext: `the contents of ${this.datatableName}` } + }); + deleteDataTableDialogRef.afterClosed().subscribe((response: any) => { + if (response.delete) { + this.centersService.deleteDatatableContent(this.centerId, this.datatableName).subscribe(() => { + this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => { + this.datatableData = dataObject.data; + this.showDeleteBotton = false; + this.dataTableRef.renderRows(); + }); + }); + } + }); + } + +} diff --git a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html new file mode 100644 index 000000000..e9227d326 --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html @@ -0,0 +1,41 @@ +
+ +
+ +
+

{{datatableName}}

+
+ +
+
+ + + + + + + + + +
+
+ +
+ + + +
+ + + {{columnHeader.columnName}} : {{dataObject.data[0].row[i]}} + + +
+ +
diff --git a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.scss b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.scss new file mode 100644 index 000000000..33f1cf867 --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.scss @@ -0,0 +1,11 @@ +.tab-container { + padding: 1%; + margin: 1%; + .delete-button { + margin-left: 1%; + } +} + +.tableName { + padding-left: 2%; +} \ No newline at end of file diff --git a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.spec.ts b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.spec.ts new file mode 100644 index 000000000..8aece650c --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SingleRowComponent } from './single-row.component'; + +describe('SingleRowComponent', () => { + let component: SingleRowComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SingleRowComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SingleRowComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts new file mode 100644 index 000000000..a19c49bee --- /dev/null +++ b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts @@ -0,0 +1,207 @@ +/** Angular Imports */ +import { Component, Input, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { MatDialog } from '@angular/material'; +import { DatePipe } from '@angular/common'; + +/** Custom Components */ +import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component'; +import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component'; + +/** Custom Models */ +import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base'; +import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base'; +import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base'; +import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base'; +import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base'; + +/** Custom Services */ +import { CentersService } from '../../../centers.service'; + + +/** + * Centers Single Row Data Tables + */ +@Component({ + selector: 'mifosx-single-row', + templateUrl: './single-row.component.html', + styleUrls: ['./single-row.component.scss'] +}) +export class SingleRowComponent implements OnInit { + + /** Data Object */ + @Input() dataObject: any; + + /** Data Table Name */ + datatableName: string; + /** Center Id */ + centerId: string; + + /** + * Fetches center Id from parent route params. + * @param {ActivatedRoute} route Activated Route. + * @param {DatePipe} datePipe Date Pipe. + * @param {CentersService} centersService Centers Service. + * @param {MatDialog} dialog Mat Dialog. + */ + constructor(private route: ActivatedRoute, + private datePipe: DatePipe, + private dialog: MatDialog, + private centersService: CentersService) { + this.centerId = this.route.parent.parent.snapshot.paramMap.get('centerId'); + } + + /** + * Fetches data table name from route params. + * subscription is required due to asynchronicity. + */ + ngOnInit() { + this.route.params.subscribe((routeParams: any) => { + this.datatableName = routeParams.datatableName; + }); + } + + /** + * Creates a new instance of the given single row data table. + */ + add() { + let dataTableEntryObject: any = { locale: 'en' }; + const dateTransformColumns: string[] = []; + const columns = this.dataObject.columnHeaders.filter((column: any) => { + return ((column.columnName !== 'id') && (column.columnName !== 'center_id')); + }); + const formfields: FormfieldBase[] = this.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) { + dateTransformColumns.forEach((column) => { + response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat); + }); + dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject }; + this.centersService.addCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => { + this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => { + this.dataObject = dataObject; + }); + }); + } + }); + } + + /** + * Edits the current instance of single row data table. + */ + edit() { + let dataTableEntryObject: any = { locale: 'en' }; + const dateTransformColumns: string[] = []; + const columns = this.dataObject.columnHeaders.filter((column: any) => { + return ((column.columnName !== 'id') && (column.columnName !== 'center_id')); + }); + let formfields: FormfieldBase[] = this.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, + layout: { addButtonText: 'Confirm' }, + formfields: formfields + }; + const editDialogRef = this.dialog.open(FormDialogComponent, { data }); + editDialogRef.afterClosed().subscribe((response: any) => { + if (response.data) { + dateTransformColumns.forEach((column) => { + response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat); + }); + dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject }; + this.centersService.editCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => { + this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => { + this.dataObject = dataObject; + }); + }); + } + }); + } + + /** + * Deletes the current instance of single row data table. + */ + delete() { + const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, { + data: { deleteContext: `the contents of ${this.datatableName}` } + }); + deleteDataTableDialogRef.afterClosed().subscribe((response: any) => { + if (response.delete) { + this.centersService.deleteDatatableContent(this.centerId, this.datatableName) + .subscribe(() => { + this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => { + this.dataObject = dataObject; + }); + }); + } + }); + } + + /** + * Maps API response to data table form fields. + * @param {any} columns Data Table Columns. + * @param {string[]} dateTransformColumns Columns transformed with date pipe. + * @param {any} dataTableEntryObject Additional data table details. + */ + getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) { + return columns.map((column: any) => { + switch (column.columnDisplayType) { + case 'INTEGER': + case 'STRING': + case 'DECIMAL': + case 'TEXT': return new InputBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + type: (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'DECIMAL') ? 'number' : 'text', + required: (column.isColumnNullable) ? false : true + }); + case 'BOOLEAN': return new CheckboxBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + type: 'checkbox', + required: (column.isColumnNullable) ? false : true + }); + case 'CODELOOKUP': return new SelectBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + options: { label: 'value', value: 'id', data: column.columnValues }, + required: (column.isColumnNullable) ? false : true + }); + case 'DATE': { + dateTransformColumns.push(column.columnName); + dataTableEntryObject.dateFormat = 'yyyy-MM-dd'; + return new DatepickerBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + type: 'date', + required: (column.isColumnNullable) ? false : true + }); + } + case 'DATETIME': { + dateTransformColumns.push(column.columnName); + dataTableEntryObject.dateFormat = 'yyyy-MM-dd HH:mm'; + return new DatepickerBase({ + controlName: column.columnName, + label: column.columnName, + value: '', + type: 'datetime-local', + required: (column.isColumnNullable) ? false : true + }); + } + } + }); + } + +} diff --git a/src/app/centers/centers.module.ts b/src/app/centers/centers.module.ts index 9affae153..260fc48ad 100644 --- a/src/app/centers/centers.module.ts +++ b/src/app/centers/centers.module.ts @@ -13,6 +13,9 @@ import { CreateCenterComponent } from './create-center/create-center.component'; import { CentersViewComponent } from './centers-view/centers-view.component'; import { GeneralTabComponent } from './centers-view/general-tab/general-tab.component'; import { NotesTabComponent } from './centers-view/notes-tab/notes-tab.component'; +import { DatatableTabComponent } from './centers-view/datatable-tab/datatable-tab.component'; +import { MultiRowComponent } from './centers-view/datatable-tab/multi-row/multi-row.component'; +import { SingleRowComponent } from './centers-view/datatable-tab/single-row/single-row.component'; /** * Centers Module @@ -31,7 +34,10 @@ import { NotesTabComponent } from './centers-view/notes-tab/notes-tab.component' CreateCenterComponent, CentersViewComponent, GeneralTabComponent, - NotesTabComponent + NotesTabComponent, + DatatableTabComponent, + MultiRowComponent, + SingleRowComponent ] }) export class CentersModule { } diff --git a/src/app/centers/centers.service.ts b/src/app/centers/centers.service.ts index be3da70e2..d8a0b92e9 100644 --- a/src/app/centers/centers.service.ts +++ b/src/app/centers/centers.service.ts @@ -126,4 +126,54 @@ export class CentersService { return this.http.delete(`/groups/${centerId}/notes/${noteId}`); } + /** + * Get Center Datatables + */ + getcenterDatatables() { + const httpParams = new HttpParams().set('apptable', 'm_center'); + return this.http.get(`/datatables`, { params: httpParams }); + } + + /** + * Get Center Datatable + * @param centerId Center ID + * @param datatableName Datatable Name + */ + getCenterDatatable(centerId: string, datatableName: string) { + const httpParams = new HttpParams().set('genericResultSet', 'true'); + return this.http.get(`/datatables/${datatableName}/${centerId}`, { params: httpParams }); + } + + /** + * @param centerId Center Id of center to get add datatable entry for. + * @param datatableName Data Table name. + * @param data Data. + * @returns {Observable} + */ + addCenterDatatableEntry(centerId: string, datatableName: string, data: any): Observable { + const httpParams = new HttpParams().set('genericResultSet', 'true'); + return this.http.post(`/datatables/${datatableName}/${centerId}`, data, { params: httpParams }); + } + + /** + * @param centerId Center Id of center to get add datatable entry for. + * @param datatableName Data Table name. + * @param data Data. + * @returns {Observable} + */ + editCenterDatatableEntry(centerId: string, datatableName: string, data: any): Observable { + const httpParams = new HttpParams().set('genericResultSet', 'true'); + return this.http.put(`/datatables/${datatableName}/${centerId}`, data, { params: httpParams }); + } + + /** + * @param centerId Center Id of center to get add datatable entry for. + * @param datatableName Data Table name. + * @returns {Observable} + */ + deleteDatatableContent(centerId: string, datatableName: string): Observable { + const httpParams = new HttpParams().set('genericResultSet', 'true'); + return this.http.delete(`/datatables/${datatableName}/${centerId}`, { params: httpParams }); + } + } diff --git a/src/app/centers/common-resolvers/center-datatable.resolver.ts b/src/app/centers/common-resolvers/center-datatable.resolver.ts new file mode 100644 index 000000000..ee4e39920 --- /dev/null +++ b/src/app/centers/common-resolvers/center-datatable.resolver.ts @@ -0,0 +1,32 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { CentersService } from '../centers.service'; + +/** + * Centers notes data resolver. + */ +@Injectable() +export class CenterDatatableResolver implements Resolve { + + /** + * @param {CentersService} CentersService Centers service. + */ + constructor(private centersService: CentersService) { } + + /** + * Returns the Centers Notes Data. + * @returns {Observable} + */ + resolve(route: ActivatedRouteSnapshot): Observable { + const centerId = route.parent.parent.paramMap.get('centerId'); + const datatableName = route.paramMap.get('datatableName'); + return this.centersService.getCenterDatatable(centerId, datatableName); + } + +} diff --git a/src/app/centers/common-resolvers/center-datatables.resolver.ts b/src/app/centers/common-resolvers/center-datatables.resolver.ts new file mode 100644 index 000000000..7a95b7c4c --- /dev/null +++ b/src/app/centers/common-resolvers/center-datatables.resolver.ts @@ -0,0 +1,30 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { Resolve } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { CentersService } from '../centers.service'; + +/** + * center datatables resolver. + */ +@Injectable() +export class CenterDatatablesResolver implements Resolve { + + /** + * @param {centersService} centersService centers service. + */ + constructor(private centersService: CentersService) { } + + /** + * Returns the center datatables. + * @returns {Observable} + */ + resolve(): Observable { + return this.centersService.getcenterDatatables(); + } + +}