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

56
apps/link/components/ArticleCreateDialog.tsx
View file

@ -1,6 +1,7 @@
import { FC, useState } from "react";
import { Grid, Button, Dialog, DialogActions, DialogContent, TextField } from "@mui/material";
// import { request, gql } from "graphql-request";
import { useSWRConfig } from "swr";
import { updateTicketMutation } from "graphql/updateTicketMutation";
interface ArticleCreateDialogProps {
ticketID: string;
@ -10,54 +11,25 @@ interface ArticleCreateDialogProps {
}
export const ArticleCreateDialog: FC<ArticleCreateDialogProps> = ({ ticketID, open, closeDialog, kind }) => {
console.log({ ticketID })
const [body, setBody] = useState("");
const backgroundColor = kind === "reply" ? "#1982FC" : "#FFB620";
const color = kind === "reply" ? "white" : "black";
const origin = typeof window !== 'undefined' && window.location.origin
? window.location.origin
: '';
const { fetcher } = useSWRConfig();
const createArticle = async () => {
// const token = document?.querySelector('meta[name="csrf-token"]').getAttribute('content');
// console.log({ token })
const res = await fetch(`${origin}/api/v1/ticket_articles`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": "BG3wYuvTgi4ALfaZ-Mdq6i08wRFRJHeCPJbfGjfVarLRhwaxRC8J-AZvGiSNOiWrN38WT3C9WGLhcmaMb0AqBQ",
},
body: JSON.stringify({
ticket_id: ticketID,
body,
internal: kind === "note",
sender: "Agent",
}),
});
console.log({ res })
/*
const document = gql`
mutation {
ticketUpdate(
await fetcher(
{
document: updateTicketMutation,
variables: {
ticketId: `gid://zammad/Ticket/${ticketID}`,
input: {
ticketId: "1"
body: "This is a test article"
internal: false
}
) {
article {
id
article: {
body,
type: kind === "note" ? "note" : "phone",
internal: kind === "note"
}
}
}
}
`;
const data = await request({
url: `${origin}/graphql`,
document,
});
console.log({ data })
*/
});
closeDialog();
setBody("");
}

1
apps/link/components/TicketDetail.tsx
View file

@ -51,6 +51,7 @@ export const TicketDetail: FC<TicketDetailProps> = ({ ticket }) => {
<MessageList style={{ marginBottom: 80 }}>
{ticket.articles.edges.map(({ node: article }: any) => (
<Message
key={article.id}
className={
article.internal
? "internal-note"

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>

25
apps/link/components/ZammadWrapper.tsx
View file

@ -1,4 +1,5 @@
import { FC, useState } from "react";
import { useRouter } from "next/router";
import Iframe from "react-iframe";
type ZammadWrapperProps = {
@ -10,11 +11,12 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
path,
hideSidebar = true,
}) => {
const router = useRouter();
const origin =
typeof window !== "undefined" && window.location.origin
? window.location.origin
: "";
const [display, setDisplay] = useState("hidden");
const [display, setDisplay] = useState("none");
const url = `${origin}/zammad${path}`;
console.log({ origin, path, url });
@ -49,7 +51,28 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
"display: none";
}
// @ts-ignore
if (linkElement.contentDocument.querySelector(".overview-header")) {
// @ts-ignore
linkElement.contentDocument.querySelector(".overview-header").style =
"display: none";
}
setDisplay("inherit");
if (linkElement.contentWindow) {
linkElement.contentWindow.addEventListener('hashchange', () => {
const hash = linkElement.contentWindow?.location?.hash ?? ""
if (hash.startsWith("#ticket/zoom/")) {
setDisplay("none");
const ticketID = hash.split("/").pop();
router.push(`/tickets/${ticketID}`);
setTimeout(() => {
setDisplay("inherit");
}, 1000);
}
});
}
}
}}
/>