94 lines
3.8 KiB
TypeScript
94 lines
3.8 KiB
TypeScript
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 "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 { 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 >
|
|
);
|
|
};
|