From e2707a1d0aa0cd8a79268f037545a9eaaa57270a Mon Sep 17 00:00:00 2001 From: punwai Date: Sun, 24 May 2020 23:58:47 +0700 Subject: [PATCH] feat: add navigation component (#590) Fixes: #256 --- .../center-navigation.component.html | 121 +++++++++++ .../center-navigation.component.scss | 14 ++ .../center-navigation.component.spec.ts | 25 +++ .../center-navigation.component.ts | 29 +++ .../client-navigation.component.html | 115 ++++++++++ .../client-navigation.component.scss | 14 ++ .../client-navigation.component.spec.ts | 25 +++ .../client-navigation.component.ts | 30 +++ .../group-navigation.component.html | 87 ++++++++ .../group-navigation.component.scss | 14 ++ .../group-navigation.component.spec.ts | 25 +++ .../group-navigation.component.ts | 28 +++ .../loan-account-table.component.html | 44 ++++ .../loan-account-table.component.scss | 0 .../loan-account-table.component.spec.ts | 25 +++ .../loan-account-table.component.ts | 65 ++++++ .../member-groups.component.html | 25 +++ .../member-groups.component.scss | 0 .../member-groups.component.spec.ts | 25 +++ .../member-groups/member-groups.component.ts | 41 ++++ .../navigation/navigation-routing.module.ts | 12 +- src/app/navigation/navigation.component.html | 91 +++++++- src/app/navigation/navigation.component.ts | 203 +++++++++++++++++- src/app/navigation/navigation.module.ts | 22 +- src/app/navigation/navigation.service.ts | 112 ++++++++++ .../office-navigation.component.html | 47 ++++ .../office-navigation.component.scss | 14 ++ .../office-navigation.component.spec.ts | 25 +++ .../office-navigation.component.ts | 20 ++ src/app/navigation/offices.resolver.ts | 30 +++ .../savings-account-table.component.html | 42 ++++ .../savings-account-table.component.scss | 0 .../savings-account-table.component.spec.ts | 25 +++ .../savings-account-table.component.ts | 65 ++++++ .../share-account-table.component.html | 44 ++++ .../share-account-table.component.scss | 0 .../share-account-table.component.spec.ts | 25 +++ .../share-account-table.component.ts | 65 ++++++ .../staff-navigation.component.html | 58 +++++ .../staff-navigation.component.scss | 22 ++ .../staff-navigation.component.spec.ts | 25 +++ .../staff-navigation.component.ts | 19 ++ src/app/pipes/status-lookup.pipe.ts | 4 + 43 files changed, 1713 insertions(+), 9 deletions(-) create mode 100644 src/app/navigation/center-navigation/center-navigation.component.html create mode 100644 src/app/navigation/center-navigation/center-navigation.component.scss create mode 100644 src/app/navigation/center-navigation/center-navigation.component.spec.ts create mode 100644 src/app/navigation/center-navigation/center-navigation.component.ts create mode 100644 src/app/navigation/client-navigation/client-navigation.component.html create mode 100644 src/app/navigation/client-navigation/client-navigation.component.scss create mode 100644 src/app/navigation/client-navigation/client-navigation.component.spec.ts create mode 100644 src/app/navigation/client-navigation/client-navigation.component.ts create mode 100644 src/app/navigation/group-navigation/group-navigation.component.html create mode 100644 src/app/navigation/group-navigation/group-navigation.component.scss create mode 100644 src/app/navigation/group-navigation/group-navigation.component.spec.ts create mode 100644 src/app/navigation/group-navigation/group-navigation.component.ts create mode 100644 src/app/navigation/loan-account-table/loan-account-table.component.html create mode 100644 src/app/navigation/loan-account-table/loan-account-table.component.scss create mode 100644 src/app/navigation/loan-account-table/loan-account-table.component.spec.ts create mode 100644 src/app/navigation/loan-account-table/loan-account-table.component.ts create mode 100644 src/app/navigation/member-groups/member-groups.component.html create mode 100644 src/app/navigation/member-groups/member-groups.component.scss create mode 100644 src/app/navigation/member-groups/member-groups.component.spec.ts create mode 100644 src/app/navigation/member-groups/member-groups.component.ts create mode 100644 src/app/navigation/navigation.service.ts create mode 100644 src/app/navigation/office-navigation/office-navigation.component.html create mode 100644 src/app/navigation/office-navigation/office-navigation.component.scss create mode 100644 src/app/navigation/office-navigation/office-navigation.component.spec.ts create mode 100644 src/app/navigation/office-navigation/office-navigation.component.ts create mode 100644 src/app/navigation/offices.resolver.ts create mode 100644 src/app/navigation/savings-account-table/savings-account-table.component.html create mode 100644 src/app/navigation/savings-account-table/savings-account-table.component.scss create mode 100644 src/app/navigation/savings-account-table/savings-account-table.component.spec.ts create mode 100644 src/app/navigation/savings-account-table/savings-account-table.component.ts create mode 100644 src/app/navigation/share-account-table/share-account-table.component.html create mode 100644 src/app/navigation/share-account-table/share-account-table.component.scss create mode 100644 src/app/navigation/share-account-table/share-account-table.component.spec.ts create mode 100644 src/app/navigation/share-account-table/share-account-table.component.ts create mode 100644 src/app/navigation/staff-navigation/staff-navigation.component.html create mode 100644 src/app/navigation/staff-navigation/staff-navigation.component.scss create mode 100644 src/app/navigation/staff-navigation/staff-navigation.component.spec.ts create mode 100644 src/app/navigation/staff-navigation/staff-navigation.component.ts diff --git a/src/app/navigation/center-navigation/center-navigation.component.html b/src/app/navigation/center-navigation/center-navigation.component.html new file mode 100644 index 000000000..fbff26ac5 --- /dev/null +++ b/src/app/navigation/center-navigation/center-navigation.component.html @@ -0,0 +1,121 @@ + + + +
+ +

+ {{ centerData.name }} + + + +

+ + +

+ Account No: {{ centerData.accountNo }} | {{ centerData.externalId ? '| External ID: ' + centerData.externalId : '' }} +

+ +
+ + + + + + + +
+ +
+ Activation Date +
+ +
+ {{ centerData.activationDate | date }} +
+ +
+ Associated Officer +
+ +
+ {{ centerData.staffName }} +
+ +
+ Number of Active Clients +
+ +
+ {{ centerSummaryData.activeClients }} +
+ +
+ Number of Active Client Loans +
+ +
+ {{ centerSummaryData.activeClientLoans }} +
+ +
+ Number of Active Client Borrowers +
+ +
+ {{ centerSummaryData.activeClientBorrowers }} +
+ +
+ Number of Active Overdue Group Loans +
+ +
+ {{ centerSummaryData.overdueGroupLoans }} +
+ +
+ Number of Active Overdue Client Loans +
+ +
+ {{ centerSummaryData.overdueClientLoans }} +
+ +
+ Next Meeting Date +
+ +
+ {{ centerSummaryData.collectionMeetingCalendar.nextTenRecurringDates[0] | date }} +
+ +
+ Meeting Frequency +
+ +
+ {{ centerSummaryData.collectionMeetingCalendar.humanReadable }} +
+ +
+ Number of Groups +
+ +
+ {{ groupData ? groupData.length : '' }} +
+ +
+ + + + + + + + + + + + + diff --git a/src/app/navigation/center-navigation/center-navigation.component.scss b/src/app/navigation/center-navigation/center-navigation.component.scss new file mode 100644 index 000000000..1835f28ad --- /dev/null +++ b/src/app/navigation/center-navigation/center-navigation.component.scss @@ -0,0 +1,14 @@ +.main-icon { + margin: 7px 0 0 0; +} + +h2 { + font-weight: 500; +} + +.content { + div { + margin: 1rem 0; + word-wrap: break-word; + } +} diff --git a/src/app/navigation/center-navigation/center-navigation.component.spec.ts b/src/app/navigation/center-navigation/center-navigation.component.spec.ts new file mode 100644 index 000000000..1b3583c05 --- /dev/null +++ b/src/app/navigation/center-navigation/center-navigation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CenterNavigationComponent } from './center-navigation.component'; + +describe('CenterNavigationComponent', () => { + let component: CenterNavigationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CenterNavigationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CenterNavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/center-navigation/center-navigation.component.ts b/src/app/navigation/center-navigation/center-navigation.component.ts new file mode 100644 index 000000000..2301dac64 --- /dev/null +++ b/src/app/navigation/center-navigation/center-navigation.component.ts @@ -0,0 +1,29 @@ +/** Angular Imports */ +import { Component, OnInit, Input, ViewChild } from '@angular/core'; + +/** Custom Components */ +import { LoanAccountTableComponent } from '../loan-account-table/loan-account-table.component'; +import { SavingsAccountTableComponent } from '../savings-account-table/savings-account-table.component'; + + +@Component({ + selector: 'mifosx-center-navigation', + templateUrl: './center-navigation.component.html', + styleUrls: ['./center-navigation.component.scss'] +}) +export class CenterNavigationComponent implements OnInit { + + @ViewChild(LoanAccountTableComponent) loanAccountTableComponent: LoanAccountTableComponent; + @ViewChild(SavingsAccountTableComponent) savingsAccountTableComponent: SavingsAccountTableComponent; + + @Input() centerData: any; + @Input() centerAccountsData: any; + @Input() centerSummaryData: any; + @Input() groupData: any; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/navigation/client-navigation/client-navigation.component.html b/src/app/navigation/client-navigation/client-navigation.component.html new file mode 100644 index 000000000..8118434c4 --- /dev/null +++ b/src/app/navigation/client-navigation/client-navigation.component.html @@ -0,0 +1,115 @@ + + + +
+ +

+ {{ clientData.displayName }} + + + +

+ + +

+ Account No: {{ clientData.accountNo }} {{ clientData.externalId ? '| External ID: ' + clientData.externalId : '' }} +

+ +
+ + + + + + + + +
+ +
+ First Name +
+ +
+ {{ clientData.firstName }} +
+ +
+ Middle Name +
+ +
+ {{ clientData.middleName }} +
+ +
+ Last Name +
+ +
+ {{ clientData.lastName }} +
+ +
+ Date of Birth +
+ +
+ {{ clientData.dateOfBirth | date }} +
+ +
+ Mobile Number +
+ +
+ {{ clientData.mobileNo }} +
+ +
+ Activation Date +
+ +
+ {{ clientData.activationDate | date }} +
+ +
+ Associated Office +
+ +
+ {{ clientData.officeName }} +
+ +
+ Associated Staff +
+ +
+ {{ clientData.staffName }} +
+ +
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/navigation/client-navigation/client-navigation.component.scss b/src/app/navigation/client-navigation/client-navigation.component.scss new file mode 100644 index 000000000..1835f28ad --- /dev/null +++ b/src/app/navigation/client-navigation/client-navigation.component.scss @@ -0,0 +1,14 @@ +.main-icon { + margin: 7px 0 0 0; +} + +h2 { + font-weight: 500; +} + +.content { + div { + margin: 1rem 0; + word-wrap: break-word; + } +} diff --git a/src/app/navigation/client-navigation/client-navigation.component.spec.ts b/src/app/navigation/client-navigation/client-navigation.component.spec.ts new file mode 100644 index 000000000..f5e0f9582 --- /dev/null +++ b/src/app/navigation/client-navigation/client-navigation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ClientNavigationComponent } from './client-navigation.component'; + +describe('ClientNavigationComponent', () => { + let component: ClientNavigationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ClientNavigationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ClientNavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/client-navigation/client-navigation.component.ts b/src/app/navigation/client-navigation/client-navigation.component.ts new file mode 100644 index 000000000..67e79d262 --- /dev/null +++ b/src/app/navigation/client-navigation/client-navigation.component.ts @@ -0,0 +1,30 @@ +/** Angular Imports */ +import { Component, OnInit, Input, ViewChild } from '@angular/core'; + +/** Custom Components */ +import { LoanAccountTableComponent } from '../loan-account-table/loan-account-table.component'; +import { SavingsAccountTableComponent } from '../savings-account-table/savings-account-table.component'; +import { ShareAccountTableComponent } from '../share-account-table/share-account-table.component'; +import { MemberGroupsComponent } from '../member-groups/member-groups.component'; + +@Component({ + selector: 'mifosx-client-navigation', + templateUrl: './client-navigation.component.html', + styleUrls: ['./client-navigation.component.scss'] +}) +export class ClientNavigationComponent implements OnInit { + + @ViewChild(LoanAccountTableComponent) loanAccountTableComponent: LoanAccountTableComponent; + @ViewChild(SavingsAccountTableComponent) savingsAccountTableComponent: SavingsAccountTableComponent; + @ViewChild(ShareAccountTableComponent) shareAccountTableComponent: ShareAccountTableComponent; + @ViewChild(MemberGroupsComponent) memberGroupsComponent: MemberGroupsComponent; + + @Input() clientData: any; + @Input() clientAccountsData: any; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/navigation/group-navigation/group-navigation.component.html b/src/app/navigation/group-navigation/group-navigation.component.html new file mode 100644 index 000000000..5b5a75265 --- /dev/null +++ b/src/app/navigation/group-navigation/group-navigation.component.html @@ -0,0 +1,87 @@ + + + +
+ +

+ {{ groupData.name }} + + + +

+ + +

+ Account No: {{ groupData.accountNo }} {{ groupData.externalId ? '| External ID: ' + groupData.externalId : '' }} +

+ +
+ + + + + + +
+ +
+ Activation Date +
+ +
+ {{ groupData.activationDate | date }} +
+ +
+ Associated Officer +
+ +
+ {{ groupData.staffName }} +
+ +
+ Associated Center +
+ +
+ {{ groupData.centerName }} +
+ +
+ Next Meeting Date +
+ +
+ {{ groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | date }} +
+ +
+ Meeting Frequency +
+ +
+ {{ groupData.collectionMeetingCalendar.humanReadable }} +
+ +
+ Number of Clients +
+ +
+ {{ clientData ? clientData.length : '' }} +
+ +
+ + + + + + + + + + + + diff --git a/src/app/navigation/group-navigation/group-navigation.component.scss b/src/app/navigation/group-navigation/group-navigation.component.scss new file mode 100644 index 000000000..1835f28ad --- /dev/null +++ b/src/app/navigation/group-navigation/group-navigation.component.scss @@ -0,0 +1,14 @@ +.main-icon { + margin: 7px 0 0 0; +} + +h2 { + font-weight: 500; +} + +.content { + div { + margin: 1rem 0; + word-wrap: break-word; + } +} diff --git a/src/app/navigation/group-navigation/group-navigation.component.spec.ts b/src/app/navigation/group-navigation/group-navigation.component.spec.ts new file mode 100644 index 000000000..b90114729 --- /dev/null +++ b/src/app/navigation/group-navigation/group-navigation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GroupNavigationComponent } from './group-navigation.component'; + +describe('GroupNavigationComponent', () => { + let component: GroupNavigationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GroupNavigationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GroupNavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/group-navigation/group-navigation.component.ts b/src/app/navigation/group-navigation/group-navigation.component.ts new file mode 100644 index 000000000..3863ab7f9 --- /dev/null +++ b/src/app/navigation/group-navigation/group-navigation.component.ts @@ -0,0 +1,28 @@ +/** Angular Imports */ +import { Component, OnInit, Input, ViewChild } from '@angular/core'; + +/** Custom Components */ +import { LoanAccountTableComponent } from '../loan-account-table/loan-account-table.component'; +import { SavingsAccountTableComponent } from '../savings-account-table/savings-account-table.component'; + + +@Component({ + selector: 'mifosx-group-navigation', + templateUrl: './group-navigation.component.html', + styleUrls: ['./group-navigation.component.scss'] +}) +export class GroupNavigationComponent implements OnInit { + + @ViewChild(LoanAccountTableComponent) loanAccountTableComponent: LoanAccountTableComponent; + @ViewChild(SavingsAccountTableComponent) savingsAccountTableComponent: SavingsAccountTableComponent; + + @Input() groupData: any; + @Input() groupAccountsData: any; + @Input() clientData: any; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/navigation/loan-account-table/loan-account-table.component.html b/src/app/navigation/loan-account-table/loan-account-table.component.html new file mode 100644 index 000000000..d325c2575 --- /dev/null +++ b/src/app/navigation/loan-account-table/loan-account-table.component.html @@ -0,0 +1,44 @@ +
+ + Filter + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Account Number {{ loanAccount.accountNo }} Loan Account {{ loanAccount.productName }} Type + + Status + + + +
+ + diff --git a/src/app/navigation/loan-account-table/loan-account-table.component.scss b/src/app/navigation/loan-account-table/loan-account-table.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/navigation/loan-account-table/loan-account-table.component.spec.ts b/src/app/navigation/loan-account-table/loan-account-table.component.spec.ts new file mode 100644 index 000000000..9f73da835 --- /dev/null +++ b/src/app/navigation/loan-account-table/loan-account-table.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoanAccountTableComponent } from './loan-account-table.component'; + +describe('LoanAccountTableComponent', () => { + let component: LoanAccountTableComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LoanAccountTableComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LoanAccountTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/loan-account-table/loan-account-table.component.ts b/src/app/navigation/loan-account-table/loan-account-table.component.ts new file mode 100644 index 000000000..baaa4897f --- /dev/null +++ b/src/app/navigation/loan-account-table/loan-account-table.component.ts @@ -0,0 +1,65 @@ +/** Angular Imports */ +import { Component, OnInit, Input, ViewChild } from '@angular/core'; +import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material'; + +/** Custom Pipes */ +import { AccountsFilterPipe } from '../../pipes/accounts-filter.pipe'; + +@Component({ + selector: 'mifosx-loan-account-table', + templateUrl: './loan-account-table.component.html', + styleUrls: ['./loan-account-table.component.scss'] +}) +export class LoanAccountTableComponent implements OnInit { + + /** Columns to be displayed in the loan accounts table. */ + displayedColumns: string[] = ['accountNo', 'productName', 'Type', 'Status']; + /** Show closed loan accounts */ + showClosed = false; + /** Data source for loan account table. */ + dataSource: MatTableDataSource; + /** Loan Account Data */ + accountData: any; + + /** Paginator for loan accounts table. */ + @ViewChild(MatPaginator) paginator: MatPaginator; + /** Sorter for loan accounts table. */ + @ViewChild(MatSort) sort: MatSort; + + /** Loan Account Setter */ + @Input() set loanAccountData(data: any) { + this.accountData = data; + const filteredAccountData = this.accountsFilterPipe.transform(data, 'loan', this.showClosed ? 'closed' : 'open'); + this.dataSource = new MatTableDataSource(filteredAccountData); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + } + + /** + * @param {AccountsFilterPipe} accountsFilterPipe Accounts Filter Pipe. + */ + constructor(private accountsFilterPipe: AccountsFilterPipe) { } + + /** + * Filters data in users table based on passed value. + * @param {string} filterValue Value to filter data. + */ + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + } + + ngOnInit() { + } + + /** + * Toggles the loan status + */ + toggleClosed() { + this.showClosed = !this.showClosed; + const filteredAccountData = this.accountsFilterPipe.transform(this.accountData, 'loan', this.showClosed ? 'closed' : 'open'); + this.dataSource = new MatTableDataSource(filteredAccountData); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + } + +} diff --git a/src/app/navigation/member-groups/member-groups.component.html b/src/app/navigation/member-groups/member-groups.component.html new file mode 100644 index 000000000..3adbaee80 --- /dev/null +++ b/src/app/navigation/member-groups/member-groups.component.html @@ -0,0 +1,25 @@ +
+ + Filter + + +
+ + + + + + + + + + + + + + + + +
Account Number {{ memberGroup.accountNo }} Group Name {{ memberGroup.name }}
+ + diff --git a/src/app/navigation/member-groups/member-groups.component.scss b/src/app/navigation/member-groups/member-groups.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/navigation/member-groups/member-groups.component.spec.ts b/src/app/navigation/member-groups/member-groups.component.spec.ts new file mode 100644 index 000000000..906715ff7 --- /dev/null +++ b/src/app/navigation/member-groups/member-groups.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MemberGroupsComponent } from './member-groups.component'; + +describe('MemberGroupsComponent', () => { + let component: MemberGroupsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MemberGroupsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MemberGroupsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/member-groups/member-groups.component.ts b/src/app/navigation/member-groups/member-groups.component.ts new file mode 100644 index 000000000..e5913b8c5 --- /dev/null +++ b/src/app/navigation/member-groups/member-groups.component.ts @@ -0,0 +1,41 @@ +/** Angular Imports */ +import { Component, OnInit, Input, ViewChild } from '@angular/core'; +import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material'; + +@Component({ + selector: 'mifosx-member-groups', + templateUrl: './member-groups.component.html', + styleUrls: ['./member-groups.component.scss'] +}) +export class MemberGroupsComponent implements OnInit { + + /** Columns to be displayed in the member groups table. */ + displayedColumns: string[] = ['accountNo', 'name']; + /** Data source for member groups table. */ + dataSource: MatTableDataSource; + + /** Paginator for member groups table. */ + @ViewChild(MatPaginator) paginator: MatPaginator; + /** Sorter for member groups table. */ + @ViewChild(MatSort) sort: MatSort; + + /** Member Group Data Setter */ + @Input() set memberGroupData(data: any) { + this.dataSource = new MatTableDataSource(data); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + } + + constructor() { } + + /** + * Filters data in member groups table based on passed value. + * @param {string} filterValue Value to filter data. + */ + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + } + + ngOnInit() { } + +} diff --git a/src/app/navigation/navigation-routing.module.ts b/src/app/navigation/navigation-routing.module.ts index 40cf1f2ec..f2c606591 100644 --- a/src/app/navigation/navigation-routing.module.ts +++ b/src/app/navigation/navigation-routing.module.ts @@ -11,13 +11,19 @@ import { extract } from '../core/i18n/i18n.service'; /** Custom Components */ import { NavigationComponent } from './navigation.component'; +/** Custom Resolvers */ +import { OfficesResolver } from './offices.resolver'; + /** Navigation Routes */ const routes: Routes = [ Route.withShell([ { path: 'navigation', component: NavigationComponent, - data: { title: extract('Navigation'), breadcrumb: 'Navigation' } + data: { title: extract('Navigation'), breadcrumb: 'Navigation' }, + resolve: { + offices: OfficesResolver + } } ]) ]; @@ -30,6 +36,8 @@ const routes: Routes = [ @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], - providers: [] + providers: [ + OfficesResolver + ] }) export class NavigationRoutingModule { } diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html index a73eb0ffe..f5da2eb67 100644 --- a/src/app/navigation/navigation.component.html +++ b/src/app/navigation/navigation.component.html @@ -1,7 +1,92 @@
-

- TODO: navigation component. -

+
+ +
+ + + + + + + Office + + + {{ office.name }} + + + + + + {{ employeeData.length ? 'Officer' : 'No Associated Officers' }} + + + {{ employee.displayName }} + + + + + + {{ centerData.length ? 'Center' : 'No Associated Centers' }} + + + {{ center.name }} + + + + + + {{ groupData.length ? 'Group' : 'No Associated Groups' }} + + + {{ group.name }} + + + + + + {{ clientData.length ? 'Client' : 'No Associated Clients' }} + + + {{ client.displayName }} + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts index 85a5f478c..5402d246b 100644 --- a/src/app/navigation/navigation.component.ts +++ b/src/app/navigation/navigation.component.ts @@ -1,8 +1,20 @@ /** Angular Imports */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; +import { FormControl } from '@angular/forms'; + +/** Custom Services */ +import { NavigationService } from './navigation.service'; + +/** Custom Components */ +import { OfficeNavigationComponent } from './office-navigation/office-navigation.component'; +import { StaffNavigationComponent } from './staff-navigation/staff-navigation.component'; +import { CenterNavigationComponent } from './center-navigation/center-navigation.component'; +import { GroupNavigationComponent } from './group-navigation/group-navigation.component'; +import { ClientNavigationComponent } from './client-navigation/client-navigation.component'; /** - * Navigation component. (by office) + * Navigation component. */ @Component({ selector: 'mifosx-navigation', @@ -11,9 +23,194 @@ import { Component, OnInit } from '@angular/core'; }) export class NavigationComponent implements OnInit { - constructor() { } + /** Navigation Components */ + @ViewChild(OfficeNavigationComponent) officeNavigationComponent: OfficeNavigationComponent; + @ViewChild(StaffNavigationComponent) staffNavigationComponent: StaffNavigationComponent; + @ViewChild(CenterNavigationComponent) centerNavigationComponent: CenterNavigationComponent; + @ViewChild(GroupNavigationComponent) groupNavigationComponent: GroupNavigationComponent; + @ViewChild(ClientNavigationComponent) clientNavigationComponent: ClientNavigationComponent; + /** Office data */ + officeData: any; + /** Employee data */ + employeeData: any; + /** Center data */ + centerData: any; + /** Group data */ + groupData: any; + /** Client data */ + clientData: any; + + /** Office selector */ + officeSelector = new FormControl(); + /** Employee selector */ + employeeSelector = new FormControl(); + /** Center selector */ + centerSelector = new FormControl(); + /** Group selector */ + groupSelector = new FormControl(); + /** Client selector */ + clientSelector = new FormControl(); + + /** Selected Item */ + selectedItem: any; + /** Selected Item Accounts */ + selectedItemAccounts: any; + /** Selected Item Summary */ + selectedItemSummary: any; + + /** + * Retrieves the offices data from `resolve`. + * @param {FormBuilder} formBuilder Form Builder. + * @param {NavigationService} navigationService Navigation Service. + * @param {ActivatedRoute} route Activated Route. + * @param {Router} router Router for navigation. + */ + constructor(private navigationService: NavigationService, + private route: ActivatedRoute, + private router: Router) { + this.route.data.subscribe((data: { offices: any }) => { + this.officeData = data.offices; + }); + } + + /** + * Sets all selectors + */ ngOnInit() { + this.setOfficeSelector(); + this.setEmployeeSelector(); + this.setCenterSelector(); + this.setGroupSelector(); + this.setClientSelector(); + } + + /** + * Sets the office selector + */ + setOfficeSelector() { + this.officeSelector.valueChanges.subscribe(officeId => { + this.employeeSelector.reset(null, { emitEvent: false }); + this.centerSelector.reset(null, { emitEvent: false }); + this.groupSelector.reset(null, { emitEvent: false }); + this.clientSelector.reset(null, { emitEvent: false }); + this.employeeData = null; + this.centerData = null; + this.groupData = null; + this.clientData = null; + this.selectedItem = this.officeData.find((office: any) => office.id === officeId); + this.selectedItem.itemType = 'office'; + this.navigationService.getEmployees(officeId).subscribe((employees: any) => { + this.employeeData = employees; + if (this.employeeData.length) { + this.employeeSelector.enable(); + } else { + this.employeeSelector.disable(); + } + }); + }); + } + + /** + * Sets the employee selector + */ + setEmployeeSelector() { + this.employeeSelector.valueChanges.subscribe(employeeId => { + if (employeeId) { + this.centerSelector.reset(null, { emitEvent: false }); + this.groupSelector.reset(null, { emitEvent: false }); + this.clientSelector.reset(null, { emitEvent: false }); + this.centerData = null; + this.groupData = null; + this.clientData = null; + this.selectedItem = this.employeeData.find((employee: any) => employee.id === employeeId); + this.selectedItem.itemType = 'employee'; + this.navigationService.getCentersFromStaffId(employeeId).subscribe((centers: any) => { + this.centerData = centers; + if (this.centerData.length) { + this.centerSelector.enable(); + } else { + this.centerSelector.disable(); + } + }); + } + }); + } + + /** + * Sets the center selector + */ + setCenterSelector() { + this.centerSelector.valueChanges.subscribe(centerId => { + if (centerId) { + this.groupSelector.reset(null, { emitEvent: false }); + this.clientSelector.reset(null, { emitEvent: false }); + this.groupData = null; + this.clientData = null; + this.navigationService.getCenter(centerId).subscribe((center: any) => { + this.selectedItem = center; + this.selectedItem.itemType = 'center'; + this.groupData = center.groupMembers ? center.groupMembers : []; + if (this.groupData.length) { + this.groupSelector.enable(); + } else { + this.groupSelector.disable(); + } + }); + this.selectedItemAccounts = null; + this.navigationService.getCenterAccounts(centerId).subscribe((centerAccounts: any) => { + this.selectedItemAccounts = centerAccounts; + }); + this.selectedItemSummary = null; + this.navigationService.getCenterSummary(centerId).subscribe((centerSummary: any) => { + this.selectedItemSummary = centerSummary[0]; + }); + } + }); + } + + /** + * Sets the group selector + */ + setGroupSelector() { + this.groupSelector.valueChanges.subscribe(groupId => { + if (groupId) { + this.clientSelector.reset(null, { emitEvent: false }); + this.clientData = null; + this.navigationService.getGroup(groupId).subscribe((group: any) => { + this.selectedItem = group; + this.selectedItem.itemType = 'group'; + this.clientData = group.clientMembers ? group.clientMembers : []; + if (this.clientData.length) { + this.clientSelector.enable(); + } else { + this.clientSelector.disable(); + } + }); + this.selectedItemAccounts = null; + this.navigationService.getGroupAccounts(groupId).subscribe((groupAccounts: any) => { + this.selectedItemAccounts = groupAccounts; + }); + } + }); + } + + /** + * Sets the client selector + */ + setClientSelector() { + this.clientSelector.valueChanges.subscribe(clientId => { + if (clientId) { + this.selectedItemAccounts = null; + this.navigationService.getClient(clientId).subscribe((client: any) => { + this.selectedItem = client; + this.selectedItem.itemType = 'client'; + }); + this.navigationService.getClientAccounts(clientId).subscribe((clientAccounts: any) => { + this.selectedItemAccounts = clientAccounts; + }); + } + }); } } diff --git a/src/app/navigation/navigation.module.ts b/src/app/navigation/navigation.module.ts index c806429b7..5aa767afe 100644 --- a/src/app/navigation/navigation.module.ts +++ b/src/app/navigation/navigation.module.ts @@ -3,10 +3,20 @@ import { NgModule } from '@angular/core'; /** Custom Modules */ import { SharedModule } from '../shared/shared.module'; +import { PipesModule } from '../pipes/pipes.module'; import { NavigationRoutingModule } from './navigation-routing.module'; /** Custom Components */ import { NavigationComponent } from './navigation.component'; +import { OfficeNavigationComponent } from './office-navigation/office-navigation.component'; +import { StaffNavigationComponent } from './staff-navigation/staff-navigation.component'; +import { CenterNavigationComponent } from './center-navigation/center-navigation.component'; +import { GroupNavigationComponent } from './group-navigation/group-navigation.component'; +import { ClientNavigationComponent } from './client-navigation/client-navigation.component'; +import { LoanAccountTableComponent } from './loan-account-table/loan-account-table.component'; +import { ShareAccountTableComponent } from './share-account-table/share-account-table.component'; +import { SavingsAccountTableComponent } from './savings-account-table/savings-account-table.component'; +import { MemberGroupsComponent } from './member-groups/member-groups.component'; /** * Navigation Module @@ -16,10 +26,20 @@ import { NavigationComponent } from './navigation.component'; @NgModule({ imports: [ SharedModule, + PipesModule, NavigationRoutingModule ], declarations: [ - NavigationComponent + NavigationComponent, + OfficeNavigationComponent, + StaffNavigationComponent, + CenterNavigationComponent, + GroupNavigationComponent, + ClientNavigationComponent, + LoanAccountTableComponent, + ShareAccountTableComponent, + SavingsAccountTableComponent, + MemberGroupsComponent ] }) export class NavigationModule { } diff --git a/src/app/navigation/navigation.service.ts b/src/app/navigation/navigation.service.ts new file mode 100644 index 000000000..a8f24e0bd --- /dev/null +++ b/src/app/navigation/navigation.service.ts @@ -0,0 +1,112 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpParams } from '@angular/common/http'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** + * Navigation service. + */ +@Injectable({ + providedIn: 'root' +}) +export class NavigationService { + + /** + * @param {HttpClient} http Http Client to send requests. + */ + constructor(private http: HttpClient) { } + + /** + * @returns {Observable} Offices. + */ + getOffices(): Observable { + return this.http.get('/offices'); + } + + /** + * @param {number} officeId Office Id to get employees from. + * @returns {Observable} Employees + */ + getEmployees(officeId: number): Observable { + const httpParams = new HttpParams() + .set('officeId', officeId.toString()); + return this.http.get('/staff', { params: httpParams }); + } + + /** + * @param {number} staffId Staff Id to get centers from. + * @returns {Observable} Centers + */ + getCentersFromStaffId(staffId: number): Observable { + const httpParams = new HttpParams() + .set('R_staffId', staffId.toString()) + .set('genericResultSet', false.toString()); + return this.http.get('/runreports/GroupNamesByStaff', { params: httpParams }); + } + + /** + * @param {number} centerId Center ID of center + * @returns {Observable} Center + */ + getCenter(centerId: number): Observable { + const httpParams = new HttpParams() + .set('associations', 'groupMembers'); + return this.http.get(`/centers/${centerId}`, { params: httpParams }); + } + + /** + * @param {number} centerId Center ID of center to retrieve accounts of + * @returns {Observable} Center Accounts + */ + getCenterAccounts(centerId: number): Observable { + return this.http.get(`/centers/${centerId}/accounts`); + } + + /** + * @param {number} centerId Center ID of center to retrieve summary of + * @returns {Observable} Center Accounts + */ + getCenterSummary(centerId: number): Observable { + const httpParams = new HttpParams() + .set('R_groupId', centerId.toString()) + .set('genericResultSet', false.toString()); + return this.http.get('/runreports/GroupSummaryCounts', { params: httpParams }); + } + + /** + * @param {number} groupId Group ID of group + * @returns {Observable} Group + */ + getGroup(groupId: number): Observable { + const httpParams = new HttpParams() + .set('associations', 'all'); + return this.http.get(`/groups/${groupId}`, { params: httpParams }); + } + + /** + * @param {number} groupId Group ID of group to retrieve accounts of + * @returns {Observable} Group Accounts + */ + getGroupAccounts(groupId: number): Observable { + return this.http.get(`/groups/${groupId}/accounts`); + } + + /** + * @param {number} clientId Client ID of client + * @returns {Observable} Client + */ + getClient(clientId: number): Observable { + return this.http.get(`/clients/${clientId}`); + } + + /** + * @param {number} clientId Client ID of client to retrieve accounts of + * @returns {Observable} Client Accounts + */ + getClientAccounts(clientId: number): Observable { + return this.http.get(`/clients/${clientId}/accounts`); + } + +} diff --git a/src/app/navigation/office-navigation/office-navigation.component.html b/src/app/navigation/office-navigation/office-navigation.component.html new file mode 100644 index 000000000..530046338 --- /dev/null +++ b/src/app/navigation/office-navigation/office-navigation.component.html @@ -0,0 +1,47 @@ + + + +
+ +

+ {{ officeData.name }} +

+ + +

+ {{ officeData.externalId ? 'External ID: ' + officeData.externalId : '' }} +

+ +
+ + + + +
+ +
+ Opened On +
+ +
+ {{ officeData.openingDate | date }} +
+ +
+ Parent officeData +
+ +
+ {{ officeData.parentName }} +
+ +
+ Number of Staff +
+ +
+ {{ employeeData ? employeeData.length : '' }} +
+ +
+ diff --git a/src/app/navigation/office-navigation/office-navigation.component.scss b/src/app/navigation/office-navigation/office-navigation.component.scss new file mode 100644 index 000000000..fa160afd7 --- /dev/null +++ b/src/app/navigation/office-navigation/office-navigation.component.scss @@ -0,0 +1,14 @@ +h2 { + font-weight: 500; +} + +.content { + div { + margin: 1rem 0; + word-wrap: break-word; + } +} + +.main-icon { + margin: 7px 0 0 0; +} diff --git a/src/app/navigation/office-navigation/office-navigation.component.spec.ts b/src/app/navigation/office-navigation/office-navigation.component.spec.ts new file mode 100644 index 000000000..ffab91d96 --- /dev/null +++ b/src/app/navigation/office-navigation/office-navigation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OfficeNavigationComponent } from './office-navigation.component'; + +describe('OfficeNavigationComponent', () => { + let component: OfficeNavigationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OfficeNavigationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OfficeNavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/office-navigation/office-navigation.component.ts b/src/app/navigation/office-navigation/office-navigation.component.ts new file mode 100644 index 000000000..c66aa0ea7 --- /dev/null +++ b/src/app/navigation/office-navigation/office-navigation.component.ts @@ -0,0 +1,20 @@ + +/** Angular Imports */ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'mifosx-office-navigation', + templateUrl: './office-navigation.component.html', + styleUrls: ['./office-navigation.component.scss'] +}) +export class OfficeNavigationComponent implements OnInit { + + @Input() officeData: any; + @Input() employeeData: any; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/navigation/offices.resolver.ts b/src/app/navigation/offices.resolver.ts new file mode 100644 index 000000000..90cfc0ced --- /dev/null +++ b/src/app/navigation/offices.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 { NavigationService } from './navigation.service'; + +/** + * Offices data resolver. + */ +@Injectable() +export class OfficesResolver implements Resolve { + + /** + * @param {NavigationService} navigationService Navigation service. + */ + constructor(private navigationService: NavigationService) {} + + /** + * Returns the Offices data. + * @returns {Observable} + */ + resolve(): Observable { + return this.navigationService.getOffices(); + } + +} diff --git a/src/app/navigation/savings-account-table/savings-account-table.component.html b/src/app/navigation/savings-account-table/savings-account-table.component.html new file mode 100644 index 000000000..177478fbf --- /dev/null +++ b/src/app/navigation/savings-account-table/savings-account-table.component.html @@ -0,0 +1,42 @@ +
+ + Filter + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Account Number {{ savingsAccount.accountNo }} Savings Account {{ savingsAccount.productName }} Balance {{ savingsAccount.accountBalance }} Status + + + +
+ + diff --git a/src/app/navigation/savings-account-table/savings-account-table.component.scss b/src/app/navigation/savings-account-table/savings-account-table.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/navigation/savings-account-table/savings-account-table.component.spec.ts b/src/app/navigation/savings-account-table/savings-account-table.component.spec.ts new file mode 100644 index 000000000..f6228cc50 --- /dev/null +++ b/src/app/navigation/savings-account-table/savings-account-table.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SavingsAccountTableComponent } from './savings-account-table.component'; + +describe('SavingsAccountTableComponent', () => { + let component: SavingsAccountTableComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SavingsAccountTableComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SavingsAccountTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/savings-account-table/savings-account-table.component.ts b/src/app/navigation/savings-account-table/savings-account-table.component.ts new file mode 100644 index 000000000..e4c674a29 --- /dev/null +++ b/src/app/navigation/savings-account-table/savings-account-table.component.ts @@ -0,0 +1,65 @@ +/** Angular Imports */ +import { Component, OnInit, Input, ViewChild } from '@angular/core'; +import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material'; + +/** Custom Pipes */ +import { AccountsFilterPipe } from '../../pipes/accounts-filter.pipe'; + +@Component({ + selector: 'mifosx-savings-account-table', + templateUrl: './savings-account-table.component.html', + styleUrls: ['./savings-account-table.component.scss'] +}) +export class SavingsAccountTableComponent implements OnInit { + + /** Columns to be displayed in the savings accounts table. */ + displayedColumns: string[] = ['accountNo', 'productName', 'accountBalance', 'Status']; + /** Show closed saving accounts */ + showClosed = false; + /** Data source for savings account table. */ + dataSource: MatTableDataSource; + /** Savings Account Data */ + accountData: any; + + /** Paginator for savings account table. */ + @ViewChild(MatPaginator) paginator: MatPaginator; + /** Sorter for savings account table. */ + @ViewChild(MatSort) sort: MatSort; + + /** Savings Account Setter */ + @Input() set savingsAccountData(data: any) { + this.accountData = data; + const filteredAccountData = this.accountsFilterPipe.transform(data, 'saving', this.showClosed ? 'closed' : 'open'); + this.dataSource = new MatTableDataSource(filteredAccountData); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + } + + /** + * @param {AccountsFilterPipe} accountsFilterPipe Accounts Filter Pipe. + */ + constructor(private accountsFilterPipe: AccountsFilterPipe) { } + + /** + * Filters data in users table based on passed value. + * @param {string} filterValue Value to filter data. + */ + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + } + + ngOnInit() { + } + + /** + * Toggles the savings status + */ + toggleClosed() { + this.showClosed = !this.showClosed; + const filteredAccountData = this.accountsFilterPipe.transform(this.accountData, 'saving', this.showClosed ? 'closed' : 'open'); + this.dataSource = new MatTableDataSource(filteredAccountData); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + } + +} diff --git a/src/app/navigation/share-account-table/share-account-table.component.html b/src/app/navigation/share-account-table/share-account-table.component.html new file mode 100644 index 000000000..9a1890e67 --- /dev/null +++ b/src/app/navigation/share-account-table/share-account-table.component.html @@ -0,0 +1,44 @@ +
+ + Filter + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Account Number {{ shareAccount.accountNo }} Share Account {{ shareAccount.productName }} Approved Shares {{ savingsAccount.totalApprovedShares }} Status + + + +
+ + + + diff --git a/src/app/navigation/share-account-table/share-account-table.component.scss b/src/app/navigation/share-account-table/share-account-table.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/navigation/share-account-table/share-account-table.component.spec.ts b/src/app/navigation/share-account-table/share-account-table.component.spec.ts new file mode 100644 index 000000000..fa47ed34a --- /dev/null +++ b/src/app/navigation/share-account-table/share-account-table.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ShareAccountTableComponent } from './share-account-table.component'; + +describe('ShareAccountTableComponent', () => { + let component: ShareAccountTableComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ShareAccountTableComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ShareAccountTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/share-account-table/share-account-table.component.ts b/src/app/navigation/share-account-table/share-account-table.component.ts new file mode 100644 index 000000000..822d84315 --- /dev/null +++ b/src/app/navigation/share-account-table/share-account-table.component.ts @@ -0,0 +1,65 @@ +/** Angular Imports */ +import { Component, OnInit, Input, ViewChild } from '@angular/core'; +import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material'; + +/** Custom Pipes */ +import { AccountsFilterPipe } from '../../pipes/accounts-filter.pipe'; + +@Component({ + selector: 'mifosx-share-account-table', + templateUrl: './share-account-table.component.html', + styleUrls: ['./share-account-table.component.scss'] +}) +export class ShareAccountTableComponent implements OnInit { + + /** Columns to be displayed in the share accounts table. */ + displayedColumns: string[] = ['accountNo', 'productName', 'totalApprovedShares', 'Status']; + /** Show closed share accounts */ + showClosed = false; + /** Data source for share account table. */ + dataSource: MatTableDataSource; + /** Share Account Data */ + accountData: any; + + /** Paginator for share account table. */ + @ViewChild(MatPaginator) paginator: MatPaginator; + /** Sorter for share account table. */ + @ViewChild(MatSort) sort: MatSort; + + /** Share Account Setter */ + @Input() set shareAccountData(data: any) { + this.accountData = data; + const filteredAccountData = this.accountsFilterPipe.transform(data, 'share', this.showClosed ? 'closed' : 'open'); + this.dataSource = new MatTableDataSource(filteredAccountData); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + } + + /** + * @param {AccountsFilterPipe} accountsFilterPipe Accounts Filter Pipe. + */ + constructor(private accountsFilterPipe: AccountsFilterPipe) { } + + /** + * Filters data in users table based on passed value. + * @param {string} filterValue Value to filter data. + */ + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + } + + ngOnInit() { + } + + /** + * Toggles the share status + */ + toggleClosed() { + this.showClosed = !this.showClosed; + const filteredAccountData = this.accountsFilterPipe.transform(this.accountData, 'share', this.showClosed ? 'closed' : 'open'); + this.dataSource = new MatTableDataSource(filteredAccountData); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + } + +} diff --git a/src/app/navigation/staff-navigation/staff-navigation.component.html b/src/app/navigation/staff-navigation/staff-navigation.component.html new file mode 100644 index 000000000..ae5e877a5 --- /dev/null +++ b/src/app/navigation/staff-navigation/staff-navigation.component.html @@ -0,0 +1,58 @@ + + + +
+ +

+ {{ employeeData.displayName }} + + + +

+ + +

+ Associated Office: {{ employeeData.officeName }} +

+ +
+ + + + +
+ +
+ Joined On +
+ +
+ {{ employeeData.joiningDate | date }} +
+ +
+ Loan Officer +
+ +
+ {{ employeeData.isLoanOfficer ? 'Yes' : 'No' }} +
+ +
+ Mobile Number +
+ +
+ {{ employeeData.mobileNo }} +
+ +
+ Number of Centers +
+ +
+ {{ centerData ? centerData.length : '' }} +
+ +
+ diff --git a/src/app/navigation/staff-navigation/staff-navigation.component.scss b/src/app/navigation/staff-navigation/staff-navigation.component.scss new file mode 100644 index 000000000..b04841a34 --- /dev/null +++ b/src/app/navigation/staff-navigation/staff-navigation.component.scss @@ -0,0 +1,22 @@ +.main-icon { + margin: 7px 0 0 0; +} + +.true { + color: #32cd32; +} + +.false { + color: #f44366; +} + +h2 { + font-weight: 500; +} + +.content { + div { + margin: 1rem 0; + word-wrap: break-word; + } +} diff --git a/src/app/navigation/staff-navigation/staff-navigation.component.spec.ts b/src/app/navigation/staff-navigation/staff-navigation.component.spec.ts new file mode 100644 index 000000000..d271edbbd --- /dev/null +++ b/src/app/navigation/staff-navigation/staff-navigation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StaffNavigationComponent } from './staff-navigation.component'; + +describe('StaffNavigationComponent', () => { + let component: StaffNavigationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ StaffNavigationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StaffNavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/staff-navigation/staff-navigation.component.ts b/src/app/navigation/staff-navigation/staff-navigation.component.ts new file mode 100644 index 000000000..6c98bbfd9 --- /dev/null +++ b/src/app/navigation/staff-navigation/staff-navigation.component.ts @@ -0,0 +1,19 @@ +/** Angular Imports */ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'mifosx-staff-navigation', + templateUrl: './staff-navigation.component.html', + styleUrls: ['./staff-navigation.component.scss'] +}) +export class StaffNavigationComponent implements OnInit { + + @Input() employeeData: any; + @Input() centerData: any; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/pipes/status-lookup.pipe.ts b/src/app/pipes/status-lookup.pipe.ts index c5cee8cfb..31b716910 100644 --- a/src/app/pipes/status-lookup.pipe.ts +++ b/src/app/pipes/status-lookup.pipe.ts @@ -36,6 +36,10 @@ export class StatusLookupPipe implements PipeTransform { 'clientStatusTYpe.approved': 'status-approved', 'clientStatusType.transfer.in.progress': 'status-transfer-progress', // write 'clientStatusType.transfer.on.hold': 'status-transfer-hold', // write + 'groupingStatusType.active': 'status-active', + 'groupingStatusType.pending': 'status-pending', + 'groupingStatusType.submitted.and.pending.approval': 'status-pending', + 'groupingStatusType.approved': 'status-approved', 'smsCampaignStatus.active': 'status-active', 'smsCampaignStatus.pending': 'status-pending', 'smsCampaignStatus.closed': 'status-closed',