add some style to accounting to enhance our user experience
This commit is contained in:
Omar-Nabil
committed by
Jose Alberto Hernandez
Jose Alberto Hernandez
parent
559e0139c3
commit
8018853524
@@ -2,55 +2,71 @@
|
||||
|
||||
<mat-card>
|
||||
|
||||
<div fxLayout="row" fxLayout.lt-md="column">
|
||||
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px">
|
||||
|
||||
<div fxFlex="50%">
|
||||
|
||||
<mat-nav-list>
|
||||
|
||||
<mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'" [routerLink]="['journal-entries/frequent-postings']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'">
|
||||
<mat-icon matListIcon [routerLink]="['journal-entries/frequent-postings']">
|
||||
<fa-icon icon="sync" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Frequent Postings" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.These are predefined postings" | translate}}</p>
|
||||
<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>
|
||||
|
||||
<div #createJournalEntries>
|
||||
<mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'" [routerLink]="['journal-entries/create']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'">
|
||||
<mat-icon matListIcon [routerLink]="['journal-entries/create']">
|
||||
<fa-icon icon="plus" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Create Journal Entries" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.Manual journal entry transactions recorded in a journal" | translate}}</p>
|
||||
<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>
|
||||
|
||||
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" [routerLink]="['journal-entries']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'">
|
||||
<mat-icon matListIcon [routerLink]="['journal-entries']">
|
||||
<fa-icon icon="search" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Search Journal Entries" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.Advanced search option for journal entries" | translate}}</p>
|
||||
<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>
|
||||
|
||||
<div #accountsLinked>
|
||||
<mat-list-item *mifosxHasPermission="'READ_FINANCIALACTIVITYACCOUNT'" [routerLink]="['financial-activity-mappings']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'READ_FINANCIALACTIVITYACCOUNT'">
|
||||
<mat-icon matListIcon [routerLink]="['financial-activity-mappings']">
|
||||
<fa-icon icon="link" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Accounts Linked to Financial Activities" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.List of Financial Activities and GL Account Mappings" | translate}}</p>
|
||||
<h4 matLine [routerLink]="['financial-activity-mappings']">{{"labels.heading.Accounts Linked to Financial Activities" | 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]="['financial-activity-mappings']">{{"labels.text.List of Financial Activities and GL Account Mappings" | translate}}</p>
|
||||
</mat-list-item>
|
||||
</div>
|
||||
|
||||
<div #migrateOpeningBalances>
|
||||
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" [routerLink]="['migrate-opening-balances']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" >
|
||||
<mat-icon matListIcon [routerLink]="['migrate-opening-balances']">
|
||||
<fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Migrate Opening Balances (Office-wise)" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.Set or update office-level opening balances for GL accounts" | translate}}</p>
|
||||
<h4 matLine [routerLink]="['migrate-opening-balances']">{{"labels.heading.Migrate Opening Balances (Office-wise)" | 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]="['migrate-opening-balances']">{{"labels.text.Set or update office-level opening balances for GL accounts" | translate}}</p>
|
||||
</mat-list-item>
|
||||
</div>
|
||||
|
||||
@@ -63,47 +79,59 @@
|
||||
<mat-nav-list>
|
||||
|
||||
<div #chartofAccounts>
|
||||
<mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'" [routerLink]="['chart-of-accounts']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'">
|
||||
<mat-icon matListIcon [routerLink]="['chart-of-accounts']">
|
||||
<fa-icon icon="sitemap" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Chart of Accounts" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.List of accounts used by the organization" | translate}}</p>
|
||||
<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>
|
||||
|
||||
<p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']">{{"labels.text.List of accounts used by the organization" | translate}}</p>
|
||||
</mat-list-item>
|
||||
</div>
|
||||
|
||||
<div #closingEntries>
|
||||
<mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'" [routerLink]="['closing-entries']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'" >
|
||||
<mat-icon matListIcon [routerLink]="['closing-entries']">
|
||||
<fa-icon icon="archive" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Closing Entries" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.Journal entries made at the end of accounting period" | translate}}</p>
|
||||
<h4 matLine [routerLink]="['closing-entries']">{{"labels.heading.Closing Entries" | 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]="['closing-entries']">{{"labels.text.Journal entries made at the end of accounting period" | translate}}</p>
|
||||
</mat-list-item>
|
||||
</div>
|
||||
|
||||
<mat-list-item *mifosxHasPermission="'READ_ACCOUNTINGRULE'" [routerLink]="['accounting-rules']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'READ_ACCOUNTINGRULE'">
|
||||
<mat-icon matListIcon [routerLink]="['accounting-rules']">
|
||||
<fa-icon icon="list" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Accounting Rules" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.List of all accounting rules" | translate}}</p>
|
||||
<h4 matLine [routerLink]="['accounting-rules']">{{"labels.heading.Accounting Rules" | 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]="['accounting-rules']">{{"labels.text.List of all accounting rules" | translate}}</p>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'" [routerLink]="['periodic-accruals']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
|
||||
<mat-icon matListIcon [routerLink]="['periodic-accruals']">
|
||||
<fa-icon icon="calendar" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Accruals" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.Accrues income, expenses and liabilities" | translate}}</p>
|
||||
<h4 matLine [routerLink]="['periodic-accruals']">{{"labels.heading.Accruals" | 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]="['periodic-accruals']">{{"labels.text.Accrues income, expenses and liabilities" | translate}}</p>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'" [routerLink]="['provisioning-entries']">
|
||||
<mat-icon matListIcon>
|
||||
<mat-list-item *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
|
||||
<mat-icon matListIcon [routerLink]="['provisioning-entries']">
|
||||
<fa-icon icon="cogs" size="sm"></fa-icon>
|
||||
</mat-icon>
|
||||
<h4 matLine>{{"labels.heading.Provisioning Entries" | translate}}</h4>
|
||||
<p matLine>{{"labels.text.Create provisioning entries" | translate}}</p>
|
||||
<h4 matLine [routerLink]="['provisioning-entries']">{{"labels.heading.Provisioning Entries" | 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]="['provisioning-entries']">{{"labels.text.Create provisioning entries" | translate}}</p>
|
||||
</mat-list-item>
|
||||
|
||||
</mat-nav-list>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
|
||||
import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core';
|
||||
import { 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';
|
||||
|
||||
/**
|
||||
* Accounting component.
|
||||
@@ -36,6 +36,8 @@ export class AccountingComponent implements OnInit, AfterViewInit {
|
||||
@ViewChild('createJournalEntries') createJournalEntries: ElementRef<any>;
|
||||
/* Template for popover on Create Journal Entries */
|
||||
@ViewChild('templateCreateJournalEntries') templateCreateJournalEntries: TemplateRef<any>;
|
||||
// Initialize an array of 10 boolean values, all set to false
|
||||
arrowBooleans: boolean[] = new Array(10).fill(false);
|
||||
|
||||
/**
|
||||
* @param {Router} router Router.
|
||||
@@ -55,6 +57,7 @@ export class AccountingComponent 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);
|
||||
@@ -177,4 +180,9 @@ export class AccountingComponent implements OnInit, AfterViewInit {
|
||||
this.router.navigate(['/accounting/closing-entries']);
|
||||
}
|
||||
|
||||
arrowBooleansToggle(arrowNumber:number) {
|
||||
// Toggle the boolean value at the given index
|
||||
this.arrowBooleans[arrowNumber] = !this.arrowBooleans[arrowNumber];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user