Ticket list updates
This commit is contained in:
Darren Clarke
GitHub
parent
6a85c644dc
commit
dce765033d
12 changed files with 397 additions and 133 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import { FC, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
|
|
@ -19,12 +20,14 @@ import {
|
|||
Cottage as CottageIcon,
|
||||
Settings as SettingsIcon,
|
||||
ExpandCircleDown as ExpandCircleDownIcon,
|
||||
Dvr as DvrIcon,
|
||||
} from "@mui/icons-material";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import LinkLogo from "public/link-logo-small.png";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
import { getTicketOverviewCountsQuery } from "graphql/getTicketOverviewCountsQuery";
|
||||
|
||||
const openWidth = 270;
|
||||
const closedWidth = 100;
|
||||
|
|
@ -38,8 +41,9 @@ const MenuItem = ({
|
|||
selected = false,
|
||||
open = true,
|
||||
badge,
|
||||
target = "_self",
|
||||
}: any) => (
|
||||
<Link href={href}>
|
||||
<Link href={href} target={target}>
|
||||
<ListItemButton
|
||||
sx={{
|
||||
p: 0,
|
||||
|
|
@ -124,7 +128,7 @@ const MenuItem = ({
|
|||
}
|
||||
/>
|
||||
)}
|
||||
{badge && (
|
||||
{badge && badge > 0 ? (
|
||||
<ListItemSecondaryAction>
|
||||
<Typography
|
||||
color="textSecondary"
|
||||
|
|
@ -142,7 +146,7 @@ const MenuItem = ({
|
|||
{badge}
|
||||
</Typography>
|
||||
</ListItemSecondaryAction>
|
||||
)}
|
||||
) : null}
|
||||
</ListItemButton>
|
||||
</Link>
|
||||
);
|
||||
|
|
@ -153,9 +157,29 @@ interface SidebarProps {
|
|||
}
|
||||
|
||||
export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
||||
const { pathname } = useRouter();
|
||||
const router = useRouter();
|
||||
const { pathname } = router;
|
||||
const { data: session } = useSession();
|
||||
const username = session?.user?.name || "User";
|
||||
const { data: overviewData, error: overviewError }: any = useSWR(
|
||||
{
|
||||
document: getTicketOverviewCountsQuery,
|
||||
},
|
||||
{ refreshInterval: 10000 }
|
||||
);
|
||||
const findOverviewCountByID = (id: number) =>
|
||||
overviewData?.ticketOverviews?.edges?.find((overview: any) =>
|
||||
overview.node.id.endsWith(`/${id}`)
|
||||
)?.node?.ticketCount ?? 0;
|
||||
const assignedCount = findOverviewCountByID(1);
|
||||
const urgentCount = findOverviewCountByID(7);
|
||||
const pendingCount = findOverviewCountByID(3);
|
||||
const unassignedCount = findOverviewCountByID(2);
|
||||
console.log({ assignedCount, urgentCount, pendingCount, unassignedCount });
|
||||
|
||||
const logout = () => {
|
||||
signOut({ callbackUrl: "/login" });
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
|
|
@ -335,13 +359,12 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
|||
/>
|
||||
<MenuItem
|
||||
name="Tickets"
|
||||
href="/tickets/3"
|
||||
href="/tickets/assigned"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
selected={pathname.startsWith("/tickets")}
|
||||
iconSize={20}
|
||||
open={open}
|
||||
/>
|
||||
{/*
|
||||
<Collapse
|
||||
in={pathname.startsWith("/tickets")}
|
||||
timeout="auto"
|
||||
|
|
@ -355,7 +378,7 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
|||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/assigned")}
|
||||
badge={3}
|
||||
badge={assignedCount}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
|
|
@ -364,7 +387,7 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
|||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/urgent")}
|
||||
badge={1}
|
||||
badge={urgentCount}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
|
|
@ -373,7 +396,7 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
|||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/pending")}
|
||||
badge={9}
|
||||
badge={pendingCount}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
|
|
@ -381,21 +404,12 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
|||
href="/tickets/unassigned"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/unnassigned")}
|
||||
badge={27}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
name="New Ticket UI"
|
||||
href="/tickets/3"
|
||||
Icon={SettingsIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/3")}
|
||||
selected={pathname.endsWith("/tickets/unassigned")}
|
||||
badge={unassignedCount}
|
||||
open={open}
|
||||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
*/ }
|
||||
<MenuItem
|
||||
name="Knowledge Base"
|
||||
href="/knowledge"
|
||||
|
|
@ -419,7 +433,7 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
|||
onClick={undefined}
|
||||
>
|
||||
<List component="div" disablePadding>
|
||||
{/*
|
||||
{/*
|
||||
<MenuItem
|
||||
name="Dashboard"
|
||||
href="/leafcutter"
|
||||
|
|
@ -510,13 +524,21 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
|||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
||||
<MenuItem
|
||||
name="Zammad Interface"
|
||||
href="/proxy/zammad"
|
||||
Icon={DvrIcon}
|
||||
iconSize={20}
|
||||
open={open}
|
||||
target="_blank"
|
||||
/>
|
||||
<MenuItem
|
||||
name="Logout"
|
||||
href="/logout"
|
||||
Icon={LogoutIcon}
|
||||
iconSize={20}
|
||||
open={open}
|
||||
onClick={logout}
|
||||
/>
|
||||
</List>
|
||||
</Grid>
|
||||
|
|
|
|||
84
apps/link/components/StyledDataGrid.tsx
Normal file
84
apps/link/components/StyledDataGrid.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { FC } from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import {
|
||||
DataGridPro,
|
||||
GridColDef,
|
||||
GridColumnVisibilityModel,
|
||||
GridRowSelectionModel,
|
||||
} from "@mui/x-data-grid-pro";
|
||||
import { useCookies } from "react-cookie";
|
||||
|
||||
interface StyledDataGridProps {
|
||||
name: string;
|
||||
columns: GridColDef[];
|
||||
rows: any[];
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
onRowClick?: (row: any) => void;
|
||||
height?: string;
|
||||
selectedRows?: GridRowSelectionModel;
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
setSelectedRows?: (rows: GridRowSelectionModel) => void;
|
||||
}
|
||||
|
||||
export const StyledDataGrid: FC<StyledDataGridProps> = ({
|
||||
name,
|
||||
columns,
|
||||
rows,
|
||||
onRowClick,
|
||||
height = "calc(100vh - 20px)",
|
||||
selectedRows,
|
||||
setSelectedRows,
|
||||
}) => {
|
||||
const cookieName = `${name}DataGridColumnState`;
|
||||
const [cookies, setCookie] = useCookies([cookieName]);
|
||||
const handleColumnVisibilityChange = (model: GridColumnVisibilityModel) =>
|
||||
setCookie(cookieName, model, { path: "/" });
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#ddd",
|
||||
border: 0,
|
||||
width: "100%",
|
||||
height,
|
||||
".MuiDataGrid-row:nth-of-type(1n)": {
|
||||
backgroundColor: "#f3f3f3",
|
||||
},
|
||||
".MuiDataGrid-row:nth-of-type(2n)": {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
".MuiDataGrid-columnHeaderTitle": {
|
||||
color: "#333",
|
||||
fontWeight: "bold",
|
||||
fontSize: 11,
|
||||
margin: "0 auto",
|
||||
},
|
||||
".MuiDataGrid-columnHeader": {
|
||||
backgroundColor: "#ccc",
|
||||
border: 0,
|
||||
borderBottom: "3px solid #ddd",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DataGridPro
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
density="compact"
|
||||
hideFooter
|
||||
sx={{ height }}
|
||||
rowBuffer={30}
|
||||
checkboxSelection={!!setSelectedRows}
|
||||
onRowSelectionModelChange={setSelectedRows}
|
||||
rowSelectionModel={selectedRows}
|
||||
rowHeight={46}
|
||||
scrollbarSize={0}
|
||||
disableVirtualization
|
||||
columnVisibilityModel={
|
||||
(cookies[cookieName] as GridColumnVisibilityModel) ?? undefined
|
||||
}
|
||||
onColumnVisibilityModelChange={handleColumnVisibilityChange}
|
||||
onRowClick={onRowClick}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
71
apps/link/components/TicketList.tsx
Normal file
71
apps/link/components/TicketList.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import { FC } from "react";
|
||||
import { Grid, Box } from "@mui/material";
|
||||
import { GridColDef } from "@mui/x-data-grid-pro";
|
||||
import { StyledDataGrid } from "./StyledDataGrid";
|
||||
import { typography } from "styles/theme";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
interface TicketListProps {
|
||||
title: string;
|
||||
tickets: any;
|
||||
}
|
||||
|
||||
export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
|
||||
const router = useRouter();
|
||||
let gridColumns: GridColDef[] = [
|
||||
{
|
||||
field: "number",
|
||||
headerName: "Number",
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
field: "title",
|
||||
headerName: "Title",
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
field: "customer",
|
||||
headerName: "Sender",
|
||||
valueGetter: (params) => params.row?.customer?.fullname,
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
field: "group",
|
||||
headerName: "Group",
|
||||
valueGetter: (params) => params.row?.group?.name,
|
||||
flex: 1,
|
||||
},
|
||||
];
|
||||
console.log({ tickets });
|
||||
const rowClick = ({ row }) => {
|
||||
router.push(`/tickets/${row.internalId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
|
||||
<Grid container direction="column">
|
||||
<Grid item>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#ddd",
|
||||
px: "8px",
|
||||
pb: "16px",
|
||||
...typography.h4,
|
||||
fontSize: 24,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<StyledDataGrid
|
||||
name={title}
|
||||
columns={gridColumns}
|
||||
rows={tickets}
|
||||
onRowClick={rowClick}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue