Bridge integration
This commit is contained in:
Darren Clarke
parent
42a5e09c94
commit
162390008b
56 changed files with 776 additions and 591 deletions
|
|
@ -1,17 +1,11 @@
|
|||
"use client";
|
||||
|
||||
import { FC, useState } from "react";
|
||||
import {
|
||||
Grid,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
TextField,
|
||||
Autocomplete,
|
||||
} from "@mui/material";
|
||||
import useSWR, { useSWRConfig } from "swr";
|
||||
import { createTicketMutation } from "app/_graphql/createTicketMutation";
|
||||
import { FC } from "react";
|
||||
import { useFormState } from "react-dom";
|
||||
import { Grid } from "@mui/material";
|
||||
import { Dialog, Button, TextField, Autocomplete } from "ui";
|
||||
import { createTicketAction } from "app/_actions/tickets";
|
||||
import useSWR from "swr";
|
||||
|
||||
interface TicketCreateDialogProps {
|
||||
open: boolean;
|
||||
|
|
@ -22,133 +16,83 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
|
|||
open,
|
||||
closeDialog,
|
||||
}) => {
|
||||
const [kind, setKind] = useState("note");
|
||||
const [customerID, setCustomerID] = useState("");
|
||||
const [groupID, setGroupID] = useState("");
|
||||
const [ownerID, setOwnerID] = useState("");
|
||||
const [priorityID, setPriorityID] = useState("");
|
||||
const [stateID, setStateID] = useState("");
|
||||
const [tags, setTags] = useState([]);
|
||||
const [title, setTitle] = useState("");
|
||||
const [body, setBody] = useState("");
|
||||
const backgroundColor = "#1982FC";
|
||||
const color = "white";
|
||||
const { fetcher } = useSWRConfig();
|
||||
const ticket = {
|
||||
customerId: customerID,
|
||||
groupId: groupID,
|
||||
ownerId: ownerID,
|
||||
priorityId: priorityID,
|
||||
stateId: stateID,
|
||||
tags,
|
||||
title,
|
||||
article: {
|
||||
body,
|
||||
type: kind,
|
||||
internal: kind === "note",
|
||||
const initialState = {
|
||||
messages: [],
|
||||
errors: [],
|
||||
values: {
|
||||
customerId: "",
|
||||
groupId: "",
|
||||
ownerId: "",
|
||||
priorityId: "",
|
||||
stateId: "",
|
||||
tags: [],
|
||||
title: "",
|
||||
article: {
|
||||
body: "",
|
||||
type: "note",
|
||||
internal: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const [formState, formAction] = useFormState(
|
||||
createTicketAction,
|
||||
initialState,
|
||||
);
|
||||
const { data: users, error: usersError }: any = useSWR({
|
||||
url: "/api/v1/users",
|
||||
method: "GET",
|
||||
});
|
||||
|
||||
console.log({ users, usersError });
|
||||
|
||||
const customers =
|
||||
users?.filter((user: any) => user.role_ids.includes(3)) ?? [];
|
||||
const formattedCustomers = customers.map((customer: any) => ({
|
||||
label: customer.login,
|
||||
id: `${customer.id}`,
|
||||
}));
|
||||
const createTicket = async () => {
|
||||
await fetcher({
|
||||
document: createTicketMutation,
|
||||
variables: {
|
||||
input: {
|
||||
ticket,
|
||||
},
|
||||
},
|
||||
});
|
||||
closeDialog();
|
||||
setBody("");
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} maxWidth="md" fullWidth>
|
||||
<DialogContent>
|
||||
<Grid container direction="column" spacing={2}>
|
||||
<Grid item>
|
||||
<TextField
|
||||
label={"Title"}
|
||||
fullWidth
|
||||
value={title}
|
||||
onChange={(e: any) => setTitle(e.target.value)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Autocomplete
|
||||
disablePortal
|
||||
options={formattedCustomers}
|
||||
value={customerID}
|
||||
sx={{ width: 300 }}
|
||||
onChange={(e: any) => setCustomerID(e.target.value.id)}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Customer" />
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
label={"Details"}
|
||||
multiline
|
||||
rows={10}
|
||||
fullWidth
|
||||
value={body}
|
||||
onChange={(e: any) => setBody(e.target.value)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
|
||||
<Dialog
|
||||
title="Create Ticket"
|
||||
open={open}
|
||||
onClose={closeDialog}
|
||||
formAction={formAction}
|
||||
buttons={
|
||||
<Grid container justifyContent="space-between">
|
||||
<Grid item>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: "white",
|
||||
color: "#666",
|
||||
fontFamily: "Poppins, sans-serif",
|
||||
fontWeight: 700,
|
||||
borderRadius: 2,
|
||||
textTransform: "none",
|
||||
}}
|
||||
text="Cancel"
|
||||
kind="secondary"
|
||||
onClick={() => {
|
||||
setBody("");
|
||||
closeDialog();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor,
|
||||
color,
|
||||
fontFamily: "Poppins, sans-serif",
|
||||
fontWeight: 700,
|
||||
borderRadius: 2,
|
||||
textTransform: "none",
|
||||
px: 3,
|
||||
}}
|
||||
onClick={createTicket}
|
||||
>
|
||||
Create Ticket
|
||||
</Button>
|
||||
<Button text="Save" type="submit" kind="primary" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogActions>
|
||||
}
|
||||
>
|
||||
<Grid container direction="column" spacing={3}>
|
||||
<Grid item>
|
||||
<Autocomplete
|
||||
name="customerId"
|
||||
label="Customer"
|
||||
options={formattedCustomers}
|
||||
formState={formState}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField name="title" label="Title" formState={formState} />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
name="details"
|
||||
label="Details"
|
||||
lines={10}
|
||||
formState={formState}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@ import { FC, useState } from "react";
|
|||
import { Grid, Box } from "@mui/material";
|
||||
import { GridColDef } from "@mui/x-data-grid-pro";
|
||||
import { StyledDataGrid } from "app/(main)/_components/StyledDataGrid";
|
||||
import { Button } from "app/_components/Button";
|
||||
import { typography } from "app/_styles/theme";
|
||||
import { Button, List, typography } from "ui";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { TicketCreateDialog } from "./TicketCreateDialog";
|
||||
|
||||
|
|
@ -26,83 +25,61 @@ export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
|
|||
{
|
||||
field: "title",
|
||||
headerName: "Title",
|
||||
flex: 5,
|
||||
flex: 3,
|
||||
},
|
||||
{
|
||||
field: "customer",
|
||||
headerName: "Sender",
|
||||
valueGetter: (params: any) => params.row?.customer?.fullname,
|
||||
flex: 2,
|
||||
valueGetter: (value: any) => value?.fullname,
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
field: "createdAt",
|
||||
headerName: "Created At",
|
||||
valueGetter: (params: any) =>
|
||||
new Date(params.row?.createdAt).toLocaleString(),
|
||||
valueGetter: (value: any) => new Date(value).toLocaleString(),
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
field: "updatedAt",
|
||||
headerName: "Updated At",
|
||||
valueGetter: (params: any) =>
|
||||
new Date(params.row?.updatedAt).toLocaleString(),
|
||||
valueGetter: (value: any) => new Date(value).toLocaleString(),
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
field: "group",
|
||||
headerName: "Group",
|
||||
valueGetter: (params: any) => params.row?.group?.name,
|
||||
valueGetter: (value: any) => value?.name,
|
||||
flex: 1,
|
||||
},
|
||||
];
|
||||
|
||||
const rowClick = ({ row }) => {
|
||||
router.push(`/tickets/${row.internalId}`);
|
||||
const onRowClick = (id: any) => {
|
||||
router.push(`/tickets/${id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
|
||||
<Grid container direction="column">
|
||||
<Grid
|
||||
item
|
||||
container
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#ddd",
|
||||
px: "8px",
|
||||
pb: "16px",
|
||||
...typography.h4,
|
||||
fontSize: 24,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Box>
|
||||
</Grid>
|
||||
<List
|
||||
title={title}
|
||||
rows={tickets}
|
||||
columns={gridColumns}
|
||||
onRowClick={onRowClick}
|
||||
getRowID={(row: any) => {
|
||||
console.log({ row });
|
||||
return row.internalId;
|
||||
}}
|
||||
buttons={
|
||||
<Grid container direction="row-reverse" alignItems="center">
|
||||
<Grid item>
|
||||
<Button
|
||||
href={""}
|
||||
onClick={() => setDialogOpen(true)}
|
||||
text="Create"
|
||||
color="#1982FC"
|
||||
color="primary"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<StyledDataGrid
|
||||
name={title}
|
||||
columns={gridColumns}
|
||||
rows={tickets}
|
||||
onRowClick={rowClick}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
<TicketCreateDialog
|
||||
open={dialogOpen}
|
||||
closeDialog={() => setDialogOpen(false)}
|
||||
|
|
|
|||
|
|
@ -108,6 +108,6 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name }) => {
|
|||
}, [name]);
|
||||
|
||||
const shouldRender = tickets && !error;
|
||||
console.log({ shouldRender, tickets, error });
|
||||
|
||||
return shouldRender && <TicketList title={name} tickets={tickets} />;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue