245 lines
11 KiB
HTML
245 lines
11 KiB
HTML
<div class="goods-container">
|
|
|
|
<form [formGroup]="goodsForm">
|
|
<!-- Purpose Section -->
|
|
<div class="form-section">
|
|
<div class="checkbox-group">
|
|
<mat-label>Goods to be imported as </mat-label>
|
|
<mat-checkbox formControlName="commercialSample">Commercial Sample</mat-checkbox>
|
|
<mat-checkbox formControlName="professionalEquipment">Professional Equipment</mat-checkbox>
|
|
<mat-checkbox formControlName="exhibitionsFair">Exhibitions and Fair</mat-checkbox>
|
|
|
|
<mat-error *ngIf="goodsForm.errors?.['atLeastOneRequired']">
|
|
At least one must be selected
|
|
</mat-error>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<mat-radio-group formControlName="roadVehiclesUsed" class="radio-group">
|
|
<mat-label class="question">Are Road vehicle included in your General List?</mat-label>
|
|
<mat-radio-button value="Y" class="radio-button">Yes</mat-radio-button>
|
|
<mat-radio-button value="N" class="radio-button">No</mat-radio-button>
|
|
</mat-radio-group>
|
|
<mat-radio-group formControlName="horseUsed" class="radio-group">
|
|
<mat-label class="question">Are Horse included in your General List?</mat-label>
|
|
<mat-radio-button value="Y" class="radio-button">Yes</mat-radio-button>
|
|
<mat-radio-button value="N" class="radio-button">No</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
|
|
<!-- Authorized Representatives Section -->
|
|
<div class="form-section">
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Authorized Representative(s)</mat-label>
|
|
<textarea matInput formControlName="authorizedRepresentatives" rows="3"></textarea>
|
|
<mat-error *ngIf="goodsForm.get('authorizedRepresentatives')?.errors?.['required']">
|
|
Authorized Representative(s) is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="table-actions">
|
|
<h3>Goods Items</h3>
|
|
<div class="actions">
|
|
<button mat-raised-button color="primary" type="button" *ngIf="!isViewMode" (click)="addNewItem()">
|
|
<mat-icon>add</mat-icon> Add Item
|
|
</button>
|
|
<div class="upload-section">
|
|
<input type="file" accept=".xlsx,.xls,.csv" (change)="fileUpload($event)" hidden #fileInput>
|
|
<button mat-raised-button type="button" *ngIf="!isViewMode" (click)="fileInput.click()"
|
|
[disabled]="isProcessing">
|
|
<mat-icon>upload</mat-icon> Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<!-- Item Number Column -->
|
|
<ng-container matColumnDef="itemNumber">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Item Number</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.itemNumber }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Description Column -->
|
|
<ng-container matColumnDef="description">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.description }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Pieces Column -->
|
|
<ng-container matColumnDef="pieces">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Pieces</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.pieces }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Weight Column -->
|
|
<ng-container matColumnDef="weight">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Weight</th>
|
|
<td mat-cell *matCellDef="let item">{{ formatDecimalDisplay(item.weight, 4) }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Unit of Measure Column -->
|
|
<ng-container matColumnDef="unitOfMeasure">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Unit Of Measure</th>
|
|
<td mat-cell *matCellDef="let item">{{ getUnitOfMeasureLabel(item.unitOfMeasure) }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Value Column -->
|
|
<ng-container matColumnDef="value">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
|
|
<td mat-cell *matCellDef="let item">{{ formatDecimalDisplay(item.value, 2) | currency}}</td>
|
|
</ng-container>
|
|
|
|
<!-- Country of Origin Column -->
|
|
<ng-container matColumnDef="countryOfOrigin">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Country of Origin</th>
|
|
<td mat-cell *matCellDef="let item">{{ getCountryLabel(item.countryOfOrigin) }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Actions Column -->
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef>Actions</th>
|
|
<td mat-cell *matCellDef="let item; let i = index">
|
|
<button mat-icon-button color="primary" *ngIf="!isViewMode" (click)="editItem(item)"
|
|
matTooltip="Edit">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="warn" *ngIf="!isViewMode" (click)="deleteItem(item)"
|
|
matTooltip="Delete">
|
|
<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 items added</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
|
|
[pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
|
|
</div>
|
|
|
|
<!-- Item Form -->
|
|
<div class="form-container" *ngIf="showItemForm">
|
|
<form [formGroup]="itemForm" (ngSubmit)="saveItem()">
|
|
<div class="form-header">
|
|
<h3>{{ isEditing ? 'Edit Item' : 'Add New Item' }}</h3>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Item Number</mat-label>
|
|
<input matInput formControlName="itemNumber" required>
|
|
<mat-error *ngIf="itemForm.get('itemNumber')?.errors?.['required']">
|
|
Item Number is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="description">
|
|
<mat-label>Description</mat-label>
|
|
<input matInput formControlName="description" required>
|
|
<mat-error *ngIf="itemForm.get('description')?.errors?.['required']">
|
|
Description is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Pieces</mat-label>
|
|
<input matInput type="number" formControlName="pieces" required>
|
|
<mat-error *ngIf="itemForm.get('pieces')?.errors?.['required']">
|
|
Pieces is required
|
|
</mat-error>
|
|
<mat-error *ngIf="itemForm.get('pieces')?.errors?.['min']">
|
|
Must be at least 1
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Weight</mat-label>
|
|
<input matInput type="number" formControlName="weight" required>
|
|
<mat-error *ngIf="itemForm.get('weight')?.errors?.['required']">
|
|
Weight is required
|
|
</mat-error>
|
|
<mat-error *ngIf="itemForm.get('weight')?.errors?.['min']">
|
|
Must be positive
|
|
</mat-error>
|
|
<mat-error *ngIf="itemForm.get('weight')?.errors?.['pattern']">
|
|
Maximum 4 decimal places allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Unit of Measure</mat-label>
|
|
<mat-select formControlName="unitOfMeasure" required>
|
|
<mat-option *ngFor="let unit of unitsOfMeasures" [value]="unit.value">
|
|
{{ unit.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="itemForm.get('unitOfMeasure')?.errors?.['required']">
|
|
Unit of measure is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Value</mat-label>
|
|
<input matInput type="number" formControlName="value" required>
|
|
<mat-error *ngIf="itemForm.get('value')?.errors?.['required']">
|
|
Value is required
|
|
</mat-error>
|
|
<mat-error *ngIf="itemForm.get('value')?.errors?.['min']">
|
|
Must be positive
|
|
</mat-error>
|
|
<mat-error *ngIf="itemForm.get('value')?.errors?.['pattern']">
|
|
Maximum 2 decimal places allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="country">
|
|
<mat-label>Country of Origin</mat-label>
|
|
<mat-select formControlName="countryOfOrigin" required>
|
|
<mat-option *ngFor="let country of countries" [value]="country.value">
|
|
{{ country.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="itemForm.get('countryOfOrigin')?.errors?.['required']">
|
|
Country of origin is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button mat-raised-button color="primary" type="submit" *ngIf="!isViewMode"
|
|
[disabled]="itemForm.invalid || changeInProgress">
|
|
Save
|
|
</button>
|
|
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div *ngIf="!showItemForm" class="form-actions">
|
|
<button mat-raised-button color="primary" (click)="onSubmit()" *ngIf="!isViewMode"
|
|
[disabled]="goodsForm.invalid || changeInProgress">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div> |