Added shift clock framework + login on tech console BOD-97 BOD-188

client/src/components/time-ticket-shift-form/time-ticket-shift-form.component.jsx

@@ -0,0 +1,53 @@
+import { Form, InputNumber, Select } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function TimeTicketShiftFormComponent({ bodyshop, form }) {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Form.Item
+        name='memo'
+        label={t("timetickets.fields.memo")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}>
+        <Select>
+          <Select.Option value='timetickets.labels.amshift'>
+            {t("timetickets.labels.amshift")}
+          </Select.Option>
+          <Select.Option value='timetickets.labels.ambreak'>
+            {t("timetickets.labels.ambreak")}
+          </Select.Option>
+          <Select.Option value='timetickets.labels.lunch'>
+            {t("timetickets.labels.lunch")}
+          </Select.Option>
+          <Select.Option value='timetickets.labels.pmshift'>
+            {t("timetickets.labels.pmshift")}
+          </Select.Option>
+          <Select.Option value='timetickets.labels.pmbreak'>
+            {t("timetickets.labels.pmbreak")}
+          </Select.Option>
+        </Select>
+      </Form.Item>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicketShiftFormComponent);

client/src/components/time-ticket-shift-form/time-ticket-shift-form.container.jsx

@@ -0,0 +1,90 @@
+import { useMutation } from "@apollo/react-hooks";
+import { Button, Form, notification } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import TimeTicektShiftComponent from "./time-ticket-shift-form.component";
+import axios from "axios";
+import moment from "moment";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function TimeTicektShiftContainer({
+  bodyshop,
+  technician,
+  isTechConsole,
+}) {
+  const [form] = Form.useForm();
+  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET);
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+
+  const handleFinish = async (values) => {
+    setLoading(true);
+    console.log(values);
+    const theTime = moment((await axios.post("/utils/time")).data);
+
+    const result = await insertTimeTicket({
+      variables: {
+        timeTicketInput: [
+          {
+            bodyshopid: bodyshop.id,
+            employeeid: isTechConsole
+              ? technician.id
+              : bodyshop.associations[0].user.employee.id,
+            cost_center: "timetickets.labels.shift",
+            clockon: theTime,
+            date: theTime,
+            memo: values.memo,
+          },
+        ],
+      },
+      awaitRefetchQueries: true,
+      refetchQueries: ["QUERY_ACTIVE_SHIFT_TIME_TICKETS"],
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("timetickets.errors.clockingin", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    } else {
+      notification["success"]({
+        message: t("timetickets.successes.clockedin"),
+      });
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div>
+      The form TimeTicektShiftContainer
+      <Form
+        form={form}
+        layout='vertical'
+        autoComplete='no'
+        onFinish={handleFinish}
+        initialValues={{ cost_center: t("timetickets.labels.shift") }}>
+        <TimeTicektShiftComponent form={form} />
+        <Button htmlType='submit' loading={loading}>
+          {t("timetickets.actions.clockin")}
+        </Button>
+      </Form>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicektShiftContainer);