feat: add groups view page (datatable-tabs) (#793)

Fixes: #776 Fixes: #777 Fixes: #791
2020-05-23 21:09:51 +05:30
parent b333291f08
commit 377c4891e4
23 changed files with 785 additions and 58 deletions
@@ -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 { GroupsService } from '../../../groups.service';
+
+/**
+ * Group 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;
+  /** Group Id */
+  groupId: string;
+  /** Toggle button visibility */
+  showDeleteBotton: boolean;
+
+  /** Data Table Reference */
+  @ViewChild('dataTable') dataTableRef: MatTable<Element>;
+
+  /**
+   * Fetches group Id from parent route params.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {GroupsService} groupsService Groups Service.
+   * @param {MatDialog} dialog Mat Dialog.
+   */
+  constructor(private route: ActivatedRoute,
+              private datePipe: DatePipe,
+              private groupsService: GroupsService,
+              private dialog: MatDialog) {
+    this.groupId = this.route.parent.parent.snapshot.paramMap.get('groupId');
+  }
+
+  /**
+   * 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 !== 'group_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.groupsService.addGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.groupsService.getGroupDatatable(this.groupId, 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.groupsService.deleteDatatableContent(this.groupId, this.datatableName).subscribe(() => {
+          this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
+            this.datatableData = dataObject.data;
+            this.showDeleteBotton = false;
+            this.dataTableRef.renderRows();
+           });
+        });
+      }
+    });
+  }
+
+}