feat: add centers view page (general tab) (#782)

Fixes: #218

src/app/centers/centers-view/general-tab/general-tab.component.html

@@ -0,0 +1,140 @@
+<div class="tab-container mat-typography">
+  <div *ngIf="centerViewData.status.value=='Closed'">
+    <h3 class="closedCenter">Center Closed</h3>
+  </div>
+  <h3>Summary Details</h3>
+  <div fxLayout="row" fxLayoutGap="32px" class="summary-details-container">
+    <p>
+      Active Clients: {{centerSummaryData.activeClients}}<br />
+      Active Group Loans: {{centerSummaryData.activeGroupLoans}}<br />
+      Active Client Loans: {{centerSummaryData.activeClientLoans}}<br />
+      Active Overdue Group Loans: {{centerSummaryData.overdueGroupLoans}}<br />
+    </p>
+    <p>
+      Active Group Borrowers: {{centerSummaryData.activeGroupBorrowers}}<br />
+      Active Client Borrowers: {{centerSummaryData.activeClientBorrowers}}<br />
+      Active Overdue Client Loans: {{centerSummaryData.overdueClientLoans}}<br />
+    </p>
+  </div>
+
+  <!-- Groups -->
+  <ng-container *ngIf="groupResourceData.length > 0">
+    <h3>Groups</h3>
+
+    <table mat-table [dataSource]="groupResourceData" matSort>
+  
+      <ng-container matColumnDef="Account No">
+        <th mat-header-cell *matHeaderCellDef> Account Number </th>
+        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
+            [ngClass]="element.status.code|statusLookup"></i>
+          {{element.accountNo}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Group Name">
+        <th mat-header-cell *matHeaderCellDef> Group Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Office Name">
+        <th mat-header-cell *matHeaderCellDef> Office Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.officeName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Submitted On">
+        <th mat-header-cell *matHeaderCellDef> Submitted On </th>
+        <td mat-cell *matCellDef="let element"> {{element.timeline.submittedOnDate|date}} </td>
+      </ng-container>
+  
+      <tr mat-header-row *matHeaderRowDef="groupsColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: groupsColumns;"></tr>
+  
+    </table>
+  </ng-container>
+  
+  <!-- savings overview table -->
+  <ng-container *ngIf="!(savingsAccountData === undefined)">
+
+    <ng-container *ngIf="savingsAccountData.length > 0">
+
+      <h3>Savings Account Overview</h3>
+  
+      <table mat-table [dataSource]="savingsAccountData" matSort>
+  
+        <ng-container matColumnDef="Account No">
+          <th mat-header-cell *matHeaderCellDef> Account No </th>
+          <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
+              [ngClass]="element.status.code|statusLookup"></i>
+            {{element.accountNo}} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="Products">
+          <th mat-header-cell *matHeaderCellDef> Products </th>
+          <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Balance">
+          <th mat-header-cell *matHeaderCellDef> Balance</th>
+          <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Actions">
+  
+          <th mat-header-cell *matHeaderCellDef> Actions </th>
+  
+          <td mat-cell *matCellDef="let element">
+  
+            <ng-container *ngIf="element.status.active">
+  
+              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '100'">
+                <i class="fa fa-arrow-right" matTooltip="Deposit"></i>
+              </button>
+  
+              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '300'">
+                <i class="fa fa-arrow-right" matTooltip[="Deposit"]></i>
+              </button>
+  
+              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '100'">
+                <i class="fa fa-arrow-left" matTooltip="Withdraw"></i>
+              </button>
+  
+              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '300'">
+                <i class="fa fa-arrow-left" matTooltip="Withdraw"></i>
+              </button>
+  
+            </ng-container>
+  
+            <ng-container *ngIf="element.status.submittedAndPendingApproval">
+  
+              <button class="account-action-button" mat-raised-button color="primary">
+                <i class="fa fa-check" matTooltip="Approve"></i>
+              </button>
+  
+            </ng-container>
+  
+            <ng-container *ngIf="!element.status.submittedAndPendingApproval && !element.status.active">
+              
+              <button class="account-action-button" mat-raised-button color="primary">
+                <i class="fa fa-undo" matTooltip="Undo Approve"></i>
+              </button>
+              
+              <button class="account-action-button" mat-raised-button color="primary">
+                <i class="fa fa-power-off" matTooltip="Activate"></i>
+  
+              </button>
+  
+            </ng-container>
+  
+          </td>
+  
+        </ng-container>
+    
+        <tr mat-header-row *matHeaderRowDef="savingsAccountColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: savingsAccountColumns;"></tr>
+      </table>
+  
+    </ng-container>
+
+  </ng-container>
+  
+
+</div>

src/app/centers/centers-view/general-tab/general-tab.component.scss

@@ -0,0 +1,28 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  h3{
+    margin:1% auto;
+  }
+  .summary-details-container {
+    border: 1px solid;
+    padding: 1%;
+  }
+
+  table {
+    width: 100%;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 6px;
+      margin: 4px;
+      line-height: 25px;
+    }
+  }
+}
+
+.closedCenter {
+  text-align: center;
+  color: red;
+  font-size: 2rem;
+}

src/app/centers/centers-view/general-tab/general-tab.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralTabComponent } from './general-tab.component';
+
+describe('GeneralTabComponent', () => {
+  let component: GeneralTabComponent;
+  let fixture: ComponentFixture<GeneralTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeneralTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeneralTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/centers/centers-view/general-tab/general-tab.component.ts

@@ -0,0 +1,48 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * Create Center General Tab Component
+ */
+@Component({
+  selector: 'mifosx-general-tab',
+  templateUrl: './general-tab.component.html',
+  styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent implements OnInit {
+
+  /** Savings Account Table Columns */
+  savingsAccountColumns: string[] = ['Account No', 'Products', 'Balance', 'Actions'];
+  /** Groups Table Columns */
+  groupsColumns: string[] = ['Account No', 'Group Name', 'Office Name', 'Submitted On'];
+  /** Stores the summary of center */
+  centerSummaryData: any;
+  /** Stores Center Data for particular center */
+  centerViewData: any;
+  /** Stores Saving Account for particular center */
+  savingsAccountData: any;
+  /** Stores Group Data */
+  groupResourceData: any;
+
+  /**
+   * Retrieves the data for centers
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: {
+      centerSummaryData: any,
+      centerViewData: any,
+      savingsAccountData: any
+    }) => {
+      this.centerSummaryData = data.centerSummaryData[0];
+      this.centerViewData = data.centerViewData;
+      this.savingsAccountData = data.savingsAccountData.savingsAccounts;
+      this.groupResourceData = data.centerViewData.groupMembers;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+}