link-stack/apps/link/app/tickets/[id]/@edit/_components/TicketEdit.tsx

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