Additional Menu Refactors

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/bill-detail-edit/bill-detail-edit-component.jsx

@@ -2,20 +2,25 @@ import {useMutation, useQuery} from "@apollo/client";
 import {Button, Form, Popconfirm, Space} from "antd";
 import dayjs from "../../utils/day";
 import queryString from "query-string";
-import React, {useState} from "react";
-import {useTranslation} from "react-i18next";
-import {connect} from "react-redux";
-import {useLocation} from "react-router-dom";
-import {createStructuredSelector} from "reselect";
-import {DELETE_BILL_LINE, INSERT_NEW_BILL_LINES, UPDATE_BILL_LINE} from "../../graphql/bill-lines.queries";
-import {QUERY_BILL_BY_PK, UPDATE_BILL} from "../../graphql/bills.queries";
-import {insertAuditTrail} from "../../redux/application/application.actions";
-import {setModalContext} from "../../redux/modals/modals.actions";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import {
+  DELETE_BILL_LINE,
+  INSERT_NEW_BILL_LINES,
+  UPDATE_BILL_LINE
+} from "../../graphql/bill-lines.queries";
+import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
 import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
+import BillPrintButton from "../bill-print-button/bill-print-button.component";
 import BillReeportButtonComponent from "../bill-reexport-button/bill-reexport-button.component";
 import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-gallery.container";
 import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
@@ -158,49 +163,49 @@ export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail,
 
     const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
 
