Datatables enhacements to support products (#1641)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/organization/offices/common-resolvers/edit-office.resolver.ts

@@ -24,7 +24,7 @@ export class EditOfficeResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const officeId = route.paramMap.get('id');
+    const officeId = route.paramMap.get('officeId');
     return this.organizationService.getOffice(officeId, true);
   }
 

src/app/organization/offices/common-resolvers/office-datatable.resolver.ts

@@ -1,13 +1,11 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
 
-/** Custom Services */
-import { OrganizationService } from '../../organization.service';
-
 /**
  * Office Datatable data resolver.
  */
@@ -15,18 +13,18 @@ import { OrganizationService } from '../../organization.service';
 export class OfficeDatatableResolver implements Resolve<Object> {
 
   /**
-   * @param {OrganizationService} OrganizationService Organization service.
+   * @param {SystemService} systemService Products service.
    */
-  constructor(private organizationService: OrganizationService) { }
+  constructor(private systemService: SystemService) { }
 
   /**
    * Returns the Office's Datatable data.
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const officeId = route.parent.parent.paramMap.get('id');
+    const officeId = route.parent.parent.paramMap.get('officeId');
     const datatableName = route.paramMap.get('datatableName');
-    return this.organizationService.getOfficeDatatable(officeId, datatableName);
+    return this.systemService.getEntityDatatable(officeId, datatableName);
   }
 
 }

src/app/organization/offices/common-resolvers/office-datatables.resolver.ts

@@ -1,13 +1,11 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
 
-/** Custom Services */
-import { OrganizationService } from '../../organization.service';
-
 /**
  * Office Datatables data resolver.
  */
@@ -15,16 +13,16 @@ import { OrganizationService } from '../../organization.service';
 export class OfficeDatatablesResolver implements Resolve<Object> {
 
   /**
-   * @param {organizationService} OrganizationService Organization service.
+   * @param {SystemService} systemService Products service.
    */
-  constructor(private organizationService: OrganizationService) { }
+  constructor(private systemService: SystemService) { }
 
   /**
-   * Returns the Office's Datatables data.
+   * Returns the loan product data.
    * @returns {Observable<any>}
    */
-  resolve(): Observable<any> {
-    return this.organizationService.getOfficeDatatables();
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    return this.systemService.getEntityDatatables('m_office');
   }
 
 }

src/app/organization/offices/common-resolvers/office.resolver.ts

@@ -24,7 +24,7 @@ export class OfficeResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const officeId = route.paramMap.get('id');
+    const officeId = route.parent.paramMap.get('officeId');
     return this.organizationService.getOffice(officeId);
   }
 

src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.html

@@ -1,4 +1,9 @@
-<div>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="officeDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="officeDatatable"></mifosx-single-row>
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Office"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>

src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.ts

@@ -11,9 +11,9 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tabs.component.scss']
 })
 export class DatatableTabsComponent {
-
+  entityId: string;
   /** Office Datatable */
-  officeDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +22,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('officeId');
+
     this.route.data.subscribe((data: { officeDatatable: any }) => {
-      this.officeDatatable = data.officeDatatable;
-      this.multiRowDatatableFlag = this.officeDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.entityDatatable = data.officeDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 

src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.html

@@ -1,33 +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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>

src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.scss

@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}

src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.spec.ts

@@ -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();
-  });
-});

src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts

