sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add more graphql support to Link

Browse source
This commit is contained in:
Darren Clarke 2023-03-29 14:43:27 +02:00
parent d7f8c87ccb
commit 60f6061d49
14 changed files with 251 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

57
apps/link/components/TicketEdit.tsx
View file

@ -1,5 +1,7 @@
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 {
@ -7,34 +9,58 @@ interface TicketEditProps {
}
export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
const [selectedGroup, setSelectedGroup] = useState("group1");
const [selectedOwner, setSelectedOwner] = useState("owner1");
const [selectedPriority, setSelectedPriority] = useState("priority1");
const [selectedState, setSelectedState] = useState("state2");
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)} size="small" sx={{
<Select defaultValue={selectedGroup} value={selectedGroup} onChange={(e: any) => { setSelectedGroup(e.target.value); updateTicket() }} size="small" sx={{
width: "100%",
backgroundColor: "white"
}} >
<MenuItem key="group1" value="group1">Default Group</MenuItem>
{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)} size="small" sx={{
<Select value={selectedOwner} onChange={(e: any) => { setSelectedOwner(e.target.value); updateTicket() }} size="small" sx={{
width: "100%",
backgroundColor: "white",
}} >
<MenuItem value="owner1">Darren Clarke</MenuItem>
<MenuItem value="owner2">Darren Gpcmdln</MenuItem>
{users?.map((user: any) => <MenuItem key={user.id} value={user.id}>{user.firstname} {user.lastname}</MenuItem>)}
</Select>
</Grid>
<Grid item>
@ -43,11 +69,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
width: "100%",
backgroundColor: "white"
}} >
<MenuItem value="state1">closed</MenuItem>
<MenuItem value="state2">new</MenuItem>
<MenuItem value="state3">open</MenuItem>
<MenuItem value="state4">pending close</MenuItem>
<MenuItem value="state4">pending reminder</MenuItem>
{states?.map((state: any) => <MenuItem key={state.id} value={state.id}>{state.name}</MenuItem>)}
</Select>
</Grid>
<Grid item>
@ -56,17 +78,14 @@ export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
width: "100%",
backgroundColor: "white"
}} >
<MenuItem value="priority1">1 low</MenuItem>
<MenuItem value="priority2">2 normal</MenuItem>
<MenuItem value="priority3">3 high</MenuItem>
{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">
<Chip label="First" onDelete={handleDelete} />
<Chip label="Another" onDelete={handleDelete} />
{selectedTags.map((tag: string) => <Chip key={tag} label={tag} onDelete={handleDelete} />)}
</Stack>
</Grid>
</Grid>