Files
brewman/overlord/src/app/settings/settings.component.html
tanshu 2820813cb6 Refactor: Moved various Schemas into their files
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
2021-09-10 13:21:43 +05:30

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>