ui feedback updates

This commit is contained in:
Cyril Joseph 2025-07-25 01:55:32 -03:00
parent 5fd0cd0eaa
commit a541e3788b
13 changed files with 73 additions and 18 deletions

View File

@ -6,6 +6,7 @@ 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: [
@ -16,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' } }
]
};

View File

@ -11,6 +11,10 @@
background: none;
box-shadow: none;
mat-card-content {
padding: inherit 0;
}
.loading-shade {
position: absolute;
top: 0;

View File

@ -1,8 +1,7 @@
.goods-container {
padding: 16px;
.form-section {
margin-bottom: 1rem;
margin-bottom: 0.75rem;
}
.checkbox-group {
@ -29,14 +28,14 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
margin-bottom: 0.75rem;
h3 {
margin: 0;
color: var(--mat-sys-primary);
font-weight: 500;
}
.actions {
display: flex;
gap: 16px;
@ -58,9 +57,8 @@
}
.table-container {
position: relative;
overflow-x: auto;
margin-bottom: 16px;
// position: relative;
// overflow-x: auto;
.loading-shade {
position: absolute;
@ -139,6 +137,7 @@
display: flex;
gap: 16px;
margin-bottom: 16px;
align-items: start;
mat-form-field {
flex: 1;
@ -164,6 +163,6 @@
.form-actions {
display: flex;
justify-content: flex-end;
margin-top: 24px;
margin-top: 0.9rem;
}
}

View File

@ -186,6 +186,7 @@ export class GoodsComponent {
weight: 0,
value: 0
});
this.itemForm.markAsUntouched();
}
// Edit existing item

View File

@ -49,7 +49,7 @@
<mat-label>Company Name</mat-label>
<input matInput formControlName="companyName" required>
<mat-error *ngIf="shippingForm.get('address.companyName')?.errors?.['required']">
Address is required
Company name is required
</mat-error>
<mat-error *ngIf="shippingForm.get('address.companyName')?.errors?.['maxlength']">
Maximum 100 characters allowed

View File

@ -1,14 +1,14 @@
.shipping-container {
padding: 16px;
padding-top: 0.5rem;
.section {
margin-bottom: 24px;
margin-bottom: 1rem;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 4px;
h3 {
margin: 0px 0px 16px 0px;
margin: 0 0 0.9rem 0;
color: var(--mat-sys-primary);
font-weight: 500;
}
@ -33,12 +33,14 @@
.radio-group {
display: flex;
gap: 16px;
margin-bottom: 16px;
margin-bottom: 0.9rem;
}
.form-row {
display: flex;
gap: 16px;
margin-bottom: 0.5rem;
align-items: start;
mat-form-field {
flex: 1;
@ -58,7 +60,7 @@
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 16px;
margin-top: 0.9rem;
}
.presaved-address {
@ -66,6 +68,7 @@
display: flex;
flex-direction: row;
gap: 8px;
font-size: 0.875rem;
p {
margin: 0;

View File

@ -413,7 +413,7 @@ export class ShippingComponent {
notes: shipping.contact?.notes,
})
}
this.shippingForm.markAsUntouched();
this.completed.emit(this.shippingForm.valid);
}

View File

@ -20,6 +20,7 @@ mat-card-header {
flex: 1;
overflow-y: auto;
padding: 16px;
font-size: 0.875rem;
h3 {
color: var(--mat-sys-primary);

View File

@ -8,6 +8,18 @@
// max-width: 300px;
// }
.form-row {
// display: flex;
// gap: 16px;
margin-bottom: 16px;
//align-items: start;
// mat-form-field {
// flex: 1;
// }
}
.usa-entries {
width: 300px;
}
@ -32,7 +44,7 @@
h3 {
margin: 0 0 16px 0;
font-size: 16px;
font-size: 0.875rem;
font-weight: 500;
}
@ -99,6 +111,7 @@
.totals-section {
display: flex;
gap: 24px;
font-size: 0.875rem;
.total-item {
display: flex;

View File

@ -104,6 +104,7 @@
.form-row {
display: flex;
gap: 16px;
align-items: start;
mat-form-field {
flex: 1;
@ -155,7 +156,7 @@
.readonly-value {
padding: 0.25rem;
font-size: 0.9375rem;
font-size: 0.875rem;
display: flex;
align-items: center;
}

View File

@ -1,5 +1,5 @@
.page-header {
margin: 0.5rem 0px;
margin: 0.5rem 0 0;
color: var(--mat-sys-primary);
font-weight: 500;
}
@ -38,6 +38,7 @@
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.9rem;
button {
display: flex;
@ -63,6 +64,11 @@
justify-content: center;
}
mat-slide-toggle {
transform: scale(0.8);
margin-left: -0.5rem;
}
.selected-holder {
color: #28a745;
font-weight: 500;

View File

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

View File

@ -13,4 +13,28 @@ 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));
/* stepper */
@include mat.stepper-overrides((header-height:50px));
/* 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;
}