Zammad docker and Link structure updates

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

@@ -0,0 +1,167 @@
+"use client";
+
+import { FC, useEffect, useState } from "react";
+import {
+  Grid,
+  Box,
+  Typography,
+  TextField,
+  Stack,
+  Chip,
+  Select,
+  MenuItem,
+} from "@mui/material";
+import useSWR, { useSWRConfig } from "swr";
+import { updateTicketMutation } from "@/app/_graphql/updateTicketMutation";
+import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+
+interface TicketEditProps {
+  ticket: any;
+}
+
+export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
+  const [selectedGroup, setSelectedGroup] = useState(1);
+  const [selectedOwner, setSelectedOwner] = useState(1);
+  const [selectedPriority, setSelectedPriority] = useState(1);
+  const [selectedState, setSelectedState] = useState(1);
+  const [selectedTags, setSelectedTags] = useState(["tag1", "tag2"]);
+  const handleDelete = () => {
+    console.info("You clicked the delete icon.");
+  };
+  const restFetcher = (url: string) => fetch(url).then((r) => r.json());
+  /*
+  const { data: groups } = useSWR("/api/v1/groups", restFetcher);
+  console.log({ groups });
+  const { data: users } = useSWR("/api/v1/users", restFetcher);
+  console.log({ users });
+  const { data: states } = useSWR("/api/v1/ticket_states", restFetcher);
+  console.log({ states });
+  const { data: priorities } = useSWR("/api/v1/ticket_priorities", restFetcher);
+  console.log({ priorities });
+
+  */
+  const groups = [];
+  const users = [];
+  const states = [];
+  const priorities = [];
+
+  const { fetcher } = useSWRConfig();
+  const updateTicket = async () => {
+    await fetcher({
+      document: updateTicketMutation,
+      variables: {
+        ticketId: ticket.id,
+        input: {
+          ownerId: `gid://zammad/User/${selectedOwner}`,
+          tags: ["tag1", "tag2"],
+        },
+      },
+    });
+  };
+
+  return (
+    <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
+      <Grid container direction="column" spacing={3}>
+        <Grid item>
+          <Box sx={{ m: 1 }}>Group</Box>
+          <Select
+            defaultValue={selectedGroup}
+            value={selectedGroup}
+            onChange={(e: any) => {
+              setSelectedGroup(e.target.value);
+              updateTicket();
+            }}
+            size="small"
+            sx={{
+              width: "100%",
+              backgroundColor: "white",
+            }}
+          >
+            {groups?.map((group: any) => (
+              <MenuItem key={group.id} value={group.id}>
+                {group.name}
+              </MenuItem>
+            ))}
+          </Select>
+        </Grid>
+        <Grid item>
+          <Box sx={{ m: 1, mt: 0 }}>Owner</Box>
+          <Select
+            value={selectedOwner}
+            onChange={(e: any) => {
+              setSelectedOwner(e.target.value);
+              updateTicket();
+            }}
+            size="small"
+            sx={{
+              width: "100%",
+              backgroundColor: "white",
+            }}
+          >
+            {users?.map((user: any) => (
+              <MenuItem key={user.id} value={user.id}>
+                {user.firstname} {user.lastname}
+              </MenuItem>
+            ))}
+          </Select>
+        </Grid>
+        <Grid item>
+          <Box sx={{ m: 1, mt: 0 }}>State</Box>
+          <Select
+            value={selectedState}
+            onChange={(e: any) => setSelectedState(e.target.value)}
+            size="small"
+            sx={{
+              width: "100%",
+              backgroundColor: "white",
+            }}
+          >
+            {states?.map((state: any) => (
+              <MenuItem key={state.id} value={state.id}>
+                {state.name}
+              </MenuItem>
+            ))}
+          </Select>
+        </Grid>
+        <Grid item>
+          <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
+          <Select
+            value={selectedPriority}
+            onChange={(e: any) => setSelectedPriority(e.target.value)}
+            size="small"
+            sx={{
+              width: "100%",
+              backgroundColor: "white",
+            }}
+          >
+            {priorities?.map((priority: any) => (
+              <MenuItem key={priority.id} value={priority.id}>
+                {priority.name}
+              </MenuItem>
+            ))}
+          </Select>
+        </Grid>
+
+        <Grid item>
+          <Box sx={{ mb: 1 }}>Tags</Box>
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{
+              backgroundColor: "white",
+              p: 1,
+              borderRadius: "6px",
+              border: "1px solid #bbb",
+              minHeight: 120,
+            }}
+            flexWrap="wrap"
+          >
+            {selectedTags.map((tag: string) => (
+              <Chip key={tag} label={tag} onDelete={handleDelete} />
+            ))}
+          </Stack>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

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

@@ -0,0 +1,5 @@
+import { TicketEdit } from "./_components/TicketEdit";
+
+export default function Page() {
+  return <TicketEdit ticket={undefined} />;
+}