cyril/service-provider-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui feedback updates

Browse Source
This commit is contained in:
Cyril Joseph 2025-07-28 20:08:21 -03:00
parent 8e7dfdde5c
commit 94334c8804
40 changed files with 357 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/themes/Theme187.css
View File

@ -4,10 +4,10 @@ html {
color-scheme: light; color-scheme: light;
/* Primary palette variables */ /* Primary palette variables */
--mat-sys-primary: light-dark(#486363, #afcccc); --mat-sys-primary: light-dark(#607c7c, #afcccc);
--mat-sys-on-primary: light-dark(#ffffff, #193535); --mat-sys-on-primary: light-dark(#ffffff, #193535);
--mat-sys-primary-container: light-dark(#cae8e8, #304b4c); --mat-sys-primary-container: light-dark(#ffffff, #304b4c);
--mat-sys-on-primary-container: light-dark(#022020, #cae8e8); --mat-sys-on-primary-container: light-dark(#607c7c, #cae8e8);
--mat-sys-inverse-primary: light-dark(#afcccc, #486363); --mat-sys-inverse-primary: light-dark(#afcccc, #486363);
--mat-sys-primary-fixed: light-dark(#cae8e8, #cae8e8); --mat-sys-primary-fixed: light-dark(#cae8e8, #cae8e8);
--mat-sys-primary-fixed-dim: light-dark(#afcccc, #afcccc); --mat-sys-primary-fixed-dim: light-dark(#afcccc, #afcccc);
@ -15,10 +15,10 @@ html {
--mat-sys-on-primary-fixed-variant: light-dark(#304b4c, #304b4c); --mat-sys-on-primary-fixed-variant: light-dark(#304b4c, #304b4c);
/* Secondary palette variables */ /* Secondary palette variables */
--mat-sys-secondary: light-dark(#4c6266, #b3cbcf); --mat-sys-secondary: light-dark(#607c7c, #b3cbcf);
--mat-sys-on-secondary: light-dark(#ffffff, #1d3437); --mat-sys-on-secondary: light-dark(#ffffff, #1d3437);
--mat-sys-secondary-container: light-dark(#cee7eb, #344a4e); --mat-sys-secondary-container: light-dark(#607c7c, #344a4e);
--mat-sys-on-secondary-container: light-dark(#071f22, #cee7eb); --mat-sys-on-secondary-container: light-dark(#ffffff, #cee7eb);
--mat-sys-secondary-fixed: light-dark(#cee7eb, #cee7eb); --mat-sys-secondary-fixed: light-dark(#cee7eb, #cee7eb);
--mat-sys-secondary-fixed-dim: light-dark(#b3cbcf, #b3cbcf); --mat-sys-secondary-fixed-dim: light-dark(#b3cbcf, #b3cbcf);
--mat-sys-on-secondary-fixed: light-dark(#071f22, #071f22); --mat-sys-on-secondary-fixed: light-dark(#071f22, #071f22);
@ -53,7 +53,8 @@ html {
--mat-sys-inverse-on-surface: light-dark(#f1f0f0, #2f3130); --mat-sys-inverse-on-surface: light-dark(#f1f0f0, #2f3130);
--mat-sys-outline: light-dark(#727878, #8b9292); --mat-sys-outline: light-dark(#727878, #8b9292);
--mat-sys-outline-variant: light-dark(#c1c8c7, #414848); --mat-sys-outline-variant: light-dark(#c1c8c7, #414848);
--mat-sys-neutral10: light-dark(#1a1c1c, #1a1c1c); /* Variable used for the form field native select option text color */ --mat-sys-neutral10: light-dark(#1a1c1c, #1a1c1c);
/* Variable used for the form field native select option text color */
/* Error palette variables */ /* Error palette variables */
--mat-sys-error: light-dark(#ba1a1a, #ffb4ab); --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
@ -64,16 +65,22 @@ html {
/* Neutral variant palette variables */ /* Neutral variant palette variables */
--mat-sys-surface-variant: light-dark(#dde4e3, #414848); --mat-sys-surface-variant: light-dark(#dde4e3, #414848);
--mat-sys-on-surface-variant: light-dark(#414848, #c1c8c7); --mat-sys-on-surface-variant: light-dark(#414848, #c1c8c7);
--mat-sys-neutral-variant20: light-dark(#2b3232, #2b3232); /* Variable used for the sidenav scrim (container background shadow when opened) */ --mat-sys-neutral-variant20: light-dark(#2b3232, #2b3232);
/* Variable used for the sidenav scrim (container background shadow when opened) */
/* TYPOGRAPHY SYSTEM VARIABLES */ /* TYPOGRAPHY SYSTEM VARIABLES */
/* Typography variables. Only used in the different typescale system variables. */ /* Typography variables. Only used in the different typescale system variables. */
--mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */ --mat-sys-brand-font-family: Roboto;
--mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */ /* The font-family to use for brand text. */
--mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */ --mat-sys-plain-font-family: Roboto;
--mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */ /* The font-family to use for plain text. */
--mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */ --mat-sys-bold-font-weight: 700;
/* The font-weight to use for bold text. */
--mat-sys-medium-font-weight: 500;
/* The font-weight to use for medium text. */
--mat-sys-regular-font-weight: 400;
/* The font-weight to use for regular text. */
/* Typescale variables. */ /* Typescale variables. */
/* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
@ -233,4 +240,13 @@ html {
--mat-sys-focus-state-layer-opacity: 0.12; --mat-sys-focus-state-layer-opacity: 0.12;
--mat-sys-hover-state-layer-opacity: 0.08; --mat-sys-hover-state-layer-opacity: 0.08;
--mat-sys-pressed-state-layer-opacity: 0.12; --mat-sys-pressed-state-layer-opacity: 0.12;
}
/* CUSTOM BUTTON COLORS */
--custom-button-color: #ffffff;
--custom-button-background-color: #627f9a;
--custom-hover-color: #384857;
/* CUSTOM NAV COLORS */
--custom-nav-color: #ffffff;
--custom-nav-background-color: #607c7c;
}

46
public/themes/Theme188.css
View File

@ -1,13 +1,13 @@
/* Note: Color palettes are generated from primary: #103454, secondary: #18749c */ /* Note: Color palettes are generated from primary: #003057, secondary: #18749c */
html { html {
/* COLOR SYSTEM VARIABLES */ /* COLOR SYSTEM VARIABLES */
color-scheme: light; color-scheme: light;
/* Primary palette variables */ /* Primary palette variables */
--mat-sys-primary: light-dark(#416183, #aac9f1); --mat-sys-primary: light-dark(#003057, #aac9f1);
--mat-sys-on-primary: light-dark(#ffffff, #0d3252); --mat-sys-on-primary: light-dark(#ffffff, #0d3252);
--mat-sys-primary-container: light-dark(#d1e4ff, #29496a); --mat-sys-primary-container: light-dark(#ffffff, #29496a);
--mat-sys-on-primary-container: light-dark(#001d35, #d1e4ff); --mat-sys-on-primary-container: light-dark(#003057, #d1e4ff);
--mat-sys-inverse-primary: light-dark(#aac9f1, #416183); --mat-sys-inverse-primary: light-dark(#aac9f1, #416183);
--mat-sys-primary-fixed: light-dark(#d1e4ff, #d1e4ff); --mat-sys-primary-fixed: light-dark(#d1e4ff, #d1e4ff);
--mat-sys-primary-fixed-dim: light-dark(#aac9f1, #aac9f1); --mat-sys-primary-fixed-dim: light-dark(#aac9f1, #aac9f1);
@ -15,10 +15,10 @@ html {
--mat-sys-on-primary-fixed-variant: light-dark(#29496a, #29496a); --mat-sys-on-primary-fixed-variant: light-dark(#29496a, #29496a);
/* Secondary palette variables */ /* Secondary palette variables */
--mat-sys-secondary: light-dark(#00658b, #84cffc); --mat-sys-secondary: light-dark(#003057, #84cffc);
--mat-sys-on-secondary: light-dark(#ffffff, #00344a); --mat-sys-on-secondary: light-dark(#ffffff, #00344a);
--mat-sys-secondary-container: light-dark(#c5e7ff, #004c6a); --mat-sys-secondary-container: light-dark(#003057, #004c6a);
--mat-sys-on-secondary-container: light-dark(#001e2d, #c5e7ff); --mat-sys-on-secondary-container: light-dark(#ffffff, #c5e7ff);
--mat-sys-secondary-fixed: light-dark(#c5e7ff, #c5e7ff); --mat-sys-secondary-fixed: light-dark(#c5e7ff, #c5e7ff);
--mat-sys-secondary-fixed-dim: light-dark(#84cffc, #84cffc); --mat-sys-secondary-fixed-dim: light-dark(#84cffc, #84cffc);
--mat-sys-on-secondary-fixed: light-dark(#001e2d, #001e2d); --mat-sys-on-secondary-fixed: light-dark(#001e2d, #001e2d);
@ -53,7 +53,8 @@ html {
--mat-sys-inverse-on-surface: light-dark(#f1f0f3, #2f3033); --mat-sys-inverse-on-surface: light-dark(#f1f0f3, #2f3033);
--mat-sys-outline: light-dark(#73777e, #8d9198); --mat-sys-outline: light-dark(#73777e, #8d9198);
--mat-sys-outline-variant: light-dark(#c3c7ce, #43474e); --mat-sys-outline-variant: light-dark(#c3c7ce, #43474e);
--mat-sys-neutral10: light-dark(#1a1c1e, #1a1c1e); /* Variable used for the form field native select option text color */ --mat-sys-neutral10: light-dark(#1a1c1e, #1a1c1e);
/* Variable used for the form field native select option text color */
/* Error palette variables */ /* Error palette variables */
--mat-sys-error: light-dark(#ba1a1a, #ffb4ab); --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
@ -64,16 +65,22 @@ html {
/* Neutral variant palette variables */ /* Neutral variant palette variables */
--mat-sys-surface-variant: light-dark(#dfe2eb, #43474e); --mat-sys-surface-variant: light-dark(#dfe2eb, #43474e);
--mat-sys-on-surface-variant: light-dark(#43474e, #c3c7ce); --mat-sys-on-surface-variant: light-dark(#43474e, #c3c7ce);
--mat-sys-neutral-variant20: light-dark(#2c3137, #2c3137); /* Variable used for the sidenav scrim (container background shadow when opened) */ --mat-sys-neutral-variant20: light-dark(#2c3137, #2c3137);
/* Variable used for the sidenav scrim (container background shadow when opened) */
/* TYPOGRAPHY SYSTEM VARIABLES */ /* TYPOGRAPHY SYSTEM VARIABLES */
/* Typography variables. Only used in the different typescale system variables. */ /* Typography variables. Only used in the different typescale system variables. */
--mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */ --mat-sys-brand-font-family: Roboto;
--mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */ /* The font-family to use for brand text. */
--mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */ --mat-sys-plain-font-family: Roboto;
--mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */ /* The font-family to use for plain text. */
--mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */ --mat-sys-bold-font-weight: 700;
/* The font-weight to use for bold text. */
--mat-sys-medium-font-weight: 500;
/* The font-weight to use for medium text. */
--mat-sys-regular-font-weight: 400;
/* The font-weight to use for regular text. */
/* Typescale variables. */ /* Typescale variables. */
/* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
@ -233,4 +240,13 @@ html {
--mat-sys-focus-state-layer-opacity: 0.12; --mat-sys-focus-state-layer-opacity: 0.12;
--mat-sys-hover-state-layer-opacity: 0.08; --mat-sys-hover-state-layer-opacity: 0.08;
--mat-sys-pressed-state-layer-opacity: 0.12; --mat-sys-pressed-state-layer-opacity: 0.12;
}
/* CUSTOM BUTTON COLORS */
--custom-button-color: #fff;
--custom-button-background-color: #FF6A00;
--custom-hover-color: #FFAC70;
/* CUSTOM NAV COLORS */
--custom-nav-color: #003057;
--custom-nav-background-color: #ffffff;
}

2
src/app/app.component.html
View File

@ -4,4 +4,4 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
<app-footer></app-footer> <app-footer [isUserLoggedIn]="isUserLoggedIn"></app-footer>

3
src/app/app.config.ts
View File

@ -6,6 +6,8 @@ import { provideClientHydration, withEventReplay } from '@angular/platform-brows
import { provideCharts, withDefaultRegisterables } from 'ng2-charts'; import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { AuthInterceptor } from './core/interceptors/auth.interceptor'; import { AuthInterceptor } from './core/interceptors/auth.interceptor';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [ providers: [
@ -15,5 +17,6 @@ export const appConfig: ApplicationConfig = {
provideHttpClient(withInterceptorsFromDi()), provideHttpClient(withInterceptorsFromDi()),
provideCharts(withDefaultRegisterables()), provideCharts(withDefaultRegisterables()),
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } }
] ]
}; };

2
src/app/common/footer/footer.component.html
View File

@ -1,4 +1,4 @@
<footer class="footer"> <footer class="footer" [ngClass]="{'general': !isUserLoggedIn}">
<div class="footer-content"> <div class="footer-content">
<div class="footer-links"> <div class="footer-links">
<a href="#">Privacy Policy</a> <a href="#">Privacy Policy</a>

36
src/app/common/footer/footer.component.scss
View File

@ -1,9 +1,8 @@
.footer { .footer {
color: var(--mat-sys-primary); color: var(--mat-sys-on-primary);
background: var(--mat-sys-primary-container); background: var(--mat-sys-primary);
padding: 8px; padding: 8px;
border-top: 1px solid var(--mat-sys-outline-variant); border-top: 1px solid var(--mat-sys-outline-variant);
backdrop-filter: blur(10px);
/* Fixed footer styles */ /* Fixed footer styles */
position: fixed; position: fixed;
@ -20,6 +19,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background: var(--mat-sys-primary);
} }
.footer-links { .footer-links {
@ -27,22 +27,46 @@
gap: 24px; gap: 24px;
a { a {
color: var(--mat-sys-secondary); color: var(--mat-sys-on-primary);
background: var(--mat-sys-primary);
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
&:hover { &:hover {
color: var(--mat-sys-primary); transform: scale(103%);
} }
} }
} }
.copyright { .copyright {
color: var(--mat-sys-secondary);
font-size: 12px; font-size: 12px;
} }
} }
/* footer styles - not logged in users */
.footer.general {
color: #000000;
background: #ffffff;
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: #ffffff;
}
.footer-links {
a {
color: #000000;
background: #ffffff;
}
}
}
@media (max-width: 600px) { @media (max-width: 600px) {
.footer { .footer {
padding: 16px; padding: 16px;

6
src/app/common/footer/footer.component.ts
View File

@ -1,12 +1,14 @@
import { Component } from '@angular/core'; import { Component, Input } from '@angular/core';
import { AngularMaterialModule } from '../../shared/module/angular-material.module'; import { AngularMaterialModule } from '../../shared/module/angular-material.module';
import { CommonModule } from '@angular/common';
@Component({ @Component({
selector: 'app-footer', selector: 'app-footer',
imports: [AngularMaterialModule], imports: [AngularMaterialModule, CommonModule],
templateUrl: './footer.component.html', templateUrl: './footer.component.html',
styleUrl: './footer.component.scss' styleUrl: './footer.component.scss'
}) })
export class FooterComponent { export class FooterComponent {
currentYear = new Date().getFullYear(); currentYear = new Date().getFullYear();
@Input() isUserLoggedIn = false;
} }

58
src/app/common/secured-header/secured-header.component.scss
View File

@ -4,9 +4,9 @@
align-items: center; align-items: center;
padding: 0 24px; padding: 0 24px;
height: 64px; height: 64px;
color: var(--mat-sys-primary); color: var(--custom-nav-color);
background: var(--mat-sys-primary-container); background: var(--custom-nav-background-color);
box-shadow: var(--mat-sys-level2); border-bottom: 1px solid var(--mat-sys-outline-variant);
position: relative; position: relative;
z-index: 100; // Higher than footer's z-index z-index: 100; // Higher than footer's z-index
@ -31,6 +31,20 @@
align-items: center; align-items: center;
gap: 24px; gap: 24px;
button {
color: var(--custom-nav-color);
background-color: var(--custom-nav-background-color);
&:hover {
color: var(--custom-nav-background-color);
background-color: var(--custom-nav-color);
}
}
.mat-mdc-button:hover>.mat-mdc-button-persistent-ripple::before {
opacity: 0;
}
// .nav-link { // .nav-link {
// cursor: pointer; // cursor: pointer;
// padding: 8px 12px; // padding: 8px 12px;
@ -48,32 +62,39 @@
position: relative; position: relative;
.profile-button { .profile-button {
color: var(--mat-sys-primary); color: var(--custom-nav-background-color);
background: var(--mat-sys-primary-container); background-color: var(--custom-nav-color);
&:hover {
color: var(--custom-nav-color);
background-color: var(--custom-nav-background-color);
}
} }
.profile-menu { .profile-menu {
position: absolute; position: absolute;
right: 0; right: 0;
top: 48px; top: 48px;
background-color: var(--mat-sys-secondary-container); color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
border-radius: 4px; border-radius: 4px;
box-shadow: var(--mat-sys-level3); box-shadow: var(--mat-sys-level3);
min-width: 200px; min-width: 200px;
overflow: hidden; overflow: hidden;
z-index: 101; z-index: 101;
font-size: 0.875rem;
.profile-info { .profile-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 12px 16px; padding: 12px 16px;
background-color: #fff; color: var(--mat-sys-on-primary-container);
color: var(--mat-sys-secondary); background-color: var(--mat-sys-primary-container);
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
mat-icon { mat-icon {
color: var(--mat-sys-secondary); color: var(--mat-sys-on-primary-container);
} }
} }
@ -85,21 +106,28 @@
padding: 8px 16px; padding: 8px 16px;
border: none; border: none;
cursor: pointer; cursor: pointer;
background-color: var(--mat-sys-surface-container); color: var(--mat-sys-on-primary-container);
color: var(--mat-sys-secondary); background-color: var(--mat-sys-primary-container);
mat-icon { // mat-icon {
color: var(--mat-sys-secondary); // color: var(--mat-sys-on-primary-container);
} // }
&:hover { &:hover {
background-color: var(--mat-sys-secondary-container); color: var(--mat-sys-on-primary);
background-color: var(--mat-sys-primary);
} }
} }
} }
} }
} }
.mat-mdc-menu-item:not([disabled]):hover {
color: var(--mat-sys-on-primary);
background-color: var(--mat-sys-primary);
}
@media (max-width: 768px) { @media (max-width: 768px) {
.navbar { .navbar {
padding: 0 12px; padding: 0 12px;

5
src/app/home/home.component.html
View File

@ -58,7 +58,7 @@
<ng-container matColumnDef="carnetValue"> <ng-container matColumnDef="carnetValue">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Carnet Value</th> <th mat-header-cell *matHeaderCellDef mat-sort-header>Carnet Value</th>
<td mat-cell *matCellDef="let item">{{ item.carnetValue }}</td> <td mat-cell *matCellDef="let item">{{ item.carnetValue | currency}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="issueDate"> <ng-container matColumnDef="issueDate">
@ -94,7 +94,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!"
[length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>

4
src/app/preparer/add/add-preparer.component.html
View File

@ -16,7 +16,7 @@
<ng-template matStepLabel>Locations</ng-template> <ng-template matStepLabel>Locations</ng-template>
<app-location *ngIf="clientid" [clientid]="clientid" (hasLocations)="onLocationSaved($event)" <app-location *ngIf="clientid" [clientid]="clientid" (hasLocations)="onLocationSaved($event)"
[userPreferences]="userPreferences"> (updated)="onLocationUpdated($event)" [userPreferences]="userPreferences">
</app-location> </app-location>
</mat-step> </mat-step>
@ -25,7 +25,7 @@
<ng-template matStepLabel>Contacts</ng-template> <ng-template matStepLabel>Contacts</ng-template>
<app-contacts *ngIf="clientid" [clientid]="clientid" (hasContacts)="onContactsSaved($event)" <app-contacts *ngIf="clientid" [clientid]="clientid" (hasContacts)="onContactsSaved($event)"
[userPreferences]="userPreferences"> [userPreferences]="userPreferences" [refreshLocationData]="refreshLocationData">
</app-contacts> </app-contacts>
</mat-step> </mat-step>

5
src/app/preparer/add/add-preparer.component.ts
View File

@ -25,6 +25,7 @@ export class AddPreparerComponent {
contactsCompleted: boolean = false; contactsCompleted: boolean = false;
locationCompleted: boolean = false; locationCompleted: boolean = false;
showLocation: boolean = false; showLocation: boolean = false;
refreshLocationData: boolean = false;
constructor(userPrefenceService: UserPreferencesService) { constructor(userPrefenceService: UserPreferencesService) {
this.userPreferences = userPrefenceService.getPreferences(); this.userPreferences = userPrefenceService.getPreferences();
@ -43,6 +44,10 @@ export class AddPreparerComponent {
this.locationCompleted = event; this.locationCompleted = event;
} }
onLocationUpdated(updated: boolean): void {
this.refreshLocationData = updated;
}
onShowLocations(event: boolean): void { onShowLocations(event: boolean): void {
this.showLocation = event; this.showLocation = event;
} }

8
src/app/preparer/contacts/contacts.component.html
View File

@ -100,8 +100,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Contact Form --> <!-- Contact Form -->
@ -269,10 +269,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="contactForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="contactForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>
@ -310,10 +310,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="contactLoginForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="contactLoginForm.invalid">
Save Save
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

5
src/app/preparer/contacts/contacts.component.scss
View File

@ -86,7 +86,7 @@
margin-top: 16px; margin-top: 16px;
.form-header { .form-header {
margin-bottom: 24px; // margin-bottom: 24px;
h3 { h3 {
margin: 0; margin: 0;
@ -103,6 +103,7 @@
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: start;
mat-form-field { mat-form-field {
flex: 1; flex: 1;
@ -154,7 +155,7 @@
.readonly-value { .readonly-value {
padding: 0.25rem; padding: 0.25rem;
font-size: 0.9375rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }

9
src/app/preparer/contacts/contacts.component.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core'; import { Component, EventEmitter, inject, Input, Output, SimpleChanges, ViewChild } from '@angular/core';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator'; import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { CustomPaginator } from '../../shared/custom-paginator'; import { CustomPaginator } from '../../shared/custom-paginator';
import { AngularMaterialModule } from '../../shared/module/angular-material.module'; import { AngularMaterialModule } from '../../shared/module/angular-material.module';
@ -55,6 +55,7 @@ export class ContactsComponent {
@Input() clientid: number = 0; @Input() clientid: number = 0;
@Input() userPreferences: UserPreferences = {}; @Input() userPreferences: UserPreferences = {};
@Input() refreshLocationData = false;
@Output() hasContacts = new EventEmitter<boolean>(); @Output() hasContacts = new EventEmitter<boolean>();
private fb = inject(FormBuilder); private fb = inject(FormBuilder);
@ -92,6 +93,12 @@ export class ContactsComponent {
this.dataSource.sort = this.sort; this.dataSource.sort = this.sort;
} }
ngOnChanges(changes: SimpleChanges) {
if (changes['refreshLocationData']) {
this.loadLocations();
}
}
loadLocations(): void { loadLocations(): void {
this.isLoading = true; this.isLoading = true;
this.locationService.getLocationsById(this.clientid).subscribe({ this.locationService.getLocationsById(this.clientid).subscribe({

6
src/app/preparer/edit/edit-preparer.component.html
View File

@ -18,14 +18,16 @@
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> Locations </mat-panel-title> <mat-panel-title> Locations </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<app-location [clientid]="clientid" [userPreferences]="userPreferences"></app-location> <app-location [clientid]="clientid" [userPreferences]="userPreferences"
(updated)="onLocationUpdated($event)"></app-location>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> Contacts </mat-panel-title> <mat-panel-title> Contacts </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<app-contacts [clientid]="clientid" [userPreferences]="userPreferences"></app-contacts> <app-contacts [clientid]="clientid" [userPreferences]="userPreferences"
[refreshLocationData]="refreshLocationData"></app-contacts>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>

5
src/app/preparer/edit/edit-preparer.component.ts
View File

@ -21,6 +21,7 @@ export class EditPreparerComponent {
clientid = 0; clientid = 0;
clientName: string | null = null; clientName: string | null = null;
userPreferences: UserPreferences; userPreferences: UserPreferences;
refreshLocationData: boolean = false;
private route = inject(ActivatedRoute); private route = inject(ActivatedRoute);
@ -40,4 +41,8 @@ export class EditPreparerComponent {
onClientNameUpdate(event: string): void { onClientNameUpdate(event: string): void {
this.clientName = event; this.clientName = event;
} }
onLocationUpdated(updated: boolean): void {
this.refreshLocationData = updated;
}
} }

6
src/app/preparer/location/location.component.html
View File

@ -69,8 +69,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Location Form --> <!-- Location Form -->
@ -210,10 +210,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="locationForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="locationForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

5
src/app/preparer/location/location.component.scss
View File

@ -76,7 +76,7 @@
margin-top: 16px; margin-top: 16px;
.form-header { .form-header {
margin-bottom: 24px; // margin-bottom: 24px;
h3 { h3 {
margin: 0; margin: 0;
@ -93,6 +93,7 @@
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: start;
mat-form-field { mat-form-field {
flex: 1; flex: 1;
@ -136,7 +137,7 @@
.readonly-value { .readonly-value {
padding: 0.25rem; padding: 0.25rem;
font-size: 0.9375rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }

2
src/app/preparer/location/location.component.ts
View File

@ -48,6 +48,7 @@ export class LocationComponent {
@Input() clientid: number = 0; @Input() clientid: number = 0;
@Input() userPreferences: UserPreferences = {}; @Input() userPreferences: UserPreferences = {};
@Output() hasLocations = new EventEmitter<boolean>(); @Output() hasLocations = new EventEmitter<boolean>();
@Output() updated = new EventEmitter<boolean>();
countriesHasStates = ['US', 'CA', 'MX']; countriesHasStates = ['US', 'CA', 'MX'];
@ -160,6 +161,7 @@ export class LocationComponent {
saveObservable.subscribe({ saveObservable.subscribe({
next: () => { next: () => {
this.notificationService.showSuccess(`Location ${this.isEditing ? 'updated' : 'added'} successfully`); this.notificationService.showSuccess(`Location ${this.isEditing ? 'updated' : 'added'} successfully`);
this.updated.emit(true); // to update dependent data
this.loadLocations(); this.loadLocations();
this.cancelEdit(); this.cancelEdit();
this.hasLocations.emit(true); this.hasLocations.emit(true);

4
src/app/preparer/manage/manage-preparer.component.html
View File

@ -127,7 +127,7 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
</div> </div>

1
src/app/preparer/manage/manage-preparer.component.scss
View File

@ -38,6 +38,7 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 0.5rem; gap: 0.5rem;
margin-top: 0.75rem;
button { button {
display: flex; display: flex;

6
src/app/service-provider/basic-fee/basic-fee.component.html
View File

@ -53,8 +53,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Fee Form --> <!-- Fee Form -->
@ -136,10 +136,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="feeForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="feeForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

7
src/app/service-provider/basic-fee/basic-fee.component.scss
View File

@ -1,5 +1,5 @@
.basic-fee-container { .basic-fee-container {
padding: 24px; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
@ -62,7 +62,7 @@
margin-top: 16px; margin-top: 16px;
.form-header { .form-header {
margin-bottom: 24px; // margin-bottom: 24px;
h3 { h3 {
margin: 0; margin: 0;
@ -79,6 +79,7 @@
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: start;
mat-form-field { mat-form-field {
flex: 1; flex: 1;
@ -130,7 +131,7 @@
.readonly-value { .readonly-value {
padding: 0.25rem; padding: 0.25rem;
font-size: 0.9375rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }

6
src/app/service-provider/carnet-fee/carnet-fee.component.html
View File

@ -54,8 +54,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Fee & Commission Form --> <!-- Fee & Commission Form -->
@ -123,10 +123,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="feeCommissionForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="feeCommissionForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

5
src/app/service-provider/carnet-fee/carnet-fee.component.scss
View File

@ -76,7 +76,7 @@
margin-top: 16px; margin-top: 16px;
.form-header { .form-header {
margin-bottom: 24px; // margin-bottom: 24px;
h3 { h3 {
margin: 0; margin: 0;
@ -93,6 +93,7 @@
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: start;
mat-form-field { mat-form-field {
flex: 1; flex: 1;
@ -140,7 +141,7 @@
.readonly-value { .readonly-value {
padding: 0.25rem; padding: 0.25rem;
font-size: 0.9375rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }

6
src/app/service-provider/carnet-sequence/carnet-sequence.component.html
View File

@ -65,8 +65,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Sequence Form --> <!-- Sequence Form -->
@ -138,10 +138,10 @@
</mat-error> </mat-error>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="sequenceForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="sequenceForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

2
src/app/service-provider/carnet-sequence/carnet-sequence.component.scss
View File

@ -1,5 +1,5 @@
.carnet-sequence-container { .carnet-sequence-container {
padding: 24px; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;

6
src/app/service-provider/contacts/contacts.component.html
View File

@ -85,8 +85,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Contact Form --> <!-- Contact Form -->
@ -243,10 +243,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="contactForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="contactForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

7
src/app/service-provider/contacts/contacts.component.scss
View File

@ -1,5 +1,5 @@
.contacts-container { .contacts-container {
padding: 24px; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
@ -81,7 +81,7 @@
margin-top: 16px; margin-top: 16px;
.form-header { .form-header {
margin-bottom: 24px; // margin-bottom: 24px;
h3 { h3 {
margin: 0; margin: 0;
@ -98,6 +98,7 @@
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: start;
mat-form-field { mat-form-field {
flex: 1; flex: 1;
@ -141,7 +142,7 @@
.readonly-value { .readonly-value {
padding: 0.25rem; padding: 0.25rem;
font-size: 0.9375rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }

6
src/app/service-provider/continuation-sheet-fee/continuation-sheet-fee.component.html
View File

@ -65,8 +65,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Continuation Sheet Form --> <!-- Continuation Sheet Form -->
@ -151,10 +151,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="continuationSheetForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="continuationSheetForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

11
src/app/service-provider/continuation-sheet-fee/continuation-sheet-fee.component.scss
View File

@ -1,5 +1,5 @@
.continuation-sheet-container { .continuation-sheet-container {
padding: 24px; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
@ -76,7 +76,7 @@
margin-top: 16px; margin-top: 16px;
.form-header { .form-header {
margin-bottom: 24px; // margin-bottom: 24px;
h3 { h3 {
margin: 0; margin: 0;
@ -93,10 +93,15 @@
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: start;
mat-form-field { mat-form-field {
flex: 1; flex: 1;
} }
mat-label {
font-size: 0.875rem;
}
} }
.form-error { .form-error {
@ -158,7 +163,7 @@
.readonly-value { .readonly-value {
padding: 0.25rem; padding: 0.25rem;
font-size: 0.9375rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }

6
src/app/service-provider/counterfoil-fee/counterfoil-fee.component.html
View File

@ -77,8 +77,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Counterfoil Form --> <!-- Counterfoil Form -->
@ -197,10 +197,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="counterfoilForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="counterfoilForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

11
src/app/service-provider/counterfoil-fee/counterfoil-fee.component.scss
View File

@ -1,5 +1,5 @@
.counterfoil-container { .counterfoil-container {
padding: 24px; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
@ -76,7 +76,7 @@
margin-top: 16px; margin-top: 16px;
.form-header { .form-header {
margin-bottom: 24px; // margin-bottom: 24px;
h3 { h3 {
margin: 0; margin: 0;
@ -93,10 +93,15 @@
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: start;
mat-form-field { mat-form-field {
flex: 1; flex: 1;
} }
mat-label {
font-size: 0.875rem;
}
} }
.form-error { .form-error {
@ -158,7 +163,7 @@
.readonly-value { .readonly-value {
padding: 0.25rem; padding: 0.25rem;
font-size: 0.9375rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }

6
src/app/service-provider/expedited-fee/expedited-fee.component.html
View File

@ -65,8 +65,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Fee Form --> <!-- Fee Form -->
@ -195,10 +195,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="feeForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="feeForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

11
src/app/service-provider/expedited-fee/expedited-fee.component.scss
View File

@ -1,5 +1,5 @@
.expedited-fee-container { .expedited-fee-container {
padding: 24px; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
@ -76,7 +76,7 @@
margin-top: 16px; margin-top: 16px;
.form-header { .form-header {
margin-bottom: 24px; // margin-bottom: 24px;
h3 { h3 {
margin: 0; margin: 0;
@ -93,10 +93,15 @@
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: start;
mat-form-field { mat-form-field {
flex: 1; flex: 1;
} }
mat-label {
font-size: 0.875rem;
}
} }
.form-error { .form-error {
@ -158,7 +163,7 @@
.readonly-value { .readonly-value {
padding: 0.25rem; padding: 0.25rem;
font-size: 0.9375rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }

6
src/app/service-provider/security-deposit/security-deposit.component.html
View File

@ -79,8 +79,8 @@
</tr> </tr>
</table> </table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]" <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[hidePageSize]="true" showFirstLastButtons></mat-paginator> [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div> </div>
<!-- Deposit Form --> <!-- Deposit Form -->
@ -179,10 +179,10 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="depositForm.invalid"> <button mat-raised-button color="primary" type="submit" [disabled]="depositForm.invalid">
{{ isEditing ? 'Update' : 'Save' }} {{ isEditing ? 'Update' : 'Save' }}
</button> </button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div> </div>
</form> </form>
</div> </div>

11
src/app/service-provider/security-deposit/security-deposit.component.scss
View File

@ -1,5 +1,5 @@
.security-deposit-container { .security-deposit-container {
padding: 24px; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
@ -81,7 +81,7 @@
margin-top: 16px; margin-top: 16px;
.form-header { .form-header {
margin-bottom: 24px; // margin-bottom: 24px;
h3 { h3 {
margin: 0; margin: 0;
@ -98,10 +98,15 @@
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: start;
mat-form-field { mat-form-field {
flex: 1; flex: 1;
} }
mat-label {
font-size: 0.875rem;
}
} }
.form-error { .form-error {
@ -163,7 +168,7 @@
.readonly-value { .readonly-value {
padding: 0.25rem; padding: 0.25rem;
font-size: 0.9375rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }

2
src/app/shared/components/confirm-dialog/confirm-dialog.component.ts
View File

@ -9,10 +9,10 @@ import { AngularMaterialModule } from '../../module/angular-material.module';
<h2 mat-dialog-title>{{ data.title }}</h2> <h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>{{ data.message }}</mat-dialog-content> <mat-dialog-content>{{ data.message }}</mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button [mat-dialog-close]="false">{{ data.cancelText || 'Cancel' }}</button>
<button mat-raised-button color="warn" [mat-dialog-close]="true"> <button mat-raised-button color="warn" [mat-dialog-close]="true">
{{ data.confirmText || 'Confirm' }} {{ data.confirmText || 'Confirm' }}
</button> </button>
<button mat-button [mat-dialog-close]="false">{{ data.cancelText || 'Cancel' }}</button>
</mat-dialog-actions> </mat-dialog-actions>
`, `,
styles: [` styles: [`

1
src/app/user-settings/user-settings.component.scss
View File

@ -28,6 +28,7 @@
.label { .label {
padding-right: 1rem; padding-right: 1rem;
padding-bottom: 2rem; padding-bottom: 2rem;
font-size: 0.875rem;
} }
.control { .control {

101
src/styles.scss
View File

@ -2,8 +2,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
html { html {
@include mat.theme((density: -3, @include mat.theme((density: -5));
));
} }
html, html,
@ -14,4 +13,102 @@ body {
body { body {
margin: 0; margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif; font-family: Roboto, "Helvetica Neue", sans-serif;
}
:root {
/*form field*/
@include mat.form-field-overrides((container-text-size: 0.875rem,
container-text-line-height:1.7, // line height should be atleast 1.5 times text size
outlined-label-text-size:0.875rem));
/* list */
@include mat.list-overrides((list-item-label-text-size:0.875rem,
list-item-label-text-line-height:1.7, // line height should be atleast 1.5 times text size
));
/*select*/
@include mat.select-overrides((trigger-text-size:0.875rem,
trigger-text-line-height:1.7, // line height should be atleast 1.5 times text size
));
/*select options*/
--mat-option-label-text-size: 0.875rem;
/* stepper */
@include mat.stepper-overrides((header-height:50px,
header-hover-state-layer-color:var(--mat-sys-primary),
header-focus-state-layer-color:var(--mat-sys-primary),
));
.mat-step-header:hover:not([aria-disabled]),
.mat-step-header:hover[aria-disabled=false] {
.mat-step-icon {
color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
}
.mat-step-label {
color: var(--mat-sys-on-primary);
}
}
.mat-step-header:focus:not([aria-disabled]),
.mat-step-header:focus[aria-disabled=false] {
.mat-step-icon {
color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
}
.mat-step-label {
color: var(--mat-sys-on-primary);
}
}
/* expansion panel */
@include mat.expansion-overrides((header-hover-state-layer-color:var(--mat-sys-primary),
header-focus-state-layer-color:var(--mat-sys-primary),
));
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
.mat-expansion-panel-header-title {
color: var(--mat-sys-on-primary);
}
.mat-expansion-indicator svg {
fill: var(--mat-sys-on-primary);
}
}
/* button */
@include mat.button-overrides((protected-container-color: var(--custom-button-background-color),
protected-container-elevation-shadow:var(--custom-button-hover-color),
protected-label-text-color:var(--custom-button-color)));
/* Nav bar */
.navbar-menu {
.mat-mdc-button:hover>.mat-mdc-button-persistent-ripple::before {
opacity: 0;
}
}
.profile-container {
.profile-button:hover>.mat-mdc-button-persistent-ripple::before {
opacity: 0;
}
}
/* Table */
@include mat.table-overrides((header-headline-color:var(--mat-sys-on-primary),
));
.mat-mdc-table .mat-mdc-header-cell {
background: var(--mat-sys-primary);
}
/* Sort */
@include mat.sort-overrides((arrow-color: var(--mat-sys-on-primary),
));
} }