186 lines
9.5 KiB
HTML
186 lines
9.5 KiB
HTML
<div class="basic-details-container">
|
|
<mat-card class="details-card mat-elevation-z4">
|
|
<mat-card-content>
|
|
<div class="loading-shade" *ngIf="isLoading">
|
|
<mat-spinner diameter="50"></mat-spinner>
|
|
</div>
|
|
|
|
<form [formGroup]="basicDetailsForm" class="details-form" *ngIf="!isLoading"
|
|
(ngSubmit)="saveBasicDetails()">
|
|
<!-- Company Information Row -->
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="company-name">
|
|
<mat-label>Company Name</mat-label>
|
|
<input matInput formControlName="companyName" required>
|
|
<mat-icon matSuffix>business</mat-icon>
|
|
<mat-error *ngIf="f['companyName'].errors?.['required']">
|
|
Company name is required
|
|
</mat-error>
|
|
<mat-error *ngIf="f['companyName'].errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="lookup-code">
|
|
<mat-label>Lookup Code</mat-label>
|
|
<input matInput formControlName="lookupCode">
|
|
<mat-error *ngIf="f['lookupCode'].errors?.['maxlength']">
|
|
Maximum 20 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<!-- Address Information Row -->
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="address-line-1">
|
|
<mat-label>Address Line 1</mat-label>
|
|
<input matInput formControlName="address1" required>
|
|
<mat-error *ngIf="f['address1'].errors?.['required']">
|
|
Address is required
|
|
</mat-error>
|
|
<mat-error *ngIf="f['address1'].errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="address-line-2">
|
|
<mat-label>Address Line 2 (Optional)</mat-label>
|
|
<input matInput formControlName="address2">
|
|
<mat-error *ngIf="f['address2'].errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Location Information Row -->
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="city">
|
|
<mat-label>City</mat-label>
|
|
<input matInput formControlName="city" required>
|
|
<mat-error *ngIf="f['city'].errors?.['required']">
|
|
City is required
|
|
</mat-error>
|
|
<mat-error *ngIf="f['city'].errors?.['maxlength']">
|
|
Maximum 50 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="country">
|
|
<mat-label>Country</mat-label>
|
|
<mat-select formControlName="country" required
|
|
(selectionChange)="onCountryChange($event.value)">
|
|
<mat-option *ngFor="let country of countries" [value]="country.value">
|
|
{{ country.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="f['country'].errors?.['required']">
|
|
Country is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="state">
|
|
<mat-label>State/Province</mat-label>
|
|
<mat-select formControlName="state" required>
|
|
<mat-option *ngFor="let state of states" [value]="state.value">
|
|
{{ state.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="f['state'].errors?.['required']">
|
|
State is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="zip">
|
|
<mat-label>ZIP/Postal Code</mat-label>
|
|
<input matInput formControlName="zip" required>
|
|
<mat-error *ngIf="f['zip'].errors?.['required']">
|
|
ZIP/Postal code is required
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="f['country']?.value === 'US' && f['zip']?.touched && f['zip']?.errors?.['invalidUSZip']">
|
|
Please enter a valid 5-digit US ZIP code
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="f['country']?.value === 'CA' && f['zip']?.touched && f['zip']?.errors?.['invalidCanadaPostal']">
|
|
Please enter a valid postal code (e.g., A1B2C3)
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Region Information Row -->
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="issuing-region">
|
|
<mat-label>Issuing Region</mat-label>
|
|
<mat-select formControlName="issuingRegion" required>
|
|
<mat-option *ngFor="let region of regions" [value]="region.region">
|
|
{{ region.regionname }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="f['issuingRegion'].errors?.['required']">
|
|
Issuing region is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="replacement-region">
|
|
<mat-label>Replacement Region</mat-label>
|
|
<mat-select formControlName="replacementRegion" required>
|
|
<mat-option *ngFor="let region of regions" [value]="region.region">
|
|
{{ region.regionname }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="f['replacementRegion'].errors?.['required']">
|
|
Replacement region is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="cargo-surety">
|
|
<mat-label>Cargo Surety</mat-label>
|
|
<mat-select formControlName="cargoSurety" required>
|
|
<mat-option *ngFor="let cargoSurety of cargoSuretys" [value]="cargoSurety.value">
|
|
{{ cargoSurety.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="f['cargoSurety'].errors?.['required']">
|
|
Cargo Surety is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="cargo-policy">
|
|
<mat-label>Cargo Policy</mat-label>
|
|
<mat-select formControlName="cargoPolicyNo" required>
|
|
<mat-option *ngFor="let cargoPolicy of cargoPolicies" [value]="cargoPolicy.value">
|
|
{{ cargoPolicy.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="f['cargoPolicyNo'].errors?.['required']">
|
|
Cargo Policy is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="bond-surety">
|
|
<mat-label>Bond Surety</mat-label>
|
|
<mat-select formControlName="bondSurety" required>
|
|
<mat-option *ngFor="let bondSurety of bondSuretys" [value]="bondSurety.value">
|
|
{{ bondSurety.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="f['bondSurety'].errors?.['required']">
|
|
Bond Surety is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button mat-raised-button color="primary" type="submit" [disabled]="basicDetailsForm.invalid">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div> |