devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature-paypal-simple

Browse Source
This commit is contained in:
Joao Ramos
2024-03-05 14:45:51 +00:00
parent a86ed9f76c 20b52d049d
commit 2a27fbd02f
16 changed files with 1588 additions and 1000 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/tickets.tsx
View File

@@ -11,6 +11,7 @@ import {
TicketStatusLabel,
TicketType,
TicketTypeLabel,
TicketWithCorporate,
} from "@/interfaces/ticket";
import { sessionOptions } from "@/lib/session";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
@@ -28,7 +29,7 @@ import { useEffect, useState } from "react";
import { BsArrowDown, BsArrowUp } from "react-icons/bs";
import { ToastContainer } from "react-toastify";
const columnHelper = createColumnHelper<Ticket>();
const columnHelper = createColumnHelper<TicketWithCorporate>();
export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
const user = req.session.user;
@@ -75,10 +76,26 @@ const TypesClassNames: { [key in TicketType]: string } = {
help: "bg-mti-blue-light",
};
const escapedURL = process.env.NEXT_PUBLIC_WEBSITE_URL || ''.replace(
/[.*+?^${}()|[\]\\]/g,
"\\$&"
);
const fromHomepage = [new RegExp(`^${escapedURL}`), /\/contact$/];
type Source = "webpage" | "platform" | "";
const SOURCE_OPTIONS = [
{ value: "", label: "All" },
{ value: "webpage", label: "Webpage" },
{ value: "platform", label: "Platform" },
]
export default function Tickets() {
const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
const [selectedTicket, setSelectedTicket] = useState<Ticket>();
const [assigneeFilter, setAssigneeFilter] = useState<string>();
const [sourceFilter, setSourceFilter] = useState<Source>("");
const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
const [typeFilter, setTypeFilter] = useState<TicketType>();
@@ -90,7 +107,7 @@ export default function Tickets() {
const sortByDate = (a: Ticket, b: Ticket) => {
return moment((dateSorting === "desc" ? b : a).date).diff(
moment((dateSorting === "desc" ? a : b).date),
moment((dateSorting === "desc" ? a : b).date)
);
};
@@ -102,11 +119,16 @@ export default function Tickets() {
if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter);
if (assigneeFilter)
filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
if (sourceFilter) {
if (sourceFilter === "webpage")
filters.push((x: Ticket) => fromHomepage.some((r) => r.test(x.reportedFrom)));
if (sourceFilter === "platform")
filters.push((x: Ticket) => !fromHomepage.some((r) => r.test(x.reportedFrom)));
}
setFilteredTickets(
[...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate),
[...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate)
);
}, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user]);
}, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user, sourceFilter]);
const columns = [
columnHelper.accessor("id", {
@@ -119,7 +141,7 @@ export default function Tickets() {
<span
className={clsx(
"rounded-lg p-1 px-2 text-white",
TypesClassNames[info.getValue()],
TypesClassNames[info.getValue()]
)}
>
{TicketTypeLabel[info.getValue()]}
@@ -164,7 +186,7 @@ export default function Tickets() {
<span
className={clsx(
"rounded-lg p-1 px-2 text-white",
StatusClassNames[info.getValue()],
StatusClassNames[info.getValue()]
)}
>
{TicketStatusLabel[info.getValue()]}
@@ -175,6 +197,10 @@ export default function Tickets() {
header: "Assignee",
cell: (info) => users.find((x) => x.id === info.getValue())?.name || "",
}),
columnHelper.accessor("corporate", {
header: "Corporate",
cell: (info) => info.getValue(),
}),
];
const getAssigneeValue = () => {
@@ -290,7 +316,7 @@ export default function Tickets() {
{ value: "me", label: "Assigned to me" },
...users
.filter((x) =>
["admin", "developer", "agent"].includes(x.type),
["admin", "developer", "agent"].includes(x.type)
)
.map((u) => ({
value: u.id,
@@ -302,7 +328,7 @@ export default function Tickets() {
onChange={(value) =>
value
? setAssigneeFilter(
value.value === "me" ? user.id : value.value,
value.value === "me" ? user.id : value.value
)
: setAssigneeFilter(undefined)
}
@@ -310,6 +336,18 @@ export default function Tickets() {
isClearable
/>
</div>
<div className="flex w-full flex-col gap-3">
<label className="text-mti-gray-dim text-base font-normal">
Source
</label>
<Select
options={SOURCE_OPTIONS}
disabled={user.type === "agent"}
value={SOURCE_OPTIONS.find((x) => x.value === sourceFilter)}
onChange={(value) => setSourceFilter(value?.value as Source)
}
/>
</div>
</div>
<table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
@@ -322,7 +360,7 @@ export default function Tickets() {
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
header.getContext()
)}
</th>
))}
@@ -334,7 +372,7 @@ export default function Tickets() {
<tr
className={clsx(
"even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
"transition duration-300 ease-in-out",
"transition duration-300 ease-in-out"
)}
onClick={() => setSelectedTicket(row.original)}
key={row.id}
@@ -343,7 +381,7 @@ export default function Tickets() {
<td className="w-fit items-center px-4 py-2" key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
cell.getContext()
)}
</td>
))}