Add commit and uncommit functionality.

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);