Sidebar and messages updates
This commit is contained in:
Darren Clarke
parent
6a0cc58f60
commit
016461b549
6 changed files with 1193 additions and 634 deletions
|
|
@ -1,11 +1,19 @@
|
|||
import { FC, useState } from "react";
|
||||
import { Grid } from "@mui/material";
|
||||
import { Sidebar } from "./Sidebar";
|
||||
|
||||
export const Layout = ({ children }) => (
|
||||
<Grid container direction="row">
|
||||
<Sidebar open />
|
||||
<Grid item sx={{ ml: "270px", width: "100%", height: "100vh" }}>
|
||||
{children}
|
||||
export const Layout = ({ children }) => {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<Grid container direction="row">
|
||||
<Sidebar open={open} setOpen={setOpen} />
|
||||
<Grid
|
||||
item
|
||||
sx={{ ml: open ? "270px" : "100px", width: "100%", height: "100vh" }}
|
||||
>
|
||||
{children}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import {
|
|||
Logout as LogoutIcon,
|
||||
Cottage as CottageIcon,
|
||||
Settings as SettingsIcon,
|
||||
ExpandCircleDown as ExpandCircleDownIcon,
|
||||
} from "@mui/icons-material";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
|
|
@ -34,11 +35,16 @@ const MenuItem = ({
|
|||
iconSize,
|
||||
inset = false,
|
||||
selected = false,
|
||||
open = true,
|
||||
badge,
|
||||
}: any) => (
|
||||
<Link href={href}>
|
||||
<ListItemButton
|
||||
sx={{ p: 0, mb: 1, bl: iconSize === 0 ? "1px solid white" : "inherit" }}
|
||||
sx={{
|
||||
p: 0,
|
||||
mb: 1,
|
||||
bl: iconSize === 0 ? "1px solid white" : "inherit",
|
||||
}}
|
||||
selected={selected}
|
||||
>
|
||||
{iconSize > 0 ? (
|
||||
|
|
@ -47,6 +53,8 @@ const MenuItem = ({
|
|||
color: `white`,
|
||||
minWidth: 0,
|
||||
mr: 2,
|
||||
textAlign: "center",
|
||||
margin: open ? "0 8 0 0" : "0 auto",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
|
|
@ -95,23 +103,25 @@ const MenuItem = ({
|
|||
/>
|
||||
</Box>
|
||||
)}
|
||||
<ListItemText
|
||||
inset={inset}
|
||||
primary={
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontFamily: "Roboto",
|
||||
fontWeight: "bold",
|
||||
border: 0,
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
{open && (
|
||||
<ListItemText
|
||||
inset={inset}
|
||||
primary={
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontFamily: "Roboto",
|
||||
fontWeight: "bold",
|
||||
border: 0,
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{badge && (
|
||||
<ListItemSecondaryAction>
|
||||
<Typography
|
||||
|
|
@ -137,11 +147,13 @@ const MenuItem = ({
|
|||
|
||||
interface SidebarProps {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
||||
export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
||||
const { pathname } = useRouter();
|
||||
console.log({ pathname });
|
||||
const [username, setUsername] = useState("Nicholas Smith");
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
|
||||
|
|
@ -152,9 +164,31 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
sx: {
|
||||
width: open ? openWidth : closedWidth,
|
||||
border: 0,
|
||||
overflow: "visible",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 20,
|
||||
right: open ? -8 : -16,
|
||||
color: "#1C75FD",
|
||||
rotate: open ? "90deg" : "-90deg",
|
||||
}}
|
||||
onClick={() => {
|
||||
setOpen!(!open);
|
||||
}}
|
||||
>
|
||||
<ExpandCircleDownIcon
|
||||
sx={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
background: "white",
|
||||
borderRadius: 500,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
|
|
@ -163,8 +197,14 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
|
||||
>
|
||||
<Grid item container>
|
||||
<Grid item>
|
||||
<Box sx={{ width: "40px", height: "40px" }}>
|
||||
<Grid item sx={{ width: open ? "40px" : "100%" }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
margin: open ? "0" : "0 auto",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={LinkLogo}
|
||||
alt="Link logo"
|
||||
|
|
@ -178,21 +218,23 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
</Box>
|
||||
.
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontSize: 26,
|
||||
color: "white",
|
||||
fontWeight: 700,
|
||||
mt: 1,
|
||||
ml: 0.5,
|
||||
fontFamily: "Poppins",
|
||||
}}
|
||||
>
|
||||
CDR Link
|
||||
</Typography>
|
||||
</Grid>
|
||||
{open && (
|
||||
<Grid item>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontSize: 26,
|
||||
color: "white",
|
||||
fontWeight: 700,
|
||||
mt: 1,
|
||||
ml: 0.5,
|
||||
fontFamily: "Poppins",
|
||||
}}
|
||||
>
|
||||
CDR Link
|
||||
</Typography>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Box
|
||||
|
|
@ -207,7 +249,12 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
<Grid item>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ fontSize: 12, color: "#999", fontWeight: "bold" }}
|
||||
sx={{
|
||||
fontSize: 12,
|
||||
color: "#999",
|
||||
fontWeight: "bold",
|
||||
textAlign: open ? "left" : "center",
|
||||
}}
|
||||
>
|
||||
Hello
|
||||
</Typography>
|
||||
|
|
@ -215,9 +262,20 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
<Grid item>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{ fontSize: 22, color: "white", mb: 1.5, fontWeight: "bold" }}
|
||||
sx={{
|
||||
fontSize: 22,
|
||||
color: "white",
|
||||
mb: 1.5,
|
||||
fontWeight: "bold",
|
||||
textAlign: open ? "left" : "center",
|
||||
}}
|
||||
>
|
||||
Nicholas
|
||||
{open
|
||||
? username
|
||||
: username
|
||||
.split(" ")
|
||||
.map((name) => name.substring(0, 1))
|
||||
.join("")}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
|
|
@ -270,6 +328,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
Icon={CottageIcon}
|
||||
iconSize={20}
|
||||
selected={pathname.endsWith("/")}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Tickets"
|
||||
|
|
@ -277,6 +336,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
Icon={FeaturedPlayListIcon}
|
||||
selected={pathname.startsWith("/tickets")}
|
||||
iconSize={20}
|
||||
open={open}
|
||||
/>
|
||||
|
||||
<Collapse
|
||||
|
|
@ -293,6 +353,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/assigned")}
|
||||
badge={3}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Urgent"
|
||||
|
|
@ -301,6 +362,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/urgent")}
|
||||
badge={1}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Pending"
|
||||
|
|
@ -309,6 +371,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/pending")}
|
||||
badge={9}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Unassigned"
|
||||
|
|
@ -317,6 +380,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/unnassigned")}
|
||||
badge={27}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
name="New Ticket UI"
|
||||
|
|
@ -324,6 +388,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
Icon={SettingsIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/181")}
|
||||
open={open}
|
||||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
|
@ -334,6 +399,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
Icon={AnalyticsIcon}
|
||||
iconSize={20}
|
||||
selected={pathname.endsWith("/leafcutter")}
|
||||
open={open}
|
||||
/>
|
||||
<Collapse
|
||||
in={pathname.startsWith("/leafcutter")}
|
||||
|
|
@ -347,6 +413,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
href="/leafcutter"
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter")}
|
||||
open={open}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
|
|
@ -354,6 +421,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
href="/leafcutter/create"
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter/create")}
|
||||
open={open}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
|
|
@ -361,6 +429,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
href="/leafcutter/trends"
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter/trends")}
|
||||
open={open}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
|
|
@ -368,6 +437,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
href="/leafcutter/faq"
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter/faq")}
|
||||
open={open}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
|
|
@ -376,6 +446,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
Icon={AnalyticsIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter/about")}
|
||||
open={open}
|
||||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
|
@ -385,12 +456,14 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
Icon={PersonIcon}
|
||||
iconSize={20}
|
||||
selected={pathname.endsWith("/profile")}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Admin"
|
||||
href="/admin/zammad"
|
||||
Icon={SettingsIcon}
|
||||
iconSize={20}
|
||||
open={open}
|
||||
/>
|
||||
<Collapse
|
||||
in={pathname.startsWith("/admin/")}
|
||||
|
|
@ -405,6 +478,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/admin/zammad")}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Metamigo"
|
||||
|
|
@ -412,6 +486,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/admin/metamigo")}
|
||||
open={open}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Label Studio"
|
||||
|
|
@ -419,6 +494,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/admin/label-studio")}
|
||||
open={open}
|
||||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
|
@ -428,6 +504,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
|||
href="/logout"
|
||||
Icon={LogoutIcon}
|
||||
iconSize={20}
|
||||
open={open}
|
||||
/>
|
||||
</List>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { FC, useEffect } from "react";
|
||||
import { Grid, Box, Typography } from "@mui/material";
|
||||
import { Grid, Box, Typography, Button } from "@mui/material";
|
||||
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
||||
import {
|
||||
MainContainer,
|
||||
|
|
@ -19,61 +19,124 @@ interface TicketDetailProps {
|
|||
export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
|
||||
console.log({ here: "here", ticket });
|
||||
return (
|
||||
<MainContainer>
|
||||
<ChatContainer>
|
||||
<ConversationHeader>
|
||||
<ConversationHeader.Content>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
<>
|
||||
<MainContainer>
|
||||
<ChatContainer>
|
||||
<ConversationHeader>
|
||||
<ConversationHeader.Content>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ fontFamily: "Poppins", fontWeight: 700 }}
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{ticket.title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ fontFamily: "Roboto", fontWeight: 400 }}
|
||||
>{`Ticket #${ticket.number} (created ${new Date(
|
||||
ticket.created_at
|
||||
).toLocaleDateString()})`}</Typography>
|
||||
</Box>
|
||||
</ConversationHeader.Content>
|
||||
</ConversationHeader>
|
||||
<MessageList>
|
||||
{articles.map((article: any) => (
|
||||
<Message
|
||||
className={
|
||||
article.internal
|
||||
? "internal-note"
|
||||
: article.sender === "Agent"
|
||||
? "outgoing-message"
|
||||
: "incoming-message"
|
||||
}
|
||||
model={{
|
||||
message: article.body.replace(/<div>*<br>*<div>/g, ""),
|
||||
sentTime: article.updated_at,
|
||||
sender: article.from,
|
||||
direction: article.sender === "Agent" ? "outgoing" : "incoming",
|
||||
position: "last",
|
||||
type: "html",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</MessageList>
|
||||
{/* <MessageInput
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ fontFamily: "Poppins", fontWeight: 700 }}
|
||||
>
|
||||
{ticket.title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ fontFamily: "Roboto", fontWeight: 400 }}
|
||||
>{`Ticket #${ticket.number} (created ${new Date(
|
||||
ticket.created_at
|
||||
).toLocaleDateString()})`}</Typography>
|
||||
</Box>
|
||||
</ConversationHeader.Content>
|
||||
</ConversationHeader>
|
||||
<MessageList style={{ marginBottom: 80 }}>
|
||||
{articles.map((article: any) => (
|
||||
<Message
|
||||
className={
|
||||
article.internal
|
||||
? "internal-note"
|
||||
: article.sender === "Agent"
|
||||
? "outgoing-message"
|
||||
: "incoming-message"
|
||||
}
|
||||
model={{
|
||||
message: article.body.replace(/<div>*<br>*<div>/g, ""),
|
||||
sentTime: article.updated_at,
|
||||
sender: article.from,
|
||||
direction:
|
||||
article.sender === "Agent" ? "outgoing" : "incoming",
|
||||
position: "last",
|
||||
type: "html",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</MessageList>
|
||||
{/* <MessageInput
|
||||
placeholder="Type message here"
|
||||
sendOnReturnDisabled
|
||||
attachButton={false}
|
||||
sendButton={false}
|
||||
/> */}
|
||||
</ChatContainer>
|
||||
</MainContainer>
|
||||
</ChatContainer>
|
||||
<Box
|
||||
sx={{
|
||||
height: 80,
|
||||
background: "#eeeeee",
|
||||
borderTop: "1px solid #ddd",
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
spacing={4}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
alignContent={"center"}
|
||||
sx={{ height: 72 }}
|
||||
>
|
||||
<Grid item>
|
||||
<Button
|
||||
variant="contained"
|
||||
disableElevation
|
||||
sx={{
|
||||
fontFamily: "Poppins, sans-serif",
|
||||
fontWeight: 700,
|
||||
borderRadius: 2,
|
||||
textTransform: "none",
|
||||
backgroundColor: "#1982FC",
|
||||
padding: "6px 30px",
|
||||
margin: "20px 0px",
|
||||
whiteSpace: "nowrap",
|
||||
py: "10px",
|
||||
}}
|
||||
>
|
||||
Reply to ticket
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button
|
||||
variant="contained"
|
||||
disableElevation
|
||||
sx={{
|
||||
fontFamily: "Poppins, sans-serif",
|
||||
fontWeight: 700,
|
||||
borderRadius: 2,
|
||||
textTransform: "none",
|
||||
color: "black",
|
||||
backgroundColor: "#FFB620",
|
||||
padding: "6px 30px",
|
||||
margin: "20px 0px",
|
||||
whiteSpace: "nowrap",
|
||||
py: "10px",
|
||||
}}
|
||||
>
|
||||
Write note to agent
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</MainContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,7 +24,10 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
|
|||
const linkElement = document.querySelector("iframe");
|
||||
if (
|
||||
linkElement.contentDocument &&
|
||||
linkElement.contentDocument?.querySelector
|
||||
linkElement.contentDocument?.querySelector &&
|
||||
linkElement.contentDocument.querySelector("#navigation") &&
|
||||
linkElement.contentDocument.querySelector("body") &&
|
||||
linkElement.contentDocument.querySelector(".sidebar")
|
||||
) {
|
||||
// @ts-ignore
|
||||
linkElement.contentDocument.querySelector("#navigation").style =
|
||||
|
|
@ -38,8 +41,8 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
|
|||
linkElement.contentDocument.querySelector(".sidebar").style =
|
||||
"display: none";
|
||||
}
|
||||
setDisplay("inherit");
|
||||
}
|
||||
setDisplay("inherit");
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue