Feaure: Showing Hours worked with styling in attendances.

This commit is contained in:
tanshu 2018-06-13 15:23:20 +05:30
parent 927c693a6f
commit 7376779f3a
6 changed files with 62 additions and 46 deletions

View File

@ -8,46 +8,46 @@
justify-content: center; justify-content: center;
} }
.present { .present :not(.no-bg){
background-color: #228B22; background-color: #228B22;
} }
.off-day { .off-day :not(.no-bg){
background-color: #87CEFA; background-color: #87CEFA;
} }
.on-leave { .on-leave :not(.no-bg){
background-color: #CD5C5C; background-color: #CD5C5C;
} }
.absent { .absent :not(.no-bg){
background-color: #CD0000; background-color: #CD0000;
} }
.half-day { .half-day :not(.no-bg){
background-color: #98FB98; background-color: #98FB98;
} }
.double-duty { .double-duty :not(.no-bg){
background-color: #006400; background-color: #006400;
} }
.paid-leave-availed { .paid-leave-availed :not(.no-bg){
background-color: #EEEE00; background-color: #EEEE00;
} }
.casual-leave-availed { .casual-leave-availed :not(.no-bg){
background-color: #800080; background-color: #800080;
} }
.compensatory-off { .compensatory-off :not(.no-bg){
background-color: #F5DEB3; background-color: #F5DEB3;
} }
.half-day-pl { .half-day-pl :not(.no-bg){
background-color: #FFF68F; background-color: #FFF68F;
} }
.half-day-cl { .half-day-cl :not(.no-bg){
background-color: #FF00FF; background-color: #FF00FF;
} }

View File

@ -54,9 +54,15 @@
<!-- Prints Column --> <!-- Prints Column -->
<ng-container matColumnDef="prints"> <ng-container matColumnDef="prints">
<mat-header-cell *matHeaderCellDef>Prints</mat-header-cell> <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
<mat-cell *matCellDef="let row; let i = index"> <mat-cell *matCellDef="let row; let i = index" class="no-bg">
{{row.prints}} {{row.prints}}
<mat-icon *ngIf="!form.controls.attendances.controls[i].pristine">new_releases</mat-icon> <mat-icon *ngIf="!form.controls.attendances.controls[i].pristine">new_releases</mat-icon>
<mat-chip-list class="no-bg">
<mat-chip *ngIf="row.hours.length" class="no-bg" [selected]="row.worked !== 'Error'"
[color]="row.worked === true ? 'primary' : 'warn'">
{{row.hours}}
</mat-chip>
</mat-chip-list>
</mat-cell> </mat-cell>
</ng-container> </ng-container>

View File

@ -8,6 +8,7 @@ import {
MatButtonModule, MatButtonModule,
MatCardModule, MatCardModule,
MatCheckboxModule, MatCheckboxModule,
MatChipsModule,
MatDatepickerModule, MatDatepickerModule,
MatDialogModule, MatDialogModule,
MatFormFieldModule, MatFormFieldModule,
@ -52,6 +53,7 @@ export const MY_FORMATS = {
MatButtonModule, MatButtonModule,
MatCardModule, MatCardModule,
MatCheckboxModule, MatCheckboxModule,
MatChipsModule,
MatDatepickerModule, MatDatepickerModule,
MatDialogModule, MatDialogModule,
MatFormFieldModule, MatFormFieldModule,

View File

@ -8,46 +8,46 @@
justify-content: center; justify-content: center;
} }
.present { .present :not(.no-bg){
background-color: #228B22; background-color: #228B22;
} }
.off-day { .off-day :not(.no-bg){
background-color: #87CEFA; background-color: #87CEFA;
} }
.on-leave { .on-leave :not(.no-bg){
background-color: #CD5C5C; background-color: #CD5C5C;
} }
.absent { .absent :not(.no-bg){
background-color: #CD0000; background-color: #CD0000;
} }
.half-day { .half-day :not(.no-bg){
background-color: #98FB98; background-color: #98FB98;
} }
.double-duty { .double-duty :not(.no-bg){
background-color: #006400; background-color: #006400;
} }
.paid-leave-availed { .paid-leave-availed :not(.no-bg){
background-color: #EEEE00; background-color: #EEEE00;
} }
.casual-leave-availed { .casual-leave-availed :not(.no-bg){
background-color: #800080; background-color: #800080;
} }
.compensatory-off { .compensatory-off :not(.no-bg){
background-color: #F5DEB3; background-color: #F5DEB3;
} }
.half-day-pl { .half-day-pl :not(.no-bg){
background-color: #FFF68F; background-color: #FFF68F;
} }
.half-day-cl { .half-day-cl :not(.no-bg){
background-color: #FF00FF; background-color: #FF00FF;
} }

View File

@ -54,9 +54,15 @@
<!-- Prints Column --> <!-- Prints Column -->
<ng-container matColumnDef="prints"> <ng-container matColumnDef="prints">
<mat-header-cell *matHeaderCellDef>Prints</mat-header-cell> <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
<mat-cell *matCellDef="let row; let i = index"> <mat-cell *matCellDef="let row; let i = index" class="no-bg">
{{row.prints}} {{row.prints}}
<mat-icon *ngIf="!form.controls.attendances.controls[i].pristine">new_releases</mat-icon> <mat-icon *ngIf="!form.controls.attendances.controls[i].pristine">new_releases</mat-icon>
<mat-chip-list class="no-bg">
<mat-chip *ngIf="row.hours.length" class="no-bg" [selected]="row.worked !== 'Error'"
[color]="row.worked === true ? 'primary' : 'warn'">
{{row.hours}}
</mat-chip>
</mat-chip-list>
</mat-cell> </mat-cell>
</ng-container> </ng-container>

View File

@ -8,6 +8,7 @@ import {
MatButtonModule, MatButtonModule,
MatCardModule, MatCardModule,
MatCheckboxModule, MatCheckboxModule,
MatChipsModule,
MatDatepickerModule, MatDatepickerModule,
MatDialogModule, MatDialogModule,
MatFormFieldModule, MatFormFieldModule,
@ -52,6 +53,7 @@ export const MY_FORMATS = {
MatButtonModule, MatButtonModule,
MatCardModule, MatCardModule,
MatCheckboxModule, MatCheckboxModule,
MatChipsModule,
MatDatepickerModule, MatDatepickerModule,
MatDialogModule, MatDialogModule,
MatFormFieldModule, MatFormFieldModule,