Merge pull request 'table-filter' (#50) from table-filter into develop
Reviewed-on: https://repo.ravanertebat.com/TM/tm_panel/pulls/50 Reviewed-by: Sina Nakhostin <s.nakhostin@ravanertebat.com>
This commit is contained in:
Sina Nakhostin
@@ -0,0 +1,98 @@
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { Select } from "@/components/FormElements/select";
|
||||
import { Currencies } from "@/constants/enums";
|
||||
import {
|
||||
FieldValues,
|
||||
UseFormHandleSubmit,
|
||||
UseFormRegister,
|
||||
UseFormSetValue,
|
||||
UseFormWatch,
|
||||
} from "react-hook-form";
|
||||
|
||||
interface CompanyListFiltersProps {
|
||||
filterRegister: UseFormRegister<FieldValues>;
|
||||
setIsFilterModalOpen: (isOpen: boolean) => void;
|
||||
isMutating: number;
|
||||
handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
|
||||
search: (data: any) => void;
|
||||
watch: UseFormWatch<FieldValues>;
|
||||
setValue: UseFormSetValue<any>;
|
||||
}
|
||||
|
||||
const CompanyListFilters = ({
|
||||
filterRegister,
|
||||
setIsFilterModalOpen,
|
||||
isMutating,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setValue,
|
||||
}: CompanyListFiltersProps) => {
|
||||
return (
|
||||
<form
|
||||
className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
|
||||
onSubmit={handleFilterSubmit(search)}
|
||||
>
|
||||
<InputGroup
|
||||
{...filterRegister("name")}
|
||||
name="name"
|
||||
label="name"
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("email")}
|
||||
name="email"
|
||||
label="email"
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("phone")}
|
||||
name="phone"
|
||||
label="phone"
|
||||
placeholder="Phone"
|
||||
type="tel"
|
||||
/>
|
||||
<Select
|
||||
{...filterRegister("currency")}
|
||||
items={Currencies}
|
||||
label="currency"
|
||||
name="currency"
|
||||
placeholder="Currency"
|
||||
clearable
|
||||
value={watch("currency")}
|
||||
onClear={() => setValue("currency", undefined)}
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("employee_count")}
|
||||
name="employee_count"
|
||||
label="employee count"
|
||||
placeholder="Employee Count"
|
||||
type="number"
|
||||
/>
|
||||
|
||||
<div className="flex gap-4 col-span-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
|
||||
>
|
||||
{isMutating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
|
||||
) : (
|
||||
<span>Search</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
|
||||
onClick={() => setIsFilterModalOpen(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyListFilters;
|
||||
@@ -0,0 +1,79 @@
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { Select } from "@/components/FormElements/select";
|
||||
import {
|
||||
FieldValues,
|
||||
UseFormHandleSubmit,
|
||||
UseFormRegister,
|
||||
UseFormSetValue,
|
||||
UseFormWatch,
|
||||
} from "react-hook-form";
|
||||
|
||||
interface CompanyCategoryListFiltersProps {
|
||||
filterRegister: UseFormRegister<FieldValues>;
|
||||
setIsFilterModalOpen: (isOpen: boolean) => void;
|
||||
isMutating: number;
|
||||
handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
|
||||
search: (data: any) => void;
|
||||
watch: UseFormWatch<FieldValues>;
|
||||
setValue: UseFormSetValue<any>;
|
||||
}
|
||||
|
||||
const CompanyCategoryListFilters = ({
|
||||
filterRegister,
|
||||
setIsFilterModalOpen,
|
||||
isMutating,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setValue,
|
||||
}: CompanyCategoryListFiltersProps) => {
|
||||
return (
|
||||
<form
|
||||
className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
|
||||
onSubmit={handleFilterSubmit(search)}
|
||||
>
|
||||
<InputGroup
|
||||
{...filterRegister("q")}
|
||||
name="q"
|
||||
label="search"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
/>
|
||||
<Select
|
||||
{...filterRegister("published")}
|
||||
items={[
|
||||
{ label: "Published", value: "true" },
|
||||
{ label: "Not Published", value: "false" },
|
||||
]}
|
||||
label="published"
|
||||
name="published"
|
||||
placeholder="Published Status"
|
||||
clearable
|
||||
value={watch("published")}
|
||||
onClear={() => setValue("published", undefined)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
|
||||
>
|
||||
{isMutating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
|
||||
) : (
|
||||
<span>Search</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
|
||||
onClick={() => setIsFilterModalOpen(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyCategoryListFilters;
|
||||
@@ -14,10 +14,12 @@ import {
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import { unixToDate } from "@/utils/shared";
|
||||
import Link from "next/link";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import { Skeleton } from "../../../ui/skeleton";
|
||||
import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";
|
||||
import ListHeader from "@/components/ui/ListHeader";
|
||||
import CompanyCategoryListFilters from "./CompanyCategoryListFilters";
|
||||
import Modal from "@/components/ui/modal";
|
||||
|
||||
const CompanyCategoriesTable = () => {
|
||||
const {
|
||||
@@ -32,13 +34,22 @@ const CompanyCategoriesTable = () => {
|
||||
setCurrentCategory,
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setFilterValue,
|
||||
isMutating,
|
||||
} = useCompanyCategoriesPresenter();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
|
||||
<button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
|
||||
<Link href={`${pathName}/create`}>Create category</Link>
|
||||
</button>
|
||||
<ListHeader
|
||||
onFilter={() => setIsFilterModalOpen(true)}
|
||||
createButtonText="Create Category"
|
||||
/>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
@@ -123,6 +134,22 @@ const CompanyCategoriesTable = () => {
|
||||
</IsVisible>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Modal
|
||||
isOpen={isFilterModalOpen}
|
||||
onClose={() => setIsFilterModalOpen(false)}
|
||||
classNames="w-full xl:w-1/2"
|
||||
showButtons={false}
|
||||
>
|
||||
<CompanyCategoryListFilters
|
||||
setValue={setFilterValue}
|
||||
filterRegister={filterRegister}
|
||||
handleFilterSubmit={handleFilterSubmit}
|
||||
isMutating={isMutating as number}
|
||||
search={search}
|
||||
setIsFilterModalOpen={setIsFilterModalOpen}
|
||||
watch={watch}
|
||||
/>
|
||||
</Modal>
|
||||
{isModalOpen && (
|
||||
<ConfirmationModal
|
||||
isOpen={isModalOpen}
|
||||
|
||||
+48
-6
@@ -6,22 +6,56 @@ import {
|
||||
useToggleCompanyCategoryPublished,
|
||||
} from "@/hooks/queries";
|
||||
import { TCompanyCategory } from "@/lib/api";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { deleteEmptyKeys } from "@/utils/shared";
|
||||
import { useIsMutating } from "@tanstack/react-query";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
const useCompanyCategoriesPresenter = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
|
||||
const [currentCategory, setCurrentCategory] = useState<TCompanyCategory>();
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
...apiDefaultParams,
|
||||
});
|
||||
const [params, setParams] = useState<Record<string, any>>({});
|
||||
const router = useRouter();
|
||||
const pathName = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const isMutating = useIsMutating();
|
||||
|
||||
const {
|
||||
register: filterRegister,
|
||||
handleSubmit: handleFilterSubmit,
|
||||
reset: filterFormReset,
|
||||
watch,
|
||||
setValue: setFilterValue,
|
||||
} = useForm();
|
||||
|
||||
useEffect(() => {
|
||||
const newParams: Record<string, any> = {
|
||||
...apiDefaultParams,
|
||||
};
|
||||
for (const [key, value] of searchParams.entries()) {
|
||||
newParams[key] = value;
|
||||
}
|
||||
setParams(newParams);
|
||||
filterFormReset(newParams);
|
||||
}, [searchParams, filterFormReset]);
|
||||
|
||||
const { data, isLoading, isError } = useCompanyCategoriesQuery(params);
|
||||
const { mutate: deleteCategory } = useDeleteCompanyCategoryQuery(() =>
|
||||
setIsModalOpen(false),
|
||||
);
|
||||
const {mutate:togglePublished,isPending:isToggling} = useToggleCompanyCategoryPublished()
|
||||
const { mutate: togglePublished, isPending: isToggling } =
|
||||
useToggleCompanyCategoryPublished();
|
||||
|
||||
const search = (data: any) => {
|
||||
const newParams = { ...params, ...data };
|
||||
const cleanedParams = deleteEmptyKeys(newParams);
|
||||
const queryString = new URLSearchParams(cleanedParams).toString();
|
||||
router.push(`${pathName}?${queryString}`);
|
||||
setIsFilterModalOpen(false);
|
||||
};
|
||||
|
||||
const onConfirmDelete = () => {
|
||||
if (!currentCategory) return;
|
||||
deleteCategory(currentCategory?.id);
|
||||
@@ -41,6 +75,14 @@ const useCompanyCategoriesPresenter = () => {
|
||||
isToggling,
|
||||
setCurrentCategory,
|
||||
onConfirmDelete,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setFilterValue,
|
||||
isMutating,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -17,9 +17,11 @@ import {
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import { formatPhoneNumber } from "@/utils/shared";
|
||||
import Link from "next/link";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import { useCompanyListPresenter } from "./useCompanyListPresenter";
|
||||
import ListHeader from "@/components/ui/ListHeader";
|
||||
import Modal from "@/components/ui/modal";
|
||||
import CompanyListFilters from "./CompanyListFilters";
|
||||
|
||||
const CompaniesTable = () => {
|
||||
const {
|
||||
@@ -33,12 +35,21 @@ const CompaniesTable = () => {
|
||||
setCurrentCompany,
|
||||
onConfirmDelete,
|
||||
modalConfig,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setFilterValue,
|
||||
isMutating,
|
||||
} = useCompanyListPresenter();
|
||||
return (
|
||||
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
|
||||
<button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
|
||||
<Link href={`${pathName}/create`}>Create Company</Link>
|
||||
</button>
|
||||
<ListHeader
|
||||
onFilter={() => setIsFilterModalOpen(true)}
|
||||
createButtonText="Create Company"
|
||||
/>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
@@ -149,6 +160,22 @@ const CompaniesTable = () => {
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Modal
|
||||
isOpen={isFilterModalOpen}
|
||||
onClose={() => setIsFilterModalOpen(false)}
|
||||
classNames="w-full xl:w-1/2"
|
||||
showButtons={false}
|
||||
>
|
||||
<CompanyListFilters
|
||||
setValue={setFilterValue}
|
||||
filterRegister={filterRegister}
|
||||
handleFilterSubmit={handleFilterSubmit}
|
||||
isMutating={isMutating as number}
|
||||
search={search}
|
||||
setIsFilterModalOpen={setIsFilterModalOpen}
|
||||
watch={watch}
|
||||
/>
|
||||
</Modal>
|
||||
{isModalOpen && (
|
||||
<ConfirmationModal
|
||||
isOpen={isModalOpen}
|
||||
|
||||
@@ -4,26 +4,37 @@ import {
|
||||
useCompaniesInfiniteQuery,
|
||||
useDeleteCompanyQuery,
|
||||
} from "@/hooks/queries";
|
||||
import useDebounce from "@/hooks/useDebounce";
|
||||
import { TCompany } from "@/lib/api";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { ChangeEvent, useEffect, useRef, useState } from "react";
|
||||
import { deleteEmptyKeys } from "@/utils/shared";
|
||||
import { useIsMutating } from "@tanstack/react-query";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import { z } from "zod";
|
||||
|
||||
export const useCompanyListPresenter = () => {
|
||||
const deleteModal = useRef<HTMLDialogElement | null>(null);
|
||||
const { inView } = useInView({ threshold: 0.5 });
|
||||
const [currentCompany, setCurrentCompany] = useState<TCompany | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
|
||||
const [modalConfig, setModalConfig] = useState<
|
||||
Partial<ConfirmationModalProps>
|
||||
>({});
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
sort: "created_at",
|
||||
});
|
||||
const [params, setParams] = useState<Record<string, any>>({});
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const router = useRouter();
|
||||
const pathName = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const isMutating = useIsMutating();
|
||||
|
||||
const {
|
||||
register: filterRegister,
|
||||
handleSubmit: handleFilterSubmit,
|
||||
reset: filterFormReset,
|
||||
watch,
|
||||
setValue: setFilterValue,
|
||||
} = useForm();
|
||||
|
||||
const columns = [
|
||||
"row",
|
||||
"name",
|
||||
@@ -31,14 +42,23 @@ export const useCompanyListPresenter = () => {
|
||||
"phone",
|
||||
"country",
|
||||
"state",
|
||||
|
||||
"language",
|
||||
"currency",
|
||||
"employee count",
|
||||
"actions",
|
||||
];
|
||||
const pathName = usePathname();
|
||||
const debouncedSearch = useDebounce(search, 1000);
|
||||
|
||||
useEffect(() => {
|
||||
const newParams: Record<string, any> = {
|
||||
sort: "created_at",
|
||||
};
|
||||
for (const [key, value] of searchParams.entries()) {
|
||||
newParams[key] = value;
|
||||
}
|
||||
setParams(newParams);
|
||||
filterFormReset(newParams);
|
||||
}, [searchParams, filterFormReset]);
|
||||
|
||||
const {
|
||||
data,
|
||||
error,
|
||||
@@ -48,24 +68,23 @@ export const useCompanyListPresenter = () => {
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
} = useCompaniesInfiniteQuery(params);
|
||||
|
||||
useEffect(() => {
|
||||
if (inView && hasNextPage && data && data.pages.length < 5) {
|
||||
fetchNextPage();
|
||||
}
|
||||
}, [inView, hasNextPage, data, fetchNextPage]);
|
||||
|
||||
const { mutate: deleteCompany } = useDeleteCompanyQuery(() =>
|
||||
setIsModalOpen(false),
|
||||
);
|
||||
useEffect(() => {
|
||||
const result = z.string().safeParse(debouncedSearch);
|
||||
if (result.success) {
|
||||
setParams((prevParams) => ({
|
||||
...prevParams,
|
||||
}));
|
||||
}
|
||||
}, [debouncedSearch]);
|
||||
const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value);
|
||||
|
||||
const search = (data: any) => {
|
||||
const newParams = { ...params, ...data };
|
||||
const cleanedParams = deleteEmptyKeys(newParams);
|
||||
const queryString = new URLSearchParams(cleanedParams).toString();
|
||||
router.push(`${pathName}?${queryString}`);
|
||||
setIsFilterModalOpen(false);
|
||||
};
|
||||
const onConfirmDelete = () => {
|
||||
if (currentCompany) {
|
||||
@@ -75,7 +94,6 @@ export const useCompanyListPresenter = () => {
|
||||
const allCompanies = data?.pages.flatMap((page) => page.data.companies) ?? [];
|
||||
return {
|
||||
allCompanies,
|
||||
handleFilterChange,
|
||||
onConfirmDelete,
|
||||
deleteCompany,
|
||||
isFetchingNextPage,
|
||||
@@ -95,6 +113,13 @@ export const useCompanyListPresenter = () => {
|
||||
router,
|
||||
isPending,
|
||||
isError,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setFilterValue,
|
||||
isMutating,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import { Select } from "@/components/FormElements/select";
|
||||
import { AdminRoles, CustomerStatus, CustomerType } from "@/constants/enums";
|
||||
import { getEnumAsArray } from "@/utils/shared";
|
||||
import {
|
||||
FieldValues,
|
||||
UseFormHandleSubmit,
|
||||
UseFormRegister,
|
||||
UseFormSetValue,
|
||||
UseFormWatch,
|
||||
} from "react-hook-form";
|
||||
|
||||
interface CustomerListFiltersProps {
|
||||
filterRegister: UseFormRegister<FieldValues>;
|
||||
setIsFilterModalOpen: (isOpen: boolean) => void;
|
||||
isMutating: number;
|
||||
handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
|
||||
search: (data: any) => void;
|
||||
watch: UseFormWatch<FieldValues>;
|
||||
setValue: UseFormSetValue<any>;
|
||||
}
|
||||
|
||||
const CustomerListFilters = ({
|
||||
filterRegister,
|
||||
setIsFilterModalOpen,
|
||||
isMutating,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setValue,
|
||||
}: CustomerListFiltersProps) => {
|
||||
return (
|
||||
<form
|
||||
className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
|
||||
onSubmit={handleFilterSubmit(search)}
|
||||
>
|
||||
<Select
|
||||
{...filterRegister("status")}
|
||||
items={getEnumAsArray(CustomerStatus)}
|
||||
label="status"
|
||||
name="status"
|
||||
placeholder="Status"
|
||||
clearable
|
||||
value={watch("status")}
|
||||
onClear={() => setValue("status", undefined)}
|
||||
/>
|
||||
<Select
|
||||
{...filterRegister("role")}
|
||||
items={getEnumAsArray(AdminRoles)}
|
||||
label="role"
|
||||
name="role"
|
||||
placeholder="Role"
|
||||
clearable
|
||||
value={watch("role")}
|
||||
onClear={() => setValue("role", undefined)}
|
||||
/>
|
||||
<Select
|
||||
{...filterRegister("type")}
|
||||
items={getEnumAsArray(CustomerType)}
|
||||
label="type"
|
||||
name="type"
|
||||
placeholder="Type"
|
||||
clearable
|
||||
value={watch("type")}
|
||||
onClear={() => setValue("type", undefined)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4 col-span-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
|
||||
>
|
||||
{isMutating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
|
||||
) : (
|
||||
<span>Search</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
|
||||
onClick={() => setIsFilterModalOpen(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerListFilters;
|
||||
@@ -1,6 +1,11 @@
|
||||
"use client";
|
||||
import { ExclamationIcon, PencilSquareIcon, TrashIcon } from "@/assets/icons";
|
||||
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
|
||||
import { Building } from "@/components/Layouts/sidebar/icons";
|
||||
import ConfirmationModal from "@/components/ui/ConfirmationModal";
|
||||
import ListHeader from "@/components/ui/ListHeader";
|
||||
import Modal from "@/components/ui/modal";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -9,18 +14,14 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import Link from "next/link";
|
||||
import useCustomerListPresenter from "./useCustomerListPresenter";
|
||||
|
||||
import { Building } from "@/components/Layouts/sidebar/icons";
|
||||
import Modal from "@/components/ui/modal";
|
||||
import Status from "@/components/ui/Status";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import { unixToDate } from "@/utils/shared";
|
||||
import { toast } from "react-toastify";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
|
||||
import CustomerListFilters from "./CustomerListFilters";
|
||||
import useCustomerListPresenter from "./useCustomerListPresenter";
|
||||
|
||||
const CustomersTable = () => {
|
||||
const {
|
||||
@@ -39,12 +40,21 @@ const CustomersTable = () => {
|
||||
setCurrentCustomer,
|
||||
isAssignCompanyModalOpen,
|
||||
setIsAssignCompanyModalOpen,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setFilterValue,
|
||||
isMutating,
|
||||
} = useCustomerListPresenter();
|
||||
return (
|
||||
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
|
||||
<button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
|
||||
<Link href={`${pathName}/create`}>Create Customer </Link>
|
||||
</button>
|
||||
<ListHeader
|
||||
onFilter={() => setIsFilterModalOpen(true)}
|
||||
createButtonText="Create Customer"
|
||||
/>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
@@ -61,99 +71,121 @@ const CustomersTable = () => {
|
||||
</TableHeader>
|
||||
{isPending && <TableSkeleton column={columns.length} />}
|
||||
<TableBody>
|
||||
{allCustomers.map((customer, index) => (
|
||||
<TableRow key={customer.id}>
|
||||
<TableCell colSpan={100}>{index + 1}</TableCell>
|
||||
<TableCell colSpan={100}>{customer.full_name}</TableCell>
|
||||
<TableCell colSpan={100}>{customer.email}</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{unixToDate({ unix: customer.created_at, hasTime: true })}
|
||||
</TableCell>
|
||||
<EmptyListWrapper
|
||||
list={allCustomers ?? []}
|
||||
columns={columns}
|
||||
emptyMessage="No Customers were found"
|
||||
>
|
||||
{allCustomers?.map((customer, index) => (
|
||||
<TableRow key={customer?.id ?? index}>
|
||||
<TableCell colSpan={100}>{index + 1}</TableCell>
|
||||
<TableCell colSpan={100}>{customer?.full_name}</TableCell>
|
||||
<TableCell colSpan={100}>{customer?.email}</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{unixToDate({ unix: customer?.created_at, hasTime: true })}
|
||||
</TableCell>
|
||||
|
||||
<TableCell colSpan={100} className="uppercase">
|
||||
{customer.type}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
<Status status={customer.status}>{customer.status}</Status>
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{customer.companies?.length ? (
|
||||
customer.companies.map((c) => (
|
||||
<span key={c.id}>{c.name}, </span>
|
||||
))
|
||||
) : (
|
||||
<span>None</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100} className="uppercase">
|
||||
{customer.role ?? "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-start xl:pr-7.5">
|
||||
<div className="flex items-center justify-start gap-x-3.5">
|
||||
<button
|
||||
data-tooltip-id="delete"
|
||||
data-tooltip-content="Delete"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-red-500"
|
||||
onClick={() => {
|
||||
setCurrentCustomer(customer);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
|
||||
<span className="sr-only">Delete Company </span>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="edit"
|
||||
data-tooltip-content="Edit"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
router.push(`${pathName}/edit/${customer.id}`)
|
||||
}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
|
||||
<span className="sr-only">Edit Company </span>
|
||||
<PencilSquareIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="assign-company"
|
||||
data-tooltip-content="Assign to company"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-green-dark"
|
||||
onClick={() => {
|
||||
setCurrentCustomer(customer);
|
||||
setIsAssignCompanyModalOpen(true);
|
||||
setSelectedCompanies({
|
||||
company_ids: [customer?.companies?.[0]?.id ?? ""],
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
{..._TooltipDefaultParams({ id: "assign-company" })}
|
||||
/>
|
||||
<span className="sr-only">Assign To Company </span>
|
||||
<Building />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="feedback"
|
||||
data-tooltip-content="Feedback"
|
||||
data-tooltip-place="top"
|
||||
className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
|
||||
onClick={() => {
|
||||
router.push(`${pathName}/feedback/${customer.id}`);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
|
||||
<ExclamationIcon />
|
||||
</button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
<TableCell colSpan={100} className="uppercase">
|
||||
{customer?.type}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
<Status status={customer?.status}>{customer?.status}</Status>
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{customer?.companies?.length ? (
|
||||
customer?.companies.map((c) => (
|
||||
<span key={c.id}>{c.name}, </span>
|
||||
))
|
||||
) : (
|
||||
<span>None</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100} className="uppercase">
|
||||
{customer?.role ?? "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-start xl:pr-7.5">
|
||||
<div className="flex items-center justify-start gap-x-3.5">
|
||||
<button
|
||||
data-tooltip-id="delete"
|
||||
data-tooltip-content="Delete"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-red-500"
|
||||
onClick={() => {
|
||||
setCurrentCustomer(customer);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
|
||||
<span className="sr-only">Delete Company </span>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="edit"
|
||||
data-tooltip-content="Edit"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
router.push(`${pathName}/edit/${customer.id}`)
|
||||
}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
|
||||
<span className="sr-only">Edit Company </span>
|
||||
<PencilSquareIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="assign-company"
|
||||
data-tooltip-content="Assign to company"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-green-dark"
|
||||
onClick={() => {
|
||||
setCurrentCustomer(customer);
|
||||
setIsAssignCompanyModalOpen(true);
|
||||
setSelectedCompanies({
|
||||
company_ids: [customer?.companies?.[0]?.id ?? ""],
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
{..._TooltipDefaultParams({ id: "assign-company" })}
|
||||
/>
|
||||
<span className="sr-only">Assign To Company </span>
|
||||
<Building />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="feedback"
|
||||
data-tooltip-content="Feedback"
|
||||
data-tooltip-place="top"
|
||||
className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
|
||||
onClick={() => {
|
||||
router.push(`${pathName}/feedback/${customer.id}`);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
|
||||
<ExclamationIcon />
|
||||
</button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</EmptyListWrapper>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Modal
|
||||
isOpen={isFilterModalOpen}
|
||||
onClose={() => setIsFilterModalOpen(false)}
|
||||
classNames="w-full xl:w-1/2"
|
||||
showButtons={false}
|
||||
>
|
||||
<CustomerListFilters
|
||||
setValue={setFilterValue}
|
||||
filterRegister={filterRegister}
|
||||
handleFilterSubmit={handleFilterSubmit}
|
||||
isMutating={isMutating as number}
|
||||
search={search}
|
||||
setIsFilterModalOpen={setIsFilterModalOpen}
|
||||
watch={watch}
|
||||
/>
|
||||
</Modal>
|
||||
<div className="w-1/12">
|
||||
<Modal
|
||||
onConfirm={() => {
|
||||
|
||||
@@ -6,12 +6,16 @@ import {
|
||||
useDeleteCustomerQuery,
|
||||
} from "@/hooks/queries";
|
||||
import { TAssignCustomerToCompanyCredentials, TCustomer } from "@/lib/api";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { deleteEmptyKeys } from "@/utils/shared";
|
||||
import { useIsMutating } from "@tanstack/react-query";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
const useCustomerListPresenter = () => {
|
||||
const [isAssignCompanyModalOpen, setIsAssignCompanyModalOpen] =
|
||||
useState(false);
|
||||
const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
|
||||
const [selectedCompanies, setSelectedCompanies] = useState<
|
||||
TAssignCustomerToCompanyCredentials | undefined
|
||||
>();
|
||||
@@ -21,10 +25,30 @@ const useCustomerListPresenter = () => {
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const pathName = usePathname();
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
sort: "created_at",
|
||||
});
|
||||
const searchParams = useSearchParams();
|
||||
const [params, setParams] = useState<Record<string, any>>({});
|
||||
const router = useRouter();
|
||||
const isMutating = useIsMutating();
|
||||
|
||||
const {
|
||||
register: filterRegister,
|
||||
handleSubmit: handleFilterSubmit,
|
||||
reset: filterFormReset,
|
||||
watch,
|
||||
setValue: setFilterValue,
|
||||
} = useForm();
|
||||
|
||||
useEffect(() => {
|
||||
const newParams: Record<string, any> = {
|
||||
sort: "created_at",
|
||||
};
|
||||
for (const [key, value] of searchParams.entries()) {
|
||||
newParams[key] = value;
|
||||
}
|
||||
setParams(newParams);
|
||||
filterFormReset(newParams);
|
||||
}, [searchParams, filterFormReset]);
|
||||
|
||||
const { data, isPending } = useCustomersInfiniteQuery(params);
|
||||
const { mutate: deleteCustomer } = useDeleteCustomerQuery(() =>
|
||||
setIsModalOpen(false),
|
||||
@@ -35,6 +59,15 @@ const useCustomerListPresenter = () => {
|
||||
setIsAssignCompanyModalOpen(false);
|
||||
},
|
||||
);
|
||||
|
||||
const search = (data: any) => {
|
||||
const newParams = { ...params, ...data };
|
||||
const cleanedParams = deleteEmptyKeys(newParams);
|
||||
const queryString = new URLSearchParams(cleanedParams).toString();
|
||||
router.push(`${pathName}?${queryString}`);
|
||||
setIsFilterModalOpen(false);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
"row",
|
||||
"full name",
|
||||
@@ -69,6 +102,14 @@ const useCustomerListPresenter = () => {
|
||||
router,
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setFilterValue,
|
||||
isMutating,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { Select } from "@/components/FormElements/select";
|
||||
import { Countries } from "@/constants/countries";
|
||||
import { TenderStatus } from "@/constants/enums";
|
||||
import { getEnumAsArray } from "@/utils/shared";
|
||||
import {
|
||||
FieldValues,
|
||||
UseFormHandleSubmit,
|
||||
UseFormRegister,
|
||||
UseFormSetValue,
|
||||
UseFormWatch,
|
||||
} from "react-hook-form";
|
||||
|
||||
interface TenderListFiltersProps {
|
||||
filterRegister: UseFormRegister<FieldValues>;
|
||||
setIsFilterModalOpen: (isOpen: boolean) => void;
|
||||
isMutating: number;
|
||||
handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
|
||||
search: (data: any) => void;
|
||||
watch: UseFormWatch<FieldValues>;
|
||||
setValue: UseFormSetValue<any>;
|
||||
}
|
||||
|
||||
const TenderListFilters = ({
|
||||
filterRegister,
|
||||
setIsFilterModalOpen,
|
||||
isMutating,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setValue,
|
||||
}: TenderListFiltersProps) => {
|
||||
return (
|
||||
<form
|
||||
className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
|
||||
onSubmit={handleFilterSubmit(search)}
|
||||
>
|
||||
<InputGroup
|
||||
{...filterRegister("title")}
|
||||
name="title"
|
||||
label="title"
|
||||
placeholder="Title"
|
||||
type="text"
|
||||
/>
|
||||
<Select
|
||||
{...filterRegister("status")}
|
||||
items={getEnumAsArray(TenderStatus)}
|
||||
label="status"
|
||||
name="status"
|
||||
placeholder="Status"
|
||||
clearable
|
||||
value={watch("status")}
|
||||
onClear={() => setValue("status", undefined)}
|
||||
/>
|
||||
<Select
|
||||
{...filterRegister("country_code")}
|
||||
items={Countries}
|
||||
label="country code"
|
||||
name="country_code"
|
||||
placeholder="Country Code"
|
||||
clearable
|
||||
value={watch("country_code")}
|
||||
onClear={() => setValue("country_code", undefined)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4 col-span-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
|
||||
>
|
||||
{isMutating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
|
||||
) : (
|
||||
<span>Search</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
|
||||
onClick={() => setIsFilterModalOpen(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default TenderListFilters;
|
||||
@@ -13,17 +13,38 @@ import { Tooltip } from "react-tooltip";
|
||||
import useTenderListPresenter from "./useTenderListPresenter";
|
||||
|
||||
import { ExclamationIcon, EyeIcon } from "@/assets/icons";
|
||||
import ListHeader from "@/components/ui/ListHeader";
|
||||
import Modal from "@/components/ui/modal";
|
||||
import Pagination from "@/components/ui/pagination";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Link from "next/link";
|
||||
import TenderListFilters from "./TenderListFilters";
|
||||
const TendersTable = () => {
|
||||
const { allTenders, isPending, router, pathName, setParams, columns } =
|
||||
useTenderListPresenter();
|
||||
const {
|
||||
allTenders,
|
||||
isPending,
|
||||
router,
|
||||
pathName,
|
||||
setParams,
|
||||
columns,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setFilterValue,
|
||||
isMutating,
|
||||
} = useTenderListPresenter();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
|
||||
<ListHeader
|
||||
onFilter={() => setIsFilterModalOpen(true)}
|
||||
createButtonText="Create Tender"
|
||||
/>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
@@ -104,6 +125,22 @@ const TendersTable = () => {
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Modal
|
||||
isOpen={isFilterModalOpen}
|
||||
onClose={() => setIsFilterModalOpen(false)}
|
||||
classNames="w-full xl:w-1/2"
|
||||
showButtons={false}
|
||||
>
|
||||
<TenderListFilters
|
||||
setValue={setFilterValue}
|
||||
filterRegister={filterRegister}
|
||||
handleFilterSubmit={handleFilterSubmit}
|
||||
isMutating={isMutating as number}
|
||||
search={search}
|
||||
setIsFilterModalOpen={setIsFilterModalOpen}
|
||||
watch={watch}
|
||||
/>
|
||||
</Modal>
|
||||
<Pagination
|
||||
currentPage={allTenders?.meta?.page ? allTenders?.meta?.page - 1 : 0}
|
||||
totalPages={allTenders?.meta?.pages ?? 1}
|
||||
|
||||
@@ -2,37 +2,54 @@
|
||||
import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
|
||||
import { apiDefaultParams } from "@/constants/Api_Params";
|
||||
import { useTendersQuery } from "@/hooks/queries";
|
||||
import useDebounce from "@/hooks/useDebounce";
|
||||
import { TCustomer } from "@/lib/api";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { deleteEmptyKeys } from "@/utils/shared";
|
||||
import { useIsMutating } from "@tanstack/react-query";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
const useTenderListPresenter = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
|
||||
const [currentTender, setCurrentTender] = useState<TCustomer | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [modalConfig, setModalConfig] = useState<
|
||||
Partial<ConfirmationModalProps>
|
||||
>({});
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
...apiDefaultParams,
|
||||
});
|
||||
const [params, setParams] = useState<Record<string, any>>({});
|
||||
const router = useRouter();
|
||||
const debouncedSearch = useDebounce(search, 1000);
|
||||
const pathName = usePathname();
|
||||
const { data, error, isPending } = useTendersQuery(params);
|
||||
const searchParams = useSearchParams();
|
||||
const isMutating = useIsMutating();
|
||||
|
||||
const {
|
||||
register: filterRegister,
|
||||
handleSubmit: handleFilterSubmit,
|
||||
reset: filterFormReset,
|
||||
watch,
|
||||
setValue: setFilterValue,
|
||||
} = useForm();
|
||||
|
||||
useEffect(() => {
|
||||
const result = z.string().safeParse(debouncedSearch);
|
||||
if (result.success) {
|
||||
setParams((prevParams) => ({
|
||||
...prevParams,
|
||||
}));
|
||||
const newParams: Record<string, any> = {
|
||||
...apiDefaultParams,
|
||||
offset: 0,
|
||||
limit: 10,
|
||||
};
|
||||
for (const [key, value] of searchParams.entries()) {
|
||||
newParams[key] = value;
|
||||
}
|
||||
}, [debouncedSearch]);
|
||||
setParams(newParams);
|
||||
filterFormReset(newParams);
|
||||
}, [searchParams, filterFormReset]);
|
||||
|
||||
const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value);
|
||||
const { data, error, isPending } = useTendersQuery(params);
|
||||
|
||||
const search = (data: any) => {
|
||||
const newParams = { ...params, ...data, offset: 0 };
|
||||
const cleanedParams = deleteEmptyKeys(newParams);
|
||||
const queryString = new URLSearchParams(cleanedParams).toString();
|
||||
router.push(`${pathName}?${queryString}`);
|
||||
setIsFilterModalOpen(false);
|
||||
};
|
||||
const columns = [
|
||||
"row",
|
||||
@@ -46,8 +63,6 @@ const useTenderListPresenter = () => {
|
||||
currentTender,
|
||||
columns,
|
||||
setCurrentTender,
|
||||
search,
|
||||
handleFilterChange,
|
||||
router,
|
||||
allTenders: data,
|
||||
error,
|
||||
@@ -59,6 +74,14 @@ const useTenderListPresenter = () => {
|
||||
setIsModalOpen,
|
||||
modalConfig,
|
||||
setModalConfig,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setFilterValue,
|
||||
isMutating,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
import { TNotificationDetailsResponse } from "@/lib/api/types/NotificationHistory";
|
||||
import { capitalize, unixToDate } from "@/utils/shared";
|
||||
import { sanitizeHtmlWithStyles } from "@/lib/utils";
|
||||
import { FC } from "react";
|
||||
import IsVisible from "./IsVisible";
|
||||
import Status from "./Status";
|
||||
@@ -43,7 +44,12 @@ export const NotificationDetailsCard: FC<IProps> = ({ data }) => {
|
||||
<IsVisible condition={!!data.message}>
|
||||
<hr className="my-5" />
|
||||
<DetailItem title="Message">
|
||||
<p className="text-base leading-relaxed">{data.message}</p>
|
||||
<div
|
||||
className="text-base leading-relaxed"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: sanitizeHtmlWithStyles(data.message || '')
|
||||
}}
|
||||
/>
|
||||
</DetailItem>
|
||||
</IsVisible>
|
||||
</div>
|
||||
|
||||
@@ -39,3 +39,25 @@ export enum AdminRoles {
|
||||
ADMIN = "admin",
|
||||
ANALYST = "analyst",
|
||||
}
|
||||
export enum CustomerStatus {
|
||||
ACTIVE = "active",
|
||||
INACTIVE = "inactive",
|
||||
SUSPENDED = "suspended",
|
||||
}
|
||||
export enum CustomerType {
|
||||
INDIVIDUAL = "individual",
|
||||
COMPANY = "company",
|
||||
GOVERNMENT = "government",
|
||||
}
|
||||
export const Currencies = [
|
||||
{ label: "USD", value: "USD" },
|
||||
{ label: "EUR", value: "EUR" },
|
||||
{ label: "GBP", value: "GBP" },
|
||||
{ label: "JPY", value: "JPY" },
|
||||
{ label: "CAD", value: "CAD" },
|
||||
{ label: "AUD", value: "AUD" },
|
||||
{ label: "CHF", value: "CHF" },
|
||||
{ label: "CNY", value: "CNY" },
|
||||
{ label: "INR", value: "INR" },
|
||||
{ label: "BRL", value: "BRL" },
|
||||
];
|
||||
|
||||
+78
-3
@@ -1,6 +1,81 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function sanitizeHtmlWithStyles(htmlString: string): string {
|
||||
if (!htmlString) return "";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
const tempDiv = document.createElement("div");
|
||||
tempDiv.innerHTML = htmlString;
|
||||
|
||||
const dangerousTags = [
|
||||
"script",
|
||||
"iframe",
|
||||
"object",
|
||||
"embed",
|
||||
"form",
|
||||
"input",
|
||||
"button",
|
||||
];
|
||||
const dangerousAttributes = [
|
||||
"onclick",
|
||||
"onload",
|
||||
"onerror",
|
||||
"onmouseover",
|
||||
"onfocus",
|
||||
"onblur",
|
||||
];
|
||||
|
||||
dangerousTags.forEach((tag) => {
|
||||
const elements = tempDiv.getElementsByTagName(tag);
|
||||
for (let i = elements.length - 1; i >= 0; i--) {
|
||||
elements[i].remove();
|
||||
}
|
||||
});
|
||||
|
||||
const allElements = tempDiv.getElementsByTagName("*");
|
||||
for (let i = 0; i < allElements.length; i++) {
|
||||
const element = allElements[i];
|
||||
dangerousAttributes.forEach((attr) => {
|
||||
if (element.hasAttribute(attr)) {
|
||||
element.removeAttribute(attr);
|
||||
}
|
||||
});
|
||||
|
||||
Array.from(element.attributes).forEach((attr) => {
|
||||
if (attr.name.toLowerCase().startsWith("on")) {
|
||||
element.removeAttribute(attr.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return tempDiv.innerHTML;
|
||||
}
|
||||
|
||||
return htmlString
|
||||
.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
|
||||
.replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi, "")
|
||||
.replace(/<object[^>]*>[\s\S]*?<\/object>/gi, "")
|
||||
.replace(/<embed[^>]*>/gi, "")
|
||||
.replace(/on\w+="[^"]*"/gi, "")
|
||||
.replace(/on\w+='[^']*'/gi, "");
|
||||
}
|
||||
|
||||
export function stripHtmlTags(htmlString: string): string {
|
||||
if (!htmlString) return "";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
const tempDiv = document.createElement("div");
|
||||
tempDiv.innerHTML = htmlString;
|
||||
return tempDiv.textContent || tempDiv.innerText || "";
|
||||
}
|
||||
|
||||
return htmlString
|
||||
.replace(/<[^>]*>/g, "")
|
||||
.replace(/ /g, " ")
|
||||
.trim();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user