Removed all Material Cards
Removed Tailwind Moved to scss Moved to material theme 3
This commit is contained in:
@@ -1,97 +1,93 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Incentives</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<h2>Incentives</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
Total Incentive: <strong>{{ voucher.incentive | number: '1.2-2' }}</strong> Total Points:
|
||||
<strong>{{ totalPoints() | number: '1.2-2' }}</strong> Point Value:
|
||||
<strong>{{ pointValue() | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" formArrayName="incentives">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.department }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- DaysWorked Column -->
|
||||
<ng-container matColumnDef="daysWorked">
|
||||
<mat-header-cell *matHeaderCellDef class="right">DaysWorked</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.daysWorked | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Points Column -->
|
||||
<ng-container matColumnDef="points">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Service Points</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
<button mat-icon-button color="warn" matPrefix (click)="less(row, i)">
|
||||
<mat-icon>remove</mat-icon>
|
||||
</button>
|
||||
<input matInput formControlName="points" autocomplete="off" (change)="change(row, i)" class="flex-auto" />
|
||||
<button mat-icon-button color="primary" matSuffix (click)="more(row, i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
Total Incentive: <strong>{{ voucher.incentive | number: '1.2-2' }}</strong> Total Points:
|
||||
<strong>{{ totalPoints() | number: '1.2-2' }}</strong> Point Value:
|
||||
<strong>{{ pointValue() | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" formArrayName="incentives">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ amount(row) | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.department }}</mat-cell>
|
||||
</ng-container>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
</form>
|
||||
|
||||
<!-- DaysWorked Column -->
|
||||
<ng-container matColumnDef="daysWorked">
|
||||
<mat-header-cell *matHeaderCellDef class="right">DaysWorked</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.daysWorked | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Points Column -->
|
||||
<ng-container matColumnDef="points">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Service Points</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i">
|
||||
<mat-form-field class="flex-auto">
|
||||
<button mat-icon-button color="warn" matPrefix (click)="less(row, i)">
|
||||
<mat-icon>remove</mat-icon>
|
||||
</button>
|
||||
<input matInput formControlName="points" autocomplete="off" (change)="change(row, i)" class="flex-auto" />
|
||||
<button mat-icon-button color="primary" matSuffix (click)="more(row, i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ amount(row) | currency: 'INR' }}</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-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
</mat-card-actions>
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<mat-card-subtitle>
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
|
||||
<strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</mat-card-subtitle>
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
</mat-card>
|
||||
</div>
|
||||
@if (voucher.id) {
|
||||
<div class="row-container">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
|
||||
<strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user