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;
/* 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-primary-container: light-dark(#cae8e8, #304b4c);
--mat-sys-on-primary-container: light-dark(#022020, #cae8e8);
--mat-sys-primary-container: light-dark(#ffffff, #304b4c);
--mat-sys-on-primary-container: light-dark(#607c7c, #cae8e8);
--mat-sys-inverse-primary: light-dark(#afcccc, #486363);
--mat-sys-primary-fixed: light-dark(#cae8e8, #cae8e8);
--mat-sys-primary-fixed-dim: light-dark(#afcccc, #afcccc);
@ -15,10 +15,10 @@ html {
--mat-sys-on-primary-fixed-variant: light-dark(#304b4c, #304b4c);
/* 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-secondary-container: light-dark(#cee7eb, #344a4e);
--mat-sys-on-secondary-container: light-dark(#071f22, #cee7eb);
--mat-sys-secondary-container: light-dark(#607c7c, #344a4e);
--mat-sys-on-secondary-container: light-dark(#ffffff, #cee7eb);
--mat-sys-secondary-fixed: light-dark(#cee7eb, #cee7eb);
--mat-sys-secondary-fixed-dim: light-dark(#b3cbcf, #b3cbcf);
--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-outline: light-dark(#727878, #8b9292);
--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 */
--mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
@ -64,16 +65,22 @@ html {
/* Neutral variant palette variables */
--mat-sys-surface-variant: light-dark(#dde4e3, #414848);
--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 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-plain-font-family: Roboto; /* The font-family to use for plain 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. */
--mat-sys-brand-font-family: Roboto;
/* The font-family to use for brand text. */
--mat-sys-plain-font-family: Roboto;
/* The font-family to use for plain 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. */
/* 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-hover-state-layer-opacity: 0.08;
--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 {
/* COLOR SYSTEM VARIABLES */
color-scheme: light;
/* 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-primary-container: light-dark(#d1e4ff, #29496a);
--mat-sys-on-primary-container: light-dark(#001d35, #d1e4ff);
--mat-sys-primary-container: light-dark(#ffffff, #29496a);
--mat-sys-on-primary-container: light-dark(#003057, #d1e4ff);
--mat-sys-inverse-primary: light-dark(#aac9f1, #416183);
--mat-sys-primary-fixed: light-dark(#d1e4ff, #d1e4ff);
--mat-sys-primary-fixed-dim: light-dark(#aac9f1, #aac9f1);
@ -15,10 +15,10 @@ html {
--mat-sys-on-primary-fixed-variant: light-dark(#29496a, #29496a);
/* 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-secondary-container: light-dark(#c5e7ff, #004c6a);
--mat-sys-on-secondary-container: light-dark(#001e2d, #c5e7ff);
--mat-sys-secondary-container: light-dark(#003057, #004c6a);
--mat-sys-on-secondary-container: light-dark(#ffffff, #c5e7ff);
--mat-sys-secondary-fixed: light-dark(#c5e7ff, #c5e7ff);
--mat-sys-secondary-fixed-dim: light-dark(#84cffc, #84cffc);
--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-outline: light-dark(#73777e, #8d9198);
--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 */
--mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
@ -64,16 +65,22 @@ html {
/* Neutral variant palette variables */
--mat-sys-surface-variant: light-dark(#dfe2eb, #43474e);
--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 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-plain-font-family: Roboto; /* The font-family to use for plain 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. */
--mat-sys-brand-font-family: Roboto;
/* The font-family to use for brand text. */
--mat-sys-plain-font-family: Roboto;
/* The font-family to use for plain 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. */
/* 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-hover-state-layer-opacity: 0.08;
--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>
</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 { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { AuthInterceptor } from './core/interceptors/auth.interceptor';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
export const appConfig: ApplicationConfig = {
providers: [
@ -15,5 +17,6 @@ export const appConfig: ApplicationConfig = {
provideHttpClient(withInterceptorsFromDi()),
provideCharts(withDefaultRegisterables()),
{ 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-links">
<a href="#">Privacy Policy</a>

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

@ -1,9 +1,8 @@
.footer {
color: var(--mat-sys-primary);
background: var(--mat-sys-primary-container);
color: var(--mat-sys-on-primary);
background: var(--mat-sys-primary);
padding: 8px;
border-top: 1px solid var(--mat-sys-outline-variant);
backdrop-filter: blur(10px);
/* Fixed footer styles */
position: fixed;
@ -20,6 +19,7 @@
flex-direction: column;
align-items: center;
gap: 8px;
background: var(--mat-sys-primary);
}
.footer-links {
@ -27,22 +27,46 @@
gap: 24px;
a {
color: var(--mat-sys-secondary);
color: var(--mat-sys-on-primary);
background: var(--mat-sys-primary);
text-decoration: none;
transition: color 0.3s ease;
&:hover {
color: var(--mat-sys-primary);
transform: scale(103%);
}
}
}
.copyright {
color: var(--mat-sys-secondary);
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) {
.footer {
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 { CommonModule } from '@angular/common';
@Component({
selector: 'app-footer',
imports: [AngularMaterialModule],
imports: [AngularMaterialModule, CommonModule],
templateUrl: './footer.component.html',
styleUrl: './footer.component.scss'
})
export class FooterComponent {
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;
padding: 0 24px;
height: 64px;
color: var(--mat-sys-primary);
background: var(--mat-sys-primary-container);
box-shadow: var(--mat-sys-level2);
color: var(--custom-nav-color);
background: var(--custom-nav-background-color);
border-bottom: 1px solid var(--mat-sys-outline-variant);
position: relative;
z-index: 100; // Higher than footer's z-index
@ -31,6 +31,20 @@
align-items: center;
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 {
// cursor: pointer;
// padding: 8px 12px;
@ -48,32 +62,39 @@
position: relative;
.profile-button {
color: var(--mat-sys-primary);
background: var(--mat-sys-primary-container);
color: var(--custom-nav-background-color);
background-color: var(--custom-nav-color);
&:hover {
color: var(--custom-nav-color);
background-color: var(--custom-nav-background-color);
}
}
.profile-menu {
position: absolute;
right: 0;
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;
box-shadow: var(--mat-sys-level3);
min-width: 200px;
overflow: hidden;
z-index: 101;
font-size: 0.875rem;
.profile-info {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background-color: #fff;
color: var(--mat-sys-secondary);
color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
mat-icon {
color: var(--mat-sys-secondary);
color: var(--mat-sys-on-primary-container);
}
}
@ -85,21 +106,28 @@
padding: 8px 16px;
border: none;
cursor: pointer;
background-color: var(--mat-sys-surface-container);
color: var(--mat-sys-secondary);
color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
mat-icon {
color: var(--mat-sys-secondary);
}
// mat-icon {
// color: var(--mat-sys-on-primary-container);
// }
&: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) {
.navbar {
padding: 0 12px;

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

@ -58,7 +58,7 @@
<ng-container matColumnDef="carnetValue">
<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 matColumnDef="issueDate">
@ -94,7 +94,8 @@
</tr>
</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>
</div>

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

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

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

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

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

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

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

@ -86,7 +86,7 @@
margin-top: 16px;
.form-header {
margin-bottom: 24px;
// margin-bottom: 24px;
h3 {
margin: 0;
@ -103,6 +103,7 @@
.form-row {
display: flex;
gap: 16px;
align-items: start;
mat-form-field {
flex: 1;
@ -154,7 +155,7 @@
.readonly-value {
padding: 0.25rem;
font-size: 0.9375rem;
font-size: 0.875rem;
display: flex;
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 { CustomPaginator } from '../../shared/custom-paginator';
import { AngularMaterialModule } from '../../shared/module/angular-material.module';
@ -55,6 +55,7 @@ export class ContactsComponent {
@Input() clientid: number = 0;
@Input() userPreferences: UserPreferences = {};
@Input() refreshLocationData = false;
@Output() hasContacts = new EventEmitter<boolean>();
private fb = inject(FormBuilder);
@ -92,6 +93,12 @@ export class ContactsComponent {
this.dataSource.sort = this.sort;
}
ngOnChanges(changes: SimpleChanges) {
if (changes['refreshLocationData']) {
this.loadLocations();
}
}
loadLocations(): void {
this.isLoading = true;
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-panel-title> Locations </mat-panel-title>
</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-header>
<mat-panel-title> Contacts </mat-panel-title>
</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-accordion>

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

@ -21,6 +21,7 @@ export class EditPreparerComponent {
clientid = 0;
clientName: string | null = null;
userPreferences: UserPreferences;
refreshLocationData: boolean = false;
private route = inject(ActivatedRoute);
@ -40,4 +41,8 @@ export class EditPreparerComponent {
onClientNameUpdate(event: string): void {
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>
</table>
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
[hidePageSize]="true" showFirstLastButtons></mat-paginator>
<mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
[pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
</div>
<!-- Location Form -->
@ -210,10 +210,10 @@
</div>
<div class="form-actions">
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-raised-button color="primary" type="submit" [disabled]="locationForm.invalid">
{{ isEditing ? 'Update' : 'Save' }}
</button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
</div>
</form>
</div>

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

@ -76,7 +76,7 @@
margin-top: 16px;
.form-header {
margin-bottom: 24px;
// margin-bottom: 24px;
h3 {
margin: 0;
@ -93,6 +93,7 @@
.form-row {
display: flex;
gap: 16px;
align-items: start;
mat-form-field {
flex: 1;
@ -136,7 +137,7 @@
.readonly-value {
padding: 0.25rem;
font-size: 0.9375rem;
font-size: 0.875rem;
display: flex;
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() userPreferences: UserPreferences = {};
@Output() hasLocations = new EventEmitter<boolean>();
@Output() updated = new EventEmitter<boolean>();
countriesHasStates = ['US', 'CA', 'MX'];
@ -160,6 +161,7 @@ export class LocationComponent {
saveObservable.subscribe({
next: () => {
this.notificationService.showSuccess(`Location ${this.isEditing ? 'updated' : 'added'} successfully`);
this.updated.emit(true); // to update dependent data
this.loadLocations();
this.cancelEdit();
this.hasLocations.emit(true);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
.security-deposit-container {
padding: 24px;
padding: 0.5rem;
display: flex;
flex-direction: column;
gap: 24px;
@ -81,7 +81,7 @@
margin-top: 16px;
.form-header {
margin-bottom: 24px;
// margin-bottom: 24px;
h3 {
margin: 0;
@ -98,10 +98,15 @@
.form-row {
display: flex;
gap: 16px;
align-items: start;
mat-form-field {
flex: 1;
}
mat-label {
font-size: 0.875rem;
}
}
.form-error {
@ -163,7 +168,7 @@
.readonly-value {
padding: 0.25rem;
font-size: 0.9375rem;
font-size: 0.875rem;
display: flex;
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>
<mat-dialog-content>{{ data.message }}</mat-dialog-content>
<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">
{{ data.confirmText || 'Confirm' }}
</button>
<button mat-button [mat-dialog-close]="false">{{ data.cancelText || 'Cancel' }}</button>
</mat-dialog-actions>
`,
styles: [`

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

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

101
src/styles.scss
View File

@ -2,8 +2,7 @@
@use '@angular/material' as mat;
html {
@include mat.theme((density: -3,
));
@include mat.theme((density: -5));
}
html,
@ -14,4 +13,102 @@ body {
body {
margin: 0;
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),
));
}