Ticket edit updates

apps/link/app/(main)/_components/Sidebar.tsx

@@ -151,7 +151,7 @@ const MenuItem = ({
             }
           />
         )}
-        {badge && badge > 0 ? (
+        {open && badge && badge > 0 ? (
           <ListItemSecondaryAction>
             <Typography
               color="textSecondary"
@@ -197,7 +197,6 @@ export const Sidebar: FC<SidebarProps> = ({
   useEffect(() => {
     const fetchCounts = async () => {
       const counts = await getOverviewTicketCountsAction();
-      console.log({ counts });
       setOverviewCounts(counts);
     };
 
@@ -422,8 +421,9 @@ export const Sidebar: FC<SidebarProps> = ({
             />
             <Collapse
               in={
-                pathname.startsWith("/overview") ||
+                open &&
-                pathname.startsWith("/tickets")
+                (pathname.startsWith("/overview") ||
+                  pathname.startsWith("/tickets"))
               }
               timeout="auto"
               unmountOnExit
@@ -512,7 +512,7 @@ export const Sidebar: FC<SidebarProps> = ({
               />
             )}
             <Collapse
-              in={pathname.startsWith("/leafcutter")}
+              in={open && pathname.startsWith("/leafcutter")}
               timeout="auto"
               unmountOnExit
               onClick={undefined}
@@ -575,7 +575,7 @@ export const Sidebar: FC<SidebarProps> = ({
                   open={open}
                 />
                 <Collapse
-                  in={pathname.startsWith("/admin/")}
+                  in={open && pathname.startsWith("/admin/")}
                   timeout="auto"
                   unmountOnExit
                   onClick={undefined}
@@ -588,7 +588,7 @@ export const Sidebar: FC<SidebarProps> = ({
                       open={open}
                     />
                     <Collapse
-                      in={pathname.startsWith("/admin/bridge")}
+                      in={open && pathname.startsWith("/admin/bridge")}
                       timeout="auto"
                       unmountOnExit
                       onClick={undefined}

apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx

@@ -20,7 +20,7 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name }) => {
 
     fetchTickets();
 
-    const interval = setInterval(fetchTickets, 20000);
+    const interval = setInterval(fetchTickets, 10000);
 
     return () => clearInterval(interval);
   }, [name]);

apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx

@@ -61,8 +61,9 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
   const shouldRender = !!ticket && !!ticketArticles;
 
   return (
-    shouldRender && (
+    <Box sx={{ height: "100%", width: "100%", background: veryLightGray }}>
-      <Box sx={{ height: "100%", width: "100%" }}>
+      {shouldRender && (
+        <>
           <MainContainer>
             <ChatContainer>
               <ConversationHeader>
@@ -167,7 +168,8 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
             kind={articleKind}
             recipient={recipient}
           />
+        </>
+      )}
     </Box>
-    )
   );
 };

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 { Grid, Box } from "@mui/material";
-import { useFormState } from "react-dom";
 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, setPendingVisible] = useState(false);
-  const pendingVisible = false;
-  const pendingDate = new Date();
-  const handleDelete = () => {
-    console.info("You clicked the delete icon.");
-  };
 
-  const filteredStates = ticketStates?.filter(
+  const filteredStates =
-    (state: any) => !["new", "merged", "removed"].includes(state.name),
+    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,76 +72,46 @@ 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();
   }, []);
 
-  /*
+  const updateFormState = (name: string, value: any) => {
-  useEffect(() => {
+    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]);
+    setHasChanges(true);
-   */
-  const updateTicket = async (input: any) => {
-    /*
-    console.log({ input });
-    const res = await fetcher({
-      document: updateTicketMutation,
-      variables: {
-        ticketId: `gid://zammad/Ticket/${id}`,
-        input,
-      },
-    });
-    console.log({ res });
-     */
   };
-  const updateTags = async (tags: string[]) => {
+
-    /*
+  const updateTicket = async () => {
-    console.log({ tags });
+    await updateTicketAction(id, formState.values);
-    const res = await fetcher({
+    setHasChanges(false);
-      document: updateTagsMutation,
-      variables: {
-        objectId: `gid://zammad/Ticket/${id}`,
-        tags,
-      },
-    });
-    console.log({ res });
-     */
   };
-  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}>
+      {shouldRender && (
         <Grid container direction="column" spacing={3}>
           <Grid item>
             <Box sx={{ m: 1 }}>Group</Box>
@@ -157,6 +119,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
               name="group"
               label="Group"
               formState={formState}
+              updateFormState={updateFormState}
               getOptions={() => groups}
             />
           </Grid>
@@ -166,6 +129,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
               name="owner"
               label="Owner"
               formState={formState}
+              updateFormState={updateFormState}
               getOptions={() => agents}
             />
           </Grid>
@@ -175,22 +139,8 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
               name="state"
               label="State"
               formState={formState}
-                getOptions={() =>
+              updateFormState={updateFormState}
-                  filteredStates?.map((state: any) => ({
+              getOptions={() => filteredStates}
-                    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
@@ -198,24 +148,18 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
             xs={12}
             sx={{ display: pendingVisible ? "inherit" : "none" }}
           >
-              {/*  <DatePicker
+            <DatePicker
               label="Pending Date"
-                value={pendingDate}
+              value={new Date(formState.values.pendingTime)}
               onChange={(newValue: any) => {
-
+                updateFormState("pendingDate", newValue.toISOString());
-                  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>
@@ -223,42 +167,39 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
               name="priority"
               label="Priority"
               formState={formState}
+              updateFormState={updateFormState}
               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}
+              value={formState.values.tags}
+              hideClearAll
               onChange={(tags: any) => {
-                  /*
+                updateFormState("tags", tags);
-                  setSelectedTags(tags);
+              }}
-                  updateTags(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>
-                <Button text="Save" kind="primary" type="submit" />
+              <Button
+                text="Save"
+                kind="primary"
+                onClick={updateTicket}
+                disabled={!hasChanges}
+              />
             </Grid>
           </Grid>
         </Grid>
-        </form>
+      )}
     </Box>
-    )
   );
 };

apps/link/app/_actions/tickets.ts

@@ -76,35 +76,59 @@ export const createTicketArticleAction = async (
 };
 
 export const updateTicketAction = async (
-  currentState: any,
+  ticketID: string,
-  formData: FormData,
+  ticketInfo: Record<string, any>,
 ) => {
-  /*
+  console.log({ ticketID, ticketInfo });
   try {
-    const { id, project } = currentState.values;
+    const input = {};
-    const updatedTicket = {
+    if (ticketInfo.state) {
-      title: formData.get("title"),
+      input["stateId"] = ticketInfo.state;
-    };
+    }
-    await executeMutation({
+    if (ticketInfo.pendingTime) {
-      project,
+      input["pendingTime"] = ticketInfo.pendingTime;
-      mutation: UpdateAssetMutation,
+    }
+    if (ticketInfo.priority) {
+      input["priorityId"] = ticketInfo.priority;
+    }
+    if (ticketInfo.group) {
+      input["groupId"] = ticketInfo.group;
+    }
+    if (ticketInfo.owner) {
+      input["ownerId"] = ticketInfo.owner;
+    }
+
+    const result = await executeGraphQL({
+      query: updateTicketMutation,
       variables: {
-        id,
+        ticketId: `gid://zammad/Ticket/${ticketID}`,
-        input: updatedAsset,
+        input,
       },
     });
 
-    revalidatePath(`/${project}/assets/${id}`);
+    if (ticketInfo.tags?.length > 0) {
+      const tagsResult = await executeGraphQL({
+        query: updateTagsMutation,
+        variables: {
+          objectId: `gid://zammad/Ticket/${ticketID}`,
+          tags: ticketInfo.tags,
+        },
+      });
+      console.log({ tagsResult });
+    }
 
+    console.log({ result });
     return {
-      ...currentState,
+      result,
-      values: { ...currentState.values, ...updatedAsset, id, project },
       success: true,
     };
   } catch (e: any) {
-    return { success: false, message: e?.message ?? "Unknown error" };
+    console.log({ e });
+    return {
+      success: false,
+      message: e?.message ?? "Unknown error",
+    };
   }
-   */
 };
 
 export const getTicketAction = async (id: string) => {
@@ -112,7 +136,7 @@ export const getTicketAction = async (id: string) => {
     query: getTicketQuery,
     variables: { ticketId: `gid://zammad/Ticket/${id}` },
   });
-
+  console.log({ td: ticketData.ticket });
   return ticketData?.ticket;
 };
 
@@ -125,38 +149,6 @@ export const getTicketArticlesAction = async (id: string) => {
   return ticketData?.ticketArticles;
 };
 
-export const updateTicketTagsAction = async (
-  currentState: any,
-  formData: FormData,
-) => {
-  /*
-  try {
-    const { id, project } = currentState.values;
-    const updatedTicket = {
-      title: formData.get("title"),
-    };
-    await executeMutation({
-      project,
-      mutation: UpdateAssetMutation,
-      variables: {
-        id,
-        input: updatedAsset,
-      },
-    });
-
-    revalidatePath(`/${project}/assets/${id}`);
-
-    return {
-      ...currentState,
-      values: { ...currentState.values, ...updatedAsset, id, project },
-      success: true,
-    };
-  } catch (e: any) {
-    return { success: false, message: e?.message ?? "Unknown error" };
-  }
-   */
-};
-
 export const getTicketStatesAction = async () => {
   const states = await executeREST({
     path: "/api/v1/ticket_states",
@@ -164,15 +156,15 @@ export const getTicketStatesAction = async () => {
 
   const formattedStates =
     states?.map((state: any) => ({
-      value: state.id,
+      value: `gid://zammad/Ticket::State/${state.id}`,
       label: state.name,
     })) ?? [];
 
   return formattedStates;
 };
 
-export const getTicketTagsAction = async () => {
+export const getTagsAction = async () => {
-  const tags = await executeREST({
+  const { tags } = await executeREST({
     path: "/api/v1/tags",
   });
 
@@ -186,7 +178,7 @@ export const getTicketPrioritiesAction = async () => {
 
   const formattedPriorities =
     priorities?.map((priority: any) => ({
-      value: priority.id,
+      value: `gid://zammad/Ticket::Priority/${priority.id}`,
       label: priority.name,
     })) ?? [];
 

apps/link/app/_components/CSRFProvider.tsx

@@ -12,7 +12,6 @@ export const CSRFProvider: FC<PropsWithChildren> = ({ children }) => {
         const response = await fetch("/api/v1/users/me");
         const token = response.headers.get("CSRF-Token");
         update({ csrfToken: token });
-        console.log({ token });
       }
     }, 30000);
 

apps/link/next.config.js

@@ -6,6 +6,7 @@ const nextConfig = {
     "@link-stack/ui",
     "@link-stack/bridge-common",
     "@link-stack/bridge-ui",
+    "mui-chips-input"
   ],
   publicRuntimeConfig: {
     linkURL: process.env.LINK_URL ?? "http://localhost:3000",

packages/ui/components/Button.tsx

@@ -5,6 +5,7 @@ import { colors } from "../styles/theme";
 
 interface InternalButtonProps {
   text: string;
+  disabled: boolean;
   color?: string;
   kind?: "primary" | "secondary" | "destructive";
   type?: string;
@@ -27,12 +28,14 @@ export const InternalButton: FC<InternalButtonProps> = ({
   text,
   color,
   kind,
+  disabled,
   type = "button",
   onClick,
 }) => (
   <MUIButton
     variant="contained"
     disableElevation
+    disabled={disabled}
     onClick={onClick}
     type={type}
     href=""
@@ -56,6 +59,7 @@ export const InternalButton: FC<InternalButtonProps> = ({
 
 interface ButtonProps {
   text: string;
+  disabled?: boolean;
   color?: string;
   kind?: "primary" | "secondary" | "destructive";
   type?: string;
@@ -65,6 +69,7 @@ interface ButtonProps {
 
 export const Button: FC<ButtonProps> = ({
   text,
+  disabled = false,
   color,
   type,
   kind,
@@ -75,6 +80,7 @@ export const Button: FC<ButtonProps> = ({
     <Link href={href} passHref>
       <InternalButton
         text={text}
+        disabled={disabled}
         color={color}
         kind={kind}
         type={type}
@@ -84,6 +90,7 @@ export const Button: FC<ButtonProps> = ({
   ) : (
     <InternalButton
       text={text}
+      disabled={disabled}
       color={color}
       kind={kind}
       type={type}

packages/ui/components/TextField.tsx

@@ -16,6 +16,7 @@ type TextFieldProps = {
   required?: boolean;
   lines?: number;
   helperText?: string;
+  updateFormState?: (field: string, value: any) => void;
 };
 
 export const TextField: FC<TextFieldProps> = ({
@@ -27,6 +28,7 @@ export const TextField: FC<TextFieldProps> = ({
   required = false,
   lines = 1,
   helperText,
+  updateFormState,
 }) => {
   const { darkMediumGray, white } = colors;
   const { roboto } = fonts;
@@ -42,6 +44,7 @@ export const TextField: FC<TextFieldProps> = ({
       rows={lines}
       required={required}
       defaultValue={formState.values[name]}
+      onChange={(e: any) => updateFormState?.(name, e.target.value)}
       error={Boolean(formState.errors[name])}
       helperText={formState.errors[name] ?? helperText}
       InputProps={{