(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
This commit is contained in:
Anisha
@@ -1,11 +1,11 @@
|
||||
<div class="tab-container mat-typography">
|
||||
<h3>{{ 'labels.heading.Notes' | translate }}</h3>
|
||||
|
||||
<div>
|
||||
<div class="add-note-section">
|
||||
<form
|
||||
#formRef="ngForm"
|
||||
[formGroup]="noteForm"
|
||||
class="layout-row align-start-baseline gap-20px"
|
||||
class="layout-row align-start-baseline gap-10px"
|
||||
(ngSubmit)="addNote()"
|
||||
>
|
||||
<mat-form-field class="flex-85-minus-20px">
|
||||
@@ -24,28 +24,33 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let entityNote of entityNotes; let i = index">
|
||||
<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 class="notes-container">
|
||||
<div *ngIf="entityNotes && entityNotes.length > 0; else emptyState">
|
||||
<div class="note-card" *ngFor="let entityNote of entityNotes; let i = index">
|
||||
<div class="note-content">
|
||||
{{ entityNote.note }}
|
||||
</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>
|
||||
|
||||
<div class="note-footer">
|
||||
<div class="note-meta">
|
||||
<div class="created-by">Created by {{ entityNote.createdByUsername }}</div>
|
||||
<div class="created-date">
|
||||
{{ entityNote.createdOn | dateFormat }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-actions">
|
||||
<button class="edit-btn" (click)="editNote(entityNote.id, entityNote.note, i)" title="Edit note">
|
||||
Edit
|
||||
</button>
|
||||
<button class="delete-btn" (click)="deleteNote(entityNote.id, i)" title="Delete note">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
|
||||
<ng-template #emptyState>
|
||||
<div class="empty-state">No notes available</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,200 @@
|
||||
/* Hidden elements */
|
||||
.hidden-mat-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.list-item-content {
|
||||
.tab-container h3 {
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-note-section {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.note-details {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.left-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
margin-left: auto;
|
||||
.layout-row.align-start-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.layout-row.gap-10px {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.flex-85-minus-20px {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.note-card {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 0.2rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.note-card:hover {
|
||||
box-shadow: 0 4px 8px rgb(0 0 0 / 12%);
|
||||
border-color: #d0d0d0;
|
||||
}
|
||||
|
||||
.note-content {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
margin-bottom: 16px;
|
||||
padding: 0.5rem;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
text-indent: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.note-footer {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 0.65rem;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.note-meta {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.created-by {
|
||||
font-weight: 500;
|
||||
color: #007acc;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.created-date {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.note-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.edit-btn,
|
||||
.delete-btn {
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 8px 14px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
color: #6c757d;
|
||||
background-color: #daedff;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: #dc3545;
|
||||
background-color: #ffcfcf;
|
||||
}
|
||||
|
||||
.edit-btn:disabled,
|
||||
.delete-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.edit-btn:hover:not(:disabled) {
|
||||
background-color: #a8d4ff;
|
||||
color: #495057;
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
.delete-btn:hover:not(:disabled) {
|
||||
background-color: #f5c6cb;
|
||||
color: #721c24;
|
||||
border-color: #ff9ca5;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #ddd;
|
||||
}
|
||||
|
||||
.m-r-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
.tab-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.flex-85-minus-20px,
|
||||
.flex-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.note-card {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.note-content {
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.note-footer {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.edit-btn,
|
||||
.delete-btn {
|
||||
padding: 5px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.note-meta {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.note-actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
|
||||
import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
|
||||
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatList, MatListItem } from '@angular/material/list';
|
||||
import { DateFormatPipe } from '../../../pipes/date-format.pipe';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
@@ -21,8 +20,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
CdkTextareaAutosize,
|
||||
FaIconComponent,
|
||||
MatList,
|
||||
MatListItem,
|
||||
DateFormatPipe
|
||||
]
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user