Skip to content

Commit 4b94a1b

Browse files
shubhamkumar9199shubhamkumar9199
committed
Fix HTML structure and SCSS for View GL Account component
1 parent ca931ac commit 4b94a1b

File tree

2 files changed

+125
-48
lines changed

2 files changed

+125
-48
lines changed

‎src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html‎

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="layout-row align-end gap-2px responsive-column container m-b-20">
1+
<div class="container m-b-20 layout-row layout-lt-md-column align-end gap-2percent">
22
<span *mifosxHasPermission="'CREATE_GLACCOUNT'">
33
<button
44
mat-raised-button
@@ -11,90 +11,79 @@
1111
{{ 'labels.buttons.Subledger Account' | translate }}
1212
</button>
1313
</span>
14+
1415
<span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
1516
<button mat-raised-button color="primary" [routerLink]="['edit']">
1617
<fa-icon icon="edit" class="m-r-10"></fa-icon>
1718
{{ 'labels.buttons.Edit' | translate }}
1819
</button>
1920
</span>
21+
2022
<span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
2123
<button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
2224
<fa-icon icon="lock" class="m-r-10"></fa-icon>
2325
{{ 'labels.buttons.Disable' | translate }}
2426
</button>
2527
</span>
28+
2629
<span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
2730
<button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
2831
<fa-icon icon="lock-open" class="m-r-10"></fa-icon>
2932
{{ 'labels.buttons.Enable' | translate }}
3033
</button>
3134
</span>
35+
3236
<button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
3337
<fa-icon icon="trash" class="m-r-10"></fa-icon>
3438
{{ 'labels.buttons.Delete' | translate }}
3539
</button>
3640
</div>
3741

42+
<!-- GL Account Details -->
3843
<div class="container">
3944
<mat-card>
4045
<mat-card-content>
41-
<div class="layout-row-wrap">
42-
<div class="flex-50 header">
43-
{{ 'labels.inputs.Account Type' | translate }}
44-
</div>
45-
46-
<div class="flex-50">
47-
{{ 'labels.inputs.accounting.' + glAccount.type?.value | translate }}
48-
</div>
49-
50-
<div class="flex-50 header">
51-
{{ 'labels.inputs.GL Code' | translate }}
52-
</div>
53-
54-
<div class="flex-50">
55-
{{ glAccount.glCode }}
56-
</div>
57-
58-
<div class="flex-50 header" *ngIf="glAccount.parent">
59-
{{ 'labels.inputs.Parent Account Name' | translate }}
60-
</div>
61-
62-
<div class="flex-50" *ngIf="glAccount.parent">
63-
<a class="tab-link" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]">
64-
<mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
65-
</a>
66-
</div>
67-
68-
<div class="flex-50 header" *ngIf="glAccount.tagId.id">
69-
{{ 'labels.inputs.Tag' | translate }}
70-
</div>
71-
72-
<div class="flex-50" *ngIf="glAccount.tagId.id">
73-
{{ glAccount.tagId.name }}
46+
<div class="content-rows">
47+
<div class="content-row">
48+
<div class="label">{{ 'labels.inputs.Account Type' | translate }}</div>
49+
<div class="value">{{ 'labels.inputs.accounting.' + glAccount.type?.value | translate }}</div>
7450
</div>
7551

76-
<div class="flex-50 header">
77-
{{ 'labels.inputs.Account Usage' | translate }}
52+
<div class="content-row">
53+
<div class="label">{{ 'labels.inputs.GL Code' | translate }}</div>
54+
<div class="value">{{ glAccount.glCode }}</div>
7855
</div>
7956

80-
<div class="flex-50">
81-
{{ glAccount.usage?.value }}
57+
<div class="content-row" *ngIf="glAccount.parent">
58+
<div class="label">{{ 'labels.inputs.Parent Account Name' | translate }}</div>
59+
<div class="value">
60+
<a
61+
class="tab-link"
62+
[routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]"
63+
>
64+
<mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
65+
</a>
66+
</div>
8267
</div>
8368

