Feature: Complex voucher locking where specific types of vouchers and accounts can be locked and the locks can also be times to expire after some time. Highest index takes priority
339 lines
12 KiB
HTML
339 lines
12 KiB
HTML
<mat-tab-group>
|
|
<mat-tab label="Lock Dates">
|
|
<mat-card>
|
|
<mat-card-content>
|
|
<form [formGroup]="lockInfoForm" fxLayout="column">
|
|
<div
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-around start"
|
|
fxLayout.lt-md="column"
|
|
fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px"
|
|
>
|
|
<mat-checkbox formControlName="lockOlder" fxFlex="20">Lock Older</mat-checkbox>
|
|
<mat-checkbox formControlName="olderRolling" *ngIf="lockOlder" fxFlex="20">
|
|
Is Rolling
|
|
</mat-checkbox>
|
|
<mat-form-field fxFlex="60" *ngIf="lockOlder && !olderRolling">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="olderDate"
|
|
placeholder="Date"
|
|
formControlName="olderDate"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="olderDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #olderDate></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="60" *ngIf="lockOlder && olderRolling">
|
|
<input matInput placeholder="Days" formControlName="olderDays" autocomplete="off" />
|
|
</mat-form-field>
|
|
</div>
|
|
<div
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-around start"
|
|
fxLayout.lt-md="column"
|
|
fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px"
|
|
>
|
|
<mat-checkbox formControlName="lockNewer" fxFlex="20">Lock Newer</mat-checkbox>
|
|
<mat-checkbox formControlName="newerRolling" *ngIf="lockNewer" fxFlex="20">
|
|
Is Rolling
|
|
</mat-checkbox>
|
|
<mat-form-field fxFlex="60" *ngIf="lockNewer && !newerRolling">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="newerDate"
|
|
placehnewer="Date"
|
|
formControlName="newerDate"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="newerDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #newerDate></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="60" *ngIf="lockNewer && newerRolling">
|
|
<input matInput placehnewer="Days" formControlName="newerDays" autocomplete="off" />
|
|
</mat-form-field>
|
|
</div>
|
|
<div
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-around start"
|
|
fxLayout.lt-md="column"
|
|
fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px"
|
|
>
|
|
<div formArrayName="accountTypes">
|
|
<h3>Account Types</h3>
|
|
<div
|
|
fxLayout="row"
|
|
*ngFor="let at of accountTypes; index as i"
|
|
[formGroupName]="i"
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-around start"
|
|
fxLayout.lt-md="column"
|
|
fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px"
|
|
>
|
|
<mat-checkbox formControlName="accountType" fxFlex>{{ at.name }}</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
<div formArrayName="voucherTypes">
|
|
<h3>Voucher Types</h3>
|
|
<div
|
|
fxLayout="row"
|
|
*ngFor="let vt of voucherTypes; index as j"
|
|
[formGroupName]="j"
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-around start"
|
|
fxLayout.lt-md="column"
|
|
fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px"
|
|
>
|
|
<mat-checkbox formControlName="voucherType" fxFlex>{{ vt.name }}</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
fxLayout="row"
|
|
fxLayout.lt-md="column"
|
|
fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px"
|
|
fxLayoutAlign="space-around start"
|
|
>
|
|
<mat-form-field fxFlex="30%">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="validFrom"
|
|
placeholder="Valid From"
|
|
formControlName="validFrom"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
|
|
<mat-datepicker #validFrom></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="30%">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="validTill"
|
|
placeholder="Valid Till"
|
|
formControlName="validTill"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
|
|
<mat-datepicker #validTill></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="20">
|
|
<mat-label>Index</mat-label>
|
|
<input
|
|
type="text"
|
|
matInput
|
|
placeholder="Index"
|
|
formControlName="index"
|
|
autocomplete="off"
|
|
/>
|
|
</mat-form-field>
|
|
<button mat-raised-button color="primary" (click)="saveLock()">Add</button>
|
|
</div>
|
|
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
|
<!-- Index Column -->
|
|
<ng-container matColumnDef="index">
|
|
<mat-header-cell *matHeaderCellDef>Index</mat-header-cell>
|
|
<mat-cell *matCellDef="let row">{{ row.index }}</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Validity Column -->
|
|
<ng-container matColumnDef="validity">
|
|
<mat-header-cell *matHeaderCellDef>Validity</mat-header-cell>
|
|
<mat-cell *matCellDef="let row"
|
|
>{{ !!row.validFrom ? row.validFrom : '\u221E' }} -
|
|
{{ !!row.validTill ? row.validTill : '\u221E' }}</mat-cell
|
|
>
|
|
</ng-container>
|
|
|
|
<!-- Voucher Types Column -->
|
|
<ng-container matColumnDef="voucherTypes">
|
|
<mat-header-cell *matHeaderCellDef>Voucher Types</mat-header-cell>
|
|
<mat-cell *matCellDef="let row">
|
|
<ul>
|
|
<li *ngFor="let vt of row.voucherTypes">{{ vt.name }}</li>
|
|
</ul>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Account Types Column -->
|
|
<ng-container matColumnDef="accountTypes">
|
|
<mat-header-cell *matHeaderCellDef>Account Types</mat-header-cell>
|
|
<mat-cell *matCellDef="let row">
|
|
<ul>
|
|
<li *ngFor="let at of row.accountTypes">{{ at.name }}</li>
|
|
</ul>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Lock Column -->
|
|
<ng-container matColumnDef="lock">
|
|
<mat-header-cell *matHeaderCellDef>Lock Dates</mat-header-cell>
|
|
<mat-cell *matCellDef="let row"
|
|
>{{ !!row.start.days ? row.start.days : ''
|
|
}}{{ !!row.start.date ? row.start.date : ''
|
|
}}{{ !row.start.days && !row.start.date ? '\u221E' : '' }} -
|
|
{{ !!row.finish.days ? row.finish.days : ''
|
|
}}{{ !!row.finish.date ? row.finish.date : ''
|
|
}}{{ !row.finish.days && !row.finish.date ? '\u221E' : '' }}</mat-cell
|
|
>
|
|
</ng-container>
|
|
|
|
<!-- Action Column -->
|
|
<ng-container matColumnDef="action">
|
|
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
|
<mat-cell *matCellDef="let row" class="center">
|
|
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteLock(row)">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
|
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
|
</mat-table>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</mat-tab>
|
|
<mat-tab label="Rebase Data">
|
|
<mat-card>
|
|
<mat-card-content>
|
|
<form [formGroup]="rebaseDataForm" fxLayout="column">
|
|
<div
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-around start"
|
|
fxLayout.lt-md="column"
|
|
fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px"
|
|
>
|
|
<mat-form-field fxFlex="80">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="rebaseDataDate"
|
|
(focus)="rebaseDataDate.open()"
|
|
placeholder="Date"
|
|
formControlName="date"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="rebaseDataDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #rebaseDataDate></mat-datepicker>
|
|
</mat-form-field>
|
|
|
|
<button mat-raised-button color="primary" (click)="confirmRebase()" fxFlex="20">
|
|
Rebase
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</mat-tab>
|
|
<mat-tab label="Reset Stock">
|
|
<mat-card>
|
|
<mat-card-content>
|
|
<form
|
|
[formGroup]="resetStockForm"
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-around start"
|
|
fxLayout.lt-md="column"
|
|
fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px"
|
|
>
|
|
<mat-form-field fxFlex="20">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="resetDate"
|
|
(focus)="resetDate.open()"
|
|
placeholder="Reset Date"
|
|
formControlName="resetDate"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="resetDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #resetDate></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="20">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="stockDate"
|
|
(focus)="stockDate.open()"
|
|
placeholder="Stock Date"
|
|
formControlName="stockDate"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="stockDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #stockDate></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="40">
|
|
<mat-label>Product</mat-label>
|
|
<input
|
|
type="text"
|
|
matInput
|
|
placeholder="Product"
|
|
[matAutocomplete]="auto"
|
|
formControlName="product"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-autocomplete
|
|
#auto="matAutocomplete"
|
|
autoActiveFirstOption
|
|
[displayWith]="displayFn"
|
|
(optionSelected)="selectedProduct($event)"
|
|
>
|
|
<mat-option *ngFor="let product of products | async" [value]="product">{{
|
|
product.name
|
|
}}</mat-option>
|
|
</mat-autocomplete>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="10">
|
|
<mat-label>Quantity</mat-label>
|
|
<input matInput placehnewer="Quantity" formControlName="quantity" autocomplete="off" />
|
|
</mat-form-field>
|
|
|
|
<button mat-raised-button color="warn" (click)="confirmResetStock()" fxFlex="10">
|
|
Rebase
|
|
</button>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</mat-tab>
|
|
<mat-tab label="Integrity Check">
|
|
<mat-card>
|
|
<mat-card-content>
|
|
<button mat-raised-button color="warn" (click)="checkIntegrity()" fxFlex="100">
|
|
Integrity Check
|
|
</button>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</mat-tab>
|
|
<mat-tab label="Maintenance Mode">
|
|
<mat-card>
|
|
<mat-card-content>
|
|
<mat-card-subtitle *ngIf="maintenance.enabled">
|
|
Maintenance mode is <strong>ENABLED</strong> by user
|
|
<strong>{{ maintenance.user }}</strong
|
|
>.
|
|
</mat-card-subtitle>
|
|
<mat-card-subtitle *ngIf="!maintenance.enabled">
|
|
Maintenance mode is <strong>DISABLED</strong>.
|
|
</mat-card-subtitle>
|
|
|
|
<button
|
|
mat-raised-button
|
|
[color]="maintenance.enabled ? 'warn' : 'primary'"
|
|
(click)="toggleMaintenance()"
|
|
fxFlex="100"
|
|
>
|
|
{{ maintenance.enabled ? 'Disable' : 'Enable' }}
|
|
</button>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
<footer class="footer">
|
|
<p>Backend: v{{ auth.user?.ver }} / Frontend: v{{ version }}</p>
|
|
</footer>
|