diff --git a/.gitignore b/.gitignore index 9ad1340..39c28c4 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ node_modules build/** dist/** .next/** +docker/zammad/auto_install/** diff --git a/apps/link/components/ArticleCreateDialog.tsx b/apps/link/components/ArticleCreateDialog.tsx new file mode 100644 index 0000000..a3468c4 --- /dev/null +++ b/apps/link/components/ArticleCreateDialog.tsx @@ -0,0 +1,97 @@ +import { FC, useState } from "react"; +import { Grid, Button, Dialog, DialogActions, DialogContent, TextField } from "@mui/material"; +// import { request, gql } from "graphql-request"; + +interface ArticleCreateDialogProps { + ticketID: string; + open: boolean; + closeDialog: () => void; + kind: "reply" | "note"; +} + +export const ArticleCreateDialog: FC = ({ 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 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( + input: { + ticketId: "1" + body: "This is a test article" + internal: false + } + ) { + article { + id + } + } + } + `; + const data = await request({ + url: `${origin}/graphql`, + document, + }); + + console.log({ data }) + */ + closeDialog(); + setBody(""); + } + + return ( + + + setBody(e.target.value)} /> + + + + + + + + + + + + + + ); +}; diff --git a/apps/link/components/TicketDetail.tsx b/apps/link/components/TicketDetail.tsx index c630b6e..0ef66ed 100644 --- a/apps/link/components/TicketDetail.tsx +++ b/apps/link/components/TicketDetail.tsx @@ -1,23 +1,25 @@ -import { FC, useEffect } from "react"; -import { Grid, Box, Typography, Button } from "@mui/material"; +import { FC, useState } from "react"; +import { Grid, Box, Typography, Button, Dialog, DialogActions, DialogContent } from "@mui/material"; import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css"; import { MainContainer, ChatContainer, MessageList, Message, - MessageInput, - Conversation, ConversationHeader, } from "@chatscope/chat-ui-kit-react"; +import { ArticleCreateDialog } from "./ArticleCreateDialog"; interface TicketDetailProps { ticket: any; - articles: any[]; } -export const TicketDetail: FC = ({ ticket, articles }) => { - console.log({ here: "here", ticket }); +export const TicketDetail: FC = ({ ticket }) => { + console.log({ ticket }) + const [dialogOpen, setDialogOpen] = useState(false); + const [articleKind, setArticleKind] = useState<"reply" | "note">("reply"); + const closeDialog = () => setDialogOpen(false); + return ( <> @@ -27,7 +29,6 @@ export const TicketDetail: FC = ({ ticket, articles }) => { = ({ ticket, articles }) => { variant="h6" sx={{ fontFamily: "Roboto", fontWeight: 400 }} >{`Ticket #${ticket.number} (created ${new Date( - ticket.created_at + ticket.createdAt ).toLocaleDateString()})`} - {articles.map((article: any) => ( + {ticket.articles.edges.map(({ node: article }: any) => ( = ({ ticket, articles }) => { sender: article.from, direction: article.sender === "Agent" ? "outgoing" : "incoming", - position: "last", - type: "html", + position: "single", }} /> ))} @@ -92,8 +92,7 @@ export const TicketDetail: FC = ({ ticket, articles }) => { spacing={4} justifyContent="center" alignItems="center" - alignContent={"center"} - sx={{ height: 72, pt: 2 }} + alignContent="center" >