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

Link ticket fixes #1

Browse source
This commit is contained in:
Darren Clarke 2023-10-02 14:22:48 +02:00
parent 1443a61164
commit d9ce2f5883
21 changed files with 617 additions and 583 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,6 +25,7 @@ import {
Dvr as DvrIcon,
Assessment as AssessmentIcon,
LibraryBooks as LibraryBooksIcon,
School as SchoolIcon,
} from "@mui/icons-material";
import { usePathname } from "next/navigation";
import Link from "next/link";
@ -33,6 +34,7 @@ import LinkLogo from "public/link-logo-small.png";
import { useSession, signOut } from "next-auth/react";
import { getTicketOverviewCountsQuery } from "app/_graphql/getTicketOverviewCountsQuery";
console.log;
const openWidth = 270;
const closedWidth = 100;
@ -163,7 +165,6 @@ interface SidebarProps {
export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
const pathname = usePathname();
const { data: session } = useSession();
console.log({ session });
const username = session?.user?.name || "User";
// @ts-ignore
const roles = session?.user?.roles || [];
@ -436,11 +437,19 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
<MenuItem
name="Knowledge Base"
href="/knowledge"
Icon={LibraryBooksIcon}
Icon={SchoolIcon}
iconSize={20}
selected={pathname.endsWith("/knowledge")}
open={open}
/>
<MenuItem
name="Documentation"
href="/docs"
Icon={LibraryBooksIcon}
iconSize={20}
selected={pathname.endsWith("/docs")}
open={open}
/>
<MenuItem
name="Reporting"
href="/reporting"

15
apps/link/app/(main)/_components/StyledDataGrid.tsx
View file

@ -27,7 +27,7 @@ export const StyledDataGrid: FC<StyledDataGridProps> = ({
columns,
rows,
onRowClick,
height = "calc(100vh - 20px)",
height = "100%",
selectedRows,
setSelectedRows,
}) => {
@ -43,6 +43,9 @@ export const StyledDataGrid: FC<StyledDataGridProps> = ({
border: 0,
width: "100%",
height,
".MuiDataGrid-row": {
cursor: "pointer",
},
".MuiDataGrid-row:nth-of-type(1n)": {
backgroundColor: "#f3f3f3",
},
@ -66,12 +69,14 @@ export const StyledDataGrid: FC<StyledDataGridProps> = ({
rows={rows}
columns={columns}
density="compact"
hideFooter
pagination
initialState={{
pagination: { paginationModel: { pageSize: 20 } },
}}
pageSizeOptions={[5, 10, 25]}
paginationMode="client"
sx={{ height }}
rowBuffer={30}
checkboxSelection={!!setSelectedRows}
onRowSelectionModelChange={setSelectedRows}
rowSelectionModel={selectedRows}
rowHeight={46}
scrollbarSize={0}
disableVirtualization

24
apps/link/app/(main)/docs/_components/DocsWrapper.tsx Normal file
View file

@ -0,0 +1,24 @@
"use client";
import { FC } from "react";
import { Grid } from "@mui/material";
import Iframe from "react-iframe";
export const DocsWrapper: FC = () => (
<Grid
container
spacing={0}
sx={{ height: "100%", width: "100%" }}
direction="column"
>
<Grid item sx={{ height: "100vh", width: "100%" }}>
<Iframe
id="docs"
url={"https://digiresilience.org/docs/link/about/"}
width="100%"
height="100%"
frameBorder={0}
/>
</Grid>
</Grid>
);

10
apps/link/app/(main)/docs/page.tsx Normal file
View file

@ -0,0 +1,10 @@
import { Metadata } from "next";
import { DocsWrapper } from "./_components/DocsWrapper";
export const metadata: Metadata = {
title: "Documentation",
};
export default function Page() {
return <DocsWrapper />;
}

8
apps/link/app/(main)/overview/[overview]/_components/TicketList.tsx
View file

@ -19,24 +19,24 @@ export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
{
field: "number",
headerName: "Number",
flex: 1,
flex: 0.3,
},
{
field: "title",
headerName: "Title",
flex: 1,
flex: 1.5,
},
{
field: "customer",
headerName: "Sender",
valueGetter: (params) => params.row?.customer?.fullname,
flex: 1,
flex: 0.6,
},
{
field: "group",
headerName: "Group",
valueGetter: (params) => params.row?.group?.name,
flex: 1,
flex: 0.3,
},
];
console.log({ tickets });

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

@ -14,7 +14,7 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
const { data: ticketData, error: ticketError }: any = useSWR(
{
document: getTicketsByOverviewQuery,
variables: { overviewId: `gid://zammad/Overview/${id}` },
variables: { overviewId: `gid://zammad/Overview/${id}`, pageSize: 250 },
},
{ refreshInterval: 10000 },
);
@ -23,10 +23,20 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
const tickets =
ticketData?.ticketsByOverview?.edges.map((edge: any) => edge.node) || [];
const sortedTickets = tickets.sort((a: any, b: any) => {
if (a.internalId < b.internalId) {
return 1;
}
if (a.internalId > b.internalId) {
return -1;
}
return 0;
});
return (
<>
{shouldRender && <TicketList title={name} tickets={tickets} />}
{ticketError && <div>{ticketError.toString()}</div>}
{shouldRender && <TicketList title={name} tickets={sortedTickets} />}
{/*ticketError && <div>{ticketError.toString()}</div>*/}
</>
);
};

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

@ -33,7 +33,7 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
document: getTicketQuery,
variables: { ticketId: `gid://zammad/Ticket/${id}` },
},
{ refreshInterval: 100000 },
{ refreshInterval: 10000 },
);
const { data: ticketArticlesData, error: ticketArticlesError }: any = useSWR(
{

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

@ -14,6 +14,7 @@ import { MuiChipsInput } from "mui-chips-input";
import useSWR, { useSWRConfig } from "swr";
import { getTicketQuery } from "../../../../../_graphql/getTicketQuery";
import { updateTicketMutation } from "../../../../../_graphql/updateTicketMutation";
import { updateTagsMutation } from "../../../../../_graphql/updateTagsMutation";
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
interface TicketEditProps {
@ -43,7 +44,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
document: getTicketQuery,
variables: { ticketId: `gid://zammad/Ticket/${id}` },
},
{ refreshInterval: 100000 },
{ refreshInterval: 10000 },
);
useEffect(() => {
const ticket = ticketData?.ticket;
@ -59,14 +60,8 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
setSelectedTags(ticket.tags);
}
}, [ticketData, ticketError]);
const updateTicket = async () => {
const input = {
ownerId: `gid://zammad/User/${selectedOwner}`,
priorityId: `gid://zammad/Ticket::Priority/${selectedPriority}`,
stateId: `gid://zammad/Ticket::State/${selectedState}`,
groupId: `gid://zammad/Group/${selectedGroup}`,
// tags: selectedTags,
};
const updateTicket = async (input: any) => {
console.log({ input });
const res = await fetcher({
document: updateTicketMutation,
variables: {
@ -76,6 +71,17 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
});
console.log({ res });
};
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 shouldRender = ticketData && !ticketError;
return (
@ -88,8 +94,11 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
defaultValue={selectedGroup}
value={selectedGroup}
onChange={(e: any) => {
setSelectedGroup(e.target.value);
updateTicket();
const newGroup = e.target.value;
setSelectedGroup(newGroup);
updateTicket({
groupId: `gid://zammad/Group/${newGroup}`,
});
}}
size="small"
sx={{
@ -109,8 +118,9 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
<Select
value={selectedOwner}
onChange={(e: any) => {
setSelectedOwner(e.target.value);
updateTicket();
const newOwner = e.target.value;
setSelectedOwner(newOwner);
updateTicket({ ownerId: `gid://zammad/User/${newOwner}` });
}}
size="small"
sx={{
@ -130,8 +140,11 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
<Select
value={selectedState}
onChange={(e: any) => {
setSelectedState(e.target.value);
updateTicket();
const newState = e.target.value;
setSelectedState(newState);
updateTicket({
stateId: `gid://zammad/Ticket::State/${newState}`,
});
}}
size="small"
sx={{
@ -151,8 +164,11 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
<Select
value={selectedPriority}
onChange={(e: any) => {
setSelectedPriority(e.target.value);
updateTicket();
const newPriority = e.target.value;
setSelectedPriority(newPriority);
updateTicket({
priorityId: `gid://zammad/Ticket::Priority/${newPriority}`,
});
}}
size="small"
sx={{
@ -175,7 +191,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
value={selectedTags}
onChange={(tags: any) => {
setSelectedTags(tags);
updateTicket();
updateTags(tags);
}}
/>
</Grid>

12
apps/link/app/_graphql/updateTagsMutation.ts Normal file
View file

@ -0,0 +1,12 @@
import { gql } from "graphql-request";
export const updateTagsMutation = gql`
mutation UpdateTags($objectId: ID!, $tags: [String!]!) {
tagAssignmentUpdate(objectId: $objectId, tags: $tags) {
success
errors {
message
field
}
}
}`;

3
apps/link/app/_graphql/updateTicketMutation.ts
View file

@ -5,6 +5,9 @@ mutation UpdateTicket($ticketId: ID!, $input: TicketUpdateInput!) {
ticketUpdate(ticketId: $ticketId, input: $input) {
ticket {
id
priority {
id
}
}
}
}`;