221 lines
10 KiB
HTML
221 lines
10 KiB
HTML
<div class="locations-container">
|
|
<div class="actions-bar">
|
|
<button mat-raised-button color="primary" (click)="addNewLocation()">
|
|
<mat-icon>add</mat-icon> Add New Location
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-container mat-elevation-z8">
|
|
<div class="loading-shade" *ngIf="isLoading">
|
|
<mat-spinner diameter="50"></mat-spinner>
|
|
</div>
|
|
|
|
<table mat-table [dataSource]="dataSource" matSort>
|
|
<!-- Name Column -->
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Location Name</th>
|
|
<td mat-cell *matCellDef="let location">{{ location.name }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Address1 Column -->
|
|
<ng-container matColumnDef="address">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>
|
|
<td mat-cell *matCellDef="let location">{{ getAddressLabel(location.address1, location.address2,
|
|
location.zip) }}</td>
|
|
</ng-container>
|
|
|
|
<!-- City Column -->
|
|
<ng-container matColumnDef="city">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>City</th>
|
|
<td mat-cell *matCellDef="let location">{{ location.city }}</td>
|
|
</ng-container>
|
|
|
|
<!-- State Column -->
|
|
<ng-container matColumnDef="state">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
|
|
<td mat-cell *matCellDef="let location">{{ location.state }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Country Column -->
|
|
<ng-container matColumnDef="country">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Country</th>
|
|
<td mat-cell *matCellDef="let location">{{ location.country }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Actions Column -->
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef>Actions</th>
|
|
<td mat-cell *matCellDef="let location">
|
|
<button mat-icon-button color="primary" (click)="editLocation(location)" matTooltip="Edit">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<!--
|
|
<button mat-icon-button color="warn" *ngIf="!location.defaultLocation || !location.isInactive"
|
|
(click)="
|
|
deleteLocation(location.clientLocationid)"
|
|
[hidden]="location.defaultLocation || location.isInactive" matTooltip="Inactivate">
|
|
<mat-icon>delete</mat-icon>
|
|
</button> -->
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
|
|
<tr matNoDataRow *matNoDataRow>
|
|
<td [colSpan]="displayedColumns.length" class="no-data-message">
|
|
<mat-icon>info</mat-icon>
|
|
<span>No records available</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
|
|
[hidePageSize]="true" showFirstLastButtons></mat-paginator>
|
|
</div>
|
|
|
|
<!-- Location Form -->
|
|
<div class="form-container" *ngIf="showForm">
|
|
<form [formGroup]="locationForm" (ngSubmit)="saveLocation()">
|
|
<div class="form-header">
|
|
<h3>{{ isEditing ? 'Edit Location' : 'Add New Location' }}</h3>
|
|
</div>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="name">
|
|
<mat-label>Name</mat-label>
|
|
<input matInput formControlName="name" required>
|
|
<mat-error *ngIf="locationForm.get('name')?.errors?.['required']">
|
|
Name is required
|
|
</mat-error>
|
|
<mat-error *ngIf="locationForm.get('name')?.errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Address Information -->
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="address1">
|
|
<mat-label>Address Line 1</mat-label>
|
|
<input matInput formControlName="address1" required>
|
|
<mat-error *ngIf="locationForm.get('address1')?.errors?.['required']">
|
|
Address is required
|
|
</mat-error>
|
|
<mat-error *ngIf="locationForm.get('address1')?.errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="address2">
|
|
<mat-label>Address Line 2 (Optional)</mat-label>
|
|
<input matInput formControlName="address2">
|
|
<mat-error *ngIf="locationForm.get('address2')?.errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Location Information -->
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="city">
|
|
<mat-label>City</mat-label>
|
|
<input matInput formControlName="city" required>
|
|
<mat-error *ngIf="locationForm.get('city')?.errors?.['required']">
|
|
City is required
|
|
</mat-error>
|
|
<mat-error *ngIf="locationForm.get('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="locationForm.get('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="locationForm.get('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="locationForm.get('zip')?.errors?.['required']">
|
|
ZIP/Postal code is required
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="locationForm.get('country')?.value === 'US' && locationForm.get('zip')?.touched && locationForm.get('zip')?.errors?.['invalidUSZip']">
|
|
Please enter a valid 5-digit US ZIP code
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="locationForm.get('country')?.value === 'CA' && locationForm.get('zip')?.touched && locationForm.get('zip')?.errors?.['invalidCanadaPostal']">
|
|
Please enter a valid postal code (e.g., A1B2C3)
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div *ngIf="isEditing" class="readonly-section">
|
|
<div class="readonly-fields">
|
|
<div class="field-column">
|
|
<!-- Last Changed By -->
|
|
<div class="readonly-field">
|
|
<label>Last Changed By</label>
|
|
<div class="readonly-value">
|
|
{{locationReadOnlyFields.lastChangedBy || 'N/A'}}
|
|
</div>
|
|
</div>
|
|
<!-- Inactive status -->
|
|
<div class="readonly-field">
|
|
<label>Inactive Status </label>
|
|
<div class="readonly-value">
|
|
{{locationReadOnlyFields.isInactive === true ? 'Yes' : 'No' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field-column">
|
|
|
|
<!-- Last Changed Date -->
|
|
<div class="readonly-field">
|
|
<label>Last Changed Date</label>
|
|
<div class="readonly-value">
|
|
{{(locationReadOnlyFields.lastChangedDate | date:'mediumDate':'UTC') || 'N/A'}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inactivated Date -->
|
|
<div class="readonly-field">
|
|
<label>Inactivated Date</label>
|
|
<div class="readonly-value">
|
|
{{(locationReadOnlyFields.inactivatedDate | date:'mediumDate':'UTC') || 'N/A'}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> |