116 lines
4.2 KiB
HTML
116 lines
4.2 KiB
HTML
<mat-card>
|
|
<mat-card-header>
|
|
<mat-card-title>Employee Attendance</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 sm:max-lg:flex-col">
|
|
<mat-form-field class="flex-auto mr-5">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="startDate"
|
|
(focus)="startDate.open()"
|
|
placeholder="Start Date"
|
|
formControlName="startDate"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #startDate></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field class="flex-auto">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="finishDate"
|
|
(focus)="finishDate.open()"
|
|
placeholder="Finish Date"
|
|
formControlName="finishDate"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #finishDate></mat-datepicker>
|
|
</mat-form-field>
|
|
</div>
|
|
<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">
|
|
<input
|
|
type="text"
|
|
matInput
|
|
#employeeElement
|
|
placeholder="Employee"
|
|
[matAutocomplete]="auto"
|
|
formControlName="employee"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-autocomplete
|
|
#auto="matAutocomplete"
|
|
autoActiveFirstOption
|
|
[displayWith]="displayFn"
|
|
(optionSelected)="selected($event)"
|
|
>
|
|
<mat-option *ngFor="let employee of employees | async" [value]="employee">{{
|
|
employee.name
|
|
}}</mat-option>
|
|
</mat-autocomplete>
|
|
</mat-form-field>
|
|
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">
|
|
Show
|
|
</button>
|
|
</div>
|
|
<mat-table #table [dataSource]="dataSource" formArrayName="attendances">
|
|
<!-- Date Column -->
|
|
<ng-container matColumnDef="date">
|
|
<mat-header-cell *matHeaderCellDef class="center">Date</mat-header-cell>
|
|
<mat-cell *matCellDef="let row" class="center">{{ row.date }}</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Status Column -->
|
|
<ng-container matColumnDef="status">
|
|
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
|
|
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex flex-auto">
|
|
<mat-select formControlName="attendanceType" name="attendanceType">
|
|
<mat-option *ngFor="let at of attendanceTypes" [value]="at.id">
|
|
{{ at.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Prints Column -->
|
|
<ng-container matColumnDef="prints">
|
|
<mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
|
|
<mat-cell *matCellDef="let row; let i = index" class="no-bg">
|
|
{{ row.prints }}
|
|
<mat-icon
|
|
class="no-bg"
|
|
*ngIf="!form.controls.attendances.controls[i].controls.attendanceType.pristine"
|
|
>new_releases</mat-icon
|
|
>
|
|
<mat-chip-set class="no-bg">
|
|
<mat-chip-option
|
|
*ngIf="row.hoursWorked.length"
|
|
class="no-bg"
|
|
selected
|
|
selectable="false"
|
|
[color]="row.fullDay === true ? 'primary' : 'warn'"
|
|
>
|
|
{{ row.hoursWorked }}
|
|
</mat-chip-option>
|
|
</mat-chip-set>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
|
<mat-row
|
|
*matRowDef="let row; let i = index; columns: displayedColumns"
|
|
[class]="getClass(i)"
|
|
></mat-row>
|
|
</mat-table>
|
|
</form>
|
|
</mat-card-content>
|
|
<mat-card-actions>
|
|
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">
|
|
Save
|
|
</button>
|
|
</mat-card-actions>
|
|
</mat-card>
|