193 lines
9.0 KiB
HTML
193 lines
9.0 KiB
HTML
<div class="security-deposit-container">
|
|
<div class="actions-bar">
|
|
<mat-slide-toggle (change)="toggleShowExpiredRecords()">
|
|
Show Expired Records
|
|
</mat-slide-toggle>
|
|
<button mat-raised-button color="primary" (click)="addNewDeposit()">
|
|
<mat-icon>add</mat-icon> Add New Security Deposit
|
|
</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>
|
|
<!-- Holder Type Column -->
|
|
<ng-container matColumnDef="holderType">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Holder Type</th>
|
|
<td mat-cell *matCellDef="let deposit">{{ getHolderTypeLabel(deposit.holderType) }}</td>
|
|
</ng-container>
|
|
|
|
<!-- USCIB Member Column -->
|
|
<ng-container matColumnDef="uscibMember">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>USCIB Member</th>
|
|
<td mat-cell *matCellDef="let deposit">
|
|
<mat-icon [color]="deposit.uscibMember ? 'primary' : ''">
|
|
{{ deposit.uscibMember ? 'check_circle' : 'cancel' }}
|
|
</mat-icon>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<!-- Special Commodity Column -->
|
|
<ng-container matColumnDef="specialCommodity">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Special Commodity</th>
|
|
<td mat-cell *matCellDef="let deposit">{{ deposit.specialCommodity || 'N/A' }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Special Country Column -->
|
|
<ng-container matColumnDef="specialCountry">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Special Country</th>
|
|
<td mat-cell *matCellDef="let deposit">{{ getCountryName(deposit.specialCountry) || 'N/A' }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Rate Column -->
|
|
<ng-container matColumnDef="rate">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Rate</th>
|
|
<td mat-cell *matCellDef="let deposit">{{ deposit.rate | currency }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Effective Date Column -->
|
|
<ng-container matColumnDef="effectiveDate">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Effective Date</th>
|
|
<td mat-cell *matCellDef="let deposit">{{ deposit.effectiveDate | date:'mediumDate':'UTC' }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Actions Column -->
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef>Actions</th>
|
|
<td mat-cell *matCellDef="let deposit">
|
|
<button mat-icon-button color="primary" (click)="editDeposit(deposit)" matTooltip="Edit">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<!-- <button mat-icon-button color="primary" (click)="editDeposit(deposit)" matTooltip="Edit">
|
|
<mat-icon>history</mat-icon>
|
|
</button> -->
|
|
<!-- <button mat-icon-button color="warn" (click)="deleteDeposit(deposit.securityDepositId)"
|
|
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 security deposits available</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>
|
|
|
|
<!-- Deposit Form -->
|
|
<div class="form-container" *ngIf="showForm">
|
|
<form [formGroup]="depositForm" (ngSubmit)="saveDeposit()">
|
|
<div class="form-header">
|
|
<h3>{{ isEditing ? 'Edit Security Deposit' : 'Add New Security Deposit' }}</h3>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-label>Holder Type</mat-label>
|
|
<mat-radio-group formControlName="holderType" required class="horizontal-group">
|
|
<mat-radio-button *ngFor="let type of holderTypes" [value]="type.value" class="radio-button">
|
|
{{ type.label }}
|
|
</mat-radio-button>
|
|
</mat-radio-group>
|
|
<mat-error *ngIf="depositForm.get('holderType')?.errors?.['required']">
|
|
Holder type is required
|
|
</mat-error>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-label>USCIB Member</mat-label>
|
|
<mat-radio-group formControlName="uscibMember" required class="horizontal-group">
|
|
<mat-radio-button *ngFor="let type of yesNoOptions" [value]="type.value" class="radio-button">
|
|
{{ type.label }}
|
|
</mat-radio-button>
|
|
</mat-radio-group>
|
|
<mat-error *ngIf="depositForm.get('uscibMember')?.errors?.['required']">
|
|
USCIB Member status is required
|
|
</mat-error>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Special Commodity</mat-label>
|
|
<input matInput formControlName="specialCommodity">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Special Country</mat-label>
|
|
<mat-select formControlName="specialCountry">
|
|
<mat-option>None</mat-option>
|
|
<mat-option *ngFor="let country of countries" [value]="country.value">
|
|
{{ country.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Rate</mat-label>
|
|
<input matInput type="number" formControlName="rate" required min="0" step="1">
|
|
<span class="dollar-prefix" matPrefix>$ </span>
|
|
<mat-error *ngIf="depositForm.get('rate')?.errors?.['required']">
|
|
Rate is required
|
|
</mat-error>
|
|
<mat-error *ngIf="depositForm.get('rate')?.errors?.['min']">
|
|
Rate must be positive
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Effective Date</mat-label>
|
|
<input matInput [matDatepicker]="picker" formControlName="effectiveDate" required>
|
|
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
|
<mat-datepicker #picker></mat-datepicker>
|
|
<mat-error *ngIf="depositForm.get('effectiveDate')?.errors?.['required']">
|
|
Effective date is required
|
|
</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">
|
|
{{readOnlyFields.lastChangedBy || 'N/A'}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field-column">
|
|
<!-- Last Changed Date -->
|
|
<div class="readonly-field">
|
|
<label>Last Changed Date</label>
|
|
<div class="readonly-value">
|
|
{{(readOnlyFields.lastChangedDate | date:'mediumDate':'UTC') || 'N/A'}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button mat-raised-button color="primary" type="submit"
|
|
[disabled]="depositForm.invalid || changeInProgress">
|
|
{{ isEditing ? 'Update' : 'Save' }}
|
|
</button>
|
|
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> |