CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: WEB-61 Increase clicking hitbox for navigation items (#2338)

Browse Source
This commit is contained in:
Syed Mahmood
2025-03-20 14:29:05 -06:00
committed by GitHub
parent 54cf8028e3
commit 41975ab3b0
5 changed files with 449 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
+26 -6
View File
@@ -3,13 +3,23 @@
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_RANGE'">
<mat-list-item [routerLink]="['ranges']" *mifosxHasPermission="'READ_DELINQUENCY_RANGE'">
<mat-icon matListIcon [routerLink]="['ranges']">
<fa-icon icon="building" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['ranges']">{{ 'labels.heading.Manage Delinquency Ranges' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="!arrowBooleans[0]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="arrowBooleans[0]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[0]" [routerLink]="['ranges']">
{{ 'labels.text.Define delinquency day ranges' | translate }}
</p>
@@ -19,13 +29,23 @@
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
<mat-list-item [routerLink]="['buckets']" *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
<mat-icon matListIcon [routerLink]="['buckets']">
<fa-icon icon="building" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['buckets']">{{ 'labels.heading.Manage Delinquency Buckets' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="!arrowBooleans[1]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="arrowBooleans[1]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[1]" [routerLink]="['buckets']">
{{ 'labels.text.Define delinquency bucket as set of ranges' | translate }}
</p>
src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
+26 -6
View File
@@ -3,13 +3,23 @@
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item *mifosxHasPermission="'READ_TAXCOMPONENT'">
<mat-list-item [routerLink]="['tax-components']" *mifosxHasPermission="'READ_TAXCOMPONENT'">
<mat-icon matListIcon [routerLink]="['tax-components']">
<fa-icon icon="building" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['tax-components']">{{ 'labels.heading.Manage Tax Components' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="!arrowBooleans[0]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="arrowBooleans[0]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[0]" [routerLink]="['tax-components']">
{{ 'labels.heading.Define Tax Components' | translate }}
</p>
@@ -19,13 +29,23 @@
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item *mifosxHasPermission="'READ_TAXGROUP'">
<mat-list-item [routerLink]="['tax-groups']" *mifosxHasPermission="'READ_TAXGROUP'">
<mat-icon matListIcon [routerLink]="['tax-groups']">
<fa-icon icon="building" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['tax-groups']">{{ 'labels.heading.Manage Tax Groups' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="!arrowBooleans[1]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="arrowBooleans[1]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[1]" [routerLink]="['tax-groups']">
{{ 'labels.heading.Define Tax Groups' | translate }}
</p>
src/app/products/products.component.html
+151 -33
View File
@@ -4,13 +4,25 @@
<div fxFlex="50%">
<mat-nav-list>
<div #loanProducts>
<mat-list-item *mifosxHasPermission="'READ_LOANPRODUCT'">
<mat-list-item [routerLink]="['loan-products']" *mifosxHasPermission="'READ_LOANPRODUCT'">
<mat-icon matListIcon [routerLink]="['loan-products']">
<fa-icon icon="briefcase" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['loan-products']">{{ 'labels.heading.Loan Products' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="!arrowBooleans[0]"
style="z-index: 1000"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="arrowBooleans[0]"
style="z-index: 1000"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[0]" [routerLink]="['loan-products']">
{{ 'labels.text.Add new loan product or modify or inactivate loan product' | translate }}
</p>
@@ -18,13 +30,23 @@
</div>
<div #savingsProducts>
<mat-list-item *mifosxHasPermission="'READ_SAVINGSPRODUCT'">
<mat-list-item [routerLink]="['saving-products']" *mifosxHasPermission="'READ_SAVINGSPRODUCT'">
<mat-icon matListIcon [routerLink]="['saving-products']">
<fa-icon icon="briefcase" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['saving-products']">{{ 'labels.heading.Savings Products' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="!arrowBooleans[1]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="arrowBooleans[1]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[1]" [routerLink]="['saving-products']">
{{ 'labels.text.Add new savings product or modify or inactivate savings product' | translate }}
</p>
@@ -32,13 +54,23 @@
</div>
<div #shareProducts>
<mat-list-item *mifosxHasPermission="'READ_SHAREPRODUCT'">
<mat-list-item [routerLink]="['share-products']" *mifosxHasPermission="'READ_SHAREPRODUCT'">
<mat-icon matListIcon [routerLink]="['share-products']">
<fa-icon icon="briefcase" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['share-products']">{{ 'labels.heading.Share Products' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(2); $event.stopPropagation()"
*ngIf="!arrowBooleans[2]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(2); $event.stopPropagation()"
*ngIf="arrowBooleans[2]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[2]" [routerLink]="['share-products']">
{{ 'labels.text.Add new share product or modify or inactivate share product' | translate }}
</p>
@@ -46,40 +78,73 @@
</div>
<div #charges>
<mat-list-item *mifosxHasPermission="'READ_CHARGE'">
<mat-list-item [routerLink]="['charges']" *mifosxHasPermission="'READ_CHARGE'">
<mat-icon matListIcon [routerLink]="['charges']">
<fa-icon icon="money-bill-alt" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['charges']">{{ 'labels.heading.Charges' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(3); $event.stopPropagation()"
*ngIf="!arrowBooleans[3]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(3); $event.stopPropagation()"
*ngIf="arrowBooleans[3]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[3]" [routerLink]="['charges']">
{{ 'labels.text.Define charges/penalties for loan products, savings and deposit products' | translate }}
</p>
</mat-list-item>
</div>
<mat-list-item>
<mat-list-item [routerLink]="['collaterals']">
<mat-icon matListIcon [routerLink]="['collaterals']">
<fa-icon icon="money-bill-alt" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['collaterals']">{{ 'labels.heading.Collateral Management' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(4); $event.stopPropagation()"
*ngIf="!arrowBooleans[4]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(4); $event.stopPropagation()"
*ngIf="arrowBooleans[4]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[4]" [routerLink]="['collaterals']">
{{ 'labels.text.Define collaterals for Collateral Management' | translate }}
</p>
</mat-list-item>
<mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
<mat-list-item
[routerLink]="['delinquency-bucket-configurations']"
*mifosxHasPermission="'READ_DELINQUENCY_BUCKET'"
>
<mat-icon matListIcon [routerLink]="['delinquency-bucket-configurations']">
<fa-icon icon="briefcase" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['delinquency-bucket-configurations']">
{{ 'labels.heading.Delinquency Buckets' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(5); $event.stopPropagation()"
*ngIf="!arrowBooleans[5]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(5); $event.stopPropagation()"
*ngIf="arrowBooleans[5]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[5]" [routerLink]="['delinquency-bucket-configurations']">
{{ 'labels.text.Define delinquency day ranges and bucket set for loan products' | translate }}
</p>
@@ -89,28 +154,48 @@
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item *mifosxHasPermission="'READ_PRODUCTMIX'">
<mat-list-item [routerLink]="['products-mix']" *mifosxHasPermission="'READ_PRODUCTMIX'">
<mat-icon matListIcon [routerLink]="['products-mix']">
<fa-icon icon="random" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['products-mix']">{{ 'labels.heading.Products Mix' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(6); $event.stopPropagation()"
*ngIf="!arrowBooleans[6]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(6); $event.stopPropagation()"
*ngIf="arrowBooleans[6]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[6]" [routerLink]="['products-mix']">
{{ 'labels.text.Defines rules for taking multiple rules' | translate }}
</p>
</mat-list-item>
<div #fixedDepositProducts>
<mat-list-item *mifosxHasPermission="'READ_FIXEDDEPOSITPRODUCT'">
<mat-list-item [routerLink]="['fixed-deposit-products']" *mifosxHasPermission="'READ_FIXEDDEPOSITPRODUCT'">
<mat-icon matListIcon [routerLink]="['fixed-deposit-products']">
<fa-icon icon="briefcase" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['fixed-deposit-products']">
{{ 'labels.heading.Fixed Deposit Products' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(7); $event.stopPropagation()"
*ngIf="!arrowBooleans[7]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(7); $event.stopPropagation()"
*ngIf="arrowBooleans[7]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[7]" [routerLink]="['fixed-deposit-products']">
{{ 'labels.text.Add, modify or inactivate a Fixed deposit product' | translate }}
</p>
@@ -118,42 +203,75 @@
</div>
<div #recurringDepositProducts>
<mat-list-item *mifosxHasPermission="'READ_RECURRINGDEPOSITPRODUCT'">
<mat-list-item
[routerLink]="['recurring-deposit-products']"
*mifosxHasPermission="'READ_RECURRINGDEPOSITPRODUCT'"
>
<mat-icon matListIcon [routerLink]="['recurring-deposit-products']">
<fa-icon icon="briefcase" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['recurring-deposit-products']">
{{ 'labels.heading.Recurring Deposit Products' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(8); $event.stopPropagation()"
*ngIf="!arrowBooleans[8]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(8); $event.stopPropagation()"
*ngIf="arrowBooleans[8]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[8]" [routerLink]="['recurring-deposit-products']">
{{ 'labels.text.Add, modify or inactivate a Recurring Deposit product' | translate }}
</p>
</mat-list-item>
</div>
<mat-list-item *mifosxHasPermission="'READ_TAXGROUP'">
<mat-list-item [routerLink]="['tax-configurations']" *mifosxHasPermission="'READ_TAXGROUP'">
<mat-icon matListIcon [routerLink]="['tax-configurations']">
<fa-icon icon="cogs" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['tax-configurations']">
{{ 'labels.heading.Manage Tax Configurations' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(9); $event.stopPropagation()"
*ngIf="!arrowBooleans[9]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(9); $event.stopPropagation()"
*ngIf="arrowBooleans[9]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[9]" [routerLink]="['tax-configurations']">
{{ 'labels.text.Define Tax components and Tax groups' | translate }}
</p>
</mat-list-item>
<mat-list-item *mifosxHasPermission="'READ_FLOATINGRATE'">
<mat-list-item [routerLink]="['floating-rates']" *mifosxHasPermission="'READ_FLOATINGRATE'">
<mat-icon matListIcon [routerLink]="['floating-rates']">
<fa-icon icon="money-bill-alt" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['floating-rates']">{{ 'labels.heading.Floating Rates' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(10)" *ngIf="!arrowBooleans[10]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(10)" *ngIf="arrowBooleans[10]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(10); $event.stopPropagation()"
*ngIf="!arrowBooleans[10]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(10); $event.stopPropagation()"
*ngIf="arrowBooleans[10]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[10]" [routerLink]="['floating-rates']">
{{ 'labels.text.Define floating rates for loan products' | translate }}
</p>
src/app/system/external-services/external-services.component.html
+52 -12
View File
@@ -3,25 +3,45 @@
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item>
<mat-list-item [routerLink]="['amazon-s3']">
<mat-icon matListIcon [routerLink]="['amazon-s3']">
<fa-icon icon="cloud" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['amazon-s3']">{{ 'labels.heading.S3 Amazon External Service' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="!arrowBooleans[0]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="arrowBooleans[0]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine [routerLink]="['amazon-s3']" *ngIf="arrowBooleans[0]">
{{ 'labels.text.S3 Amazon Service Configuration' | translate }}
</p>
</mat-list-item>
<mat-list-item>
<mat-list-item [routerLink]="['sms']">
<mat-icon matListIcon [routerLink]="['sms']">
<fa-icon icon="comment-alt" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['sms']">{{ 'labels.heading.SMS External Service' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="!arrowBooleans[1]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="arrowBooleans[1]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine [routerLink]="['sms']" *ngIf="arrowBooleans[1]">
{{ 'labels.text.SMS Service Configuration' | translate }}
</p>
@@ -31,27 +51,47 @@
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item>
<mat-list-item [routerLink]="['email']">
<mat-icon matListIcon [routerLink]="['email']">
<fa-icon icon="envelope" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['email']">{{ 'labels.heading.Email External Service' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(2); $event.stopPropagation()"
*ngIf="!arrowBooleans[2]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(2); $event.stopPropagation()"
*ngIf="arrowBooleans[2]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine [routerLink]="['email']" *ngIf="arrowBooleans[2]">
{{ 'labels.text.Email Service Configuration' | translate }}
</p>
</mat-list-item>
<mat-list-item>
<mat-list-item [routerLink]="['notification']">
<mat-icon matListIcon [routerLink]="['notification']">
<fa-icon icon="bell" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['notification']">
{{ 'labels.heading.Notification External Service' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(3); $event.stopPropagation()"
*ngIf="!arrowBooleans[3]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(3); $event.stopPropagation()"
*ngIf="arrowBooleans[3]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine [routerLink]="['notification']" *ngIf="arrowBooleans[3]">
{{ 'labels.text.Notification Service Configuration' | translate }}
</p>
src/app/system/system.component.html
+194 -44
View File
@@ -4,13 +4,23 @@
<div fxFlex="50%">
<mat-nav-list>
<div #datatables>
<mat-list-item>
<mat-list-item [routerLink]="['data-tables']">
<mat-icon matListIcon [routerLink]="['data-tables']">
<fa-icon icon="table" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['data-tables']">{{ 'labels.heading.Manage Data tables' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="!arrowBooleans[0]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(0); $event.stopPropagation()"
*ngIf="arrowBooleans[0]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[0]" [routerLink]="['data-tables']">
{{ 'labels.text.Add new extra fields to any entity' | translate }}
</p>
@@ -18,13 +28,23 @@
</div>
<div #codes>
<mat-list-item>
<mat-list-item matListIcon [routerLink]="['codes']">
<mat-icon matListIcon [routerLink]="['codes']">
<fa-icon icon="list-ul" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['codes']">{{ 'labels.heading.Manage Codes' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="!arrowBooleans[1]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(1); $event.stopPropagation()"
*ngIf="arrowBooleans[1]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[1]" [routerLink]="['codes']">
{{ 'labels.text.Codes are used to define drop down values' | translate }}
</p>
@@ -32,15 +52,25 @@
</div>
<div #rolesandpermission>
<mat-list-item>
<mat-list-item [routerLink]="['roles-and-permissions']">
<mat-icon matListIcon [routerLink]="['roles-and-permissions']">
<fa-icon icon="key" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['roles-and-permissions']">
{{ 'labels.heading.Manage Roles and Permissions' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(2); $event.stopPropagation()"
*ngIf="!arrowBooleans[2]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(2); $event.stopPropagation()"
*ngIf="arrowBooleans[2]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[2]" [routerLink]="['roles-and-permissions']">
{{ 'labels.text.Define or modify roles and associated permissions' | translate }}
</p>
@@ -48,68 +78,118 @@
</div>
<div #makerCheckerTable>
<mat-list-item>
<mat-list-item [routerLink]="['configure-mc-tasks']">
<mat-icon matListIcon [routerLink]="['configure-mc-tasks']">
<fa-icon icon="sitemap" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['configure-mc-tasks']">
{{ 'labels.heading.Configure Maker Checker Tasks' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(3); $event.stopPropagation()"
*ngIf="!arrowBooleans[3]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(3); $event.stopPropagation()"
*ngIf="arrowBooleans[3]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[3]" [routerLink]="['configure-mc-tasks']">
{{ 'labels.text.Define or modify Maker Checker tasks' | translate }}
</p>
</mat-list-item>
</div>
<mat-list-item>
<mat-list-item [routerLink]="['hooks']">
<mat-icon matListIcon [routerLink]="['hooks']">
<fa-icon icon="anchor" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['hooks']">{{ 'labels.heading.Manage Hooks' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(4); $event.stopPropagation()"
*ngIf="!arrowBooleans[4]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(4); $event.stopPropagation()"
*ngIf="arrowBooleans[4]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[4]" [routerLink]="['hooks']">
{{ 'labels.text.Define Hooks' | translate }}
</p>
</mat-list-item>
<mat-list-item>
<mat-list-item [routerLink]="['entity-to-entity-mapping']">
<mat-icon matListIcon [routerLink]="['entity-to-entity-mapping']">
<fa-icon icon="road" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['entity-to-entity-mapping']">
{{ 'labels.heading.Entity to Entity Mapping' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(5); $event.stopPropagation()"
*ngIf="!arrowBooleans[5]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(5); $event.stopPropagation()"
*ngIf="arrowBooleans[5]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[5]" [routerLink]="['entity-to-entity-mapping']">
{{ 'labels.text.Define or modify entity to entity mappings' | translate }}
</p>
</mat-list-item>
<mat-list-item>
<mat-list-item [routerLink]="['surveys']">
<mat-icon matListIcon [routerLink]="['surveys']">
<fa-icon icon="file-alt" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['surveys']">{{ 'labels.heading.Manage Surveys' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(6); $event.stopPropagation()"
*ngIf="!arrowBooleans[6]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(6); $event.stopPropagation()"
*ngIf="arrowBooleans[6]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[6]" [routerLink]="['surveys']">
{{ 'labels.text.Manage your Services' | translate }}
</p>
</mat-list-item>
<mat-list-item *mifosxHasPermission="'READ_EXTERNAL_EVENT_CONFIGURATION'">
<mat-list-item [routerLink]="['external-events']" *mifosxHasPermission="'READ_EXTERNAL_EVENT_CONFIGURATION'">
<mat-icon matListIcon [routerLink]="['external-events']">
<fa-icon icon="anchor" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['external-events']">
{{ 'labels.heading.Manage External Events' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(7); $event.stopPropagation()"
*ngIf="!arrowBooleans[7]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(7); $event.stopPropagation()"
*ngIf="arrowBooleans[7]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[7]" [routerLink]="['external-events']">
{{ 'labels.text.External Events configuration, to enable or disable' | translate }}
</p>
@@ -119,77 +199,137 @@
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item>
<mat-list-item [routerLink]="['audit-trails']">
<mat-icon matListIcon [routerLink]="['audit-trails']">
<fa-icon icon="money-check" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['audit-trails']">{{ 'labels.heading.Audit Trails' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(8); $event.stopPropagation()"
*ngIf="!arrowBooleans[8]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(8); $event.stopPropagation()"
*ngIf="arrowBooleans[8]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[8]" [routerLink]="['audit-trails']">
{{ 'labels.text.Audit logs of all the activities' | translate }}
</p>
</mat-list-item>
<div #manageReports>
<mat-list-item>
<mat-list-item [routerLink]="['reports']">
<mat-icon matListIcon [routerLink]="['reports']">
<fa-icon icon="file-word" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['reports']">{{ 'labels.heading.Manage Reports' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(9); $event.stopPropagation()"
*ngIf="!arrowBooleans[9]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(9); $event.stopPropagation()"
*ngIf="arrowBooleans[9]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[9]" [routerLink]="['reports']">
{{ 'labels.text.Add new report and classify reports' | translate }}
</p>
</mat-list-item>
</div>
<mat-list-item>
<mat-list-item [routerLink]="['manage-jobs']">
<mat-icon matListIcon [routerLink]="['manage-jobs']">
<fa-icon icon="clock" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['manage-jobs']">{{ 'labels.heading.Manage Jobs' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(10)" *ngIf="!arrowBooleans[10]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(10)" *ngIf="arrowBooleans[10]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(10); $event.stopPropagation()"
*ngIf="!arrowBooleans[10]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(10); $event.stopPropagation()"
*ngIf="arrowBooleans[10]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[10]" [routerLink]="['manage-jobs']">
{{ 'labels.text.Manage Schedule and Workflow jobs, modify jobs' | translate }}
</p>
</mat-list-item>
<mat-list-item>
<mat-list-item [routerLink]="['configurations']">
<mat-icon matListIcon [routerLink]="['configurations']">
<fa-icon icon="cogs" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['configurations']">{{ 'labels.heading.Configurations' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(11)" *ngIf="!arrowBooleans[11]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(11)" *ngIf="arrowBooleans[11]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(11); $event.stopPropagation()"
*ngIf="!arrowBooleans[11]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(11); $event.stopPropagation()"
*ngIf="arrowBooleans[11]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[11]" [routerLink]="['configurations']">
{{ 'labels.text.Global configurations, Cache and Business Date' | translate }}
</p>
</mat-list-item>
<mat-list-item>
<mat-list-item [routerLink]="['account-number-preferences']">
<mat-icon matListIcon [routerLink]="['account-number-preferences']">
<fa-icon icon="key" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['account-number-preferences']">
{{ 'labels.heading.Account Number Preferences' | translate }}
</h4>
<fa-icon (click)="arrowBooleansToggle(12)" *ngIf="!arrowBooleans[12]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(12)" *ngIf="arrowBooleans[12]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(12); $event.stopPropagation()"
*ngIf="!arrowBooleans[12]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(12); $event.stopPropagation()"
*ngIf="arrowBooleans[12]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[12]" [routerLink]="['account-number-preferences']">
{{ 'labels.text.Preferences for generating account numbers for client' | translate }}
</p>
</mat-list-item>
<mat-list-item>
<mat-list-item [routerLink]="['external-services']">
<mat-icon matListIcon [routerLink]="['external-services']">
<fa-icon icon="cog" size="sm"></fa-icon>
</mat-icon>
<h4 matLine [routerLink]="['external-services']">{{ 'labels.heading.External Services' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(13)" *ngIf="!arrowBooleans[13]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(13)" *ngIf="arrowBooleans[13]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(13); $event.stopPropagation()"
*ngIf="!arrowBooleans[13]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(13); $event.stopPropagation()"
*ngIf="arrowBooleans[13]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[13]" [routerLink]="['external-services']">
{{ 'labels.text.External Services Configuration' | translate }}
</p>
@@ -200,8 +340,18 @@
<fa-icon icon="key" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>{{ 'labels.heading.Two-Factor Configuration' | translate }}</h4>
<fa-icon (click)="arrowBooleansToggle(14)" *ngIf="!arrowBooleans[14]" icon="arrow-down" size="md"></fa-icon>
<fa-icon (click)="arrowBooleansToggle(14)" *ngIf="arrowBooleans[14]" icon="arrow-up" size="md"></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(14); $event.stopPropagation()"
*ngIf="!arrowBooleans[14]"
icon="arrow-down"
size="md"
></fa-icon>
<fa-icon
(click)="arrowBooleansToggle(14); $event.stopPropagation()"
*ngIf="arrowBooleans[14]"
icon="arrow-up"
size="md"
></fa-icon>
<p matLine *ngIf="arrowBooleans[14]">
{{ 'labels.text.Two-factor authentication configuration' | translate }}
</p>