From 7376779f3ada19283e744c950ecf787f57d2486b Mon Sep 17 00:00:00 2001
From: tanshu <github@tanshu.com>
Date: Wed, 13 Jun 2018 15:23:20 +0530
Subject: [PATCH] Feaure: Showing Hours worked with styling in attendances.

---
 .../app/attendance/attendance.component.css   | 44 +++++++++----------
 .../app/attendance/attendance.component.html  |  8 +++-
 .../src/app/attendance/attendance.module.ts   |  2 +
 .../employee-attendance.component.css         | 44 +++++++++----------
 .../employee-attendance.component.html        |  8 +++-
 .../employee-attendance.module.ts             |  2 +
 6 files changed, 62 insertions(+), 46 deletions(-)

diff --git a/overlord/src/app/attendance/attendance.component.css b/overlord/src/app/attendance/attendance.component.css
index e2ce58cb..7a7e4ec6 100644
--- a/overlord/src/app/attendance/attendance.component.css
+++ b/overlord/src/app/attendance/attendance.component.css
@@ -8,46 +8,46 @@
   justify-content: center;
 }
 
-.present {
-    background-color: #228B22;
+.present :not(.no-bg){
+  background-color: #228B22;
 }
 
-.off-day {
-    background-color: #87CEFA;
+.off-day :not(.no-bg){
+  background-color: #87CEFA;
 }
 
-.on-leave {
-    background-color: #CD5C5C;
+.on-leave :not(.no-bg){
+  background-color: #CD5C5C;
 }
 
-.absent {
-    background-color: #CD0000;
+.absent :not(.no-bg){
+  background-color: #CD0000;
 }
 
-.half-day {
-    background-color: #98FB98;
+.half-day :not(.no-bg){
+  background-color: #98FB98;
 }
 
-.double-duty {
-    background-color: #006400;
+.double-duty :not(.no-bg){
+  background-color: #006400;
 }
 
-.paid-leave-availed {
-    background-color: #EEEE00;
+.paid-leave-availed :not(.no-bg){
+  background-color: #EEEE00;
 }
 
-.casual-leave-availed {
-    background-color: #800080;
+.casual-leave-availed :not(.no-bg){
+  background-color: #800080;
 }
 
-.compensatory-off {
-    background-color: #F5DEB3;
+.compensatory-off :not(.no-bg){
+  background-color: #F5DEB3;
 }
 
-.half-day-pl {
-    background-color: #FFF68F;
+.half-day-pl :not(.no-bg){
+  background-color: #FFF68F;
 }
 
-.half-day-cl {
-    background-color: #FF00FF;
+.half-day-cl :not(.no-bg){
+  background-color: #FF00FF;
 }
diff --git a/overlord/src/app/attendance/attendance.component.html b/overlord/src/app/attendance/attendance.component.html
index 546b65ba..e8c249d7 100644
--- a/overlord/src/app/attendance/attendance.component.html
+++ b/overlord/src/app/attendance/attendance.component.html
@@ -54,9 +54,15 @@
         <!-- Prints Column -->
         <ng-container matColumnDef="prints">
           <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}}
             <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>
         </ng-container>
 
diff --git a/overlord/src/app/attendance/attendance.module.ts b/overlord/src/app/attendance/attendance.module.ts
index 4fb26101..e6fc8b9b 100644
--- a/overlord/src/app/attendance/attendance.module.ts
+++ b/overlord/src/app/attendance/attendance.module.ts
@@ -8,6 +8,7 @@ import {
   MatButtonModule,
   MatCardModule,
   MatCheckboxModule,
+  MatChipsModule,
   MatDatepickerModule,
   MatDialogModule,
   MatFormFieldModule,
@@ -52,6 +53,7 @@ export const MY_FORMATS = {
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,
+    MatChipsModule,
     MatDatepickerModule,
     MatDialogModule,
     MatFormFieldModule,
diff --git a/overlord/src/app/employee-attendance/employee-attendance.component.css b/overlord/src/app/employee-attendance/employee-attendance.component.css
index e2ce58cb..7a7e4ec6 100644
--- a/overlord/src/app/employee-attendance/employee-attendance.component.css
+++ b/overlord/src/app/employee-attendance/employee-attendance.component.css
@@ -8,46 +8,46 @@
   justify-content: center;
 }
 
-.present {
-    background-color: #228B22;
+.present :not(.no-bg){
+  background-color: #228B22;
 }
 
-.off-day {
-    background-color: #87CEFA;
+.off-day :not(.no-bg){
+  background-color: #87CEFA;
 }
 
-.on-leave {
-    background-color: #CD5C5C;
+.on-leave :not(.no-bg){
+  background-color: #CD5C5C;
 }
 
-.absent {
-    background-color: #CD0000;
+.absent :not(.no-bg){
+  background-color: #CD0000;
 }
 
-.half-day {
-    background-color: #98FB98;
+.half-day :not(.no-bg){
+  background-color: #98FB98;
 }
 
-.double-duty {
-    background-color: #006400;
+.double-duty :not(.no-bg){
+  background-color: #006400;
 }
 
-.paid-leave-availed {
-    background-color: #EEEE00;
+.paid-leave-availed :not(.no-bg){
+  background-color: #EEEE00;
 }
 
-.casual-leave-availed {
-    background-color: #800080;
+.casual-leave-availed :not(.no-bg){
+  background-color: #800080;
 }
 
-.compensatory-off {
-    background-color: #F5DEB3;
+.compensatory-off :not(.no-bg){
+  background-color: #F5DEB3;
 }
 
-.half-day-pl {
-    background-color: #FFF68F;
+.half-day-pl :not(.no-bg){
+  background-color: #FFF68F;
 }
 
-.half-day-cl {
-    background-color: #FF00FF;
+.half-day-cl :not(.no-bg){
+  background-color: #FF00FF;
 }
diff --git a/overlord/src/app/employee-attendance/employee-attendance.component.html b/overlord/src/app/employee-attendance/employee-attendance.component.html
index d8a4e28d..782ff5c4 100644
--- a/overlord/src/app/employee-attendance/employee-attendance.component.html
+++ b/overlord/src/app/employee-attendance/employee-attendance.component.html
@@ -54,9 +54,15 @@
         <!-- Prints Column -->
         <ng-container matColumnDef="prints">
           <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}}
             <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>
         </ng-container>
 
diff --git a/overlord/src/app/employee-attendance/employee-attendance.module.ts b/overlord/src/app/employee-attendance/employee-attendance.module.ts
index a9436451..fe9b566a 100644
--- a/overlord/src/app/employee-attendance/employee-attendance.module.ts
+++ b/overlord/src/app/employee-attendance/employee-attendance.module.ts
@@ -8,6 +8,7 @@ import {
   MatButtonModule,
   MatCardModule,
   MatCheckboxModule,
+  MatChipsModule,
   MatDatepickerModule,
   MatDialogModule,
   MatFormFieldModule,
@@ -52,6 +53,7 @@ export const MY_FORMATS = {
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,
+    MatChipsModule,
     MatDatepickerModule,
     MatDialogModule,
     MatFormFieldModule,