Skip to content

Commit 57f6def

Browse files
tomasAscenciotomasAscencio
authored
WEB-419: Fix layout of Interbank Transfer page (#2786)
1 parent 3a0b208 commit 57f6def

File tree

3 files changed

+301
-98
lines changed

3 files changed

+301
-98
lines changed

‎src/app/account-transfers/make-account-transfers/make-account-transfers.component.html‎

Lines changed: 147 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<div class="left triangle"></div>
66
<div class="right triangle"></div>
77
</div>
8+
89
<mat-card *ngIf="!isLoading" class="transfer-card">
910
<mat-card-content>
1011
<!-- Source Account Details Section -->
@@ -53,7 +54,7 @@ <h3 class="section-title transfer-heading">{{ 'labels.heading.Transferred To' |
5354
<mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
5455
<input
5556
matInput
56-
[disabled]="interbankTransferForm"
57+
[readonly]="interbankTransferForm"
5758
type="tel"
5859
#input
5960
[(ngModel)]="phoneAccount"
@@ -66,28 +67,27 @@ <h3 class="section-title transfer-heading">{{ 'labels.heading.Transferred To' |
6667
</mat-form-field>
6768
</div>
6869

70+
<!--interbank -->
6971
<mat-card-actions *ngIf="!interbankTransferForm" class="action-buttons">
70-
<button type="button" mat-raised-button [routerLink]="['../..']" class="cancel-button">
71-
{{ 'labels.buttons.Cancel' | translate }}
72-
</button>
73-
<button
74-
mat-raised-button
75-
color="primary"
76-
[disabled]="phoneAccount.length !== 10"
77-
(click)="searchAccountByNumber()"
78-
*mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
79-
id="search-button"
80-
class="primary-button"
81-
>
82-
{{ 'labels.buttons.Search' | translate }}
83-
</button>
72+
<ng-container *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'">
73+
<button
74+
mat-raised-button
75+
color="primary"
76+
[disabled]="phoneAccount.length !== 10"
77+
(click)="searchAccountByNumber()"
78+
id="search-button"
79+
class="primary-button"
80+
>
81+
{{ 'labels.buttons.Search' | translate }}
82+
</button>
83+
</ng-container>
8484
</mat-card-actions>
8585
</div>
8686

8787
<mat-divider *ngIf="!interbank"></mat-divider>
8888

89-
<!-- Transfer Form Section -->
90-
<form *ngIf="!interbank" [formGroup]="makeAccountTransferForm" class="transfer-form" (ngSubmit)="submit()">
89+
<!-- Transfer Form Section (Normal) -->
90+
<form *ngIf="!interbank && makeAccountTransferForm" [formGroup]="makeAccountTransferForm" class="transfer-form">
9191
<h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details' | translate }}</h3>
9292

9393
<div class="form-grid">
@@ -180,6 +180,8 @@ <h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details'
180180
formControlName="transferAmount"
181181
placeholder="Enter amount"
182182
title="Transfer amount"
183+
min="0.01"
184+
step="0.01"
183185
/>
184186
<mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
185187
{{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
@@ -207,20 +209,135 @@ <h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details'
207209
</mat-error>
208210
</mat-form-field>
209211
</div>
210-
<mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
211-
<button type="button" mat-raised-button [routerLink]="['../../transactions']">
212-
{{ 'labels.buttons.Cancel' | translate }}
213-
</button>
214-
<button mat-raised-button color="primary" [disabled]="!makeAccountTransferForm.valid">
215-
{{ 'labels.buttons.Submit' | translate }}
216-
</button>
217-
</mat-card-actions>
218212
</form>
219-
<mifosx-make-account-interbank-transfers
220-
*ngIf="interbank && interbankTransferForm"
221-
[makeAccountTransferForm]="makeAccountTransferForm"
222-
[balance]="balance"
223-
></mifosx-make-account-interbank-transfers>
213+
214+
<!-- Interbank Transfer Form Section -->
215+
<form
216+
*ngIf="interbank && interbankTransferForm && makeAccountTransferForm"
217+
[formGroup]="makeAccountTransferForm"
218+
class="transfer-form"
219+
>
220+
<h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details' | translate }}</h3>
221+
222+
<div class="form-grid">
223+
<mat-form-field class="form-field" (click)="transferDatePicker.open()">
224+
<mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
225+
<input
226+
matInput
227+
[min]="minDate"
228+
[max]="maxDate"
229+
[matDatepicker]="transferDatePicker"
230+
required
231+
formControlName="transferDate"
232+
placeholder="Select date"
233+
title="Transaction Date"
234+
/>
235+
<mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
236+
<mat-datepicker #transferDatePicker></mat-datepicker>
237+
<mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
238+
{{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
239+
<strong>{{ 'labels.commons.required' | translate }}</strong>
240+
</mat-error>
241+
</mat-form-field>
242+
243+
<mat-form-field class="form-field">
244+
<mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
245+
<input matInput formControlName="toBank" [readonly]="true" placeholder="Bank" title="Bank" />
246+
</mat-form-field>
247+
248+
<mat-form-field class="form-field">
249+
<mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
250+
<input matInput formControlName="toClientId" [readonly]="true" placeholder="Client" title="Client" />
251+
</mat-form-field>
252+
253+
<mat-form-field class="form-field">
254+
<mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
255+
<input
256+
matInput
257+
formControlName="toAccountType"
258+
[readonly]="true"
259+
placeholder="Account Type"
260+
title="Account Type"
261+
/>
262+
</mat-form-field>
263+
264+
<mat-form-field class="form-field">
265+
<mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
266+
<input matInput formControlName="toAccountId" [readonly]="true" placeholder="Account" title="Account" />
267+
</mat-form-field>
268+
269+
<mat-form-field class="form-field">
270+
<mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
271+
<input
272+
type="number"
273+
matInput
274+
required
275+
formControlName="transferAmount"
276+
placeholder="Enter amount"
277+
title="Transfer amount"
278+
min="0.01"
279+
step="0.01"
280+
/>
281+
<mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
282+
{{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
283+
<strong>{{ 'labels.commons.required' | translate }}</strong>
284+
</mat-error>
285+
<mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('min')">
286+
{{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.mustBeAtLeast' | translate }} 0.01
287+
</mat-error>
288+
<mat-error *ngIf="makeAccountTransferForm.get('transferAmount')?.hasError('amountExceedsBalance')">
289+
<fa-icon icon="exclamation-triangle" size="md"></fa-icon>
290+
{{ 'errors.validation.msg.savingsproduct.insufficient.balance' | translate: { balance } }}
291+
</mat-error>
292+
</mat-form-field>
293+
294+
<mat-form-field class="form-field description-field">
295+
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
296+
<textarea
297+
matInput
298+
formControlName="transferDescription"
299+
cdkTextareaAutosize
300+
cdkAutosizeMinRows="2"
301+
placeholder="Enter transfer description"
302+
title="Transfer description"
303+
></textarea>
304+
<mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
305+
{{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
306+
<strong>{{ 'labels.commons.required' | translate }}</strong>
307+
</mat-error>
308+
</mat-form-field>
309+
</div>
310+
</form>
224311
</mat-card-content>
312+
313+
<mat-card-actions *ngIf="!isLoading && makeAccountTransferForm" class="action-buttons">
314+
<button type="button" mat-raised-button [routerLink]="['../..']" class="cancel-button">
315+
{{ 'labels.buttons.Cancel' | translate }}
316+
</button>
317+
318+
<ng-container *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'">
319+
<button
320+
*ngIf="interbank && interbankTransferForm"
321+
mat-raised-button
322+
color="primary"
323+
[disabled]="!makeAccountTransferForm.valid"
324+
(click)="submit()"
325+
class="primary-button"
326+
>
327+
{{ 'labels.buttons.Submit' | translate }}
328+
</button>
329+
330+
<button
331+
*ngIf="!interbank"
332+
mat-raised-button
333+
color="primary"
334+
[disabled]="!makeAccountTransferForm.valid"
335+
(click)="submit()"
336+
class="primary-button"
337+
>
338+
{{ 'labels.buttons.Submit' | translate }}
339+
</button>
340+
</ng-container>
341+
</mat-card-actions>
225342
</mat-card>
226343
</div>

‎src/app/account-transfers/make-account-transfers/make-account-transfers.component.scss‎

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,7 @@
44
padding: 1rem;
55
}
66

7-
#search-button {
8-
background-color: #1074b9;
9-
color: white;
10-
}
11-
7+
// Card styling
128
.transfer-card {
139
border-radius: 8px;
1410
box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
@@ -26,7 +22,8 @@
2622
font-weight: 600;
2723
color: #333;
2824
margin: 0 0 1rem;
29-
padding-bottom: 0;
25+
padding-bottom: 0.5rem;
26+
border-bottom: 1px solid rgb(0 0 0 / 12%);
3027

3128
&.transfer-heading {
3229
font-weight: 700;
@@ -49,9 +46,7 @@
4946
align-items: center;
5047
padding: 0.5rem;
5148
background-color: rgb(0 0 0 / 2%);
52-
box-shadow: 0 0.5px 1px rgb(0 0 0 / 10%);
53-
border: 1px solid var(--border-color, #ddd);
54-
border-radius: 8px;
49+
border-radius: 4px;
5550

5651
&:hover {
5752
background-color: rgb(0 0 0 / 4%);
@@ -90,37 +85,62 @@ mat-divider {
9085
gap: 1rem;
9186

9287
@media (width >= 768px) {
93-
grid-template-columns: repeat(2, 50%);
88+
grid-template-columns: repeat(2, 1fr); /* stylelint-disable-line unit-allowed-list */
89+
gap: 1.5rem;
9490
}
9591
}
9692

93+
.form-row {
94+
display: contents;
95+
}
96+
9797
.form-field {
9898
width: 100%;
99+
margin-bottom: 0.5rem;
100+
101+
&:nth-child(odd) {
102+
@media (width >= 768px) {
103+
margin-right: 0.5rem;
104+
}
105+
}
106+
107+
&:nth-child(even) {
108+
@media (width >= 768px) {
109+
margin-left: 0.5rem;
110+
}
111+
}
99112

100113
&.description-field {
101114
grid-column: 1 / -1;
115+
116+
textarea {
117+
min-height: 80px;
118+
resize: vertical;
119+
}
102120
}
103121
}
104122

123+
::ng-deep .mat-form-field {
124+
width: 100%;
125+
}
126+
105127
// Button styling
106128
.action-buttons {
107129
display: flex;
108-
justify-content: center;
130+
justify-content: flex-end;
109131
gap: 1rem;
110132
padding: 1rem 1.5rem;
111-
margin-top: 0;
133+
margin-top: 1rem;
112134

113135
@media (width <= 576px) {
114136
flex-direction: column;
115-
align-items: center;
116137
}
117138

118139
button {
119140
min-width: 120px;
120141

121142
@media (width <= 576px) {
122143
width: 100%;
123-
max-width: 300px;
124144
margin-bottom: 0.5rem;
125145
}
126146
}
@@ -186,16 +206,12 @@ mat-divider {
186206
// Dark theme
187207
// Lower specificity selectors first
188208
.dark-theme {
189-
.info-row {
190-
color: #fff !important;
191-
}
192-
193209
.info-label {
194-
color: rgb(255 255 255 / 70%) !important;
210+
color: rgb(255 255 255 / 70%);
195211
}
196212

197213
.info-value {
198-
color: rgb(255 255 255 / 87%) !important;
214+
color: rgb(255 255 255 / 87%);
199215
}
200216

201217
.section-title {
@@ -233,18 +249,6 @@ mat-divider {
233249
}
234250

235251
// Higher specificity selectors
236-
:host-context(.dark-theme) .info-row {
237-
color: #fff !important;
238-
}
239-
240-
:host-context(.dark-theme) .info-label {
241-
color: rgb(255 255 255 / 70%) !important;
242-
}
243-
244-
:host-context(.dark-theme) .info-value {
245-
color: rgb(255 255 255 / 87%) !important;
246-
}
247-
248252
:host-context(.dark-theme) .transfer-heading {
249253
color: #fff;
250254
font-weight: 700;
@@ -266,18 +270,6 @@ mat-divider {
266270
// Medium specificity selectors
267271
body.dark-theme {
268272
.container {
269-
.info-row {
270-
color: #fff !important;
271-
}
272-
273-
.info-label {
274-
color: rgb(255 255 255 / 70%) !important;
275-
}
276-
277-
.info-value {
278-
color: rgb(255 255 255 / 87%) !important;
279-
}
280-
281273
.section-title {
282274
color: #fff;
283275
}
@@ -320,3 +312,20 @@ body.dark-theme {
320312
::ng-deep mat-form-field.error-warn.mat-form-field-invalid .mat-error {
321313
color: #0009 !important;
322314
}
315+
316+
::ng-deep .mat-form-field-flex {
317+
align-items: center;
318+
}
319+
320+
.transfer-form .form-field {
321+
margin-bottom: 1rem;
322+
}
323+
324+
.readonly-field {
325+
background-color: rgb(0 0 0 / 2%);
326+
cursor: not-allowed;
327+
}
328+
329+
::ng-deep .mat-input-element {
330+
font-size: 14px;
331+
}

0 commit comments

Comments
 (0)