Framework for entering time tickets BOD-183 BOD-185

client/src/components/job-search-select/job-search-select.component.jsx

@@ -4,7 +4,14 @@ const { Option } = Select;
 
 //To be used as a form element only.
 
-const JobSearchSelect = ({ value, onChange, options, onBlur, disabled }) => {
+const JobSearchSelect = ({
+  value,
+  onChange,
+  options,
+  onBlur,
+  disabled,
+  loading,
+}) => {
   const [option, setOption] = useState(value);
 
   useEffect(() => {
@@ -22,6 +29,7 @@ const JobSearchSelect = ({ value, onChange, options, onBlur, disabled }) => {
       style={{
         width: 300,
       }}
+      loading={loading}
       onChange={setOption}
       optionFilterProp="children"
       onBlur={onBlur}

client/src/components/tech-clock-in/tech-clock-in.component.jsx

@@ -0,0 +1,41 @@
+import { useQuery } from "@apollo/react-hooks";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import JobSearchSelect from "../job-search-select/job-search-select.component";
+import { useTranslation } from "react-i18next";
+import { Form } from "antd";
+const mapStateToProps = createStructuredSelector({
+    bodyshop: selectBodyshop,
+  
+  });
+
+export function TechClockInComponent({ form, bodyshop }) {
+  const { t } = useTranslation();
+  const { loading, data } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
+    variables: {
+      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"],
+    },
+  });
+
+  return (
+    <div>
+      <Form.Item
+        name="jobid"
+        label={t("jobs.fields.ro_number")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <JobSearchSelect loading={loading} options={data ? data.jobs : []} />
+      </Form.Item>
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(TechClockInComponent);

client/src/components/tech-clock-in/tech-clock-in.container.jsx

@@ -0,0 +1,44 @@
+import { Form, Button } from "antd";
+import React from "react";
+import { useQuery } from "react-apollo";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import TechClockInComponent from "./tech-clock-in.component";
+import { useTranslation } from "react-i18next";
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+
+export function TechClockInContainer({ technician }) {
+  const { loading, error, data } = useQuery(QUERY_ACTIVE_TIME_TICKETS);
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  console.log("data", data);
+
+  if (data.timetickets.length > 0) {
+    return <div>already clock into a job.</div>;
+  }
+
+  const handleFinish = (values) => {
+    console.log("values", values);
+  };
+
+  return (
+    <div>
+      <Form form={form} layout="vertical" onFinish={handleFinish}>
+        <TechClockInComponent form={form} />
+        <Button type="primary" htmlType="submit">
+          {t("timetickets.actions.clockon")}
+        </Button>
+      </Form>
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(TechClockInContainer);

client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx

@@ -1,6 +1,6 @@
 import { PrinterFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/react-hooks";
-import { Button, Col, Drawer, Grid, PageHeader, Row, Tag } from "antd";
+import { Button, Col, Drawer, Grid, PageHeader, Row, Tag, Tabs } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -12,6 +12,9 @@ import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
 import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
+import JobLinesContainer from "../job-detail-lines/job-lines.container";
+import JobsDocumentsGalleryContainer from "../jobs-documents-gallery/jobs-documents-gallery.container";
+import JobNotesContainer from "../jobs-notes/jobs-notes.container";
 
 const mapDispatchToProps = (dispatch) => ({
   setPrintCenterContext: (context) =>
@@ -23,7 +26,7 @@ const colBreakPoints = {
     span: 24,
   },
   sm: {
-    span: 12,
+    span: 8,
   },
 };
 
@@ -115,10 +118,21 @@ export function JobDetailCards({ setPrintCenterContext }) {
           }
         >
           <Row gutter={[16, 16]}>
-            <Col {...colBreakPoints}></Col>
-            <Col {...colBreakPoints}></Col>
-            <Col {...colBreakPoints}></Col>
+            <Col {...colBreakPoints}> What would be good to have here?</Col>
+            <Col {...colBreakPoints}> What would be good to have here?</Col>
+            <Col {...colBreakPoints}> What would be good to have here?</Col>
           </Row>
+          <Tabs size="large">
+            <Tabs.TabPane key="lines" tab={t("jobs.labels.lines")}>
+              <JobLinesContainer jobId={searchParams.selected} />
+            </Tabs.TabPane>
+            <Tabs.TabPane key="documents" tab={t("jobs.labels.documents")}>
+              <JobsDocumentsGalleryContainer jobId={searchParams.selected} />
+            </Tabs.TabPane>
+            <Tabs.TabPane key="notes" tab={t("jobs.labels.notes")}>
+              <JobNotesContainer jobId={searchParams.selected} />
+            </Tabs.TabPane>
+          </Tabs>
         </PageHeader>
       ) : null}
     </Drawer>