Add commit and uncommit functionality.

bodyshop_translations.babel

@@ -44838,6 +44838,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>commit</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>commitone</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>enter</name>
                                         <definition_loaded>false</definition_loaded>
@@ -44880,6 +44922,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>uncommit</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>
@@ -45803,6 +45866,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>committed</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>created</name>
                                         <definition_loaded>false</definition_loaded>

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

@@ -1,10 +1,10 @@
 import { Select, Space, Tag } from "antd";
-import React, { forwardRef } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 const { Option } = Select;
 //To be used as a form element only.
 
-const EmployeeSearchSelect = ({ options, ...props }, ref) => {
+const EmployeeSearchSelect = ({ options, ...props }) => {
   const { t } = useTranslation();
 
   return (
@@ -39,4 +39,4 @@ const EmployeeSearchSelect = ({ options, ...props }, ref) => {
     </Select>
   );
 };
-export default forwardRef(EmployeeSearchSelect);
+export default EmployeeSearchSelect;

client/src/components/time-ticket-modal/time-ticket-modal.component.jsx

@@ -37,6 +37,7 @@ export function TimeTicketModalComponent({
   authLevel,
   employeeAutoCompleteOptions,
   isEdit,
+  disabled,
   employeeSelectDisabled,
 }) {
   const { t } = useTranslation();
@@ -50,7 +51,7 @@ export function TimeTicketModalComponent({
       <Select
         value={value === "timetickets.labels.shift" ? t(value) : value}
         {...props}
-        disabled={value === "timetickets.labels.shift"}
+        disabled={value === "timetickets.labels.shift" || disabled}
       >
         {emps &&
           emps.rates.map((item) => (
@@ -73,7 +74,7 @@ export function TimeTicketModalComponent({
       <Input
         value={value?.startsWith("timetickets.") ? t(value) : value}
         {...props}
-        disabled={value?.startsWith("timetickets.")}
+        disabled={value?.startsWith("timetickets.") || disabled}
       />
     );
   };
@@ -126,7 +127,7 @@ export function TimeTicketModalComponent({
           ]}
         >
           <EmployeeSearchSelect
-            disabled={employeeSelectDisabled}
+            disabled={employeeSelectDisabled || disabled}
             options={employeeAutoCompleteOptions}
             onSelect={(value) => {
               const emps =
@@ -278,6 +279,7 @@ export function TimeTicketModalComponent({
               <FormDateTimePicker
                 minuteStep={5}
                 disabled={
+                  disabled ||
                   !HasRbacAccess({
                     bodyshop,
                     authLevel,
@@ -316,6 +318,7 @@ export function TimeTicketModalComponent({
               <FormDateTimePicker
                 minuteStep={5}
                 disabled={
+                  disabled ||
                   !HasRbacAccess({
                     bodyshop,
                     authLevel,

client/src/components/time-ticket-modal/time-ticket-modal.container.jsx

@@ -14,6 +14,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectTimeTicket } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import TimeTicketModalComponent from "./time-ticket-modal.component";
+import TimeTicketsCommitToggleComponent from "../time-tickets-commit-toggle/time-tickets-commit-toggle.component";
 
 const mapStateToProps = createStructuredSelector({
   timeTicketModal: selectTimeTicket,
@@ -174,7 +175,11 @@ export function TimeTicketModalContainer({
       footer={
         <span>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button loading={loading} onClick={() => form.submit()}>
+          <Button
+            loading={loading}
+            disabled={timeTicketModal.context?.timeticket?.committed_at}
+            onClick={() => form.submit()}
+          >
             {t("general.actions.save")}
           </Button>
           {timeTicketModal.context && timeTicketModal.context.id ? null : (
@@ -198,6 +203,7 @@ export function TimeTicketModalContainer({
         autoComplete={"off"}
         form={form}
         onFinishFailed={() => setEnterAgain(false)}
+        disabled={timeTicketModal.context?.timeticket?.committed_at}
         initialValues={
           timeTicketModal.context.timeticket
             ? {
@@ -218,6 +224,9 @@ export function TimeTicketModalContainer({
         <PageHeader
           extra={
             <Space>
+              <TimeTicketsCommitToggleComponent
+                timeticket={timeTicketModal.context?.timeticket}
+              />
               <Button onClick={handleCancel}>
                 {t("general.actions.cancel")}
               </Button>
@@ -241,14 +250,16 @@ export function TimeTicketModalContainer({
         <TimeTicketModalComponent
           isEdit={timeTicketModal.context.id}
           form={form}
+          disabled={timeTicketModal.context?.timeticket?.committed_at}
           employeeAutoCompleteOptions={
             EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
           }
           employeeSelectDisabled={
-            timeTicketModal.context?.timeticket?.employeeid &&
+            timeTicketModal.context?.timeticket?.committed_at ||
+            (timeTicketModal.context?.timeticket?.employeeid &&
             !timeTicketModal.context.id
               ? true
-              : false
+              : false)
           }
         />
       </Form>

client/src/components/time-ticket-task-modal/time-ticket-task-modal.component.jsx

@@ -55,11 +55,7 @@ export function TimeTicketTaskModalComponent({
         calculateTimeTickets={calculateTimeTickets}
       />
       <Row gutter={[16, 16]}>
-        {bodyshop?.md_tasks_presets?.use_approvals && (
+  
-          <Col span={24}>
-            <Alert message={t(".tt_approvals.labels.approval_queue_in_use")} />
-          </Col>
-        )}
         <Col xl={12} lg={24}>
           <Form.Item
             name="jobid"
@@ -371,6 +367,11 @@ export function TimeTicketTaskModalComponent({
           );
         }}
       </Form.Item>
+      {bodyshop?.md_tasks_presets?.use_approvals && (
+        <Col span={24}>
+          <Alert message={t("tt_approvals.labels.approval_queue_in_use")} type="warning" />
+        </Col>
+      )}
     </div>
   );
 }

client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx

@@ -0,0 +1,107 @@
+import { useMutation } from "@apollo/client";
+import { Button, notification } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  UPDATE_TIME_TICKET,
+  UPDATE_TIME_TICKETS,
+} from "../../graphql/timetickets.queries";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import { setModalContext } from "../../redux/modals/modals.actions";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setTimeTicketContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+});
+export function TimeTicketsCommit({
+  bodyshop,
+  currentUser,
+  timeticket,
+  disabled,
+  refetch,
+  setTimeTicketContext,
+}) {
+  const { t } = useTranslation();
+  const [updateTimeTicket] = useMutation(UPDATE_TIME_TICKET);
+
+  const [loading, setLoading] = useState(false);
+  const handleCommit = async () => {
+    setLoading(true);
+    try {
+      const ticketUpdate = timeticket.committed_at
+        ? { commited_by: null, committed_at: null }
+        : {
+            commited_by: currentUser.email,
+            committed_at: moment(),
+          };
+
+      const result = await updateTimeTicket({
+        variables: {
+          timeticketId: timeticket.id,
+          timeticket: ticketUpdate,
+        },
+        update(cache) {
+          cache.modify({
+            fields: {
+              timeTickets(existingtickets, { readField }) {
+                return existingtickets.map((ticket) => {
+                  if (timeticket.id === readField("id", ticket)) {
+                    return {
+                      ...ticket,
+                      ...ticketUpdate,
+                    };
+                  }
+                  return ticket;
+                });
+              },
+            },
+          });
+        },
+      });
+      if (result.errors) {
+        notification.open({
+          type: "error",
+          message: t("timetickets.errors.creating", {
+            message: JSON.stringify(result.errors),
+          }),
+        });
+      } else {
+        setTimeTicketContext({
+          context: {
+            id: timeticket.id,
+            timeticket: result.data.update_timetickets.returning[0],
+          },
+        });
+        notification.open({
+          type: "success",
+          message: t("timetickets.successes.committed"),
+        });
+      }
+    } catch (error) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!timeticket?.id) return null;
+
+  return (
+    <Button onClick={handleCommit} loading={loading} disabled={!timeticket?.id}>
+      {timeticket?.committed_at
+        ? t("timetickets.actions.uncommit")
+        : t("timetickets.actions.commitone")}
+    </Button>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TimeTicketsCommit);

client/src/components/time-tickets-commit/time-tickets-commit.component.jsx

@@ -0,0 +1,95 @@
+import { useMutation } from "@apollo/client";
+import { Button, notification } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_TIME_TICKETS } from "../../graphql/timetickets.queries";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+
+export function TimeTicketsCommit({
+  bodyshop,
+  currentUser,
+  timetickets,
+  disabled,
+  loadingCallback,
+  completedCallback,
+  refetch,
+}) {
+  const { t } = useTranslation();
+  const [updateTimeTickets] = useMutation(UPDATE_TIME_TICKETS);
+
+  const [loading, setLoading] = useState(false);
+  const handleCommit = async () => {
+    setLoading(true);
+    try {
+      const result = await updateTimeTickets({
+        variables: {
+          timeticketIds: timetickets.map((ticket) => ticket.id),
+          timeticket: {
+            commited_by: currentUser.email,
+            committed_at: moment(),
+          },
+        },
+        update(cache) {
+          cache.modify({
+            fields: {
+              timeTickets(existingtickets, { readField }) {
+                const modifiedIds = timetickets.map((ticket) => ticket.id);
+                return existingtickets.map((ticket) => {
+                  if (modifiedIds.includes(readField("id", ticket))) {
+                    return {
+                      ...ticket,
+                      commited_by: currentUser.email,
+                      committed_at: moment(),
+                    };
+                  }
+                  return ticket;
+                });
+              },
+            },
+          });
+        },
+      });
+      if (result.errors) {
+        notification.open({
+          type: "error",
+          message: t("timetickets.errors.creating", {
+            message: JSON.stringify(result.errors),
+          }),
+        });
+      } else {
+        notification.open({
+          type: "success",
+          message: t("timetickets.successes.committed"),
+        });
+        if (!!completedCallback) completedCallback([]);
+        if (!!loadingCallback) loadingCallback(false);
+      }
+    } catch (error) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleCommit}
+      loading={loading}
+      disabled={disabled || timetickets?.length === 0}
+    >
+      {t("timetickets.actions.commit", { count: timetickets?.length })}
+    </Button>
+  );
+}
+
+export default connect(mapStateToProps, null)(TimeTicketsCommit);

client/src/graphql/timetickets.queries.js

@@ -15,6 +15,8 @@ export const QUERY_TICKETS_BY_JOBID = gql`
       memo
       jobid
       flat_rate
+      commited_by
+      committed_at
       employee {
         employee_number
         first_name
@@ -44,6 +46,8 @@ export const QUERY_TIME_TICKETS_IN_RANGE = gql`
       memo
       jobid
       flat_rate
+      commited_by
+      committed_at
       job {
         id
         ro_number
@@ -86,6 +90,8 @@ export const QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE = gql`
       productivehrs
       memo
       jobid
+      commited_by
+      committed_at
       flat_rate
       job {
         id
@@ -119,6 +125,8 @@ export const QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE = gql`
       memo
       jobid
       flat_rate
+      commited_by
+      committed_at
       job {
         id
         ro_number
@@ -161,6 +169,8 @@ export const QUERY_TIME_TICKETS_IN_RANGE_SB = gql`
       committed_at
       commited_by
       flat_rate
+      commited_by
+      committed_at
       job {
         id
         ro_number
@@ -221,6 +231,8 @@ export const INSERT_NEW_TIME_TICKET = gql`
         date
         memo
         flat_rate
+        commited_by
+        committed_at
       }
     }
   }
@@ -244,6 +256,8 @@ export const INSERT_TIME_TICKET_AND_APPROVE = gql`
         date
         memo
         flat_rate
+        commited_by
+        committed_at
       }
     }
     update_tt_approval_queue(
@@ -254,6 +268,7 @@ export const INSERT_TIME_TICKET_AND_APPROVE = gql`
         id
         approved_at
         approved_at
+
       }
     }
   }
@@ -282,6 +297,38 @@ export const UPDATE_TIME_TICKET = gql`
         date
         flat_rate
         memo
+        committed_at
+        commited_by
+      }
+    }
+  }
+`;
+
+export const UPDATE_TIME_TICKETS = gql`
+  mutation UPDATE_TIME_TICKETS(
+    $timeticketIds: [uuid!]!
+    $timeticket: timetickets_set_input!
+  ) {
+    update_timetickets(
+      where: { id: { _in: $timeticketIds } }
+      _set: $timeticket
+    ) {
+      returning {
+        id
+        clockon
+        clockoff
+        employeeid
+        productivehrs
+        actualhrs
+        ciecacode
+        created_at
+        updated_at
+        jobid
+        date
+        flat_rate
+        memo
+        committed_at
+        commited_by
       }
     }
   }
@@ -306,6 +353,8 @@ export const QUERY_ACTIVE_TIME_TICKETS = gql`
       cost_center
       flat_rate
       jobid
+      commited_by
+      committed_at
       job {
         id
         ownr_fn

client/src/pages/time-tickets/time-tickets.container.jsx

@@ -19,6 +19,7 @@ import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
+import TimeTicketsCommit from "../../components/time-tickets-commit/time-tickets-commit.component";
 
 const mapStateToProps = createStructuredSelector({});
 
@@ -74,6 +75,7 @@ export function TimeTicketsContainer({
               <Space wrap>
                 <TimeTicketsAttendanceTable />
                 <TimeTicketsPayrollTable />
+                <TimeTicketsCommit timetickets={data ? data.timetickets : []} />
                 <TimeTicketsDatesSelector />
               </Space>
             }

client/src/translations/en_us/common.json

@@ -2654,8 +2654,11 @@
 				"claimtasks": "Claim Tasks",
 				"clockin": "Clock In",
 				"clockout": "Clock Out",
+				"commit": "Commit Tickets ({{count}})",
+				"commitone": "Commit",
 				"enter": "Enter New Time Ticket",
-				"printemployee": "Print Time Tickets"
+				"printemployee": "Print Time Tickets",
+				"uncommit": "Uncommit"
 			},
 			"errors": {
 				"clockingin": "Error while clocking in. {{message}}",
@@ -2707,6 +2710,7 @@
 			"successes": {
 				"clockedin": "Clocked in successfully.",
 				"clockedout": "Clocked out successfully.",
+				"committed": "Time Tickets Committed Successfully",
 				"created": "Time ticket entered successfully.",
 				"deleted": "Time ticket deleted successfully."
 			},

client/src/translations/es/common.json

@@ -2654,8 +2654,11 @@
 				"claimtasks": "",
 				"clockin": "",
 				"clockout": "",
+				"commit": "",
+				"commitone": "",
 				"enter": "",
-				"printemployee": ""
+				"printemployee": "",
+				"uncommit": ""
 			},
 			"errors": {
 				"clockingin": "",
@@ -2707,6 +2710,7 @@
 			"successes": {
 				"clockedin": "",
 				"clockedout": "",
+				"committed": "",
 				"created": "",
 				"deleted": ""
 			},

client/src/translations/fr/common.json

@@ -2654,8 +2654,11 @@
 				"claimtasks": "",
 				"clockin": "",
 				"clockout": "",
+				"commit": "",
+				"commitone": "",
 				"enter": "",
-				"printemployee": ""
+				"printemployee": "",
+				"uncommit": ""
 			},
 			"errors": {
 				"clockingin": "",
@@ -2707,6 +2710,7 @@
 			"successes": {
 				"clockedin": "",
 				"clockedout": "",
+				"committed": "",
 				"created": "",
 				"deleted": ""
 			},