Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch
This commit is contained in:
Adam Saghy
2025-05-23 18:47:20 +02:00
parent c7c2f60182
commit 19a14e5b5b
882 changed files with 14895 additions and 14340 deletions
@@ -1,13 +1,13 @@
<span *ngIf="accountTitle">
<div fxFlex="{{ withTitle }}" class="header">
<span class="layout-row" *ngIf="accountTitle">
<div [ngClass]="getWithClass(withTitle)" class="header">
{{ 'labels.inputs.' + accountTitle | translate }}
</div>
<div fxFlex="{{ withAccount }}">
<div [ngClass]="getWithClass(withAccount)">
{{ glAccountValue() }}
</div>
</span>
<div fxFlex="100%" *ngIf="!accountTitle">
<div class="flex-100" *ngIf="!accountTitle">
{{ glAccountValue() }}
</div>
@@ -25,4 +25,8 @@ export class GlAccountDisplayComponent {
}
return '';
}
getWithClass(value: string): string {
return 'flex-' + value.replace('%', '');
}
}
@@ -1,38 +1,40 @@
<mat-form-field fxFlex="100%" *ngIf="required">
<mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
<div class="layout-column">
<mat-form-field class="flex-100" *ngIf="required">
<mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
<mat-select required [formControl]="inputFormControl">
<mat-option>
<ngx-mat-select-search
placeholderLabel="{{ placeHolderLabel }}"
noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
[formControl]="filterFormCtrl"
></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
{{ '(' + glAccount.glCode + ') ' + glAccount.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="inputFormControl.hasError('required')">
{{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-select required [formControl]="inputFormControl">
<mat-option>
<ngx-mat-select-search
placeholderLabel="{{ placeHolderLabel }}"
noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
[formControl]="filterFormCtrl"
></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
{{ '(' + glAccount.glCode + ') ' + glAccount.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="inputFormControl.hasError('required')">
{{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="100%" *ngIf="!required">
<mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
<mat-form-field class="flex-100" *ngIf="!required">
<mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
<mat-select [formControl]="inputFormControl">
<mat-option>
<ngx-mat-select-search
[formControl]="filterFormCtrl"
placeholderLabel="{{ placeHolderLabel }}"
noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
>
</ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
{{ '(' + glAccount.glCode + ') ' + glAccount.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-select [formControl]="inputFormControl">
<mat-option>
<ngx-mat-select-search
[formControl]="filterFormCtrl"
placeholderLabel="{{ placeHolderLabel }}"
noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
>
</ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
{{ '(' + glAccount.glCode + ') ' + glAccount.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
@@ -1,5 +1,5 @@
<div *ngIf="isJournalEntryLoaded">
<div fxLayout="row" fxLayoutAlign="end" class="container m-b-20" *ngIf="dataSource?.data[0].manualEntry">
<div *ngIf="dataSource?.data[0].manualEntry" class="layout-row layout-align-end container m-b-20">
<button
mat-raised-button
color="primary"
@@ -17,36 +17,36 @@
<div class="container m-b-20" *ngIf="isViewTransaction()">
<mat-card class="mat-elevation-z8" *ngIf="dataSource">
<mat-card-content>
<div fxLayout="row wrap" class="content">
<div fxFlex="25%" fxFlex.lt-md="50%" class="header">
<div class="layout-row-wrap">
<div class="flex-25 header">
{{ 'labels.inputs.Office' | translate }}
</div>
<div fxFlex="25%" fxFlex.lt-md="50%">
<div class="flex-25">
{{ dataSource.data[0].officeName }}
</div>
<div fxFlex="25%" fxFlex.lt-md="50%" class="header">
<div class="flex-25 header">
{{ 'labels.inputs.Transaction Date' | translate }}
</div>
<div fxFlex="25%" fxFlex.lt-md="50%">
<div class="flex-25">
{{ dataSource.data[0].transactionDate | dateFormat }}
</div>
<div fxFlex="25%" fxFlex.lt-md="50%" class="header">
<div class="flex-25 header">
{{ 'labels.inputs.Created By' | translate }}
</div>
<div fxFlex="25%" fxFlex.lt-md="50%">
<div class="flex-25">
{{ dataSource.data[0].createdByUserName }}
</div>
<div fxFlex="25%" fxFlex.lt-md="50%" class="header">
<div class="flex-25 header">
{{ 'labels.inputs.Submitted on' | translate }}
</div>
<div fxFlex="25%" fxFlex.lt-md="50%">
<div class="flex-25">
{{ dataSource.data[0].submittedOnDate | datetimeFormat }}
</div>
</div>
@@ -54,7 +54,7 @@
</mat-card>
</div>
<div class="mat-elevation-z8 container" fxLayoutAlign="center" fxLayout="row wrap">
<div class="mat-elevation-z8 container layout-align-center layout-row-wrap">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="id">
<th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
@@ -115,7 +115,7 @@
></tr>
</table>
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
<div class="layout-row layout-align-center m-t-15 m-b-15 gap-5px layout-xs-column">
<button type="button" color="primary" mat-raised-button (click)="goBack()">
{{ 'labels.buttons.Back' | translate }}
</button>
@@ -131,7 +131,7 @@
</div>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
<div class="layout-row layout-align-center m-t-15 m-b-15 gap-5px layout-xs-column">
<button type="button" color="primary" mat-raised-button (click)="goBack()">
{{ 'labels.buttons.Back' | translate }}
</button>
@@ -1,20 +1,20 @@
<div fxLayout="row wrap" fxLayout.lt-md="column">
<div fxFlexFill fxFlex="98%" *ngIf="accountingRule" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">{{ 'labels.inputs.Type' | translate }}:</span>
<span fxFlex="60%">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
<div class="layout-row-wrap responsive-column">
<div *ngIf="accountingRule" class="layout-row-wrap responsive-column flex-fill flex-98">
<span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
<span class="flex-60">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
</div>
<div fxFlexFill *ngIf="isCashOrAccrualAccounting()" fxLayout="row wrap" fxLayout.lt-md="column">
<h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
<div *ngIf="isCashOrAccrualAccounting()" class="layout-row-wrap responsive-column flex-fill">
<h4 class="mat-h4 flex-fill">{{ 'labels.heading.Assets' | translate }}</h4>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Saving reference'"
[glAccount]="accountingMappings.savingsReferenceAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Overdraft portfolio'"
*ngIf="accountingMappings.overdraftPortfolioControl"
[glAccount]="accountingMappings.overdraftPortfolioControl"
@@ -22,7 +22,7 @@
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Fees Receivable'"
*ngIf="isAccrualAccounting()"
[glAccount]="accountingMappings.feeReceivableAccount"
@@ -30,7 +30,7 @@
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Penalties Receivable'"
*ngIf="isAccrualAccounting()"
[glAccount]="accountingMappings.penaltyReceivableAccount"
@@ -38,23 +38,23 @@
>
</mifosx-gl-account-display>
<h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
<h4 class="mat-h4 flex-fill">{{ 'labels.heading.Liabilities' | translate }}</h4>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Saving control'"
[glAccount]="accountingMappings.savingsControlAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Savings transfers in suspense'"
[glAccount]="accountingMappings.transfersInSuspenseAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Interest Payable'"
*ngIf="isAccrualAccounting()"
[glAccount]="accountingMappings.interestPayableAccount"
@@ -62,7 +62,7 @@
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Escheat liability'"
*ngIf="accountingMappings.escheatLiabilityAccount"
[glAccount]="accountingMappings.escheatLiabilityAccount"
@@ -70,23 +70,23 @@
>
</mifosx-gl-account-display>
<h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
<h4 class="mat-h4 flex-fill">{{ 'labels.heading.Income' | translate }}</h4>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Income from fees'"
[glAccount]="accountingMappings.incomeFromFeeAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Income from penalties'"
[glAccount]="accountingMappings.incomeFromPenaltyAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Income from Interest'"
*ngIf="accountingMappings.incomeFromInterest"
[glAccount]="accountingMappings.incomeFromInterest"
@@ -94,16 +94,16 @@
>
</mifosx-gl-account-display>
<h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Expenses' | translate }}</h4>
<h4 class="mat-h4 flex-fill">{{ 'labels.heading.Expenses' | translate }}</h4>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Interest on savings'"
[glAccount]="accountingMappings.interestOnSavingsAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
fxFlex="100%"
class="flex-100"
[accountTitle]="'Write-off'"
*ngIf="accountingMappings.writeOffAccount"
[glAccount]="accountingMappings.writeOffAccount"
@@ -2,7 +2,7 @@
<div mat-dialog-content>
<form [formGroup]="changePasswordForm">
<div fxLayout="column">
<div class="layout-column">
<mifosx-input-password
#password
formControlName="password"
@@ -1,11 +1,11 @@
<mat-form-field fxFlex="28%">
<mat-form-field class="flex-28">
<mat-label>{{ getLabelText() }}</mat-label>
<mat-select placeholder="{{ getPlaceHolderText() }}" formControlName="controlSelect">
<mat-option *ngFor="let option of selectOptions" [value]="option.id">
{{ option.value | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
<button mat-button *ngIf="controlSelect" matSuffix mat-icon-button aria-label="Clear" (click)="clearProperty($event)">
<button *ngIf="controlSelect" matSuffix mat-icon-button aria-label="Clear" (click)="clearProperty($event)">
<mat-icon>{{ 'labels.buttons.Close' | translate }}</mat-icon>
</button>
</mat-form-field>
@@ -1,9 +1,9 @@
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="2%">
<mat-form-field [fxFlex]="flex || '83%'">
<div class="layout-row layout-lt-md-column gap-2percent">
<mat-form-field [ngStyle]="{ flex: '0 0 ' + (flex || '83%') }">
<input matInput [readonly]="true" [value]="fileName || ''" placeholder="No file selected" />
</mat-form-field>
<span fxFlex="10%" fxFlexAlign="center">
<span class="flex-10 align-center">
<button mat-button (click)="uploadFile.click()">
<fa-icon icon="folder-open" size="lg"></fa-icon>
&nbsp;&nbsp;
+5 -7
View File
@@ -1,6 +1,6 @@
<div fxLayout="column" id="footer" class="m-b-20" *ngIf="displayBackEndInfo">
<mat-divider fxFlexAlign="center" class="divider"></mat-divider>
<div fxLayout="column" class="m-b-20 content">
<div class="layout-column m-b-20" id="footer" *ngIf="displayBackEndInfo">
<mat-divider class="divider align-center"></mat-divider>
<div class="layout-column m-b-20 content-wrapper footer-center">
<table class="versions">
<tr>
<td class="footer-content">Mifos</td>
@@ -27,8 +27,6 @@
</tr>
</table>
</div>
<mat-divider fxFlexAlign="center" class="divider"></mat-divider>
<p fxFlexAlign="center" class="footer-content">
{{ 'APP_NAME' | translate }} {{ 'labels.text.by' | translate }} Mifos
</p>
<mat-divider class="divider align-center"></mat-divider>
<p class="footer-content align-center">{{ 'APP_NAME' | translate }} {{ 'labels.text.by' | translate }} Mifos</p>
</div>
+4 -3
View File
@@ -4,9 +4,10 @@
#footer {
align-items: center;
.content {
max-width: 30%;
width: 30%;
.content-wrapper {
max-width: 100%;
width: 70%;
padding-left: 30%;
.versions {
width: 100%;
@@ -3,17 +3,17 @@
<div
mat-dialog-content
[formGroup]="form"
[fxLayout]="layout.columns > 1 ? 'row wrap' : 'column'"
fxLayout.lt-md="column"
[fxLayoutGap]="(layout.columns > 1 ? layout.gap : 0) + '%'"
fxLayoutGap.lt-md="0%"
[ngClass]="[
layout.columns > 1 ? 'flex flex-wrap gap-' + layout.gap + 'percent' : 'layout-column',
'responsive-column'
]"
>
<div *ngFor="let formfield of formfields" [fxFlex]="layout.flex + '%'" fxFlex.lt-md="100%">
<mifosx-formfield [formfield]="formfield" [form]="form" fxFlexFill></mifosx-formfield>
<div *ngFor="let formfield of formfields" [ngClass]="'flex-' + layout.flex + ' responsive-flex-full'">
<mifosx-formfield [formfield]="formfield" [form]="form" class="flex-fill"></mifosx-formfield>
</div>
</div>
<mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<mat-dialog-actions class="layout-row layout-xs-column layout-align-center gap-2percent" align="end">
<button mat-raised-button mat-dialog-close>{{ 'labels.buttons.' + layout.cancelButtonText | translate }}</button>
<button
mat-raised-button
@@ -1,6 +1,6 @@
<div [formGroup]="form" fxFlexFill>
<div *ngIf="formfield.controlType === 'input' || formfield.controlType === 'select'" fxFlexFill>
<mat-form-field fxFlexFill>
<div [formGroup]="form" class="flex-fill">
<div *ngIf="formfield.controlType === 'input' || formfield.controlType === 'select'" class="flex-fill">
<mat-form-field class="flex-fill">
<mat-label>{{ formfield.label }}</mat-label>
<input
@@ -28,7 +28,7 @@
</mat-form-field>
</div>
<mat-form-field fxFlexFill *ngIf="formfield.controlType === 'datepicker'" (click)="datePicker.open()">
<mat-form-field class="flex-fill" Fill *ngIf="formfield.controlType === 'datepicker'" (click)="datePicker.open()">
<mat-label>{{ formfield.label }}</mat-label>
<input
matInput
@@ -46,7 +46,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlexFill *ngIf="formfield.controlType === 'datetimepicker'" (click)="datePicker.open()">
<mat-form-field class="flex-fill" Fill *ngIf="formfield.controlType === 'datetimepicker'" (click)="datePicker.open()">
<mat-label>{{ formfield.label }}</mat-label>
<input
matInput
@@ -1,17 +1,18 @@
<mat-form-field appearance="fill" fxFlex="100%" *ngIf="isRequired">
<mat-form-field appearance="fill" class="flex-100 input-container" *ngIf="isRequired">
<mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
<span matTextSuffix class="m-l-10">{{ currency.code }}</span>
<span fxFlex="auto"></span>
<input
mifosxFormatAmount="{{ currency.code }}:{{ currency.displaySymbol }}"
class="right-input"
[formControl]="inputFormControl"
(keypress)="numberOnly($event)"
required
matInput
(blur)="displayHint = false"
(focus)="displayHint = true"
/>
<div class="input-group">
<span>{{ currency.code }}</span>
<input
mifosxFormatAmount="{{ currency.code }}:{{ currency.displaySymbol }}"
class="right-input"
[formControl]="inputFormControl"
(keypress)="numberOnly($event)"
required
matInput
(blur)="displayHint = false"
(focus)="displayHint = true"
/>
</div>
<mat-error *ngIf="inputFormControl.hasError('required')">
{{ 'labels.inputs.' + inputLabel | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
@@ -20,10 +21,10 @@
inputFormControl.value | currency: currency.code : currency.displaySymbol : '1.2-2'
}}</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" fxFlex="100%" *ngIf="!isRequired">
<mat-form-field appearance="fill" class="flex-100" *ngIf="!isRequired">
<mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
<span matTextSuffix class="m-l-10">{{ currency.code }}</span>
<span fxFlex="auto"></span>
<span class="flex-auto"></span>
<input
mifosxFormatAmount="{{ currency.code }}:{{ currency.displaySymbol }}"
class="right-input"
@@ -2,6 +2,17 @@
margin-top: -7px;
}
.input-container {
width: 100%;
}
.input-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
}
.container {
max-width: 37rem;
}
@@ -1,11 +1,11 @@
<h1 mat-dialog-title>{{ 'labels.heading.Keyboard Shortcuts' | translate }}</h1>
<div mat-dialog-content>
<div fxLayout="column" fxLayoutGap="2%">
<div class="layout-column gap-2px">
<ng-container *ngFor="let item of buttonConfig.buttonCombinations">
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill fxFlex="50%">
<span fxFlex="50%">
<div class="flex-fill flex-50">
<span class="flex-50">
<span *ngIf="item.ctrlKey">
<span class="modifier-key">{{ 'labels.inputs.Ctrl' | translate }}</span> +
</span>
@@ -19,7 +19,7 @@
<span class="modifier-key">{{ item.key }}</span></span
>
</span>
<span fxFlex="50%">{{ item.title }}</span>
<span class="flex-50">{{ item.title }}</span>
</div>
</ng-container>
</div>
@@ -1,4 +1,4 @@
#language-selector,
.languageselector {
max-width: 6rem;
// max-width: 6rem;
}
+3 -5
View File
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
import { LayoutModule } from '@angular/cdk/layout';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
@@ -23,8 +22,8 @@ import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
@@ -43,12 +42,11 @@ import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
/**
* Material Module
*
* Angular CDK, Angular Material and Flex Layout modules are exported here.
* Angular CDK and Angular Material modules are exported here.
*/
@NgModule({
exports: [
DragDropModule,
FlexLayoutModule,
LayoutModule,
MatAutocompleteModule,
MatButtonModule,
@@ -89,7 +87,7 @@ import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
providers: [
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: { appearance: 'standard' }
useValue: { appearance: 'fill' }
},
{
provide: STEPPER_GLOBAL_OPTIONS,
@@ -13,12 +13,7 @@
</button>
<mat-menu class="mifosx-notifications-menu" #notificationsMenu="matMenu" [overlapTrigger]="false">
<div
*ngIf="unreadNotifications.length === 0"
fxLayout="column"
fxLayoutAlign="center center"
class="no-notifications"
>
<div *ngIf="unreadNotifications.length === 0" class="layout-column align-center-center no-notifications">
<mat-icon class="no-notifications-icon">
<span class="material-icons">{{ 'labels.menus.Notifications' | translate }}</span>
</mat-icon>
@@ -1,12 +1,4 @@
<div
*ngIf="searchVisible"
class="search-bar"
fxFlex="auto"
fxHide.lt-sm="true"
fxLayout="row"
fxLayoutGap="2%"
[@fadeInOut]
>
<div *ngIf="searchVisible" class="search-bar flex-auto layout-row gap-2percent hide-lt-sm" [@fadeInOut]>
<mat-form-field class="search">
<mat-label>{{ 'labels.text.Search' | translate }}</mat-label>
<input matInput type="text" [formControl]="query" (keydown.enter)="search()" />
@@ -23,7 +15,7 @@
</div>
<div class="search-icon">
<button mat-icon-button (click)="toggleSearchVisibility()" fxHide.lt-sm="true">
<button mat-icon-button (click)="toggleSearchVisibility()" class="hide-lt-sm">
<fa-icon icon="search" size="lg" matTooltip="{{ 'labels.text.Search' | translate }}"></fa-icon>
</button>
</div>
@@ -1,10 +1,10 @@
<mat-form-field id="server-selector" *ngIf="existMoreThanOneServer">
<mat-label>{{ 'labels.inputs.Server' | translate }}</mat-label>
<mat-select [formControl]="serverSelector" (selectionChange)="setServer()">
<mat-select [formControl]="serverSelector" (selectionChange)="setServer()" panelClass="server-panel">
<div class="sticky">
<form [formGroup]="form" (ngSubmit)="addNewServer()">
<div class="actions">
<mat-form-field class="ml" fxFlexAlign="start">
<mat-form-field class="ml align-start">
<span matPrefix
><mat-icon>{{ 'labels.inputs.language' | translate }}</mat-icon></span
>
@@ -1,5 +1,7 @@
.actions {
display: inline-block;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.rg {
@@ -23,3 +25,7 @@
background-color: white; // don't see mat-option when scrolling
box-shadow: 1px -2px 10px 0 grey; // shadow at the bottom
}
mat-form-field {
width: 96%;
}
@@ -1,4 +1,4 @@
<div fxFlexFill fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<div class="flex-fill layout-row layout-align-center margin-t gap-2percent layout-xs-column">
<button mat-raised-button matStepperPrevious [disabled]="disablePrevious">
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
Previous
@@ -1,29 +1,35 @@
<div class="tab-container mat-typography">
<div fxLayout="row" fxLayoutAlign="start">
<div class="layout-row align-start">
<div class="m-b-10">
<h3>{{ datatableName }}</h3>
</div>
<div class="action-button m-b-7" fxLayoutGap="10px">
<div class="action-button m-b-7 gap-10px">
<span *mifosxHasPermission="'CREATE_' + datatableName">
<button mat-raised-button color="primary" (click)="add()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
</span>
<span *mifosxHasPermission="'DELETE_' + datatableName" [fxShow]="isSelected">
<button class="delete-button" mat-raised-button color="warn" (click)="deleteSelected()">
<fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete Selected' | translate }}
</button>
</span>
<span *mifosxHasPermission="'DELETE_' + datatableName" [fxShow]="datatableData.length > 0">
<button class="delete-button" mat-raised-button color="warn" (click)="delete()">
<fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete All' | translate }}
</button>
</span>
<ng-container *mifosxHasPermission="'DELETE_' + datatableName">
<span *ngIf="isSelected">
<button class="delete-button" mat-raised-button color="warn" (click)="deleteSelected()">
<fa-icon icon="trash" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Delete Selected' | translate }}
</button>
</span>
</ng-container>
<ng-container *mifosxHasPermission="'DELETE_' + datatableName">
<span *ngIf="datatableData.length > 0">
<button class="delete-button" mat-raised-button color="warn" (click)="delete()">
<fa-icon icon="trash" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Delete All' | translate }}
</button>
</span>
</ng-container>
</div>
</div>
<div class="m-t-10">
<table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25" [fxHide]="isLoading">
<table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
<ng-container *ngFor="let datatableColumn of datatableColumns; let i = index" [matColumnDef]="datatableColumn">
<ng-container *ngIf="i === 0">
<th mat-header-cell *matHeaderCellDef></th>
@@ -1,7 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { DecimalPipe } from '@angular/common';
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatCheckboxChange as MatCheckboxChange } from '@angular/material/checkbox';
import { MatDialog } from '@angular/material/dialog';
import { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
@@ -1,6 +1,6 @@
<div class="tab-container mat-typography">
<h3>{{ datatableName }}</h3>
<div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
<div class="layout-row align-end m-b-20">
<button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
@@ -16,19 +16,16 @@
<div class="m-t-10" *ngIf="dataObject.data.length > 0">
<div
fxFlexFill
class="flex-fill"
*ngFor="let columnHeader of dataObject.columnHeaders; let i = index"
[ngClass]="setAttributeClass(columnHeader.columnName)"
>
<div fxFlex="40%" class="mat-body-strong left">
<div class="mat-body-strong left flex-40">
{{ columnHeader.columnDisplayName }}
{{ getInputName(columnHeader.columnName) }}
</div>
<div
fxFlex="68%"
[ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)"
class="right"
>
<div [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)" class="right flex-60">
<span *ngSwitchCase="'DATE'">
{{ dataObject.data[0].row[i] | dateFormat }}
</span>
@@ -1,8 +1,8 @@
<div class="tab-container mat-typography">
<div fxLayout="row" fxLayoutAlign="start center">
<h3 fxFlex="90%">{{ 'labels.heading.Documents' | translate }}</h3>
<div class="layout-row align-start-center">
<h3 class="flex-90">{{ 'labels.heading.Documents' | translate }}</h3>
<div fxFlex="10%" *mifosxHasPermission="'CREATE_DOCUMENT'">
<div class="flex-10" *mifosxHasPermission="'CREATE_DOCUMENT'">
<button mat-raised-button class="f-right" color="primary" (click)="uploadDocument()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
@@ -72,7 +72,8 @@ export class EntityDocumentsTabComponent implements OnInit {
uploadDocument() {
const uploadDocumentDialogRef = this.dialog.open(UploadDocumentDialogComponent, {
data: { documentIdentifier: false, entityType: '' }
data: { documentIdentifier: false, entityType: '' },
width: '33rem'
});
uploadDocumentDialogRef.afterClosed().subscribe((dialogResponse: any) => {
if (dialogResponse) {
@@ -5,12 +5,10 @@
<form
#formRef="ngForm"
[formGroup]="noteForm"
fxLayout="row"
fxLayoutAlign="start baseline"
fxLayoutGap="20px"
class="layout-row align-start-baseline gap-20px"
(ngSubmit)="addNote()"
>
<mat-form-field fxFlex="calc(85%-20px)">
<mat-form-field class="flex-85-minus-20px">
<textarea
required
formControlName="note"
@@ -20,7 +18,7 @@
cdkAutosizeMinRows="2"
></textarea>
</mat-form-field>
<button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid">
<button mat-raised-button class="flex-1" color="primary" [disabled]="!noteForm.valid">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
</form>
@@ -28,23 +26,25 @@
<mat-list>
<mat-list-item *ngFor="let entityNote of entityNotes; let i = index">
<fa-icon icon="sticky-note" matListIcon></fa-icon>
<h3 matLine>{{ entityNote.note }}</h3>
<p matLine>
<span
><b>{{ 'labels.inputs.Created By' | translate }}:</b> {{ entityNote.createdByUsername }}</span
><br />
<span
><b>{{ 'labels.inputs.Date' | translate }}:</b> {{ entityNote.createdOn | dateFormat }}</span
>
</p>
<div fxLayout="row" fxLayoutAlign="flex-start">
<button mat-button color="primary" (click)="editNote(entityNote.id, entityNote.note, i)">
<fa-icon icon="edit"></fa-icon>
</button>
<button mat-button color="warn" (click)="deleteNote(entityNote.id, i)">
<fa-icon icon="trash"></fa-icon>
</button>
<div class="list-item-content">
<div class="left-section">
<fa-icon icon="sticky-note" matListIcon></fa-icon>
<span>{{ entityNote.note }}</span>
<span class="note-details">
<b>{{ 'labels.inputs.Created By' | translate }}:</b> {{ entityNote.createdByUsername }}
<b>{{ 'labels.inputs.Date' | translate }}:</b> {{ entityNote.createdOn | dateFormat }}
</span>
</div>
<div class="right-section">
<div class="layout-row align-start">
<button mat-button color="primary" (click)="editNote(entityNote.id, entityNote.note, i)">
<fa-icon icon="edit"></fa-icon>
</button>
<button mat-button color="warn" (click)="deleteNote(entityNote.id, i)">
<fa-icon icon="trash"></fa-icon>
</button>
</div>
</div>
</div>
</mat-list-item>
</mat-list>
@@ -2,3 +2,25 @@
padding: 1%;
margin: 1%;
}
.list-item-content {
display: flex;
align-items: center;
width: 100%;
}
.note-details {
font-size: 14px;
}
.left-section {
display: flex;
align-items: center;
gap: 10px;
}
.right-section {
margin-left: auto;
display: flex;
gap: 4px;
}
@@ -1,4 +1,4 @@
<mat-form-field fxFlexAlign="center" id="tenant-selector">
<mat-form-field class="flex-fill align-center" id="tenant-selector">
<span matPrefix class="m-r-10">
<fa-icon icon="building" size="lg"></fa-icon>
</span>
@@ -1,9 +1,9 @@
<div fxLayout="row wrap" class="content">
<div fxFlex="50%" class="mat-body-strong">
<div class="layout-row-wrap card-content">
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Payment Type' | translate }}
</div>
<div fxFlex="50%">
<div class="flex-50">
{{ paymentDetailData.paymentType.name }}
</div>
</div>
@@ -1,6 +1,6 @@
@use 'assets/styles/helper';
.content {
.card-content {
width: 100%;
padding-bottom: 25px;