add style to remaining components

This commit is contained in:
Omar-Nabil
2024-08-12 13:29:14 -06:00
committed by Jose Alberto Hernandez
parent b432746c05
commit 37883380aa
6 changed files with 87 additions and 35 deletions
@@ -2,18 +2,20 @@
<mat-card>
<div fxLayout="row" fxLayout.lt-md="column">
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item [routerLink]="['ranges']" *mifosxHasPermission="'READ_DELINQUENCY_RANGE'">
<mat-icon matListIcon>
<mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_RANGE'">
<mat-icon matListIcon [routerLink]="['ranges']">
<fa-icon icon="building" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>{{'labels.heading.Manage Delinquency Ranges' | translate}}</h4>
<p matLine>{{'labels.text.Define delinquency day ranges' | translate}}</p>
<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>
<p matLine *ngIf="arrowBooleans[0]" [routerLink]="['ranges']">{{'labels.text.Define delinquency day ranges' | translate}}</p>
</mat-list-item>
</mat-nav-list>
@@ -24,12 +26,14 @@
<mat-nav-list>
<mat-list-item [routerLink]="['buckets']" *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
<mat-icon matListIcon>
<mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
<mat-icon matListIcon [routerLink]="['buckets']">
<fa-icon icon="building" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>{{'labels.heading.Manage Delinquency Buckets' | translate}}</h4>
<p matLine>{{'labels.text.Define delinquency bucket as set of ranges' | translate}}</p>
<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>
<p matLine *ngIf="arrowBooleans[1]" [routerLink]="['buckets']">{{'labels.text.Define delinquency bucket as set of ranges' | translate}}</p>
</mat-list-item>
</mat-nav-list>
@@ -6,10 +6,22 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./manage-delinquency-buckets.component.scss']
})
export class ManageDelinquencyBucketsComponent implements OnInit {
// Initialize an array of 2 boolean values, all set to false
arrowBooleans: boolean[] = new Array(2).fill(false);
constructor() { }
ngOnInit(): void {
}
/**
* 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];
}
}
@@ -2,18 +2,20 @@
<mat-card>
<div fxLayout="row" fxLayout.lt-md="column">
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
<div fxFlex="50%">
<mat-nav-list>
<mat-list-item [routerLink]="['tax-components']" *mifosxHasPermission="'READ_TAXCOMPONENT'">
<mat-icon matListIcon>
<mat-list-item *mifosxHasPermission="'READ_TAXCOMPONENT'">
<mat-icon matListIcon [routerLink]="['tax-components']">
<fa-icon icon="building" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>{{'labels.heading.Manage Tax Components' | translate}}</h4>
<p matLine>{{'labels.heading.Define Tax Components' | translate}}</p>
<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>
<p matLine *ngIf="arrowBooleans[0]" [routerLink]="['tax-components']">{{'labels.heading.Define Tax Components' | translate}}</p>
</mat-list-item>
</mat-nav-list>
@@ -24,12 +26,14 @@
<mat-nav-list>
<mat-list-item [routerLink]="['tax-groups']" *mifosxHasPermission="'READ_TAXGROUP'">
<mat-icon matListIcon>
<mat-list-item *mifosxHasPermission="'READ_TAXGROUP'">
<mat-icon matListIcon [routerLink]="['tax-groups']">
<fa-icon icon="building" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>{{'labels.heading.Manage Tax Groups' | translate}}</h4>
<p matLine>{{'labels.heading.Define Tax Groups' | translate}}</p>
<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>
<p matLine *ngIf="arrowBooleans[1]" [routerLink]="['tax-groups']">{{'labels.heading.Define Tax Groups' | translate}}</p>
</mat-list-item>
</mat-nav-list>
@@ -9,10 +9,22 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './manage-tax-configurations.component.html',
})
export class ManageTaxConfigurationsComponent implements OnInit {
// Initialize an array of 2 boolean values, all set to false
arrowBooleans: boolean[] = new Array(2).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];
}
}