84-
<div class="flex-50 header">
85-
{{ 'labels.inputs.Manual Entries Allowed' | translate }}
69+
<div class="content-row" *ngIf="glAccount.tagId.id">
70+
<div class="label">{{ 'labels.inputs.Tag' | translate }}</div>
71+
<div class="value">{{ glAccount.tagId.name }}</div>
8672
</div>
8773

88-
<div class="flex-50">
89-
{{ glAccount.manualEntriesAllowed | yesNo }}
74+
<div class="content-row">
75+
<div class="label">{{ 'labels.inputs.Account Usage' | translate }}</div>
76+
<div class="value">{{ glAccount.usage?.value }}</div>
9077
</div>
9178

92-
<div class="flex-50 header" *ngIf="glAccount.description">
93-
{{ 'labels.inputs.Description' | translate }}
79+
<div class="content-row">
80+
<div class="label">{{ 'labels.inputs.Manual Entries Allowed' | translate }}</div>
81+
<div class="value">{{ glAccount.manualEntriesAllowed | yesNo }}</div>
9482
</div>
9583

96-
<div class="flex-50" *ngIf="glAccount.description">
97-
{{ glAccount.description }}
84+
<div class="content-row" *ngIf="glAccount.description">
85+
<div class="label">{{ 'labels.inputs.Description' | translate }}</div>
86+
<div class="value">{{ glAccount.description }}</div>
9887
</div>
9988
</div>
10089
</mat-card-content>

‎src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.scss‎

Lines changed: 90 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,102 @@
11
.container {
22
max-width: 37rem;
3+
margin: 0 auto;
4+
padding: 1rem;
5+
6+
mat-card {
7+
margin-bottom: 1rem;
8+
padding: 1.5rem;
9+
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
10+
border: 1px solid var(--border-color, #ddd);
11+
border-radius: 8px;
12+
background-color: var(--card-background, #fff);
13+
transition:
14+
background-color 0.3s ease,
15+
border-color 0.3s ease;
16+
}
17+
18+
.layout-row-wrap {
19+
display: grid;
20+
grid-template-columns: 50% 50%;
21+
gap: 1rem;
22+
23+
.flex-50 {
24+
padding: 0.5rem;
25+
26+
&.mat-body-strong {
27+
color: var(--label-color, #555);
28+
font-weight: 600;
29+
}
30+
}
31+
}
332

433
.content {
534
div {
635
margin: 1rem 0;
736
word-wrap: break-word;
837

9-
&.header {
10-
font-weight: 500;
38+
span {
39+
display: block;
40+
padding: 0.25rem 0;
41+
color: var(--text-color, inherit);
42+
}
43+
}
44+
}
45+
46+
.content-rows {
47+
display: flex;
48+
flex-direction: column;
49+
gap: 1rem;
50+
51+
.content-row {
52+
display: flex;
53+
flex-direction: row;
54+
border-bottom: 1px solid var(--border-color-light, #eee);
55+
padding-bottom: 0.5rem;
56+
57+
.label {
58+
flex: 0 0 40%;
59+
font-weight: 600;
60+
color: var(--label-color, #555);
61+
padding: 0.5rem 1rem 0.5rem 0;
1162
}
63+
64+
.value {
65+
flex: 0 0 60%;
66+
padding: 0.5rem 0;
67+
color: var(--text-color, inherit);
68+
69+
span {
70+
display: block;
71+
padding: 0.25rem 0;
72+
}
73+
}
74+
}
75+
}
76+
77+
.back-button-container {
78+
margin-top: 2rem;
79+
}
80+
81+
button {
82+
transition: all 0.2s ease;
83+
84+
&:hover {
85+
transform: translateY(-2px);
86+
}
87+
}
88+
}
89+
90+
:host-context(.dark-theme) {
91+
--border-color: #444;
92+
--border-color-light: #3a3a3a;
93+
--card-background: #2d2d2d;
94+
--label-color: #b8b8b8;
95+
--text-color: #e0e0e0;
96+
97+
.container {
98+
mat-card {
99+
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
12100
}
13101
}
14102
}

0 commit comments

Comments
 (0)