Skip to content

Commit 6f0f4f8

Browse files
aaanishaaaaaanishaaa
authored
(UI improved) Notes for Clients, Groups, Centers rendered properly (#2633)
- Fixed rendering issues in Notes for Clients, Groups, and Centers - Removed unnecessary mat-list and mat-item usage - Improved UI consistency across entities
1 parent f3bf54c commit 6f0f4f8

File tree

3 files changed

+211
-35
lines changed

3 files changed

+211
-35
lines changed

‎src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div class="tab-container mat-typography">
22
<h3>{{ 'labels.heading.Notes' | translate }}</h3>
33

4-
<div>
4+
<div class="add-note-section">
55
<form
66
#formRef="ngForm"
77
[formGroup]="noteForm"
8-
class="layout-row align-start-baseline gap-20px"
8+
class="layout-row align-start-baseline gap-10px"
99
(ngSubmit)="addNote()"
1010
>
1111
<mat-form-field class="flex-85-minus-20px">
@@ -24,28 +24,33 @@ <h3>{{ 'labels.heading.Notes' | translate }}</h3>
2424
</form>
2525
</div>
2626

27-
<mat-list>
28-
<mat-list-item *ngFor="let entityNote of entityNotes; let i = index">
29-
<div class="list-item-content">
30-
<div class="left-section">
31-
<fa-icon icon="sticky-note" matListIcon></fa-icon>
32-
<span>{{ entityNote.note }}</span>
33-
<span class="note-details">
34-
<b>{{ 'labels.inputs.Created By' | translate }}:</b> {{ entityNote.createdByUsername }}
35-
<b>{{ 'labels.inputs.Date' | translate }}:</b> {{ entityNote.createdOn | dateFormat }}
36-
</span>
27+
<div class="notes-container">
28+
<div *ngIf="entityNotes && entityNotes.length > 0; else emptyState">
29+
<div class="note-card" *ngFor="let entityNote of entityNotes; let i = index">
30+
<div class="note-content">
31+
{{ entityNote.note }}
3732
</div>
38-
<div class="right-section">
39-
<div class="layout-row align-start">
40-
<button mat-button color="primary" (click)="editNote(entityNote.id, entityNote.note, i)">
41-
<fa-icon icon="edit"></fa-icon>
42-
</button>
43-
<button mat-button color="warn" (click)="deleteNote(entityNote.id, i)">
44-
<fa-icon icon="trash"></fa-icon>
33+
34+
<div class="note-footer">
35+
<div class="note-meta">
36+
<div class="created-by">Created by {{ entityNote.createdByUsername }}</div>
37+
<div class="created-date">
38+
{{ entityNote.createdOn | dateFormat }}
39+
</div>
40+
</div>
41+
42+
<div class="note-actions">
43+
<button class="edit-btn" (click)="editNote(entityNote.id, entityNote.note, i)" title="Edit note">
44+
Edit
4545
</button>
46+
<button class="delete-btn" (click)="deleteNote(entityNote.id, i)" title="Delete note">Delete</button>
4647
</div>
4748
</div>
4849
</div>
49-
</mat-list-item>
50-
</mat-list>
50+
</div>
51+
52+
<ng-template #emptyState>
53+
<div class="empty-state">No notes available</div>
54+
</ng-template>
55+
</div>
5156
</div>

‎src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.scss‎

Lines changed: 185 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,200 @@
1+
/* Hidden elements */
2+
.hidden-mat-list {
3+
display: none;
4+
}
5+
16
.tab-container {
2-
padding: 1%;
3-
margin: 1%;
7+
padding: 2rem;
8+
}
9+
10+
.tab-container h3 {
11+
margin-bottom: 20px;
12+
color: #333;
13+
font-weight: 500;
414
}
515

6-
.list-item-content {
16+
.add-note-section {
17+
margin-bottom: 10px;
18+
padding-bottom: 10px;
19+
}
20+
21+
.layout-row {
722
display: flex;
8-
align-items: center;
9-
width: 100%;
23+
align-items: flex-start;
24+
gap: 10px;
25+
}
26+
27+
.layout-row.align-start-baseline {
28+
align-items: baseline;
29+
}
30+
31+
.layout-row.gap-10px {
32+
gap: 10px;
33+
}
34+
35+
.flex-85-minus-20px {
36+
flex: 1;
37+
min-width: 300px;
38+
}
39+
40+
.flex-1 {
41+
flex: none;
42+
white-space: nowrap;
43+
}
44+
45+
.note-card {
46+
background: white;
47+
border: 1px solid #e0e0e0;
48+
border-radius: 0.2rem;
49+
padding: 1rem;
50+
margin-bottom: 1rem;
51+
box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
52+
transition: all 0.2s ease;
53+
}
54+
55+
.note-card:hover {
56+
box-shadow: 0 4px 8px rgb(0 0 0 / 12%);
57+
border-color: #d0d0d0;
1058
}
1159

12-
.note-details {
60+
.note-content {
61+
color: #333;
1362
font-size: 14px;
63+
line-height: 1rem;
64+
margin: 0;
65+
margin-bottom: 16px;
66+
padding: 0.5rem;
67+
word-wrap: break-word;
68+
white-space: normal;
69+
text-indent: 0;
70+
text-align: left;
1471
}
1572

16-
.left-section {
73+
.note-footer {
1774
display: flex;
75+
justify-content: space-between;
1876
align-items: center;
19-
gap: 10px;
77+
padding-top: 0.65rem;
78+
border-top: 1px solid #f0f0f0;
79+
}
80+
81+
.note-meta {
82+
color: #666;
83+
font-size: 12px;
84+
}
85+
86+
.created-by {
87+
font-weight: 500;
88+
color: #007acc;
89+
margin-bottom: 2px;
90+
}
91+
92+
.created-date {
93+
color: #888;
2094
}
2195

22-
.right-section {
23-
margin-left: auto;
96+
.note-actions {
2497
display: flex;
25-
gap: 4px;
98+
gap: 8px;
99+
}
100+
101+
.edit-btn,
102+
.delete-btn {
103+
border: 1px solid #dee2e6;
104+
padding: 8px 14px;
105+
border-radius: 4px;
106+
font-size: 14px;
107+
cursor: pointer;
108+
transition: all 0.2s ease;
109+
background: none;
110+
outline: none;
111+
}
112+
113+
.edit-btn {
114+
color: #6c757d;
115+
background-color: #daedff;
116+
}
117+
118+
.delete-btn {
119+
color: #dc3545;
120+
background-color: #ffcfcf;
121+
}
122+
123+
.edit-btn:disabled,
124+
.delete-btn:disabled {
125+
opacity: 0.5;
126+
cursor: not-allowed;
127+
}
128+
129+
.edit-btn:hover:not(:disabled) {
130+
background-color: #a8d4ff;
131+
color: #495057;
132+
border-color: #adb5bd;
133+
}
134+
135+
.delete-btn:hover:not(:disabled) {
136+
background-color: #f5c6cb;
137+
color: #721c24;
138+
border-color: #ff9ca5;
139+
}
140+
141+
.empty-state {
142+
text-align: center;
143+
padding: 40px 20px;
144+
color: #666;
145+
font-style: italic;
146+
background: #fafafa;
147+
border-radius: 8px;
148+
border: 1px dashed #ddd;
149+
}
150+
151+
.m-r-10 {
152+
margin-right: 10px;
153+
}
154+
155+
@media (width <= 768px) {
156+
.tab-container {
157+
padding: 16px;
158+
}
159+
160+
.layout-row {
161+
flex-direction: column;
162+
align-items: stretch;
163+
gap: 15px;
164+
}
165+
166+
.flex-85-minus-20px,
167+
.flex-1 {
168+
width: 100%;
169+
}
170+
171+
.note-card {
172+
padding: 16px;
173+
margin-bottom: 12px;
174+
}
175+
176+
.note-content {
177+
font-size: 13px;
178+
margin-bottom: 12px;
179+
}
180+
181+
.note-footer {
182+
flex-direction: column;
183+
align-items: flex-start;
184+
gap: 12px;
185+
}
186+
187+
.edit-btn,
188+
.delete-btn {
189+
padding: 5px 10px;
190+
font-size: 11px;
191+
}
192+
193+
.note-meta {
194+
width: 100%;
195+
}
196+
197+
.note-actions {
198+
align-self: flex-end;
199+
}
26200
}

‎src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
99
import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
1010
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
1111
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
12-
import { MatList, MatListItem } from '@angular/material/list';
1312
import { DateFormatPipe } from '../../../pipes/date-format.pipe';
1413
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
1514

@@ -21,8 +20,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
2120
...STANDALONE_SHARED_IMPORTS,
2221
CdkTextareaAutosize,
2322
FaIconComponent,
24-
MatList,
25-
MatListItem,
2623
DateFormatPipe
2724
]
2825
})

0 commit comments

Comments
 (0)