From 47379eb8922892a73f7572bde2ec5e2a060d2cfa Mon Sep 17 00:00:00 2001 From: yaroslav Date: Tue, 27 Jun 2023 21:26:26 +0300 Subject: [PATCH] Rewrite filters to id --- package.json | 2 +- .../CreateTicketForm/CreateTicketForm.tsx | 4 +- .../components/QueueSelect/QueueSelect.tsx | 2 +- src/Pages/FullTicketInfo/FullTicketInfo.tsx | 2 + src/Pages/GeneralTickets/GeneralTickets.tsx | 48 +++++++++++++++---- .../FacultiesFilter/FacultiesFilter.tsx | 15 ++---- .../StatusCheckboxGroup.tsx | 2 +- .../StatusCheckboxGroup/getStatuses.ts | 14 +++--- .../GeneralTickets/generalTickets.inerface.ts | 9 ++++ src/Pages/Layout/components/Header/Header.tsx | 2 +- src/Router/Router.tsx | 2 - src/store/api/api.ts | 4 ++ 12 files changed, 70 insertions(+), 36 deletions(-) create mode 100644 src/Pages/GeneralTickets/generalTickets.inerface.ts diff --git a/package.json b/package.json index 58a989d..7684cba 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "tres", "private": true, - "version": "0.3.2", + "version": "0.3.3", "type": "module", "scripts": { "dev": "vite", diff --git a/src/Pages/CreateTicketForm/CreateTicketForm.tsx b/src/Pages/CreateTicketForm/CreateTicketForm.tsx index 1ca88d5..ca6e8ce 100644 --- a/src/Pages/CreateTicketForm/CreateTicketForm.tsx +++ b/src/Pages/CreateTicketForm/CreateTicketForm.tsx @@ -45,7 +45,7 @@ const CreateTicketForm: FC = () => { }; useEffect(() => { - isSuccess && setValue("faculty", data.faculty); + isSuccess && setValue("faculty", data.faculty.faculty_id); }, [isSuccess, data?.faculty, setValue]); return ( @@ -75,7 +75,7 @@ const CreateTicketForm: FC = () => { }} > ; setValue: UseFormSetValue; diff --git a/src/Pages/FullTicketInfo/FullTicketInfo.tsx b/src/Pages/FullTicketInfo/FullTicketInfo.tsx index 9283028..a6c7bd2 100644 --- a/src/Pages/FullTicketInfo/FullTicketInfo.tsx +++ b/src/Pages/FullTicketInfo/FullTicketInfo.tsx @@ -34,6 +34,8 @@ const FullTicketInfo: FC = () => { container gap={3} sx={{ + pt: 6, + pb: 10, "& > .MuiGrid-root > .MuiTypography-root:not(:first-of-type)": { fontSize: 20, }, diff --git a/src/Pages/GeneralTickets/GeneralTickets.tsx b/src/Pages/GeneralTickets/GeneralTickets.tsx index 291a881..fc8ad4a 100644 --- a/src/Pages/GeneralTickets/GeneralTickets.tsx +++ b/src/Pages/GeneralTickets/GeneralTickets.tsx @@ -13,6 +13,7 @@ import { CustomPagination } from "./components/CustomPagination"; import { useGetTicketsMutation } from "../../store/api/tickets/tickets.api"; import { useJwtDecode } from "../../shared/hooks"; +import { useGetFacultiesQuery, useGetStatusesQuery } from "../../store/api/api"; interface GeneralTicketsPageInfo { data?: { @@ -28,30 +29,57 @@ const GeneralTickets: FC = () => { const [tickets, setTickets] = useState([]); const [totalPage, setTotalPage] = useState(1); + const [facultyId, setFacultyId] = useState(null); const jwt = useJwtDecode(); - const [geTickets, { isLoading, isSuccess }] = useGetTicketsMutation(); + const [geTickets, { isLoading, isSuccess: isTicketsSuccess }] = + useGetTicketsMutation(); + const faculties = useGetFacultiesQuery({}); + const statuses = useGetStatusesQuery({}); const [searchParams, setSearchParams] = useSearchParams(); const ticketsPerRow: number = Number(searchParams.get("ticket_per_row")) || 2; const currentPage: number = Number(searchParams.get("current_page")) || 1; - const faculty: string | null = - searchParams.get("faculty") !== "all_faculties" - ? searchParams.get("faculty") - : ""; + const facultyQuery: string | null = searchParams.get("faculty"); const option: string = jwt ? "tickets" : "anon"; const requestBody = useMemo(() => { - const statuses: string[] = searchParams.get("statuses")?.split(",") || []; + const matchingStatusesId = []; + + if (statuses.isSuccess) { + const statusList = statuses.data?.statuses_list; + const statusesQuery = searchParams + .get("statuses") + ?.split(",") + .map((status: string) => status.toUpperCase()); + + for (const status of statusList) { + if (statusesQuery && statusesQuery.includes(status.name)) { + matchingStatusesId.push(status.status_id); + } + } + } + + if (faculties.isSuccess) { + if (facultyQuery === "all") { + setFacultyId(null); + } else { + setFacultyId( + faculties.data.faculties_list.find( + (faculty: IFaculty) => faculty.name === facultyQuery + )?.faculty_id + ); + } + } return { start_page: currentPage, tickets_count: 3 * ticketsPerRow, - faculty: faculty, - status: statuses, + faculty: facultyId, + status: matchingStatusesId, }; - }, [currentPage, ticketsPerRow, faculty, searchParams]); + }, [currentPage, ticketsPerRow, facultyId, searchParams, statuses.isSuccess]); useEffect(() => { geTickets({ option: option, body: JSON.stringify(requestBody) }).then( @@ -86,7 +114,7 @@ const GeneralTickets: FC = () => { {isLoading && } - {isSuccess && + {isTicketsSuccess && (tickets.length ? ( <> { const { t } = useTranslation(); const { palette }: IPalette = useTheme(); - const [searchParams, setSearchParams] = useSearchParams(); - const faculty = searchParams.get("faculty") || "all_faculties"; - const { data, isSuccess } = useGetFacultiesQuery({}); + const [searchParams, setSearchParams] = useSearchParams(); + const faculty = searchParams.get("faculty") || "all"; + const handleChange = (event: SelectChangeEvent) => { const newFaculty = event.target.value; const params = new URLSearchParams(searchParams.toString()); @@ -59,7 +54,7 @@ const FacultiesFilter: FC = () => { "& .MuiInputBase-input": { pt: 1, pb: 1, width: 150 }, }} > - + diff --git a/src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/StatusCheckboxGroup.tsx b/src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/StatusCheckboxGroup.tsx index 598a7b0..524b8d5 100644 --- a/src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/StatusCheckboxGroup.tsx +++ b/src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/StatusCheckboxGroup.tsx @@ -28,7 +28,7 @@ const StatusCheckboxGroup: FC = () => { const selectedStatuses = statusesFullInfo .filter(status => updatedChecked[status.id]) - .map(status => status.label); + .map(status => status.query); if (params.has("statuses")) { params.set("statuses", selectedStatuses.join(",")); diff --git a/src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/getStatuses.ts b/src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/getStatuses.ts index b84d719..f330cdd 100644 --- a/src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/getStatuses.ts +++ b/src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/getStatuses.ts @@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"; interface StatusFullObject { id: number; + query: string; label: string; color: string; checked: boolean; @@ -20,21 +21,25 @@ export const useGetStatusesFullObject = ( return [ { id: 0, + query: "accepted", label: t("statusesFilter.accepted"), color: "#E09C36", }, { id: 1, + query: "open", label: t("statusesFilter.open"), color: "#2982D3", }, { id: 2, + query: "waiting", label: t("statusesFilter.waiting"), color: "#9E3DFF", }, { id: 3, + query: "close", label: t("statusesFilter.close"), color: "#68B651", }, @@ -46,12 +51,5 @@ export const useGetStatusesFullObject = ( }; export const useGetStatusesName = (): string[] => { - const { t } = useTranslation(); - - return [ - t("statusesFilter.accepted"), - t("statusesFilter.open"), - t("statusesFilter.waiting"), - t("statusesFilter.close"), - ]; + return ["accepted", "open", "waiting", "close"]; }; diff --git a/src/Pages/GeneralTickets/generalTickets.inerface.ts b/src/Pages/GeneralTickets/generalTickets.inerface.ts new file mode 100644 index 0000000..136252c --- /dev/null +++ b/src/Pages/GeneralTickets/generalTickets.inerface.ts @@ -0,0 +1,9 @@ +interface IFaculty { + faculty_id: number; + name: string; +} + +interface IStatus { + status_id: number; + name: string; +} diff --git a/src/Pages/Layout/components/Header/Header.tsx b/src/Pages/Layout/components/Header/Header.tsx index bd916b4..5c62606 100644 --- a/src/Pages/Layout/components/Header/Header.tsx +++ b/src/Pages/Layout/components/Header/Header.tsx @@ -43,7 +43,7 @@ const Header: FC = ({ const isNeedStepBack: boolean = isFullTicketInfo || isCreateTicket; const handleClick = (): void => { - navigate(-2); + navigate(-1); }; return ( diff --git a/src/Router/Router.tsx b/src/Router/Router.tsx index 87198e3..fd52f1b 100644 --- a/src/Router/Router.tsx +++ b/src/Router/Router.tsx @@ -41,8 +41,6 @@ const Router: FC = () => { useEffect(() => { if (!isAuth && pathname !== endpoints.generalTickets) { navigate(endpoints.generalTickets); - } else { - setSearchParams(new URLSearchParams(search)); } }, [pathname, search, setSearchParams, isAuth, navigate]); diff --git a/src/store/api/api.ts b/src/store/api/api.ts index ac82a93..2209f09 100644 --- a/src/store/api/api.ts +++ b/src/store/api/api.ts @@ -15,6 +15,9 @@ export const api = createApi({ getFaculties: builder.query({ query: () => "/meta/get_faculties", }), + getStatuses: builder.query({ + query: () => "/meta/get_statuses", + }), // signup: builder.mutation({ // query: ({ body }) => ({ // url: "/registration/", @@ -54,5 +57,6 @@ export const { useGetUpdatesQuery, useLoginMutation, useGetFacultiesQuery, + useGetStatusesQuery, useGetQueueByFacultyMutation, } = api;