Removed all Material Cards
Removed Tailwind Moved to scss Moved to material theme 3
This commit is contained in:
@@ -1,103 +1,93 @@
|
||||
<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">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
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">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" 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">
|
||||
<mat-label>Employee</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#employeeElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="employee"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
@for (employee of employees | async; track employee) {
|
||||
<mat-option [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>
|
||||
<h2>Employee Attendance</h2>
|
||||
|
||||
<!-- 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">
|
||||
@for (at of attendanceTypes; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" 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">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Employee</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#employeeElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="employee"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
@for (employee of employees | async; track employee) {
|
||||
<mat-option [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>
|
||||
|
||||
<!-- 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 }}
|
||||
@if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
|
||||
<mat-icon class="no-bg">new_releases</mat-icon>
|
||||
}
|
||||
<mat-chip-set class="no-bg">
|
||||
@if (row.hoursWorked.length) {
|
||||
<mat-chip-option
|
||||
class="no-bg"
|
||||
selected
|
||||
selectable="false"
|
||||
[color]="row.fullDay === true ? 'primary' : 'warn'"
|
||||
>
|
||||
{{ row.hoursWorked }}
|
||||
</mat-chip-option>
|
||||
}
|
||||
</mat-chip-set>
|
||||
</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-auto">
|
||||
<mat-select formControlName="attendanceType" name="attendanceType">
|
||||
@for (at of attendanceTypes; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</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>
|
||||
<!-- 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 }}
|
||||
@if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
|
||||
<mat-icon class="no-bg">new_releases</mat-icon>
|
||||
}
|
||||
<mat-chip-set class="no-bg">
|
||||
@if (row.hoursWorked.length) {
|
||||
<mat-chip-option
|
||||
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>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@ import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, Vie
|
||||
import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
@@ -33,7 +32,6 @@ import { EmployeeAttendanceService } from './employee-attendance.service';
|
||||
templateUrl: './employee-attendance.component.html',
|
||||
styleUrls: ['./employee-attendance.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
Reference in New Issue
Block a user