From 854b88e68f3ab6d8282ac9d690f1f382316e3f8c Mon Sep 17 00:00:00 2001
From: Ismail <msiamil.official@gmail.com>
Date: Thu, 20 Aug 2020 23:15:47 +0500
Subject: [PATCH] Shift report link with real DB. schedule created with DB
---
.../src/components/dashboard/Dashboard.js | 25 +++-
.../src/components/layout/ShiftReport.js | 134 ++++++++++++++----
2 files changed, 124 insertions(+), 35 deletions(-)
diff --git a/employeemanagement/src/components/dashboard/Dashboard.js b/employeemanagement/src/components/dashboard/Dashboard.js
index 696ba1e..a7451c7 100644
--- a/employeemanagement/src/components/dashboard/Dashboard.js
+++ b/employeemanagement/src/components/dashboard/Dashboard.js
@@ -4,26 +4,43 @@ import ManageShift from '../layout/ManageShift';
import ShiftReport from '../layout/ShiftReport';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
+import { firestoreConnect } from 'react-redux-firebase';
+import { compose } from 'redux';
class Dashboard extends Component {
render() {
- const { profile, auth } = this.props;
+ const { profile, auth, shiftList, schedule } = this.props;
+ const list = shiftList && shiftList.length ? (
+ shiftList.filter(l => {
+ return l.empId == auth.uid
+ })
+ ) : null
+
if( !auth.uid ) return <Redirect to='/signin' />
return (
<div id="content">
<Navbar profile = { profile } />
<ManageShift />
- <ShiftReport />
+ <ShiftReport workList={ list } schedule={ schedule } />
</div>
)
}
}
-const mapStateToProps = (state) => {
+const mapStateToProps = (state) => {
+ console.log(state);
return{
+ shiftList: state.firestore.ordered.Shifts,
+ schedule: state.firestore.ordered.schedule,
auth: state.firebase.auth,
profile: state.firebase.profile
}
}
-export default connect(mapStateToProps,null)(Dashboard)
+export default compose(
+ firestoreConnect([
+ {collection: 'Shifts'},
+ {collection: 'schedule'}
+ ]),
+ connect(mapStateToProps)
+)(Dashboard)
diff --git a/employeemanagement/src/components/layout/ShiftReport.js b/employeemanagement/src/components/layout/ShiftReport.js
index f52a378..f911f52 100644
--- a/employeemanagement/src/components/layout/ShiftReport.js
+++ b/employeemanagement/src/components/layout/ShiftReport.js
@@ -1,37 +1,109 @@
-import React from 'react'
+import React from 'react';
+import moment from 'moment';
+
+const ShiftReport = ({workList, schedule}) =>{
+
+ function addTimes(times = []) {
+ const z = (n) => (n < 10 ? '0' : '') + n;
+ let hour = 0
+ let minute = 0
+ let second = 0
+ for (const time of times) {
+ const splited = time.split(':');
+ hour += parseInt(splited[0]);
+ minute += parseInt(splited[1])
+ second += parseInt(splited[2])
+ }
+ const seconds = second % 60
+ const minutes = parseInt(minute % 60) + parseInt(second / 60)
+ const hours = hour + parseInt(minute / 60)
+
+ return z(hours) + ':' + z(minutes) + ':' + z(seconds)
+ }
+
+ const reqTime = schedule && schedule.length ?
+ (
+ <h5 className="text-center">Expected work: { schedule[0].sShift } to { schedule[0].sEnd }, {
+ moment.utc(moment(schedule[0].sEnd,"HH:mm:ss").diff(moment(schedule[0].sShift,"HH:mm:ss"))).format("HH:mm")
+ } Hours with {
+ moment.utc(moment(schedule[0].lbEnd,"HH:mm:ss").diff(moment(schedule[0].lbStart,"HH:mm:ss"))).format("HH:mm")
+ } Hour lunch break
+ </h5>
+ ) : <h5 className="text-center">No time schedule added!</h5>
+
+ const worklist = workList && workList.length ? (
+ workList && workList.map((w,key) => {
+ const caclBreak = w.endBreak !== '' ? (
+ moment.utc(moment(w.endBreak,"MM/DD/YYYY HH:mm:ss").diff(moment(w.startBreak,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
+ ) : (
+ '-'
+ )
+ const caclTime = w.endShift !== '' ? (
+ moment.utc(moment(w.endShift,"MM/DD/YYYY HH:mm:ss").diff(moment(w.startShift,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
+ ) : (
+ '-'
+ )
+
+ var work1 = moment.utc(moment(w.startBreak,"MM/DD/YYYY HH:mm:ss").diff(moment(w.startShift,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
+ var work2 = moment.utc(moment(w.endShift,"MM/DD/YYYY HH:mm:ss").diff(moment(w.endBreak,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
+ const caclTotalTime = w.endShift !== '' ? (
+ addTimes([work1, work2])
+ ) : (
+ '-'
+ )
+
+ const reqT = schedule && schedule.length ? (
+ moment.utc(moment(schedule[0].sEnd,"HH:mm:ss").diff(moment(schedule[0].sShift,"HH:mm:ss"))).format("HH:mm")
+ ) : (
+ '-'
+ )
+
+ const caclDiff = w.endShift !== '' ? (
+ moment.utc(moment(reqT,"HH:mm:ss").diff(moment(caclTotalTime,"HH:mm:ss"))).format("HH:mm:ss")
+ ) : (
+ '-'
+ )
+ return(
+ <tr className="collection-item" key = { key}>
+ <th scope="row">{ w.date }</th>
+ <td>{ w.startShift.substring(10, 20) }</td>
+ <td>{ w.startBreak.substring(10, 20) }</td>
+ <td>{ w.endBreak.substring(10, 20) }</td>
+ <td>{ w.endShift.substring(10, 20) }</td>
+ <th>{ caclBreak }</th>
+ <th>{ caclTotalTime }</th>
+ <th>{ caclTime }</th>
+ <th>{ caclDiff }</th>
+ </tr>
+ )
+ })
+ ) : (
+ <tr><td colSpan="9" className="text-center">No work exist!</td></tr>
+ )
-const ShiftReport = () =>{
return(
<div className="container">
- <h2 className="text-center">Work report</h2>
- <h5 className="text-center">Expected work: 08:00 to 17:00, 9 Hours with 1 Hour lunch break</h5>
- <table className="table table-striped">
- <thead>
- <tr>
- <th scope="col">Date</th>
- <th scope="col">Start time</th>
- <th scope="col">Lunch time</th>
- <th scope="col">Lunch end time</th>
- <th scope="col">Work end</th>
- <th scope="col">Total Break</th>
- <th scope="col">Total work</th>
- <th scope="col">Break + Work</th>
- </tr>
- </thead>
- <tbody className="workList">
- <tr className="collection-item">
- <th>DummyData</th>
- <td>DummyData</td>
- <td>DummyData</td>
- <td>DummyData</td>
- <td>DummyData</td>
- <th>DummyData</th>
- <th>DummyData</th>
- <th>DummyData</th>
- </tr>
- </tbody>
- </table>
- </div>
+ <h2 className="text-center">Work report</h2>
+ { reqTime }
+ <table className="table table-striped">
+ <thead>
+ <tr>
+ <th scope="col">Date</th>
+ <th scope="col">Start time</th>
+ <th scope="col">Lunch time</th>
+ <th scope="col">Lunch end time</th>
+ <th scope="col">Work end</th>
+ <th scope="col">Total Break</th>
+ <th scope="col">Total work</th>
+ <th scope="col">Break + Work</th>
+ <th scope="col">Difference</th>
+ </tr>
+ </thead>
+ <tbody className="workList">
+ { worklist }
+ </tbody>
+ </table>
+ </div>
)
}
--
GitLab