Removed all Material Cards
Removed Tailwind Moved to scss Moved to material theme 3
This commit is contained in:
tanshu committed
1 parent
c542114e42
commit
846a7209ee
147 files changed
+6057
-6377
No files matched your search
@@ -1,206 +1,192 @@
|
||||
<mat-tab-group>
|
||||
<mat-tab label="Lock Dates">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="lockInfoForm" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-checkbox formControlName="lockOlder" class="flex-auto basis-1/5 mr-5">Lock Older</mat-checkbox>
|
||||
@if (lockOlder) {
|
||||
<mat-checkbox formControlName="olderRolling" class="flex-auto basis-1/5 mr-5"> Is Rolling </mat-checkbox>
|
||||
}
|
||||
@if (lockOlder && !olderRolling) {
|
||||
<mat-form-field class="flex-auto basis-3/5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="olderDate" formControlName="olderDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="olderDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #olderDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (lockOlder && olderRolling) {
|
||||
<mat-form-field class="flex-auto basis-3/5">
|
||||
<mat-label>Days</mat-label>
|
||||
<input matInput formControlName="olderDays" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-checkbox formControlName="lockNewer" class="flex-auto basis-1/5 mr-5">Lock Newer</mat-checkbox>
|
||||
@if (lockNewer) {
|
||||
<mat-checkbox formControlName="newerRolling" class="flex-auto basis-1/5 mr-5"> Is Rolling </mat-checkbox>
|
||||
}
|
||||
@if (lockNewer && !newerRolling) {
|
||||
<mat-form-field class="flex-auto basis-3/5">
|
||||
<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>
|
||||
}
|
||||
@if (lockNewer && newerRolling) {
|
||||
<mat-form-field class="flex-auto basis-3/5">
|
||||
<input matInput placehnewer="Days" formControlName="newerDays" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<div formArrayName="accountTypes">
|
||||
<h3>Account Types</h3>
|
||||
@for (at of accountTypes; track at; let i = $index) {
|
||||
<div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="accountType" class="flex-auto">{{ at.name }}</mat-checkbox>
|
||||
</div>
|
||||
}
|
||||
<form [formGroup]="lockInfoForm" class="flex flex-col">
|
||||
<div class="row-container">
|
||||
<mat-checkbox formControlName="lockOlder" class="flex-auto basis-1-5">Lock Older</mat-checkbox>
|
||||
@if (lockOlder) {
|
||||
<mat-checkbox formControlName="olderRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
|
||||
}
|
||||
@if (lockOlder && !olderRolling) {
|
||||
<mat-form-field class="flex-auto basis-3-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="olderDate" formControlName="olderDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="olderDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #olderDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (lockOlder && olderRolling) {
|
||||
<mat-form-field class="flex-auto basis-3-5">
|
||||
<mat-label>Days</mat-label>
|
||||
<input matInput formControlName="olderDays" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-checkbox formControlName="lockNewer" class="flex-auto basis-1-5">Lock Newer</mat-checkbox>
|
||||
@if (lockNewer) {
|
||||
<mat-checkbox formControlName="newerRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
|
||||
}
|
||||
@if (lockNewer && !newerRolling) {
|
||||
<mat-form-field class="flex-auto basis-3-5">
|
||||
<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>
|
||||
}
|
||||
@if (lockNewer && newerRolling) {
|
||||
<mat-form-field class="flex-auto basis-3-5">
|
||||
<input matInput placehnewer="Days" formControlName="newerDays" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<div formArrayName="accountTypes">
|
||||
<h3>Account Types</h3>
|
||||
@for (at of accountTypes; track at; let i = $index) {
|
||||
<div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="accountType" class="flex-auto">{{ at.name }}</mat-checkbox>
|
||||
</div>
|
||||
<div formArrayName="voucherTypes">
|
||||
<h3>Voucher Types</h3>
|
||||
@for (vt of voucherTypes; track vt; let j = $index) {
|
||||
<div [formGroupName]="j" class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="voucherType" class="flex-auto">{{ vt.name }}</mat-checkbox>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div formArrayName="voucherTypes">
|
||||
<h3>Voucher Types</h3>
|
||||
@for (vt of voucherTypes; track vt; let j = $index) {
|
||||
<div [formGroupName]="j" class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="voucherType" class="flex-auto">{{ vt.name }}</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-3/10 mr-5">
|
||||
<mat-label>Valid From</mat-label>
|
||||
<input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validFrom></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-3/10 mr-5">
|
||||
<mat-label>Valid Till</mat-label>
|
||||
<input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validTill></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/5 mr-5">
|
||||
<mat-label>Index</mat-label>
|
||||
<input type="text" matInput formControlName="index" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" (click)="saveLock()" class="flex-auto basis-1/5">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>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-30">
|
||||
<mat-label>Valid From</mat-label>
|
||||
<input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validFrom></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-30">
|
||||
<mat-label>Valid Till</mat-label>
|
||||
<input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validTill></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-5">
|
||||
<mat-label>Index</mat-label>
|
||||
<input type="text" matInput formControlName="index" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" (click)="saveLock()" class="flex-auto basis-1-5">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>
|
||||
<!-- 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>
|
||||
@for (vt of row.voucherTypes; track vt) {
|
||||
<li>{{ vt.name }}</li>
|
||||
}
|
||||
</ul>
|
||||
</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>
|
||||
@for (vt of row.voucherTypes; track vt) {
|
||||
<li>{{ 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>
|
||||
@for (at of row.accountTypes; track at) {
|
||||
<li>{{ at.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>
|
||||
@for (at of row.accountTypes; track at) {
|
||||
<li>{{ 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>
|
||||
<!-- 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>
|
||||
<!-- 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-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
</form>
|
||||
</mat-tab>
|
||||
<mat-tab label="Rebase Data">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="rebaseDataForm" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="rebaseDataDate"
|
||||
(focus)="rebaseDataDate.open()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="rebaseDataDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #rebaseDataDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<form [formGroup]="rebaseDataForm" class="flex flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="rebaseDataDate"
|
||||
(focus)="rebaseDataDate.open()"
|
||||
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()" class="flex-auto basis-1/5">
|
||||
Rebase
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<button mat-raised-button color="primary" (click)="confirmRebase()" class="flex-auto basis-1-5">Rebase</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-tab>
|
||||
<mat-tab label="Maintenance Mode">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
@if (maintenance.enabled) {
|
||||
<mat-card-subtitle>
|
||||
Maintenance mode is <strong>ENABLED</strong> by user <strong>{{ maintenance.user }}</strong
|
||||
>.
|
||||
</mat-card-subtitle>
|
||||
}
|
||||
@if (!maintenance.enabled) {
|
||||
<mat-card-subtitle> Maintenance mode is <strong>DISABLED</strong>. </mat-card-subtitle>
|
||||
}
|
||||
@if (maintenance.enabled) {
|
||||
<div class="row-container">
|
||||
Maintenance mode is <strong>ENABLED</strong> by user <strong>{{ maintenance.user }}</strong
|
||||
>.
|
||||
</div>
|
||||
}
|
||||
@if (!maintenance.enabled) {
|
||||
<div class="row-container">Maintenance mode is <strong>DISABLED</strong>.</div>
|
||||
}
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
[color]="maintenance.enabled ? 'warn' : 'primary'"
|
||||
(click)="toggleMaintenance()"
|
||||
class="flex-auto"
|
||||
>
|
||||
{{ maintenance.enabled ? 'Disable' : 'Enable' }}
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<button
|
||||
mat-raised-button
|
||||
[color]="maintenance.enabled ? 'warn' : 'primary'"
|
||||
(click)="toggleMaintenance()"
|
||||
class="flex-auto"
|
||||
>
|
||||
{{ maintenance.enabled ? 'Disable' : 'Enable' }}
|
||||
</button>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
<footer class="footer">
|
||||
|
||||
Reference in new issue
Block a user