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

Ticket edit updates

Browse source
This commit is contained in:
Darren Clarke 2024-08-07 15:25:53 +02:00
parent 2568547384
commit 87724bb7b8
9 changed files with 297 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/link/app/(main)/_components/Sidebar.tsx
View file

@ -151,7 +151,7 @@ const MenuItem = ({
}
/>
)}
{badge && badge > 0 ? (
{open && badge && badge > 0 ? (
<ListItemSecondaryAction>
<Typography
color="textSecondary"
@ -197,7 +197,6 @@ export const Sidebar: FC<SidebarProps> = ({
useEffect(() => {
const fetchCounts = async () => {
const counts = await getOverviewTicketCountsAction();
console.log({ counts });
setOverviewCounts(counts);
};
@ -422,8 +421,9 @@ export const Sidebar: FC<SidebarProps> = ({
/>
<Collapse
in={
pathname.startsWith("/overview") ||
pathname.startsWith("/tickets")
open &&
(pathname.startsWith("/overview") ||
pathname.startsWith("/tickets"))
}
timeout="auto"
unmountOnExit
@ -512,7 +512,7 @@ export const Sidebar: FC<SidebarProps> = ({
/>
)}
<Collapse
in={pathname.startsWith("/leafcutter")}
in={open && pathname.startsWith("/leafcutter")}
timeout="auto"
unmountOnExit
onClick={undefined}
@ -575,7 +575,7 @@ export const Sidebar: FC<SidebarProps> = ({
open={open}
/>
<Collapse
in={pathname.startsWith("/admin/")}
in={open && pathname.startsWith("/admin/")}
timeout="auto"
unmountOnExit
onClick={undefined}
@ -588,7 +588,7 @@ export const Sidebar: FC<SidebarProps> = ({
open={open}
/>
<Collapse
in={pathname.startsWith("/admin/bridge")}
in={open && pathname.startsWith("/admin/bridge")}
timeout="auto"
unmountOnExit
onClick={undefined}

2
apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx
View file

@ -20,7 +20,7 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name }) => {
fetchTickets();
const interval = setInterval(fetchTickets, 20000);
const interval = setInterval(fetchTickets, 10000);
return () => clearInterval(interval);
}, [name]);

206
apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx
View file

@ -61,113 +61,115 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
const shouldRender = !!ticket && !!ticketArticles;
return (
shouldRender && (
<Box sx={{ height: "100%", width: "100%" }}>
<MainContainer>
<ChatContainer>
<ConversationHeader>
<ConversationHeader.Content>
<Box
sx={{
width: "100%",
textAlign: "center",
fontWeight: "bold",
}}
>
<Typography
variant="h5"
<Box sx={{ height: "100%", width: "100%", background: veryLightGray }}>
{shouldRender && (
<>
<MainContainer>
<ChatContainer>
<ConversationHeader>
<ConversationHeader.Content>
<Box
sx={{
fontFamily: poppins.style.fontFamily,
fontWeight: 700,
width: "100%",
textAlign: "center",
fontWeight: "bold",
}}
>
{ticket.title}
</Typography>
<Typography
variant="h6"
sx={{
fontFamily: roboto.style.fontFamily,
fontWeight: 400,
<Typography
variant="h5"
sx={{
fontFamily: poppins.style.fontFamily,
fontWeight: 700,
}}
>
{ticket.title}
</Typography>
<Typography
variant="h6"
sx={{
fontFamily: roboto.style.fontFamily,
fontWeight: 400,
}}
>{`Ticket #${ticket.number} (created ${new Date(
ticket.createdAt,
).toLocaleDateString()})`}</Typography>
</Box>
</ConversationHeader.Content>
</ConversationHeader>
<MessageList style={{ marginBottom: 80 }}>
{ticketArticles.edges.map(({ node: article }: any) => (
<Message
key={article.id}
className={
article.internal
? "internal-note"
: article?.sender?.name === "Agent"
? "outgoing-message"
: "incoming-message"
}
model={{
message: article.bodyWithUrls,
sentTime: article.updated_at,
sender: article.from,
direction:
article.sender === "Agent" ? "outgoing" : "incoming",
position: "single",
}}
>{`Ticket #${ticket.number} (created ${new Date(
ticket.createdAt,
).toLocaleDateString()})`}</Typography>
</Box>
</ConversationHeader.Content>
</ConversationHeader>
<MessageList style={{ marginBottom: 80 }}>
{ticketArticles.edges.map(({ node: article }: any) => (
<Message
key={article.id}
className={
article.internal
? "internal-note"
: article?.sender?.name === "Agent"
? "outgoing-message"
: "incoming-message"
}
model={{
message: article.bodyWithUrls,
sentTime: article.updated_at,
sender: article.from,
direction:
article.sender === "Agent" ? "outgoing" : "incoming",
position: "single",
}}
/>
))}
</MessageList>
</ChatContainer>
<Box
sx={{
height: 80,
background: veryLightGray,
borderTop: `1px solid ${lightGray}`,
position: "absolute",
bottom: 0,
width: "100%",
zIndex: 1000,
}}
>
<Grid
container
spacing={6}
justifyContent="center"
alignItems="center"
alignContent="center"
sx={{ height: "100%", pt: 6 }}
/>
))}
</MessageList>
</ChatContainer>
<Box
sx={{
height: 80,
background: veryLightGray,
borderTop: `1px solid ${lightGray}`,
position: "absolute",
bottom: 0,
width: "100%",
zIndex: 1000,
}}
>
<Grid item>
<Button
text="Write note to agent"
color="#FFB620"
onClick={() => {
setArticleKind("note");
setDialogOpen(true);
}}
/>
<Grid
container
spacing={6}
justifyContent="center"
alignItems="center"
alignContent="center"
sx={{ height: "100%", pt: 6 }}
>
<Grid item>
<Button
text="Write note to agent"
color="#FFB620"
onClick={() => {
setArticleKind("note");
setDialogOpen(true);
}}
/>
</Grid>
<Grid item>
<Button
text="Reply to ticket"
kind="primary"
onClick={() => {
setArticleKind(firstArticleKind);
setDialogOpen(true);
}}
/>
</Grid>
</Grid>
<Grid item>
<Button
text="Reply to ticket"
kind="primary"
onClick={() => {
setArticleKind(firstArticleKind);
setDialogOpen(true);
}}
/>
</Grid>
</Grid>
</Box>
</MainContainer>
<ArticleCreateDialog
ticketID={ticket.internalId}
open={dialogOpen}
closeDialog={closeDialog}
kind={articleKind}
recipient={recipient}
/>
</Box>
)
</Box>
</MainContainer>
<ArticleCreateDialog
ticketID={ticket.internalId}
open={dialogOpen}
closeDialog={closeDialog}
kind={articleKind}
recipient={recipient}
/>
</>
)}
</Box>
);
};

315
apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx
View file

@ -1,18 +1,15 @@
"use client";
import { FC, useEffect, useState } from "react";
import { Grid, Box, MenuItem } from "@mui/material";
import { useFormState } from "react-dom";
import { Grid, Box } from "@mui/material";
import { Select, Button } from "@link-stack/ui";
import { MuiChipsInput } from "mui-chips-input";
import { getTicketQuery } from "app/_graphql/getTicketQuery";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import {
updateTicketAction,
getTicketAction,
getTicketStatesAction,
getTicketPrioritiesAction,
getTicketTagsAction,
} from "app/_actions/tickets";
import { getAgentsAction } from "app/_actions/users";
import { getGroupsAction } from "app/_actions/groups";
@ -23,56 +20,51 @@ interface TicketEditProps {
export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
const [ticket, setTicket] = useState<any>();
const [hasChanges, setHasChanges] = useState(false);
const [formState, setFormState] = useState({
values: {
group: null,
owner: null,
priority: null,
pendingTime: null,
state: null,
tags: [],
},
});
const [ticketStates, setTicketStates] = useState<any>();
const [ticketPriorities, setTicketPriorities] = useState<any>();
const [groups, setGroups] = useState<any>();
const [tags, setTags] = useState<any>();
const [agents, setAgents] = useState<any>();
const selectedTags = [];
const pendingVisible = false;
const pendingDate = new Date();
const handleDelete = () => {
console.info("You clicked the delete icon.");
};
const [pendingVisible, setPendingVisible] = useState(false);
const filteredStates = ticketStates?.filter(
(state: any) => !["new", "merged", "removed"].includes(state.name),
);
const filteredStates =
ticketStates?.filter(
(state: any) => !["new", "merged", "removed"].includes(state.label),
) ?? [];
useEffect(() => {
const fetchAgents = async () => {
const result = await getAgentsAction();
console.log({ agents: result });
setAgents(result);
};
const fetchGroups = async () => {
const result = await getGroupsAction();
console.log({ groups: result });
setGroups(result);
};
const fetchTicketStates = async () => {
const result = await getTicketStatesAction();
console.log({ ticketStates: result });
setTicketStates(result);
};
const fetchTicketPriorities = async () => {
const result = await getTicketPrioritiesAction();
console.log({ ticketPriorities: result });
setTicketPriorities(result);
};
const fetchTicketTags = async () => {
const result = await getTicketTagsAction();
console.log({ tags: result });
setTags(result);
};
fetchTicketStates();
fetchTicketPriorities();
fetchTicketTags();
fetchAgents();
fetchGroups();
}, []);
@ -80,185 +72,134 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
useEffect(() => {
const fetchTicket = async () => {
const result = await getTicketAction(id);
console.log({ result });
setTicket(result);
setFormState({
values: {
...formState.values,
group: result?.group?.id,
owner: result?.owner?.id,
priority: result?.priority?.id,
state: result?.state?.id,
tags: result?.tags,
},
});
};
fetchTicket();
}, []);
/*
useEffect(() => {
const updateFormState = (name: string, value: any) => {
setFormState({
values: {
...formState.values,
[name]: value,
},
});
const stateName = filteredStates?.find(
(state: any) => state.id === selectedState,
(state: any) => state.id === formState.values.state,
)?.name;
setPendingVisible(stateName?.includes("pending") ?? false);
}, [selectedState]);
*/
const updateTicket = async (input: any) => {
/*
console.log({ input });
const res = await fetcher({
document: updateTicketMutation,
variables: {
ticketId: `gid://zammad/Ticket/${id}`,
input,
},
});
console.log({ res });
*/
setHasChanges(true);
};
const updateTags = async (tags: string[]) => {
/*
console.log({ tags });
const res = await fetcher({
document: updateTagsMutation,
variables: {
objectId: `gid://zammad/Ticket/${id}`,
tags,
},
});
console.log({ res });
*/
const updateTicket = async () => {
await updateTicketAction(id, formState.values);
setHasChanges(false);
};
const initialState = {
messages: [],
errors: [],
values: {
customer: "",
group: ticket?.group?.id?.split("/").pop(),
owner: ticket?.owner?.id?.split("/").pop(),
priority: ticket?.priority?.id?.split("/").pop(),
state: ticket?.state?.id?.split("/").pop(),
tags: [],
title: "",
article: {
body: "",
type: "note",
internal: true,
},
},
};
const [formState, formAction] = useFormState(
updateTicketAction,
initialState,
);
const shouldRender = !!ticket;
return (
shouldRender && (
<Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
<form action={formAction}>
<Grid container direction="column" spacing={3}>
<Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
{shouldRender && (
<Grid container direction="column" spacing={3}>
<Grid item>
<Box sx={{ m: 1 }}>Group</Box>
<Select
name="group"
label="Group"
formState={formState}
updateFormState={updateFormState}
getOptions={() => groups}
/>
</Grid>
<Grid item>
<Box sx={{ m: 1, mt: 0 }}>Owner</Box>
<Select
name="owner"
label="Owner"
formState={formState}
updateFormState={updateFormState}
getOptions={() => agents}
/>
</Grid>
<Grid item xs={12}>
<Box sx={{ m: 1, mt: 0 }}>State</Box>
<Select
name="state"
label="State"
formState={formState}
updateFormState={updateFormState}
getOptions={() => filteredStates}
/>
</Grid>
<Grid
item
xs={12}
sx={{ display: pendingVisible ? "inherit" : "none" }}
>
<DatePicker
label="Pending Date"
value={new Date(formState.values.pendingTime)}
onChange={(newValue: any) => {
updateFormState("pendingDate", newValue.toISOString());
}}
slotProps={{ textField: { size: "small" } }}
sx={{
width: "100%",
backgroundColor: "white",
}}
/>
</Grid>
<Grid item>
<Box sx={{ m: 1, mt: 0 }}>Priority</Box>
<Select
name="priority"
label="Priority"
formState={formState}
updateFormState={updateFormState}
getOptions={() => ticketPriorities}
/>
</Grid>
<Grid item>
<Box sx={{ mb: 1 }}>Tags</Box>
<MuiChipsInput
sx={{ backgroundColor: "white", width: "100%" }}
value={formState.values.tags}
hideClearAll
onChange={(tags: any) => {
updateFormState("tags", tags);
}}
onDeleteChip={(tag: any) => {
const tags = formState.values.tags.filter(
(t: any) => t !== tag,
);
updateFormState("tags", tags);
}}
/>
</Grid>
<Grid item container direction="row-reverse">
<Grid item>
<Box sx={{ m: 1 }}>Group</Box>
<Select
name="group"
label="Group"
formState={formState}
getOptions={() => groups}
<Button
text="Save"
kind="primary"
onClick={updateTicket}
disabled={!hasChanges}
/>
</Grid>
<Grid item>
<Box sx={{ m: 1, mt: 0 }}>Owner</Box>
<Select
name="owner"
label="Owner"
formState={formState}
getOptions={() => agents}
/>
</Grid>
<Grid item xs={12}>
<Box sx={{ m: 1, mt: 0 }}>State</Box>
<Select
name="state"
label="State"
formState={formState}
getOptions={() =>
filteredStates?.map((state: any) => ({
value: state.id,
label: state.name,
})) ?? []
}
/*
onChange={(e: any) => {
const newState = e.target.value;
setSelectedState(newState);
updateTicket({
stateId: `gid://zammad/Ticket::State/${newState}`,
pendingTime: pendingDate.toISOString(),
});
}}
*/
/>
</Grid>
<Grid
item
xs={12}
sx={{ display: pendingVisible ? "inherit" : "none" }}
>
{/* <DatePicker
label="Pending Date"
value={pendingDate}
onChange={(newValue: any) => {
console.log(newValue);
setPendingDate(newValue);
updateTicket({
pendingTime: newValue.toISOString(),
})
}}
slotProps={{ textField: { size: "small" } }}
sx={{
width: "100%",
backgroundColor: "white",
}}
/> */}
</Grid>
<Grid item>
<Box sx={{ m: 1, mt: 0 }}>Priority</Box>
<Select
name="priority"
label="Priority"
formState={formState}
getOptions={() => ticketPriorities}
/*
onChange={(e: any) => {
const newPriority = e.target.value;
setSelectedPriority(newPriority);
updateTicket({
priorityId: `gid://zammad/Ticket::Priority/${newPriority}`,
});
}}
*/
/>
</Grid>
<Grid item>
<Box sx={{ mb: 1 }}>Tags</Box>
<MuiChipsInput
sx={{ backgroundColor: "white", width: "100%" }}
value={selectedTags}
onChange={(tags: any) => {
/*
setSelectedTags(tags);
updateTags(tags);
*/
}}
/>
</Grid>
<Grid item container direction="row-reverse">
<Grid item>
<Button text="Save" kind="primary" type="submit" />
</Grid>
</Grid>
</Grid>
</form>
</Box>
)
</Grid>
)}
</Box>
);
};

100
apps/link/app/_actions/tickets.ts
View file

@ -76,35 +76,59 @@ export const createTicketArticleAction = async (
};
export const updateTicketAction = async (
currentState: any,
formData: FormData,
ticketID: string,
ticketInfo: Record<string, any>,
) => {
/*
console.log({ ticketID, ticketInfo });
try {
const { id, project } = currentState.values;
const updatedTicket = {
title: formData.get("title"),
};
await executeMutation({
project,
mutation: UpdateAssetMutation,
const input = {};
if (ticketInfo.state) {
input["stateId"] = ticketInfo.state;
}
if (ticketInfo.pendingTime) {
input["pendingTime"] = ticketInfo.pendingTime;
}
if (ticketInfo.priority) {
input["priorityId"] = ticketInfo.priority;
}
if (ticketInfo.group) {
input["groupId"] = ticketInfo.group;
}
if (ticketInfo.owner) {
input["ownerId"] = ticketInfo.owner;
}
const result = await executeGraphQL({
query: updateTicketMutation,
variables: {
id,
input: updatedAsset,
ticketId: `gid://zammad/Ticket/${ticketID}`,
input,
},
});
revalidatePath(`/${project}/assets/${id}`);
if (ticketInfo.tags?.length > 0) {
const tagsResult = await executeGraphQL({
query: updateTagsMutation,
variables: {
objectId: `gid://zammad/Ticket/${ticketID}`,
tags: ticketInfo.tags,
},
});
console.log({ tagsResult });
}
console.log({ result });
return {
...currentState,
values: { ...currentState.values, ...updatedAsset, id, project },
result,
success: true,
};
} catch (e: any) {
return { success: false, message: e?.message ?? "Unknown error" };
console.log({ e });
return {
success: false,
message: e?.message ?? "Unknown error",
};
}
*/
};
export const getTicketAction = async (id: string) => {
@ -112,7 +136,7 @@ export const getTicketAction = async (id: string) => {
query: getTicketQuery,
variables: { ticketId: `gid://zammad/Ticket/${id}` },
});
console.log({ td: ticketData.ticket });
return ticketData?.ticket;
};
@ -125,38 +149,6 @@ export const getTicketArticlesAction = async (id: string) => {
return ticketData?.ticketArticles;
};
export const updateTicketTagsAction = async (
currentState: any,
formData: FormData,
) => {
/*
try {
const { id, project } = currentState.values;
const updatedTicket = {
title: formData.get("title"),
};
await executeMutation({
project,
mutation: UpdateAssetMutation,
variables: {
id,
input: updatedAsset,
},
});
revalidatePath(`/${project}/assets/${id}`);
return {
...currentState,
values: { ...currentState.values, ...updatedAsset, id, project },
success: true,
};
} catch (e: any) {
return { success: false, message: e?.message ?? "Unknown error" };
}
*/
};
export const getTicketStatesAction = async () => {
const states = await executeREST({
path: "/api/v1/ticket_states",
@ -164,15 +156,15 @@ export const getTicketStatesAction = async () => {
const formattedStates =
states?.map((state: any) => ({
value: state.id,
value: `gid://zammad/Ticket::State/${state.id}`,
label: state.name,
})) ?? [];
return formattedStates;
};
export const getTicketTagsAction = async () => {
const tags = await executeREST({
export const getTagsAction = async () => {
const { tags } = await executeREST({
path: "/api/v1/tags",
});
@ -186,7 +178,7 @@ export const getTicketPrioritiesAction = async () => {
const formattedPriorities =
priorities?.map((priority: any) => ({
value: priority.id,
value: `gid://zammad/Ticket::Priority/${priority.id}`,
label: priority.name,
})) ?? [];

1
apps/link/app/_components/CSRFProvider.tsx
View file

@ -12,7 +12,6 @@ export const CSRFProvider: FC<PropsWithChildren> = ({ children }) => {
const response = await fetch("/api/v1/users/me");
const token = response.headers.get("CSRF-Token");
update({ csrfToken: token });
console.log({ token });
}
}, 30000);