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
co-authored by
Jose Alberto Hernandez
Jose Alberto Hernandez
parent
08a327fdbf
commit
f330e91aa4
@@ -3,17 +3,23 @@
|
||||
<mat-card-title-group class="header-title-group">
|
||||
<div class="profile-image-container">
|
||||
<div>
|
||||
<img mat-card-md-image class="profile-image"
|
||||
src='assets/images/center_placeholder.png'>
|
||||
<img mat-card-md-image class="profile-image" src="assets/images/center_placeholder.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mat-typography center-card-title">
|
||||
<mat-card-title>
|
||||
<h3>
|
||||
<i class="fa fa-stop" matTooltip= "{{ centerViewData.status.value }}"
|
||||
[ngClass]="centerViewData.status.code |statusLookup"></i>
|
||||
Center Name : {{centerViewData.name}}
|
||||
<h3 fxFlex="95%">
|
||||
<i class="fa fa-stop" matTooltip="{{ centerViewData.status.value }}"
|
||||
[ngClass]="centerViewData.status.code |statusLookup"></i>
|
||||
<b>Center Name :</b> {{centerViewData.name}}
|
||||
</h3>
|
||||
<div fxFlex="5%" *ngIf="!(centerViewData.status.value==='Closed')">
|
||||
<button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
|
||||
<mat-icon matListIcon class="actions-menu">
|
||||
<fa-icon icon="bars" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
<div fxLayout="row" fxLayout.lt-md="column">
|
||||
@@ -22,74 +28,85 @@
|
||||
Account #:{{centerViewData.accountNo}} <br />
|
||||
Office: {{centerViewData.officeName}} <br />
|
||||
<span *ngIf="centerViewData.externalId">
|
||||
External Id: {{centerViewData.externalId}} <br/>
|
||||
External Id: {{centerViewData.externalId}} <br />
|
||||
</span>
|
||||
<span *ngIf="centerViewData.staffName">
|
||||
Staff: {{centerViewData.staffName}} <br/>
|
||||
Staff: {{centerViewData.staffName}} <br />
|
||||
</span>
|
||||
Activation Date :
|
||||
{{(centerViewData.activationDate)?(centerViewData.activationDate | dateFormat) :'Not Activated'}}<br />
|
||||
{{(centerViewData.activationDate)?(centerViewData.activationDate | dateFormat) :'Not Activated'}}<br />
|
||||
</p>
|
||||
</div>
|
||||
<div fxFlex="45%" class="center-meeting" fxLayoutAlign="start start">
|
||||
<div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
|
||||
<p>
|
||||
Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
|
||||
<span *ngIf="editMeeting">
|
||||
<i class="fa fa-edit" (click)="doAction('Edit Meeting')"
|
||||
*mifosxHasPermission="'UPDATE_MEETING'"></i><br />
|
||||
</span>
|
||||
Meeting Frequency: {{centerViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
|
||||
</p>
|
||||
</div>
|
||||
<ng-template #unassigned>
|
||||
<div>
|
||||
<p>
|
||||
Next Meeting on: Unassigned
|
||||
<i class="fa fa-calendar"></i><br />
|
||||
Meeting Frequency: N/A
|
||||
</p>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-subtitle>
|
||||
</div>
|
||||
|
||||
<div class="center-meeting" fxLayoutAlign="start start">
|
||||
<div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
|
||||
<p>
|
||||
Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
|
||||
<span *ngIf="editMeeting">
|
||||
<i class="fa fa-edit" (click)="doAction('Edit Meeting')" *mifosxHasPermission="'UPDATE_MEETING'"></i><br />
|
||||
</span>
|
||||
Meeting Frequency: {{centerViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
|
||||
</p>
|
||||
</div>
|
||||
<ng-template #unassigned>
|
||||
<div>
|
||||
<p>
|
||||
Next Meeting on: Unassigned
|
||||
<i class="fa fa-calendar"></i><br/>
|
||||
Meeting Frequency: N/A
|
||||
</p>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<mat-menu #centerMenu="matMenu">
|
||||
|
||||
</mat-card-title-group>
|
||||
<mat-card-actions class="center-actions" *ngIf="!(centerViewData.status.value==='Closed')">
|
||||
<span *ngIf="!(centerViewData.status.value=='Active')">
|
||||
<button mat-raised-button *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i class="fa fa-check-sign"></i> Activate </button>
|
||||
</span>
|
||||
<button mat-raised-button *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')"><i class="fa fa-edit"></i> Edit </button>
|
||||
<button mat-raised-button *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> Add Group </button>
|
||||
<button mat-raised-button *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i class="fa fa-edit"></i> Manage Groups </button>
|
||||
<span *ngIf="centerViewData.active">
|
||||
<button mat-raised-button *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'" [routerLink]="['savings-accounts', 'create']">
|
||||
<i class="fa fa-file"></i> Centers Saving Application
|
||||
</button>
|
||||
</span>
|
||||
<button mat-raised-button [matMenuTriggerFor]="More"> More </button>
|
||||
<mat-menu #More="matMenu">
|
||||
<span *ngIf="centerViewData.collectionMeetingCalendar">
|
||||
<button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'" (click)="doAction('Attendance')"> Attendance </button>
|
||||
<span *ngIf="!(centerViewData.status.value=='Active')">
|
||||
<button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i
|
||||
class="fa fa-check-sign"></i> Activate </button>
|
||||
</span>
|
||||
<span *ngIf="!(centerViewData.staffId)">
|
||||
<button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')"> Assign Staff </button>
|
||||
<button mat-menu-item *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')"><i
|
||||
class="fa fa-edit"></i> Edit </button>
|
||||
<button mat-menu-item *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> Add Group </button>
|
||||
<button mat-menu-item *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i
|
||||
class="fa fa-edit"></i> Manage Groups </button>
|
||||
<span *ngIf="centerViewData.active">
|
||||
<button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
|
||||
[routerLink]="['savings-accounts', 'create']">
|
||||
<i class="fa fa-file"></i> Centers Saving Application
|
||||
</button>
|
||||
</span>
|
||||
<span *ngIf="centerViewData.staffId">
|
||||
<button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')"> Unassign Staff </button>
|
||||
</span>
|
||||
<span *ngIf="centerViewData.status.value==='Active'">
|
||||
<button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')"> Delete </button>
|
||||
</span>
|
||||
<button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')"> Close </button>
|
||||
<span *ngIf="centerViewData.status.value==='Active' && !(centerViewData.collectionMeetingCalendar)">
|
||||
<button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')"> Attach Meeting </button>
|
||||
</span>
|
||||
<button mat-menu-item *mifosxHasPermission="'READ_Staff Assignment History'" (click)="doAction('Staff Assignment History')"> Staff Assignment History </button>
|
||||
<button mat-menu-item [matMenuTriggerFor]="More"> More </button>
|
||||
<mat-menu #More="matMenu">
|
||||
<span *ngIf="centerViewData.collectionMeetingCalendar">
|
||||
<button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
|
||||
(click)="doAction('Attendance')"> Attendance </button>
|
||||
</span>
|
||||
<span *ngIf="!(centerViewData.staffId)">
|
||||
<button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')"> Assign
|
||||
Staff </button>
|
||||
</span>
|
||||
<span *ngIf="centerViewData.staffId">
|
||||
<button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
|
||||
Unassign Staff </button>
|
||||
</span>
|
||||
<span *ngIf="centerViewData.status.value==='Active'">
|
||||
<button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')"> Delete </button>
|
||||
</span>
|
||||
<button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')"> Close </button>
|
||||
<span *ngIf="centerViewData.status.value==='Active' && !(centerViewData.collectionMeetingCalendar)">
|
||||
<button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')"> Attach
|
||||
Meeting </button>
|
||||
</span>
|
||||
<button mat-menu-item *mifosxHasPermission="'READ_Staff Assignment History'"
|
||||
(click)="doAction('Staff Assignment History')"> Staff Assignment History </button>
|
||||
</mat-menu>
|
||||
</mat-menu>
|
||||
</mat-card-actions>
|
||||
</mat-card-title-group>
|
||||
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<nav mat-tab-nav-bar class="navigation-tabs">
|
||||
@@ -97,13 +114,14 @@
|
||||
[active]="general.isActive">
|
||||
General
|
||||
</a>
|
||||
<a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive"
|
||||
[active]="notes.isActive">
|
||||
<a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive
|
||||
#notes="routerLinkActive" [active]="notes.isActive">
|
||||
Notes
|
||||
</a>
|
||||
<span *ngFor="let centerDatatable of centerDatatables">
|
||||
<a mat-tab-link *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName" [routerLink]="['./datatables',centerDatatable.registeredTableName]"
|
||||
routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive">
|
||||
<a mat-tab-link *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"
|
||||
[routerLink]="['./datatables',centerDatatable.registeredTableName]" routerLinkActive
|
||||
#datatable="routerLinkActive" [active]="datatable.isActive">
|
||||
{{centerDatatable.registeredTableName}}
|
||||
</a>
|
||||
</span>
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
<div>
|
||||
<mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="centerDatatable"></mifosx-multi-row>
|
||||
<mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="centerDatatable"></mifosx-single-row>
|
||||
<div class="tab-container mat-typography">
|
||||
<mifosx-entity-datatable-tab
|
||||
entityType="Center"
|
||||
[entityId]="entityId"
|
||||
[multiRowDatatableFlag]="multiRowDatatableFlag"
|
||||
[entityDatatable]="entityDatatable"
|
||||
>
|
||||
</mifosx-entity-datatable-tab>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component} from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
@@ -7,21 +7,23 @@ import { ActivatedRoute } from '@angular/router';
|
||||
styleUrls: ['./datatable-tab.component.scss']
|
||||
})
|
||||
export class DatatableTabComponent {
|
||||
entityId: string;
|
||||
/** Center Datatable */
|
||||
entityDatatable: any;
|
||||
/** Multi Row Datatable Flag */
|
||||
multiRowDatatableFlag: boolean;
|
||||
|
||||
/** 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.entityId = this.route.parent.parent.snapshot.paramMap.get('centerId');
|
||||
|
||||
/**
|
||||
* 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;
|
||||
});
|
||||
}
|
||||
this.route.data.subscribe((data: { centerDatatable: any }) => {
|
||||
this.entityDatatable = data.centerDatatable;
|
||||
this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
<div class="tab-container mat-typography">
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start">
|
||||
<div class="m-b-10">
|
||||
<h3>{{datatableName}}</h3>
|
||||
</div>
|
||||
<div class="action-button m-b-5" fxLayoutGap="10px">
|
||||
<span *mifosxHasPermission="'CREATE_' + datatableName">
|
||||
<button mat-raised-button color="primary" (click)="add()">
|
||||
<fa-icon icon="plus"></fa-icon> Add
|
||||
</button>
|
||||
</span>
|
||||
<span *mifosxHasPermission="'DELETE_' + datatableName">
|
||||
<button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
|
||||
<fa-icon icon="trash"></fa-icon> Delete All
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
|
||||
|
||||
<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,10 +0,0 @@
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
.action-button{
|
||||
margin-left: auto;
|
||||
}
|
||||
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,155 +0,0 @@
|
||||
/** 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/dialog';
|
||||
|
||||
/** 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';
|
||||
|
||||
/** Custom Services */
|
||||
import { CentersService } from '../../../centers.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';
|
||||
|
||||
/**
|
||||
* 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', { static: true }) dataTableRef: MatTable<Element>;
|
||||
|
||||
/**
|
||||
* Fetches center Id from parent route params.
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
* @param {Dates} dateUtils Date Utils.
|
||||
* @param {CentersService} centersService Centers Service.
|
||||
* @param {SettingsService} settingsService Settings Service.
|
||||
* @param {MatDialog} dialog Mat Dialog.
|
||||
* @param {Datatables} datatables Datatable utils
|
||||
*/
|
||||
constructor(private route: ActivatedRoute,
|
||||
private dateUtils: Dates,
|
||||
private centersService: CentersService,
|
||||
private settingsService: SettingsService,
|
||||
private dialog: MatDialog,
|
||||
private datatables: Datatables,
|
||||
private dateFormat: DateFormatPipe,
|
||||
private dateTimeFormat: DatetimeFormatPipe,
|
||||
private numberFormat: DecimalPipe) {
|
||||
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: this.settingsService.language.code };
|
||||
const dateTransformColumns: string[] = [];
|
||||
const columns = this.dataObject.columnHeaders.filter((column: any) => {
|
||||
return ((column.columnName !== 'id') && (column.columnName !== 'center_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) {
|
||||
dateTransformColumns.forEach((column) => {
|
||||
response.data.value[column] = this.dateUtils.formatDate(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();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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,11 +0,0 @@
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
.delete-button {
|
||||
margin-left: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
.tableName {
|
||||
padding-left: 2%;
|
||||
}
|
||||
@@ -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,149 +0,0 @@
|
||||
/** Angular Imports */
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
/** 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';
|
||||
|
||||
/** Custom Services */
|
||||
import { CentersService } from '../../../centers.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
import { Dates } from 'app/core/utils/dates';
|
||||
import { Datatables } from 'app/core/utils/datatables';
|
||||
|
||||
/**
|
||||
* 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 {Dates} dateUtils Date Utils.
|
||||
* @param {MatDialog} dialog Mat Dialog.
|
||||
* @param {SettingsService} settingsService Settings Service.
|
||||
* @param {CentersService} centersService Centers Service.
|
||||
* @param {Datatables} datatables Datatable utils
|
||||
*/
|
||||
constructor(private route: ActivatedRoute,
|
||||
private dateUtils: Dates,
|
||||
private dialog: MatDialog,
|
||||
private settingsService: SettingsService,
|
||||
private centersService: CentersService,
|
||||
private datatables: Datatables) {
|
||||
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: this.settingsService.language.code };
|
||||
const dateTransformColumns: string[] = [];
|
||||
const columns = this.dataObject.columnHeaders.filter((column: any) => {
|
||||
return ((column.columnName !== 'id') && (column.columnName !== 'center_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) {
|
||||
dateTransformColumns.forEach((column) => {
|
||||
response.data.value[column] = this.dateUtils.formatDate(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: this.settingsService.language.code };
|
||||
const dateTransformColumns: string[] = [];
|
||||
const columns = this.dataObject.columnHeaders.filter((column: any) => {
|
||||
return ((column.columnName !== 'id') && (column.columnName !== 'center_id'));
|
||||
});
|
||||
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,
|
||||
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.dateUtils.formatDate(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;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -14,8 +14,6 @@ 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';
|
||||
import { CenterActionsComponent } from './centers-view/center-actions/center-actions.component';
|
||||
import { ActivateCenterComponent } from './centers-view/center-actions/activate-center/activate-center.component';
|
||||
import { CenterAssignStaffComponent } from './centers-view/center-actions/center-assign-staff/center-assign-staff.component';
|
||||
@@ -47,8 +45,6 @@ import { EditCenterComponent } from './edit-center/edit-center.component';
|
||||
GeneralTabComponent,
|
||||
NotesTabComponent,
|
||||
DatatableTabComponent,
|
||||
MultiRowComponent,
|
||||
SingleRowComponent,
|
||||
CenterActionsComponent,
|
||||
ActivateCenterComponent,
|
||||
CenterAssignStaffComponent,
|
||||
|
||||
@@ -4,58 +4,58 @@
|
||||
|
||||
<form [formGroup]="editCenterForm" (ngSubmit)="submit()">
|
||||
|
||||
<mat-card-content>
|
||||
<mat-card-content>
|
||||
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="column">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput required formControlName="name">
|
||||
<mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
|
||||
Center Name is <strong>required</strong>
|
||||
</mat-error>
|
||||
<mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
|
||||
Center Name <strong>cannot</strong> begin with a special character or number
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput required formControlName="name">
|
||||
<mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
|
||||
Center Name is <strong>required</strong>
|
||||
</mat-error>
|
||||
<mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
|
||||
Center Name <strong>cannot</strong> begin with a special character or number
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Staff</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
<mat-option *ngFor="let staff of staffs" [value]="staff.id">
|
||||
{{ staff.displayName }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Staff</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
<mat-option *ngFor="let staff of staffs" [value]="staff.id">
|
||||
{{ staff.displayName }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>External id</mat-label>
|
||||
<input matInput formControlName="externalId">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>External id</mat-label>
|
||||
<input matInput formControlName="externalId">
|
||||
</mat-form-field>
|
||||
|
||||
<ng-container *ngIf="centerData.status.value=='Pending'" (click)="activatedOnDatePicker.open()">
|
||||
<mat-form-field>
|
||||
<mat-label>Activation date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
|
||||
formControlName="activationDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #activatedOnDatePicker></mat-datepicker>
|
||||
<mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
|
||||
Activation Date is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="centerData.status.value=='Pending'" (click)="activatedOnDatePicker.open()">
|
||||
<mat-form-field>
|
||||
<mat-label>Activation date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
|
||||
formControlName="activationDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #activatedOnDatePicker></mat-datepicker>
|
||||
<mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
|
||||
Activation Date is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
|
||||
<button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
|
||||
<button mat-raised-button color="accent" [disabled]="!editCenterForm.valid">Confirm</button>
|
||||
</mat-card-actions>
|
||||
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
|
||||
<button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!editCenterForm.valid">Confirm</button>
|
||||
</mat-card-actions>
|
||||
|
||||
</form>
|
||||
</form>
|
||||
|
||||
</mat-card>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user