Added job login and log off functionality. BOD-183

2020-07-03 16:35:18 -07:00
parent 1ff3cd0f55
commit 88c29490ca
24 changed files with 740 additions and 125 deletions
--- a/client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx
+++ b/client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx
@@ -0,0 +1,93 @@
+import { Card, List, Typography } from "antd";
+import React from "react";
+import { useQuery } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import AlertComponent from "../alert/alert.component";
+import DataLabel from "../data-label/data-label.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import TechClockOffButton from "../tech-job-clock-out-button/tech-job-clock-out-button.component";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export  function TechClockedInList({ technician }) {
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ACTIVE_TIME_TICKETS,
+    {
+      variables: {
+        employeeId: technician.id,
+      },
+    }
+  );
+
+  const { t } = useTranslation();
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <div>
+      {data.timetickets.length > 0 ? (
+        <div>
+          <Typography.Title level={2}>
+            {t("timetickets.labels.alreadyclockedon")}
+          </Typography.Title>
+          <List
+            grid={{
+              gutter: 32,
+              xs: 1,
+              sm: 2,
+              md: 3,
+              lg: 4,
+              xl: 5,
+              xxl: 6,
+            }}
+            dataSource={data.timetickets || []}
+            renderItem={(ticket) => (
+              <List.Item>
+                <Card
+                  title={
+                    <Link to={`/tech/joblookup?selected=${ticket.job.id}`}>
+                      {`${ticket.job.ro_number || ticket.job.est_number} ${
+                        ticket.job.ownr_fn || ""
+                      } ${ticket.job.ownr_ln || ""} ${
+                        ticket.job.ownr_co_nm || ""
+                      }`}
+                    </Link>
+                  }
+                  actions={[
+                    <TechClockOffButton
+                      timeTicketId={ticket.id}
+                      completedCallback={refetch}
+                    />,
+                  ]}
+                >
+                  <div>
+                    {`
+                  ${ticket.job.v_model_yr || ""} ${
+                      ticket.job.v_make_desc || ""
+                    } ${ticket.job.v_model_desc || ""}`}
+                  </div>
+                  <DataLabel label={t("timetickets.fields.clockon")}>
+                    <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
+                  </DataLabel>
+                </Card>
+              </List.Item>
+            )}
+          ></List>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(TechClockedInList);