-    return (
+  return (
+    <>
+      {loading && <LoadingSkeleton />}
+      {data && (
         <>
-            {loading && <LoadingSkeleton/>}
-            {data && (
-                <>
-                    <PageHeader
-                        title={
-                            data &&
-                            `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
-                        }
-                        extra={
-                            <Space>
-                                <BillDetailEditReturn data={data}/>
-
-                                <Popconfirm
-                                    open={visible}
-                                    onConfirm={() => form.submit()}
-                                    onCancel={() => setVisible(false)}
-                                    okButtonProps={{loading: updateLoading}}
-                                    title={t("bills.labels.editadjwarning")}
-                                >
-                                    <Button
-                                        htmlType="submit"
-                                        disabled={exported}
-                                        onClick={handleSave}
-                                        loading={updateLoading}
-                                        type="primary"
-                                    >
-                                        {t("general.actions.save")}
-                                    </Button>
-                                </Popconfirm>
-                                <BillReeportButtonComponent bill={data && data.bills_by_pk}/>
-                                <BillMarkExportedButton bill={data && data.bills_by_pk}/>
-                            </Space>
-                        }
-                    />
-                    <Form
-                        form={form}
-                        onFinish={handleFinish}
-                        initialValues={transformData(data)}
-                        layout="vertical"
-                    >
-                        <BillFormContainer form={form} billEdit disabled={exported}/>
+          <PageHeader
+            title={
+              data &&
+              `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
+            }
+            extra={
+              <Space>
+                <BillDetailEditReturn data={data} />
+                <BillPrintButton billid={search.billid} />
+                <Popconfirm
+                  visible={visible}
+                  onConfirm={() => form.submit()}
+                  onCancel={() => setVisible(false)}
+                  okButtonProps={{ loading: updateLoading }}
+                  title={t("bills.labels.editadjwarning")}
+                >
+                  <Button
+                    htmlType="submit"
+                    disabled={exported}
+                    onClick={handleSave}
+                    loading={updateLoading}
+                    type="primary"
+                  >
+                    {t("general.actions.save")}
+                  </Button>
+                </Popconfirm>
+                <BillReeportButtonComponent bill={data && data.bills_by_pk} />
+                <BillMarkExportedButton bill={data && data.bills_by_pk} />
+              </Space>
+            }
+          />
+          <Form
+            form={form}
+            onFinish={handleFinish}
+            initialValues={transformData(data)}
+            layout="vertical"
+          >
+            <BillFormContainer form={form} billEdit disabled={exported} />
 
                         {bodyshop.uselocalmediaserver ? (
                             <JobsDocumentsLocalGallery

client/src/components/bill-print-button/bill-print-button.component.jsx

@@ -0,0 +1,38 @@
+import { Button, Space } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+
+export default function BillPrintButton({ billid }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const Templates = TemplateList("job_special");
+
+  const submitHandler = async () => {
+    setLoading(true);
+    try {
+      await GenerateDocument(
+        {
+          name: Templates.parts_invoice_label_single.key,
+          variables: {
+            id: billid,
+          },
+        },
+        {},
+        "p"
+      );
+    } catch (e) {
+      console.warn("Warning: Error generating a document.");
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Space wrap>
+      <Button loading={loading} onClick={submitHandler}>
+        {t("bills.labels.printlabels")}
+      </Button>
+    </Space>
+  );
+}

client/src/components/contract-cars/contract-cars.component.jsx

@@ -35,6 +35,15 @@ export default function ContractsCarsComponent({
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       render: (text, record) => <div>{t(record.status)}</div>,
     },
+    {
+      title: t("courtesycars.fields.readiness"),
+      dataIndex: "readiness",
+      key: "readiness",
+      sorter: (a, b) => alphaSort(a.readiness, b.readiness),
+      sortOrder:
+        state.sortedInfo.columnKey === "readiness" && state.sortedInfo.order,
+      render: (text, record) => t(record.readiness),
+    },
     {
       title: t("courtesycars.fields.year"),
       dataIndex: "year",

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
+import CourtesyCarReadiness from "../courtesy-car-readiness-select/courtesy-car-readiness-select.component";
 import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 //import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
@@ -214,6 +215,12 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
         >
           <CourtesyCarStatus />
         </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.readiness")}
+          name="readiness"
+        >
+          <CourtesyCarReadiness />
+        </Form.Item>
         <div>
           <Form.Item
             label={t("courtesycars.fields.nextservicekm")}

client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx

@@ -34,6 +34,32 @@ const CourtesyCarFuelComponent = (props, ref) => {
       step={null}
       style={{ marginLeft: "2rem", marginRight: "2rem" }}
       {...props}
+      tooltip={{
+        formatter: (value) => {
+          switch (value) {
+            case 0:
+              return t("courtesycars.labels.fuel.empty");
+            case 13:
+              return t("courtesycars.labels.fuel.18");
+            case 25:
+              return t("courtesycars.labels.fuel.14");
+            case 38:
+              return t("courtesycars.labels.fuel.38");
+            case 50:
+              return t("courtesycars.labels.fuel.12");
+            case 63:
+              return t("courtesycars.labels.fuel.58");
+            case 75:
+              return t("courtesycars.labels.fuel.34");
+            case 88:
+              return t("courtesycars.labels.fuel.78");
+            case 100:
+              return t("courtesycars.labels.fuel.full");
+            default:
+              return value;
+          }
+        },
+      }}
     />
   );
 };

client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx

@@ -0,0 +1,35 @@
+import { Select } from "antd";
+import React, { forwardRef, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+const { Option } = Select;
+
+const CourtesyCarReadinessComponent = ({ value, onChange }, ref) => {
+  const [option, setOption] = useState(value);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (value !== option && onChange) {
+      onChange(option);
+    }
+  }, [value, option, onChange]);
+
+  return (
+    <Select
+      allowClear
+      ref={ref}
+      value={option}
+      style={{
+        width: 100,
+      }}
+      onChange={setOption}
+    >
+      <Option value="courtesycars.readiness.ready">
+        {t("courtesycars.readiness.ready")}
+      </Option>
+      <Option value="courtesycars.readiness.notready">
+        {t("courtesycars.readiness.notready")}
+      </Option>
+    </Select>
+  );
+};
+export default forwardRef(CourtesyCarReadinessComponent);

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -90,6 +90,26 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
         );
       },
     },
+    {
+      title: t("courtesycars.fields.readiness"),
+      dataIndex: "readiness",
+      key: "readiness",
+      sorter: (a, b) => alphaSort(a.readiness, b.readiness),
+      filters: [
+        {
+          text: t("courtesycars.readiness.ready"),
+          value: "courtesycars.readiness.ready",
+        },
+        {
+          text: t("courtesycars.readiness.notready"),
+          value: "courtesycars.readiness.notready",
+        },
+      ],
+      onFilter: (value, record) => value.includes(record.readiness),
+      sortOrder:
+        state.sortedInfo.columnKey === "readiness" && state.sortedInfo.order,
+      render: (text, record) => t(record.readiness),
+    },
     {
       title: t("courtesycars.fields.year"),
       dataIndex: "year",
@@ -130,6 +150,36 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       sortOrder:
         state.sortedInfo.columnKey === "plate" && state.sortedInfo.order,
     },
+    {
+      title: t("courtesycars.fields.fuel"),
+      dataIndex: "fuel",
+      key: "fuel",
+      sorter: (a, b) => alphaSort(a.fuel, b.fuel),
+      sortOrder:
+        state.sortedInfo.columnKey === "fuel" && state.sortedInfo.order,
+      render: (text, record) => {
+        switch (record.fuel) {
+          case 100:
+            return t("courtesycars.labels.fuel.full");
+          case 88:
+            return t("courtesycars.labels.fuel.78");
+          case 63:
+            return t("courtesycars.labels.fuel.58");
+          case 50:
+            return t("courtesycars.labels.fuel.12");
+          case 38:
+            return t("courtesycars.labels.fuel.34");
+          case 25:
+            return t("courtesycars.labels.fuel.14");
+          case 13:
+            return t("courtesycars.labels.fuel.18");
+          case 0:
+            return t("courtesycars.labels.fuel.empty");
+          default:
+            return record.fuel;
+        }
+      },
+    },
     {
       title: t("courtesycars.labels.outwith"),
       dataIndex: "outwith",

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -1,8 +1,8 @@
 import {
+  BranchesOutlined,
   ExclamationCircleFilled,
   PauseCircleOutlined,
   WarningFilled,
-  BranchesOutlined,
 } from "@ant-design/icons";
 import { Card, Col, Row, Space, Tag, Tooltip } from "antd";
 import React, { useState } from "react";
@@ -222,6 +222,9 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
                 {`${job.v_vin || t("general.labels.na")}`}
               </VehicleVinDisplay>
             </DataLabel>
+            <DataLabel label={t("jobs.fields.regie_number")}>
+              {job.regie_number || t("general.labels.na")}
+            </DataLabel>
             <DataLabel label={t("jobs.labels.relatedros")}>
               <JobsRelatedRos jobid={job.id} job={job} />
             </DataLabel>

client/src/components/production-list-table/production-list-print.component.jsx

@@ -1,83 +1,126 @@
-import { Button, Dropdown } from "antd";
-import React, { useState } from "react";
-import { TemplateList } from "../../utils/TemplateConstants";
-import { useTranslation } from "react-i18next";
-import { GenerateDocument } from "../../utils/RenderTemplate";
+import {Button, Dropdown} from "antd";
+import React, {useState} from "react";
+import {TemplateList} from "../../utils/TemplateConstants";
+import {useTranslation} from "react-i18next";
+import {GenerateDocument} from "../../utils/RenderTemplate";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {selectBodyshop} from "../../redux/user/user.selectors";
 
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 const ProdTemplates = TemplateList("production");
 const {
-  production_by_technician_one,
-  production_by_category_one,
-  production_by_repair_status_one,
+    production_by_technician_one,
+    production_by_category_one,
+    production_by_repair_status_one,
 } = TemplateList("special");
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(ProductionListPrint);
 
-export function ProductionListPrint({ bodyshop }) {
-  const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
-  const menu = {
-      items: [
-          ...Object.keys(ProdTemplates).map((key) => ({
-              key: key,
-              label: ProdTemplates[key].title,
-          })),
-          {
-              key: "production_by_technician_one",
-              label: t("reportcenter.templates.production_by_technician_one"),
-              children: bodyshop.employees
-                  .filter((e) => e.active)
-                  .map((e) => ({
-                      key: e.id,
-                      label: `${e.first_name} ${e.last_name}`,
-                  })),
-          },
-          {
-              key: "production_by_category_one",
-              label: t("reportcenter.templates.production_by_category_one"),
-              children: bodyshop.md_categories.map((e) => ({
-                  key: e,
-                  label: e,
-              })),
-          },
-          {
-              key: "production_by_repair_status_one",
-              label: t("reportcenter.templates.production_by_repair_status_one"),
-              children: bodyshop.md_ro_statuses.production_statuses.map((e) => ({
-                  key: e,
-                  label: e,
-              })),
-          },
-      ],
-      onClick: async (e) => {
-          setLoading(true);
-          await GenerateDocument(
-              {
-                  name: ProdTemplates[e.key].key,
-                  // variables: { id: contract.id },
-              },
-              {},
-              "p"
-          );
-          setLoading(false);
-      },
 
-  }
-  return (
-    <Dropdown trigger="click" menu={menu}>
-      <Button loading={loading}>{t("general.labels.print")}</Button>
-    </Dropdown>
-  );
+export function ProductionListPrint({bodyshop}) {
+    const {t} = useTranslation();
+    const [loading, setLoading] = useState(false);
+
+    const menu = {
+        items: [
+            ...Object.keys(ProdTemplates).map((key) => {
+                return {
+                    key: key,
+                    label: ProdTemplates[key].title,
+                    onClick: async () => {
+                        setLoading(true);
+                        await GenerateDocument(
+                            {
+                                name: ProdTemplates[key].key,
+                                // variables: { id: contract.id },
+                            },
+                            {},
+                            "p"
+                        );
+                        setLoading(false);
+                    }
+                };
+            }),
+            {
+                key: key,
+                label: t("reportcenter.templates.production_by_technician_one"),
+                children: bodyshop.employees
+                    .filter((e) => e.active)
+                    .map((e) => {
+                        return {
+                            key: e.id,
+                            label: `${e.first_name} ${e.last_name}`,
+                            onClick: async () => {
+                                setLoading(true);
+                                await GenerateDocument(
+                                    {
+                                        name: production_by_technician_one.key,
+                                        variables: {id: e.id},
+                                    },
+                                    {},
+                                    "p"
+                                );
+                                setLoading(false);
+                            }
+                        };
+                    })
+            },
+            {
+                label: t("reportcenter.templates.production_by_category_one"),
+                children: bodyshop.md_categories.map((e) => {
+                    return {
+                        key: e,
+                        label: e,
+                        onClick: async () => {
+                            setLoading(true);
+                            await GenerateDocument(
+                                {
+                                    name: production_by_category_one.key,
+                                    variables: {category: e},
+                                },
+                                {},
+                                "p"
+                            );
+                            setLoading(false);
+                        }
+                    };
+                })
+            },
+            {
+                label: t("reportcenter.templates.production_by_repair_status_one"),
+                children: bodyshop.md_ro_statuses.production_statuses.map((e) => {
+                    return {
+                        key: e,
+                        label: e,
+                        onClick: async () => {
+                            setLoading(true);
+                            await GenerateDocument(
+                                {
+                                    name: production_by_repair_status_one.key,
+                                    variables: {status: e},
+                                },
+                                {},
+                                "p"
+                            );
+                            setLoading(false);
+                        }
+                    };
+                })
+            }
+        ]
+    };
+
+    return (<Dropdown trigger="click" menu={menu}>
+            <Button loading={loading}>{t("general.labels.print")}</Button>
+        </Dropdown>
+    );
 }