add style to the remaining components in our website

openMF · Aug 8, 2024 · 64f7a76 · 64f7a76
1 parent 8018853
commit 64f7a76
Show file tree

Hide file tree

Showing 9 changed files with 419 additions and 253 deletions.
diff --git a/src/app/accounting/accounting.component.html b/src/app/accounting/accounting.component.html
@@ -2,7 +2,7 @@
 
   <mat-card>
 
-    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px">
+    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
 
       <div fxFlex="50%">
 
@@ -13,10 +13,8 @@
               <fa-icon icon="sync" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['journal-entries/frequent-postings']">{{"labels.heading.Frequent Postings" | 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>
-
             <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['journal-entries/frequent-postings']">{{"labels.text.These are predefined postings" | translate}}</p>
           </mat-list-item>
 
@@ -26,10 +24,8 @@ <h4 matLine [routerLink]="['journal-entries/frequent-postings']">{{"labels.headi
                 <fa-icon icon="plus" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['journal-entries/create']">{{"labels.heading.Create Journal Entries" | 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>
-
               <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['journal-entries/create']">{{"labels.text.Manual journal entry transactions recorded in a journal" | translate}}</p>
             </mat-list-item>
           </div>
@@ -39,10 +35,8 @@ <h4 matLine [routerLink]="['journal-entries/create']">{{"labels.heading.Create J
               <fa-icon icon="search" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['journal-entries']">{{"labels.heading.Search Journal Entries" | 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>
-
             <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']">{{"labels.text.Advanced search option for journal entries" | translate}}</p>
           </mat-list-item>
 
@@ -84,10 +78,8 @@ <h4 matLine [routerLink]="['migrate-opening-balances']">{{"labels.heading.Migrat
                 <fa-icon icon="sitemap" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['chart-of-accounts']">{{"labels.heading.Chart of Accounts" | 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)" *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>
               <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']">{{"labels.text.List of accounts used by the organization" | translate}}</p>
             </mat-list-item>
           </div>

diff --git a/src/app/organization/bulk-import/bulk-import.component.html b/src/app/organization/bulk-import/bulk-import.component.html
diff --git a/src/app/organization/bulk-import/bulk-import.component.ts b/src/app/organization/bulk-import/bulk-import.component.ts
@@ -10,9 +10,20 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./bulk-import.component.scss']
 })
 export class BulkImportComponent implements OnInit {
+  // Initialize an array of 17 boolean values, all set to false
+  arrowBooleans: boolean[] = new Array(17).fill(false);
 
   constructor() {}
 
   ngOnInit() {}
 
+  /**
+   * Popover function
+   * @param arrowNumber - The index of the boolean value to toggle.
+   */
+
+  arrowBooleansToggle(arrowNumber:number) {
+    // Toggle the boolean value at the given index
+    this.arrowBooleans[arrowNumber] = !this.arrowBooleans[arrowNumber];
+  }
 }
diff --git a/src/app/organization/organization.component.html b/src/app/organization/organization.component.html
diff --git a/src/app/organization/organization.component.ts b/src/app/organization/organization.component.ts
@@ -1,10 +1,10 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
+import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
-import { PopoverService } from '../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';
+import { PopoverService } from '../configuration-wizard/popover/popover.service';
 
 /**
  * Organization component.
@@ -41,6 +41,8 @@ export class OrganizationComponent implements OnInit, AfterViewInit {
   @ViewChild('manageFunds') manageFunds: ElementRef<any>;
   /* Template for popover on manage funds */
   @ViewChild('templateManageFunds') templateManageFunds: TemplateRef<any>;
+  // Initialize an array of 18 boolean values, all set to false
+  arrowBooleans: boolean[] = new Array(18).fill(false);
 
   /**
    * @param {ActivatedRoute} activatedRoute ActivatedRoute.
@@ -62,6 +64,7 @@ export class OrganizationComponent implements OnInit, AfterViewInit {
    * @param target HTMLElement | ElementRef<any>.
    * @param position String.
    * @param backdrop Boolean.
+   * @param arrowNumber - The index of the boolean value to toggle.
    */
   showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
     setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
@@ -206,4 +209,9 @@ export class OrganizationComponent implements OnInit, AfterViewInit {
     this.configurationWizardService.showRecurringDepositProductsList = true;
     this.router.navigate(['/products/recurring-deposit-products']);
   }
+
+  arrowBooleansToggle(arrowNumber:number) {
+    // Toggle the boolean value at the given index
+    this.arrowBooleans[arrowNumber] = !this.arrowBooleans[arrowNumber];
+  }
 }
diff --git a/src/app/products/products.component.html b/src/app/products/products.component.html
@@ -2,66 +2,78 @@
 
   <mat-card>
 
-    <div fxLayout="row" fxLayout.lt-md="column">
+    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
 
       <div fxFlex="50%">
 
         <mat-nav-list>
 
         <div #loanProducts>
-          <mat-list-item [routerLink]="['loan-products']" *mifosxHasPermission="'READ_LOANPRODUCT'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_LOANPRODUCT'">
+            <mat-icon matListIcon [routerLink]="['loan-products']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Loan Products' | translate}}</h4>
-            <p matLine>{{'labels.text.Add new loan product or modify or inactivate loan product' | translate}}</p>
+            <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>
+            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['loan-products']">{{'labels.text.Add new loan product or modify or inactivate loan product' | translate}}</p>
           </mat-list-item>
         </div>
 
         <div #savingsProducts>
-          <mat-list-item [routerLink]="['saving-products']" *mifosxHasPermission="'READ_SAVINGSPRODUCT'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_SAVINGSPRODUCT'">
+            <mat-icon matListIcon [routerLink]="['saving-products']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Savings Products' | translate}}</h4>
-            <p matLine>{{'labels.text.Add new savings product or modify or inactivate savings product' | translate}}</p>
+            <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>
+            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['saving-products']">{{'labels.text.Add new savings product or modify or inactivate savings product' | translate}}</p>
           </mat-list-item>
         </div>
 
         <div #shareProducts>
-          <mat-list-item [routerLink]="['share-products']" *mifosxHasPermission="'READ_SHAREPRODUCT'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_SHAREPRODUCT'">
+            <mat-icon matListIcon [routerLink]="['share-products']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Share Products' | translate}}</h4>
-            <p matLine>{{'labels.text.Add new share product or modify or inactivate share product' | translate}}</p>
+            <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>
+            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['share-products']">{{'labels.text.Add new share product or modify or inactivate share product' | translate}}</p>
           </mat-list-item>
         </div>
 
         <div #charges>
-          <mat-list-item [routerLink]="['charges']" *mifosxHasPermission="'READ_CHARGE'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_CHARGE'">
+            <mat-icon matListIcon [routerLink]="['charges']">
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Charges' | translate}}</h4>
-            <p matLine>{{'labels.text.Define charges/penalties for loan products, savings and deposit products' | translate}}</p>
+            <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>
+            <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 [routerLink]="['collaterals']">
-            <mat-icon matListIcon>
+          <mat-list-item>
+            <mat-icon matListIcon [routerLink]="['collaterals']">
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Collateral Management' | translate}}</h4>
-            <p matLine>{{'labels.text.Define collaterals for Collateral Management' | translate}}</p>
+            <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>
+            <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['collaterals']">{{'labels.text.Define collaterals for Collateral Management' | translate}}</p>
           </mat-list-item>
 
-          <mat-list-item [routerLink]="['delinquency-bucket-configurations']" *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
+            <mat-icon matListIcon [routerLink]="['delinquency-bucket-configurations']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Delinquency Buckets' | translate}}</h4>
-            <p matLine>{{'labels.text.Define delinquency day ranges and bucket set for loan products' | translate}}</p>
+            <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>
+            <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['delinquency-bucket-configurations']">{{'labels.text.Define delinquency day ranges and bucket set for loan products' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -72,48 +84,58 @@ <h4 matLine>{{'labels.heading.Delinquency Buckets' | translate}}</h4>
 
         <mat-nav-list>
 
-          <mat-list-item [routerLink]="['products-mix']" *mifosxHasPermission="'READ_PRODUCTMIX'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_PRODUCTMIX'">
+            <mat-icon matListIcon [routerLink]="['products-mix']">
               <fa-icon icon="random" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Products Mix' | translate}}</h4>
-            <p matLine>{{'labels.text.Defines rules for taking multiple rules' | translate}}</p>
+            <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>
+            <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 [routerLink]="['fixed-deposit-products']" *mifosxHasPermission="'READ_FIXEDDEPOSITPRODUCT'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_FIXEDDEPOSITPRODUCT'">
+            <mat-icon matListIcon [routerLink]="['fixed-deposit-products']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Fixed Deposit Products' | translate}}</h4>
-            <p matLine>{{'labels.text.Add, modify or inactivate a Fixed deposit product' | translate}}</p>
+            <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>
+            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['fixed-deposit-products']">{{'labels.text.Add, modify or inactivate a Fixed deposit product' | translate}}</p>
           </mat-list-item>
         </div>
 
         <div #recurringDepositProducts>
-          <mat-list-item [routerLink]="['recurring-deposit-products']" *mifosxHasPermission="'READ_RECURRINGDEPOSITPRODUCT'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_RECURRINGDEPOSITPRODUCT'">
+            <mat-icon matListIcon [routerLink]="['recurring-deposit-products']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Recurring Deposit Products' | translate}}</h4>
-            <p matLine>{{'labels.text.Add, modify or inactivate a Recurring Deposit product' | translate}}</p>
+            <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>
+            <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 [routerLink]="['tax-configurations']" *mifosxHasPermission="'READ_TAXGROUP'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_TAXGROUP'">
+            <mat-icon matListIcon [routerLink]="['tax-configurations']">
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Manage Tax Configurations' | translate}}</h4>
-            <p matLine>{{'labels.text.Define Tax components and Tax groups' | translate}}</p>
+            <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>
+            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['tax-configurations']">{{'labels.text.Define Tax components and Tax groups' | translate}}</p>
           </mat-list-item>
 
-          <mat-list-item [routerLink]="['floating-rates']" *mifosxHasPermission="'READ_FLOATINGRATE'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_FLOATINGRATE'">
+            <mat-icon matListIcon [routerLink]="['floating-rates']">
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Floating Rates' | translate}}</h4>
-            <p matLine>{{'labels.text.Define floating rates for loan products' | translate}}</p>
+            <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>
+            <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['floating-rates']">{{'labels.text.Define floating rates for loan products' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>