Overview & recent fixes, auth updates, SWR fixes

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

@@ -8,9 +8,9 @@ import {
   DialogActions,
   DialogContent,
   TextField,
-  Autocomplete
+  Autocomplete,
 } from "@mui/material";
-import { useSWRConfig } from "swr";
+import useSWR, { useSWRConfig } from "swr";
 import { createTicketMutation } from "app/_graphql/createTicketMutation";
 
 interface TicketCreateDialogProps {
@@ -31,8 +31,8 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
   const [tags, setTags] = useState([]);
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
-  const backgroundColor = kind === "note" ? "#FFB620" : "#1982FC";
-  const color = kind === "note" ? "black" : "white";
+  const backgroundColor = "#1982FC";
+  const color = "white";
   const { fetcher } = useSWRConfig();
   const ticket = {
     customerId: customerID,
@@ -46,16 +46,28 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
       body,
       type: kind,
       internal: kind === "note",
-    }
+    },
   };
 
+  const { data: users, error: usersError }: any = useSWR({
+    url: "/api/v1/users",
+    method: "GET",
+  });
 
+  console.log({ users, usersError });
+
+  const customers =
+    users?.filter((user: any) => user.role_ids.includes(3)) ?? [];
+  const formattedCustomers = customers.map((customer: any) => ({
+    label: customer.login,
+    id: `${customer.id}`,
+  }));
   const createTicket = async () => {
     await fetcher({
       document: createTicketMutation,
       variables: {
         input: {
-          ticket
+          ticket,
         },
       },
     });
@@ -78,10 +90,13 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
           <Grid item>
             <Autocomplete
               disablePortal
-              options={[{ label: "Test One", id: 1 }, { label: "Test Two", id: 2 }]}
+              options={formattedCustomers}
+              value={customerID}
               sx={{ width: 300 }}
-              onChange={(e: any) => setCustomerID(e.target.value)}
-              renderInput={(params) => <TextField {...params} label="Customer" />}
+              onChange={(e: any) => setCustomerID(e.target.value.id)}
+              renderInput={(params) => (
+                <TextField {...params} label="Customer" />
+              )}
             />
           </Grid>
           <Grid item>
@@ -129,7 +144,7 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
               }}
               onClick={createTicket}
             >
-              {kind === "note" ? "Save Note" : "Send Reply"}
+              Create Ticket
             </Button>
           </Grid>
         </Grid>

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

@@ -3,23 +3,57 @@
 import { FC, useEffect, useState } from "react";
 import useSWR from "swr";
 import { TicketList } from "./TicketList";
+import { getTicketOverviewCountsQuery } from "app/_graphql/getTicketOverviewCountsQuery";
 import { getTicketsByOverviewQuery } from "app/_graphql/getTicketsByOverviewQuery";
 
 type ZammadOverviewProps = {
   name: string;
-  id: string;
 };
 
-export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
+export const ZammadOverview: FC<ZammadOverviewProps> = ({ name }) => {
+  const [overviewID, setOverviewID] = useState(null);
   const [tickets, setTickets] = useState([]);
   const [error, setError] = useState(null);
-  const { data: ticketData, error: ticketError }: any = useSWR(
+
+  const { data: overviewData, error: overviewError }: any = useSWR(
     {
-      document: getTicketsByOverviewQuery,
-      variables: { overviewId: `gid://zammad/Overview/${id}`, pageSize: 250 },
+      document: getTicketOverviewCountsQuery,
     },
     { refreshInterval: 10000 },
   );
+  const { data: ticketData, error: ticketError }: any = useSWR(
+    {
+      document: getTicketsByOverviewQuery,
+      variables: { overviewId: overviewID, pageSize: 250 },
+    },
+    { refreshInterval: 10000 },
+  );
+  const overviewLookup = {
+    Assigned: "My Assigned Tickets",
+    Open: "Open Tickets",
+    Urgent: "Escalated Tickets",
+    Unassigned: "Unassigned & Open Tickets",
+  };
+
+  const findOverviewByName = (name: string) => {
+    const fullName = overviewLookup[name];
+    return overviewData?.ticketOverviews?.edges?.find(
+      (overview: any) => overview.node.name === fullName,
+    )?.node?.id;
+  };
+  useEffect(() => {
+    if (overviewData) {
+      setOverviewID(findOverviewByName(name));
+    }
+  }, [overviewData, name]);
+  console.log({
+    name,
+    overviewID,
+    overviewData,
+    overviewError,
+    ticketData,
+    ticketError,
+  });
 
   const restFetcher = (url: string) => fetch(url).then((r) => r.json());
   const { data: recent } = useSWR("/api/v1/recent_view", restFetcher);
@@ -41,6 +75,8 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
       const edges = ticketData?.ticketsByOverview?.edges;
       if (edges) {
         const nodes = edges.map((edge: any) => edge.node);
+        console.log({ nodes });
+        setError(null);
         setTickets(sortTickets(nodes));
       }
 
@@ -72,6 +108,6 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
   }, [name]);
 
   const shouldRender = tickets && !error;
-
+  console.log({ shouldRender, tickets, error });
   return shouldRender && <TicketList title={name} tickets={tickets} />;
 };

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

@@ -21,14 +21,6 @@ export async function generateMetadata({
   };
 }
 
-const overviews = {
-  assigned: 1,
-  unassigned: 2,
-  recent: 3,
-  open: 5,
-  urgent: 7,
-};
-
 type PageProps = {
   params: {
     overview: string;
@@ -37,7 +29,6 @@ type PageProps = {
 
 export default function Page({ params: { overview } }: PageProps) {
   const section = getSection(overview);
-  console.log({ section });
 
-  return <ZammadOverview name={section} id={overviews[overview]} />;
+  return <ZammadOverview name={section} />;
 }