@@ -1,154 +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 'app/shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-import { OrganizationService } from '../../../../organization.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';
-
-/**
- * Office 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;
-  /** Office Id */
-  officeId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches office Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {OrganizationService} organizationService Organization Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private organizationService: OrganizationService,
-              private settingsService: SettingsService,
-              private dialog: MatDialog,
-              private datatables: Datatables,
-              private dateFormat: DateFormatPipe,
-              private dateTimeFormat: DatetimeFormatPipe,
-              private numberFormat: DecimalPipe) {
-    this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
-  }
-
-  /**
-   * 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 !== 'office_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.organizationService.addOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, 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.organizationService.deleteDatatableContent(this.officeId, this.datatableName).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, 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;
-  }
-
-}

src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.html

@@ -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>

src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.scss

@@ -1,7 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .delete-button {
-    margin-left: 1%;
-  }
-}

src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.spec.ts

@@ -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();
-  });
-});

src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.ts

@@ -1,148 +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 'app/shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-import { OrganizationService } from '../../../../organization.service';
-import { SettingsService } from 'app/settings/settings.service';
-import { Dates } from 'app/core/utils/dates';
-import { Datatables } from 'app/core/utils/datatables';
-
-/**
- * Offices 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;
-  /** Office Id */
-  officeId: string;
-
-  /**
-   * Fetches office Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {OrganizationService} organizationService Organization Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private dialog: MatDialog,
-              private organizationService: OrganizationService,
-              private settingsService: SettingsService,
-              private datatables: Datatables) {
-    this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
-  }
-
-  /**
-   * 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 !== 'office_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.organizationService.addOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, 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 !== 'office_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.organizationService.editOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, 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.organizationService.deleteDatatableContent(this.officeId, this.datatableName)
-          .subscribe(() => {
-            this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}

src/app/organization/offices/view-office/general-tab/general-tab.component.html

@@ -1,23 +1,42 @@
+
 <div class="tab-container mat-typography">
+  <div fxLayoutAlign="flex-end" class="action-button m-b-20">
+    <span *mifosxHasPermission="'UPDATE_OFFICE'">
+      <button mat-raised-button color="primary" [routerLink]="['edit']">
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+      </button>
+    </span>
+  </div>
 
-  <mat-list>
+  <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <mat-list-item>
-      Parent Office : {{ officeData.parentName ? officeData.parentName : 'N/A' }}
-    </mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
+      Parent Office
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.parentName ? officeData.parentName : 'N/A' }}
+    </div>
 
-    <mat-list-item>
-      Opened On : {{ officeData.openingDate ? (officeData.openingDate  | dateFormat) : 'Unassigned' }}
-    </mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
+      Opened On
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.openingDate ? (officeData.openingDate  | dateFormat) : 'Unassigned' }}
+    </div>
 
-    <mat-list-item>
-      Name Decorated : {{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
-    </mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
+      Name Decorated
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
+    </div>
 
-    <mat-list-item>
-      External Id : {{ officeData.externalId ? officeData.externalId : 'Unassigned' }}
-    </mat-list-item>
-    
-  </mat-list>
+    <div fxFlex="45%" class="mat-body-strong left">
+      External Id
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.externalId ? officeData.externalId : 'Unassigned' }}
+    </div>
+  </div>
 
 </div>

src/app/organization/offices/view-office/general-tab/general-tab.component.scss

@@ -1,4 +1,15 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+  .delete-button {
+      margin-left: 1%;
+  }
+}
+
+.table-name {
+  padding-left: 2%;
+}
+
+.table-data {
+  margin-top: 3px;
 }

src/app/organization/offices/view-office/general-tab/general-tab.component.ts

@@ -20,7 +20,7 @@ export class GeneralTabComponent {
    * @param {ActivatedRoute} route Activated Route
    */
   constructor(private route: ActivatedRoute) {
-    this.route.parent.data.subscribe((data: { office: any }) => {
+    this.route.data.subscribe((data: { office: any }) => {
       this.officeData = data.office;
     });
   }

src/app/organization/offices/view-office/view-office.component.html

@@ -1,13 +1,5 @@
 <div class="container">
 
-  <div fxLayoutAlign="flex-end" class="action-button m-b-20">
-    <span *mifosxHasPermission="'UPDATE_OFFICE'">
-      <button mat-raised-button color="primary" [routerLink]="['edit']">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit Office
-      </button>
-    </span>
-  </div>
-
   <mat-card class="office-card">
 
     <mat-card-content>

src/app/organization/organization-routing.module.ts

@@ -175,38 +175,38 @@ const routes: Routes = [
               }
             },
             {
-              path: ':id',
-              data: { title: extract('View Office'), routeResolveBreadcrumb: ['office', 'name'] },
+              path: ':officeId',
+              data: { title: extract('View Office'), breadcrumb: 'officeId', routeParamBreadcrumb: 'officeId' },
               component: ViewOfficeComponent,
               resolve: {
                  officeDatatables: OfficeDatatablesResolver,
-                 office: OfficeResolver
               },
               children: [
+                {
+                  path: '',
+                  redirectTo: 'general',
+                  pathMatch: 'full'
+                },
                 {
                   path: 'general',
                   component: GeneralTabComponent,
-                  data: { title: extract('General') },
+                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  resolve: {
+                    office: OfficeResolver
+                  }
                 },
                 {
                   path: 'datatables',
-                  children: [
-                    {
+                  children: [{
                       path: ':datatableName',
                       component: DatatableTabsComponent,
-                      data: { title: extract('View Data Table') },
+                      data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
                       resolve: {
                         officeDatatable: OfficeDatatableResolver
                       }
                     }
                   ]
-                }
-              ]
-            },
-            {
-              path: ':id',
-              data: { title: extract('View Office'), routeParamBreadcrumb: 'id' },
-              children: [
+                },
                 {
                   path: 'edit',
                   component: EditOfficeComponent,
@@ -217,7 +217,6 @@ const routes: Routes = [
                 }
               ]
             }
-
           ]
         },
         {

src/app/organization/organization.module.ts

@@ -39,8 +39,6 @@ import { ViewHolidaysComponent } from './holidays/view-holidays/view-holidays.co
 import { ViewOfficeComponent } from './offices/view-office/view-office.component';
 import { GeneralTabComponent } from './offices/view-office/general-tab/general-tab.component';
 import { DatatableTabsComponent } from './offices/view-office/datatable-tabs/datatable-tabs.component';
-import { SingleRowComponent } from './offices/view-office/datatable-tabs/single-row/single-row.component';
-import { MultiRowComponent } from './offices/view-office/datatable-tabs/multi-row/multi-row.component';
 import { ViewCampaignComponent } from './sms-campaigns/view-campaign/view-campaign.component';
 import { ManageFundsComponent } from './manage-funds/manage-funds.component';
 import { ManageCurrenciesComponent } from './currencies/manage-currencies/manage-currencies.component';
@@ -122,8 +120,6 @@ import { CreateHoliday } from './holidays/create-holiday/create-holiday.service'
     ViewOfficeComponent,
     GeneralTabComponent,
     DatatableTabsComponent,
-    SingleRowComponent,
-    MultiRowComponent,
     ViewCampaignComponent,
     ManageFundsComponent,
     ManageCurrenciesComponent,