Ticket edit updates

apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx

@@ -1,18 +1,15 @@
 "use client";
 
 import { FC, useEffect, useState } from "react";
-import { Grid, Box, MenuItem } from "@mui/material";
-import { useFormState } from "react-dom";
+import { Grid, Box } from "@mui/material";
 import { Select, Button } from "@link-stack/ui";
 import { MuiChipsInput } from "mui-chips-input";
-import { getTicketQuery } from "app/_graphql/getTicketQuery";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import {
   updateTicketAction,
   getTicketAction,
   getTicketStatesAction,
   getTicketPrioritiesAction,
-  getTicketTagsAction,
 } from "app/_actions/tickets";
 import { getAgentsAction } from "app/_actions/users";
 import { getGroupsAction } from "app/_actions/groups";
@@ -23,56 +20,51 @@ interface TicketEditProps {
 
 export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
   const [ticket, setTicket] = useState<any>();
+  const [hasChanges, setHasChanges] = useState(false);
+  const [formState, setFormState] = useState({
+    values: {
+      group: null,
+      owner: null,
+      priority: null,
+      pendingTime: null,
+      state: null,
+      tags: [],
+    },
+  });
   const [ticketStates, setTicketStates] = useState<any>();
   const [ticketPriorities, setTicketPriorities] = useState<any>();
   const [groups, setGroups] = useState<any>();
-  const [tags, setTags] = useState<any>();
   const [agents, setAgents] = useState<any>();
-  const selectedTags = [];
-  const pendingVisible = false;
-  const pendingDate = new Date();
-  const handleDelete = () => {
-    console.info("You clicked the delete icon.");
-  };
+  const [pendingVisible, setPendingVisible] = useState(false);
 
-  const filteredStates = ticketStates?.filter(
-    (state: any) => !["new", "merged", "removed"].includes(state.name),
-  );
+  const filteredStates =
+    ticketStates?.filter(
+      (state: any) => !["new", "merged", "removed"].includes(state.label),
+    ) ?? [];
 
   useEffect(() => {
     const fetchAgents = async () => {
       const result = await getAgentsAction();
-      console.log({ agents: result });
       setAgents(result);
     };
 
     const fetchGroups = async () => {
       const result = await getGroupsAction();
-      console.log({ groups: result });
       setGroups(result);
     };
 
     const fetchTicketStates = async () => {
       const result = await getTicketStatesAction();
-      console.log({ ticketStates: result });
       setTicketStates(result);
     };
 
     const fetchTicketPriorities = async () => {
       const result = await getTicketPrioritiesAction();
-      console.log({ ticketPriorities: result });
       setTicketPriorities(result);
     };
 
-    const fetchTicketTags = async () => {
-      const result = await getTicketTagsAction();
-      console.log({ tags: result });
-      setTags(result);
-    };
-
     fetchTicketStates();
     fetchTicketPriorities();
-    fetchTicketTags();
     fetchAgents();
     fetchGroups();
   }, []);
@@ -80,185 +72,134 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
   useEffect(() => {
     const fetchTicket = async () => {
       const result = await getTicketAction(id);
-      console.log({ result });
       setTicket(result);
+      setFormState({
+        values: {
+          ...formState.values,
+          group: result?.group?.id,
+          owner: result?.owner?.id,
+          priority: result?.priority?.id,
+          state: result?.state?.id,
+          tags: result?.tags,
+        },
+      });
     };
 
     fetchTicket();
   }, []);
 
-  /*
-  useEffect(() => {
-
+  const updateFormState = (name: string, value: any) => {
+    setFormState({
+      values: {
+        ...formState.values,
+        [name]: value,
+      },
+    });
     const stateName = filteredStates?.find(
-      (state: any) => state.id === selectedState,
+      (state: any) => state.id === formState.values.state,
     )?.name;
     setPendingVisible(stateName?.includes("pending") ?? false);
-  }, [selectedState]);
-   */
-  const updateTicket = async (input: any) => {
-    /*
-    console.log({ input });
-    const res = await fetcher({
-      document: updateTicketMutation,
-      variables: {
-        ticketId: `gid://zammad/Ticket/${id}`,
-        input,
-      },
-    });
-    console.log({ res });
-     */
+    setHasChanges(true);
   };
-  const updateTags = async (tags: string[]) => {
-    /*
-    console.log({ tags });
-    const res = await fetcher({
-      document: updateTagsMutation,
-      variables: {
-        objectId: `gid://zammad/Ticket/${id}`,
-        tags,
-      },
-    });
-    console.log({ res });
-     */
+
+  const updateTicket = async () => {
+    await updateTicketAction(id, formState.values);
+    setHasChanges(false);
   };
-  const initialState = {
-    messages: [],
-    errors: [],
-    values: {
-      customer: "",
-      group: ticket?.group?.id?.split("/").pop(),
-      owner: ticket?.owner?.id?.split("/").pop(),
-      priority: ticket?.priority?.id?.split("/").pop(),
-      state: ticket?.state?.id?.split("/").pop(),
-      tags: [],
-      title: "",
-      article: {
-        body: "",
-        type: "note",
-        internal: true,
-      },
-    },
-  };
-  const [formState, formAction] = useFormState(
-    updateTicketAction,
-    initialState,
-  );
+
   const shouldRender = !!ticket;
 
   return (
-    shouldRender && (
-      <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
-        <form action={formAction}>
-          <Grid container direction="column" spacing={3}>
+    <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
+      {shouldRender && (
+        <Grid container direction="column" spacing={3}>
+          <Grid item>
+            <Box sx={{ m: 1 }}>Group</Box>
+            <Select
+              name="group"
+              label="Group"
+              formState={formState}
+              updateFormState={updateFormState}
+              getOptions={() => groups}
+            />
+          </Grid>
+          <Grid item>
+            <Box sx={{ m: 1, mt: 0 }}>Owner</Box>
+            <Select
+              name="owner"
+              label="Owner"
+              formState={formState}
+              updateFormState={updateFormState}
+              getOptions={() => agents}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <Box sx={{ m: 1, mt: 0 }}>State</Box>
+            <Select
+              name="state"
+              label="State"
+              formState={formState}
+              updateFormState={updateFormState}
+              getOptions={() => filteredStates}
+            />
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sx={{ display: pendingVisible ? "inherit" : "none" }}
+          >
+            <DatePicker
+              label="Pending Date"
+              value={new Date(formState.values.pendingTime)}
+              onChange={(newValue: any) => {
+                updateFormState("pendingDate", newValue.toISOString());
+              }}
+              slotProps={{ textField: { size: "small" } }}
+              sx={{
+                width: "100%",
+                backgroundColor: "white",
+              }}
+            />
+          </Grid>
+          <Grid item>
+            <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
+            <Select
+              name="priority"
+              label="Priority"
+              formState={formState}
+              updateFormState={updateFormState}
+              getOptions={() => ticketPriorities}
+            />
+          </Grid>
+          <Grid item>
+            <Box sx={{ mb: 1 }}>Tags</Box>
+            <MuiChipsInput
+              sx={{ backgroundColor: "white", width: "100%" }}
+              value={formState.values.tags}
+              hideClearAll
+              onChange={(tags: any) => {
+                updateFormState("tags", tags);
+              }}
+              onDeleteChip={(tag: any) => {
+                const tags = formState.values.tags.filter(
+                  (t: any) => t !== tag,
+                );
+                updateFormState("tags", tags);
+              }}
+            />
+          </Grid>
+          <Grid item container direction="row-reverse">
             <Grid item>
-              <Box sx={{ m: 1 }}>Group</Box>
-              <Select
-                name="group"
-                label="Group"
-                formState={formState}
-                getOptions={() => groups}
+              <Button
+                text="Save"
+                kind="primary"
+                onClick={updateTicket}
+                disabled={!hasChanges}
               />
             </Grid>
-            <Grid item>
-              <Box sx={{ m: 1, mt: 0 }}>Owner</Box>
-              <Select
-                name="owner"
-                label="Owner"
-                formState={formState}
-                getOptions={() => agents}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <Box sx={{ m: 1, mt: 0 }}>State</Box>
-              <Select
-                name="state"
-                label="State"
-                formState={formState}
-                getOptions={() =>
-                  filteredStates?.map((state: any) => ({
-                    value: state.id,
-                    label: state.name,
-                  })) ?? []
-                }
-                /*
-                onChange={(e: any) => {
-                  const newState = e.target.value;
-                  setSelectedState(newState);
-                  updateTicket({
-                    stateId: `gid://zammad/Ticket::State/${newState}`,
-                    pendingTime: pendingDate.toISOString(),
-                  });
-                }}
-                 */
-              />
-            </Grid>
-            <Grid
-              item
-              xs={12}
-              sx={{ display: pendingVisible ? "inherit" : "none" }}
-            >
-              {/*  <DatePicker
-                label="Pending Date"
-                value={pendingDate}
-                onChange={(newValue: any) => {
-
-                  console.log(newValue);
-                  setPendingDate(newValue);
-                  updateTicket({
-                    pendingTime: newValue.toISOString(),
-                  })
-
-                }}
-                slotProps={{ textField: { size: "small" } }}
-                sx={{
-                  width: "100%",
-                  backgroundColor: "white",
-                }}
-              /> */}
-            </Grid>
-            <Grid item>
-              <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
-              <Select
-                name="priority"
-                label="Priority"
-                formState={formState}
-                getOptions={() => ticketPriorities}
-                /*
-                onChange={(e: any) => {
-
-                  const newPriority = e.target.value;
-                  setSelectedPriority(newPriority);
-                  updateTicket({
-                    priorityId: `gid://zammad/Ticket::Priority/${newPriority}`,
-                  });
-
-                }}
-                                   */
-              />
-            </Grid>
-
-            <Grid item>
-              <Box sx={{ mb: 1 }}>Tags</Box>
-              <MuiChipsInput
-                sx={{ backgroundColor: "white", width: "100%" }}
-                value={selectedTags}
-                onChange={(tags: any) => {
-                  /*
-                  setSelectedTags(tags);
-                  updateTags(tags);
-                   */
-                }}
-              />
-            </Grid>
-            <Grid item container direction="row-reverse">
-              <Grid item>
-                <Button text="Save" kind="primary" type="submit" />
-              </Grid>
-            </Grid>
           </Grid>
-        </form>
-      </Box>
-    )
+        </Grid>
+      )}
+    </Box>
   );
 };