feat(tender-list): add GSAP for animations and enhance table functionality
- Integrated GSAP for improved animations in the tender list components, enhancing user experience during data loading and transitions. - Refactored TendersTable and TenderListFilters to utilize new animation features, providing smoother interactions. - Updated TableBody and TableSkeleton components to support ref forwarding, improving flexibility in rendering and animations. - Enhanced useTenderListPresenter to manage loading states and pagination more effectively, ensuring better data handling and user feedback.
This commit is contained in:
AmirReza Jamali
@@ -1,9 +1,12 @@
|
||||
import { GlobeIcon } from "@/assets/icons";
|
||||
"use client";
|
||||
|
||||
import { ChevronUpIcon, GlobeIcon, SearchIcon } from "@/assets/icons";
|
||||
import DatePicker from "@/components/FormElements/DatePicker/DatePicker";
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { Select } from "@/components/FormElements/select";
|
||||
import { Button } from "@/components/ui-elements/button";
|
||||
import { Countries } from "@/constants/countries";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Control,
|
||||
FieldValues,
|
||||
@@ -12,164 +15,493 @@ import {
|
||||
UseFormSetValue,
|
||||
UseFormWatch,
|
||||
} from "react-hook-form";
|
||||
import gsap from "gsap";
|
||||
import { type ReactNode, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
interface TenderListFiltersProps {
|
||||
filterRegister: UseFormRegister<FieldValues>;
|
||||
control: Control<FieldValues>;
|
||||
setIsFilterModalOpen: (isOpen: boolean) => void;
|
||||
isMutating: number;
|
||||
handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
|
||||
search: (data: any) => void;
|
||||
watch: UseFormWatch<FieldValues>;
|
||||
setValue: UseFormSetValue<any>;
|
||||
onClearAll: () => void;
|
||||
}
|
||||
|
||||
const RANGE_KEYS = [
|
||||
"created_at_range",
|
||||
"tender_deadline_range",
|
||||
"publication_date_range",
|
||||
"submission_deadline_range",
|
||||
] as const;
|
||||
|
||||
function isRangeActive(value: unknown): boolean {
|
||||
if (!Array.isArray(value) || value.length === 0) return false;
|
||||
return value.some((x) => {
|
||||
if (x === undefined || x === null || x === "") return false;
|
||||
const n = typeof x === "number" ? x : Number(x);
|
||||
return Number.isFinite(n) && n > 0;
|
||||
});
|
||||
}
|
||||
|
||||
function countActiveFilters(values: Record<string, unknown>): number {
|
||||
let n = 0;
|
||||
const textKeys = [
|
||||
"q",
|
||||
"title",
|
||||
"description",
|
||||
"country_codes",
|
||||
"notice_type",
|
||||
"notice_types",
|
||||
"form_types",
|
||||
"main_classification",
|
||||
"classifications",
|
||||
"cpv_codes",
|
||||
];
|
||||
for (const key of textKeys) {
|
||||
const v = values[key];
|
||||
if (typeof v === "string" && v.trim()) n++;
|
||||
}
|
||||
const country = values.country;
|
||||
if (typeof country === "string" && country.trim()) n++;
|
||||
for (const key of RANGE_KEYS) {
|
||||
if (isRangeActive(values[key])) n++;
|
||||
}
|
||||
return n;
|
||||
}
|
||||
|
||||
function CollapsibleFilterCard({
|
||||
title,
|
||||
subtitle,
|
||||
badge,
|
||||
defaultOpen,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
badge?: string;
|
||||
defaultOpen?: boolean;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const [open, setOpen] = useState(Boolean(defaultOpen));
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"overflow-hidden rounded-2xl border border-stroke/50 bg-white/50 backdrop-blur-md dark:border-white/[0.08] dark:bg-dark-2/45",
|
||||
open && "ring-1 ring-primary/15 dark:ring-primary/25",
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
className="flex w-full items-center justify-between gap-3 px-4 py-3.5 text-start transition hover:bg-white/60 dark:hover:bg-white/[0.04]"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm font-semibold text-dark dark:text-white">{title}</span>
|
||||
{badge ? (
|
||||
<span className="rounded-full bg-gradient-to-r from-primary/90 to-violet-500/85 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white">
|
||||
{badge}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
{subtitle ? (
|
||||
<p className="mt-0.5 text-xs text-dark-5 dark:text-dark-6">{subtitle}</p>
|
||||
) : null}
|
||||
</div>
|
||||
<ChevronUpIcon
|
||||
className={cn(
|
||||
"h-5 w-5 shrink-0 text-primary transition-transform duration-300 dark:text-primary/90",
|
||||
!open && "rotate-180",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
className={cn(
|
||||
"grid transition-[grid-template-rows] duration-300 ease-out",
|
||||
open ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
|
||||
)}
|
||||
>
|
||||
<div className="min-h-0 overflow-hidden">
|
||||
<div className="border-t border-stroke/40 px-4 pb-5 pt-1 dark:border-white/[0.06]">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TenderListFilters = ({
|
||||
filterRegister,
|
||||
control,
|
||||
setIsFilterModalOpen,
|
||||
isMutating,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
watch,
|
||||
setValue,
|
||||
onClearAll,
|
||||
}: TenderListFiltersProps) => {
|
||||
const watched = watch();
|
||||
const activeCount = useMemo(() => countActiveFilters(watched as Record<string, unknown>), [watched]);
|
||||
const [panelOpen, setPanelOpen] = useState(false);
|
||||
/** When true, header stays flush (square bottom) with the panel — keep true until collapse GSAP finishes so radius does not pop early. */
|
||||
const [headerFlushBottom, setHeaderFlushBottom] = useState(false);
|
||||
|
||||
const panelOuterRef = useRef<HTMLDivElement>(null);
|
||||
const panelInnerRef = useRef<HTMLDivElement>(null);
|
||||
const chevronRef = useRef<HTMLSpanElement>(null);
|
||||
const prevPanelOpen = useRef(panelOpen);
|
||||
|
||||
/** Initial dimensions without animating (avoids flash + Strict Mode double-invoke issues). */
|
||||
useLayoutEffect(() => {
|
||||
const outer = panelOuterRef.current;
|
||||
const inner = panelInnerRef.current;
|
||||
const chevron = chevronRef.current;
|
||||
if (!outer || !inner) return;
|
||||
|
||||
gsap.set(outer, { height: panelOpen ? "auto" : 0 });
|
||||
gsap.set(inner, {
|
||||
opacity: panelOpen ? 1 : 0,
|
||||
y: panelOpen ? 0 : -14,
|
||||
scale: panelOpen ? 1 : 0.995,
|
||||
});
|
||||
if (chevron) gsap.set(chevron, { rotation: panelOpen ? 0 : 180, transformOrigin: "50% 50%" });
|
||||
if (!panelOpen) {
|
||||
setHeaderFlushBottom(false);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- run once on mount for initial `panelOpen`
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const outer = panelOuterRef.current;
|
||||
const inner = panelInnerRef.current;
|
||||
const chevron = chevronRef.current;
|
||||
if (!outer || !inner) return;
|
||||
|
||||
if (prevPanelOpen.current === panelOpen) return;
|
||||
prevPanelOpen.current = panelOpen;
|
||||
|
||||
const reduced =
|
||||
typeof window !== "undefined" &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
gsap.killTweensOf([outer, inner, chevron].filter(Boolean));
|
||||
|
||||
if (reduced) {
|
||||
gsap.set(outer, { height: panelOpen ? "auto" : 0 });
|
||||
gsap.set(inner, { opacity: panelOpen ? 1 : 0, y: panelOpen ? 0 : -10, scale: 1 });
|
||||
if (chevron) gsap.set(chevron, { rotation: panelOpen ? 0 : 180 });
|
||||
setHeaderFlushBottom(panelOpen);
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = gsap.context(() => {
|
||||
if (panelOpen) {
|
||||
setHeaderFlushBottom(true);
|
||||
const targetH = inner.scrollHeight;
|
||||
gsap.set(outer, { height: 0 });
|
||||
gsap.set(inner, { opacity: 0, y: -36, scale: 0.985 });
|
||||
|
||||
const tl = gsap.timeline({ defaults: { ease: "none" } });
|
||||
tl.to(outer, {
|
||||
height: targetH,
|
||||
duration: 0.62,
|
||||
ease: "power4.out",
|
||||
onComplete: () => {
|
||||
gsap.set(outer, { height: "auto" });
|
||||
},
|
||||
}).to(
|
||||
inner,
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
duration: 0.52,
|
||||
ease: "power3.out",
|
||||
},
|
||||
"-=0.5",
|
||||
);
|
||||
|
||||
if (chevron) {
|
||||
tl.to(
|
||||
chevron,
|
||||
{ rotation: 0, duration: 0.48, ease: "back.out(1.35)" },
|
||||
"-=0.52",
|
||||
);
|
||||
}
|
||||
} else {
|
||||
const currentH = Math.max(outer.offsetHeight, inner.scrollHeight);
|
||||
gsap.set(outer, { height: currentH });
|
||||
|
||||
const tl = gsap.timeline({
|
||||
onComplete: () => {
|
||||
setHeaderFlushBottom(false);
|
||||
},
|
||||
});
|
||||
tl.to(inner, {
|
||||
opacity: 0,
|
||||
y: -22,
|
||||
scale: 0.992,
|
||||
duration: 0.3,
|
||||
ease: "power2.in",
|
||||
})
|
||||
.to(
|
||||
outer,
|
||||
{
|
||||
height: 0,
|
||||
duration: 0.48,
|
||||
ease: "power3.inOut",
|
||||
},
|
||||
"-=0.12",
|
||||
);
|
||||
if (chevron) {
|
||||
tl.to(chevron, { rotation: 180, duration: 0.42, ease: "power2.inOut" }, 0);
|
||||
}
|
||||
}
|
||||
}, outer);
|
||||
|
||||
return () => ctx.revert();
|
||||
}, [panelOpen]);
|
||||
|
||||
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="keyword"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("title")}
|
||||
name="title"
|
||||
label="title"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("description")}
|
||||
name="description"
|
||||
label="description"
|
||||
type="text"
|
||||
/>
|
||||
<div className="relative mb-8">
|
||||
<div className="relative overflow-hidden rounded-[1.75rem] border border-stroke/60 bg-white dark:border-dark-3 dark:bg-dark-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPanelOpen((o) => !o)}
|
||||
aria-expanded={panelOpen}
|
||||
aria-label={panelOpen ? "Collapse tender filters" : "Expand tender filters"}
|
||||
className={cn(
|
||||
"flex w-full flex-wrap items-start gap-x-3 gap-y-3 px-4 py-4 text-start transition-colors sm:items-center sm:justify-between sm:gap-4 sm:px-6 sm:py-5",
|
||||
"rounded-[1.65rem] border border-transparent",
|
||||
"hover:border-stroke/50 hover:bg-white/70 dark:hover:border-white/[0.08] dark:hover:bg-dark-3/50",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-dark-2",
|
||||
headerFlushBottom &&
|
||||
"rounded-b-none border-b border-stroke/45 dark:border-white/[0.07]",
|
||||
)}
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-start gap-3 sm:items-center">
|
||||
<span className="mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-violet-600 text-white sm:mt-0">
|
||||
<SearchIcon className="h-5 w-5 opacity-95" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<span className="block text-lg font-bold tracking-tight text-dark dark:text-white">
|
||||
Refine tenders
|
||||
</span>
|
||||
<p className="mt-0.5 max-w-xl text-sm text-dark-5 dark:text-dark-6">
|
||||
Search and slice the catalogue inline — no popup. Expand sections when you need
|
||||
precision.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto flex shrink-0 items-center gap-2">
|
||||
{activeCount > 0 ? (
|
||||
<div className="flex items-center gap-2 rounded-full border border-primary/25 bg-primary/10 px-3 py-1.5 dark:border-primary/35 dark:bg-primary/15">
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-primary">
|
||||
{activeCount} active
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="inline-flex items-center rounded-full border border-stroke/50 bg-white/60 px-3 py-1.5 text-xs font-medium text-dark-5 dark:border-white/10 dark:bg-dark-3/80 dark:text-dark-6">
|
||||
No filters applied
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
ref={chevronRef}
|
||||
className="inline-flex h-5 w-5 shrink-0 text-primary dark:text-primary/90"
|
||||
aria-hidden
|
||||
>
|
||||
<ChevronUpIcon className="h-5 w-5" />
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Select<FieldValues>
|
||||
{...filterRegister("country")}
|
||||
name="country"
|
||||
label="country"
|
||||
items={Countries}
|
||||
placeholder="Country"
|
||||
clearable
|
||||
prefixIcon={<GlobeIcon />}
|
||||
value={watch("country")}
|
||||
onClear={() => setValue("country", "")}
|
||||
/>
|
||||
<div
|
||||
ref={panelOuterRef}
|
||||
className="overflow-hidden"
|
||||
aria-hidden={!panelOpen}
|
||||
>
|
||||
<div ref={panelInnerRef} className="will-change-transform">
|
||||
<form
|
||||
className="space-y-4 px-4 pb-6 pt-1 sm:px-6"
|
||||
onSubmit={handleFilterSubmit(search)}
|
||||
>
|
||||
{/* Hero search */}
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end">
|
||||
<div className="min-h-[52px] flex-1">
|
||||
<InputGroup
|
||||
{...filterRegister("q")}
|
||||
name="q"
|
||||
label="Keyword search"
|
||||
type="text"
|
||||
placeholder="Title, buyer, CPV — cast a wide net…"
|
||||
icon={<SearchIcon className="text-primary dark:text-primary/90" />}
|
||||
iconPosition="left"
|
||||
className="[&_input]:rounded-2xl [&_input]:border-stroke/70 [&_input]:bg-white/90 [&_input]:py-3.5 [&_input]:text-sm dark:[&_input]:border-dark-3 dark:[&_input]:bg-dark-2/80"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center">
|
||||
<Button
|
||||
type="submit"
|
||||
size="small"
|
||||
shape="rounded"
|
||||
className="min-h-[52px] min-w-[140px] rounded-2xl bg-gradient-to-r from-primary via-primary to-violet-600 px-8 text-sm font-semibold transition hover:opacity-[0.97]"
|
||||
label={
|
||||
isMutating ? (
|
||||
<span className="inline-flex h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||
) : (
|
||||
<span>Apply filters</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClearAll}
|
||||
className="min-h-[52px] rounded-2xl border border-stroke/70 bg-white/80 px-6 text-sm font-semibold text-dark transition hover:border-primary/40 hover:text-primary dark:border-dark-3 dark:bg-dark-3/60 dark:text-white dark:hover:bg-white/[0.06]"
|
||||
>
|
||||
Reset all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InputGroup
|
||||
{...filterRegister("country_codes")}
|
||||
name="country_codes"
|
||||
label="country codes"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("notice_type")}
|
||||
name="notice_type"
|
||||
label="notice type"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("notice_types")}
|
||||
name="notice_types"
|
||||
label="notice types"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("form_types")}
|
||||
name="form_types"
|
||||
label="form types"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("main_classification")}
|
||||
name="main_classification"
|
||||
label="main classification"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("classifications")}
|
||||
name="classifications"
|
||||
label="classifications"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("cpv_codes")}
|
||||
name="cpv_codes"
|
||||
label="cpv codes"
|
||||
type="text"
|
||||
/>
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="created_at_range"
|
||||
label="created at range"
|
||||
range
|
||||
timePicker
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="tender_deadline_range"
|
||||
label="tender deadline range"
|
||||
range
|
||||
timePicker
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="publication_date_range"
|
||||
label="publication date range"
|
||||
range
|
||||
timePicker
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="submission_deadline_range"
|
||||
label="submission deadline range"
|
||||
range
|
||||
timePicker
|
||||
clearable
|
||||
/>
|
||||
<CollapsibleFilterCard
|
||||
title="Scope & geography"
|
||||
subtitle="Country pick or comma-separated codes for multi-region searches."
|
||||
>
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
||||
<Select<FieldValues>
|
||||
{...filterRegister("country")}
|
||||
name="country"
|
||||
label="Country"
|
||||
items={Countries}
|
||||
placeholder="Any country"
|
||||
clearable
|
||||
prefixIcon={<GlobeIcon />}
|
||||
value={watch("country")}
|
||||
onClear={() => setValue("country", "")}
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("country_codes")}
|
||||
name="country_codes"
|
||||
label="Country codes"
|
||||
type="text"
|
||||
placeholder="e.g. SWE, DEU"
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleFilterCard>
|
||||
|
||||
<div className="col-span-2 flex gap-4">
|
||||
<Button
|
||||
type="submit"
|
||||
size="small"
|
||||
shape="rounded"
|
||||
className="mt-6 w-fit capitalize"
|
||||
label={
|
||||
isMutating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
|
||||
) : (
|
||||
<span>Search</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="error"
|
||||
size="small"
|
||||
shape="rounded"
|
||||
className="mt-6 w-fit capitalize"
|
||||
onClick={() => setIsFilterModalOpen(false)}
|
||||
label="Close"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<CollapsibleFilterCard
|
||||
title="Notice & classification"
|
||||
subtitle="TED notice dimensions and CPV-style filters."
|
||||
>
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
|
||||
<InputGroup
|
||||
{...filterRegister("title")}
|
||||
name="title"
|
||||
label="Title contains"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("description")}
|
||||
name="description"
|
||||
label="Description contains"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("notice_type")}
|
||||
name="notice_type"
|
||||
label="Notice type"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("notice_types")}
|
||||
name="notice_types"
|
||||
label="Notice types (comma-separated)"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("form_types")}
|
||||
name="form_types"
|
||||
label="Form types (comma-separated)"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("main_classification")}
|
||||
name="main_classification"
|
||||
label="Main classification"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("classifications")}
|
||||
name="classifications"
|
||||
label="Classifications (comma-separated)"
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
{...filterRegister("cpv_codes")}
|
||||
name="cpv_codes"
|
||||
label="CPV codes (comma-separated)"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleFilterCard>
|
||||
|
||||
<CollapsibleFilterCard
|
||||
title="Date ranges"
|
||||
subtitle="Unix-backed ranges — pick start/end; cleared ranges are omitted from the query."
|
||||
badge="Time travel"
|
||||
>
|
||||
<div className="grid gap-5 lg:grid-cols-2">
|
||||
<div className="rounded-xl border border-stroke/40 bg-white/60 p-3 dark:border-white/[0.06] dark:bg-dark-3/40">
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="created_at_range"
|
||||
label="Created at"
|
||||
range
|
||||
timePicker
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-xl border border-stroke/40 bg-white/60 p-3 dark:border-white/[0.06] dark:bg-dark-3/40">
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="tender_deadline_range"
|
||||
label="Tender deadline"
|
||||
range
|
||||
timePicker
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-xl border border-stroke/40 bg-white/60 p-3 dark:border-white/[0.06] dark:bg-dark-3/40">
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="publication_date_range"
|
||||
label="Publication date"
|
||||
range
|
||||
timePicker
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-xl border border-stroke/40 bg-white/60 p-3 dark:border-white/[0.06] dark:bg-dark-3/40">
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="submission_deadline_range"
|
||||
label="Submission deadline"
|
||||
range
|
||||
timePicker
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleFilterCard>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { ExclamationIcon, EyeIcon } from "@/assets/icons";
|
||||
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
@@ -10,32 +11,20 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import useTenderListPresenter from "./useTenderListPresenter";
|
||||
|
||||
import { ExclamationIcon, EyeIcon } from "@/assets/icons";
|
||||
|
||||
import IsVisible from "@/components/ui/IsVisible";
|
||||
import ListHeader from "@/components/ui/ListHeader";
|
||||
import ListWrapper from "@/components/ui/ListWrapper";
|
||||
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 { getPaginatedRowNumber, unixToDate } from "@/utils/shared";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import TenderListFilters from "./TenderListFilters";
|
||||
import useTenderListPresenter from "./useTenderListPresenter";
|
||||
|
||||
const TendersTable = () => {
|
||||
const {
|
||||
allTenders,
|
||||
isPending,
|
||||
router,
|
||||
pathName,
|
||||
setParams,
|
||||
params,
|
||||
columns,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
@@ -44,149 +33,130 @@ const TendersTable = () => {
|
||||
control,
|
||||
isMutating,
|
||||
shouldShowPagination,
|
||||
clearAllFilters,
|
||||
tableSectionRef,
|
||||
skeletonTbodyRef,
|
||||
dataTbodyRef,
|
||||
tendersList,
|
||||
isPending,
|
||||
navigateToTenderDetails,
|
||||
navigateToTenderFeedback,
|
||||
handlePaginationChange,
|
||||
getRowNumber,
|
||||
formatDateTimeCell,
|
||||
pagination,
|
||||
} = useTenderListPresenter();
|
||||
|
||||
return (
|
||||
<ListWrapper>
|
||||
<ListHeader
|
||||
onFilter={() => setIsFilterModalOpen(true)}
|
||||
hasFilter={false}
|
||||
createButtonText="Create Tender"
|
||||
hasCreate={false}
|
||||
/>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
{columns.map((column) => (
|
||||
<TableHead key={column} colSpan={100}>
|
||||
{column}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TenderListFilters
|
||||
setValue={setFilterValue}
|
||||
filterRegister={filterRegister}
|
||||
control={control}
|
||||
handleFilterSubmit={handleFilterSubmit}
|
||||
isMutating={isMutating as number}
|
||||
search={search}
|
||||
watch={watch}
|
||||
onClearAll={clearAllFilters}
|
||||
/>
|
||||
<div ref={tableSectionRef}>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
{columns.map((column) => (
|
||||
<TableHead key={column} colSpan={100}>
|
||||
{column}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
{isPending && <TableSkeleton column={columns.length} />}
|
||||
<TableBody>
|
||||
<EmptyListWrapper
|
||||
list={allTenders?.data.tenders ?? []}
|
||||
columns={columns}
|
||||
emptyMessage="No tenders were found"
|
||||
isLoading={isPending}
|
||||
>
|
||||
{(allTenders?.data.tenders ?? []).map((item, index) => (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="odd:bg-gray-2 dark:odd:bg-gray-7"
|
||||
{isPending ? (
|
||||
<TableSkeleton ref={skeletonTbodyRef} column={columns.length} />
|
||||
) : (
|
||||
<TableBody ref={dataTbodyRef}>
|
||||
<EmptyListWrapper
|
||||
list={tendersList}
|
||||
columns={columns}
|
||||
emptyMessage="No tenders were found"
|
||||
isLoading={false}
|
||||
>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{getPaginatedRowNumber({
|
||||
index,
|
||||
page: allTenders?.meta?.page,
|
||||
limit: allTenders?.meta?.limit,
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{item.title}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{item.country_code}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{unixToDate({
|
||||
unix: item.publication_date,
|
||||
hasTime: true,
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{unixToDate({
|
||||
unix: item.submission_deadline,
|
||||
hasTime: true,
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{unixToDate({ unix: item.tender_deadline, hasTime: true })}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{unixToDate({
|
||||
unix: item?.created_at ?? 0,
|
||||
hasTime: true,
|
||||
})}
|
||||
</TableCell>
|
||||
{tendersList.map((item, index) => (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="odd:bg-gray-2 dark:odd:bg-gray-7"
|
||||
>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{getRowNumber(index)}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{item.title}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{item.country_code}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{formatDateTimeCell(item.publication_date)}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{formatDateTimeCell(item.submission_deadline)}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{formatDateTimeCell(item.tender_deadline)}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{formatDateTimeCell(item?.created_at ?? 0)}
|
||||
</TableCell>
|
||||
|
||||
<TableCell className={cn(`text capitalize`)} colSpan={100}>
|
||||
<Status status={item.status}>{item.status}</Status>
|
||||
</TableCell>
|
||||
<TableCell className="capitalize" colSpan={100}>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
data-tooltip-id="details"
|
||||
data-tooltip-content="Details"
|
||||
data-tooltip-place="top"
|
||||
onClick={() => {
|
||||
const queryString = params?.lang
|
||||
? `?lang=${encodeURIComponent(params.lang)}`
|
||||
: "";
|
||||
router.push(`${pathName}/${item.id}${queryString}`);
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
{..._TooltipDefaultParams({
|
||||
id: "details",
|
||||
})}
|
||||
/>
|
||||
<EyeIcon />
|
||||
</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={() => {
|
||||
const queryString = params?.lang
|
||||
? `?lang=${encodeURIComponent(params.lang)}`
|
||||
: "";
|
||||
router.push(
|
||||
`${pathName}/feedback/${item.id}${queryString}`,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
>
|
||||
<TenderListFilters
|
||||
setValue={setFilterValue}
|
||||
filterRegister={filterRegister}
|
||||
control={control}
|
||||
handleFilterSubmit={handleFilterSubmit}
|
||||
isMutating={isMutating as number}
|
||||
search={search}
|
||||
setIsFilterModalOpen={setIsFilterModalOpen}
|
||||
watch={watch}
|
||||
/>
|
||||
</Modal>
|
||||
<TableCell className={cn(`text capitalize`)} colSpan={100}>
|
||||
<Status status={item.status}>{item.status}</Status>
|
||||
</TableCell>
|
||||
<TableCell className="capitalize" colSpan={100}>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
data-tooltip-id="details"
|
||||
data-tooltip-content="Details"
|
||||
data-tooltip-place="top"
|
||||
onClick={() => navigateToTenderDetails(item.id)}
|
||||
>
|
||||
<Tooltip
|
||||
{..._TooltipDefaultParams({
|
||||
id: "details",
|
||||
})}
|
||||
/>
|
||||
<EyeIcon />
|
||||
</button>
|
||||
<button
|
||||
type="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={() => navigateToTenderFeedback(item.id)}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
|
||||
<ExclamationIcon />
|
||||
</button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</EmptyListWrapper>
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</div>
|
||||
<IsVisible condition={shouldShowPagination}>
|
||||
<Pagination
|
||||
currentPage={allTenders?.meta?.page ? allTenders?.meta?.page - 1 : 0}
|
||||
totalPages={allTenders?.meta?.pages ?? 1}
|
||||
onPageChange={(e) => {
|
||||
setParams((currentParams) => ({
|
||||
...currentParams,
|
||||
offset: e.selected * (allTenders?.meta?.limit ?? 10),
|
||||
limit: allTenders?.meta?.limit ?? 10,
|
||||
}));
|
||||
}}
|
||||
currentPage={pagination.currentPage}
|
||||
totalPages={pagination.totalPages}
|
||||
onPageChange={handlePaginationChange}
|
||||
/>
|
||||
</IsVisible>
|
||||
</ListWrapper>
|
||||
|
||||
@@ -3,10 +3,11 @@ import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
|
||||
import { apiDefaultParams } from "@/constants/Api_Params";
|
||||
import { useTendersQuery } from "@/hooks/queries";
|
||||
import { TCustomer } from "@/lib/api";
|
||||
import { deleteEmptyKeys } from "@/utils/shared";
|
||||
import { deleteEmptyKeys, getPaginatedRowNumber, unixToDate } from "@/utils/shared";
|
||||
import gsap from "gsap";
|
||||
import { useIsMutating } from "@tanstack/react-query";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
const COMMA_SEPARATED_FILTER_KEYS = new Set([
|
||||
@@ -216,7 +217,6 @@ const TENDER_FILTER_MODAL_KEYS = new Set<string>([
|
||||
|
||||
const useTenderListPresenter = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
|
||||
const [currentTender, setCurrentTender] = useState<TCustomer | null>(null);
|
||||
const [modalConfig, setModalConfig] = useState<
|
||||
Partial<ConfirmationModalProps>
|
||||
@@ -227,6 +227,10 @@ const useTenderListPresenter = () => {
|
||||
const searchParams = useSearchParams();
|
||||
const isMutating = useIsMutating();
|
||||
|
||||
const tableSectionRef = useRef<HTMLDivElement>(null);
|
||||
const skeletonTbodyRef = useRef<HTMLTableSectionElement>(null);
|
||||
const dataTbodyRef = useRef<HTMLTableSectionElement>(null);
|
||||
|
||||
const {
|
||||
register: filterRegister,
|
||||
handleSubmit: handleFilterSubmit,
|
||||
@@ -253,6 +257,110 @@ const useTenderListPresenter = () => {
|
||||
const shouldShowPagination =
|
||||
!isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
|
||||
|
||||
const tendersList = data?.data?.tenders ?? [];
|
||||
|
||||
const langQuerySuffix = useMemo(() => {
|
||||
const lang = params?.lang;
|
||||
return typeof lang === "string" && lang.trim()
|
||||
? `?lang=${encodeURIComponent(lang)}`
|
||||
: "";
|
||||
}, [params?.lang]);
|
||||
|
||||
const navigateToTenderDetails = useCallback(
|
||||
(tenderId: string) => {
|
||||
router.push(`${pathName}/${tenderId}${langQuerySuffix}`);
|
||||
},
|
||||
[pathName, router, langQuerySuffix],
|
||||
);
|
||||
|
||||
const navigateToTenderFeedback = useCallback(
|
||||
(tenderId: string) => {
|
||||
router.push(`${pathName}/feedback/${tenderId}${langQuerySuffix}`);
|
||||
},
|
||||
[pathName, router, langQuerySuffix],
|
||||
);
|
||||
|
||||
const handlePaginationChange = useCallback(
|
||||
(e: { selected: number }) => {
|
||||
const limit = data?.meta?.limit ?? 10;
|
||||
setParams((currentParams) => ({
|
||||
...currentParams,
|
||||
offset: e.selected * limit,
|
||||
limit,
|
||||
}));
|
||||
},
|
||||
[data?.meta?.limit, setParams],
|
||||
);
|
||||
|
||||
const getRowNumber = useCallback(
|
||||
(index: number) =>
|
||||
getPaginatedRowNumber({
|
||||
index,
|
||||
page: data?.meta?.page,
|
||||
limit: data?.meta?.limit,
|
||||
}),
|
||||
[data?.meta?.limit, data?.meta?.page],
|
||||
);
|
||||
|
||||
const formatDateTimeCell = useCallback((unix: number) => {
|
||||
return unixToDate({ unix, hasTime: true });
|
||||
}, []);
|
||||
|
||||
const pagination = useMemo(
|
||||
() => ({
|
||||
currentPage: data?.meta?.page ? data.meta.page - 1 : 0,
|
||||
totalPages: data?.meta?.pages ?? 1,
|
||||
}),
|
||||
[data?.meta?.page, data?.meta?.pages],
|
||||
);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const reduced =
|
||||
typeof window !== "undefined" &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
const ctx = gsap.context(() => {
|
||||
if (reduced) return;
|
||||
|
||||
if (isPending) {
|
||||
const tbody = skeletonTbodyRef.current;
|
||||
if (!tbody) return;
|
||||
const rows = tbody.querySelectorAll("tr");
|
||||
gsap.fromTo(
|
||||
rows,
|
||||
{ opacity: 0.35, y: 14 },
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.42,
|
||||
stagger: 0.032,
|
||||
ease: "power2.out",
|
||||
},
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const tbody = dataTbodyRef.current;
|
||||
if (!tbody) return;
|
||||
const rows = tbody.querySelectorAll("tr");
|
||||
if (!rows.length) return;
|
||||
gsap.fromTo(
|
||||
rows,
|
||||
{ opacity: 0, y: 18 },
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.46,
|
||||
stagger: 0.05,
|
||||
ease: "power3.out",
|
||||
clearProps: "opacity,transform",
|
||||
},
|
||||
);
|
||||
}, tableSectionRef);
|
||||
|
||||
return () => ctx.revert();
|
||||
}, [isPending, data]);
|
||||
|
||||
const search = (data: any) => {
|
||||
const mappedDateRanges = mapDateRangeFilters(data);
|
||||
const normalizedData = normalizeFilterValues(mappedDateRanges);
|
||||
@@ -266,8 +374,11 @@ const useTenderListPresenter = () => {
|
||||
const cleanedParams = deleteEmptyKeys(newParams);
|
||||
const queryString = new URLSearchParams(cleanedParams).toString();
|
||||
router.push(`${pathName}?${queryString}`);
|
||||
setIsFilterModalOpen(false);
|
||||
};
|
||||
|
||||
const clearAllFilters = useCallback(() => {
|
||||
router.push(pathName);
|
||||
}, [pathName, router]);
|
||||
const columns = [
|
||||
"row",
|
||||
"title",
|
||||
@@ -295,8 +406,7 @@ const useTenderListPresenter = () => {
|
||||
setIsModalOpen,
|
||||
modalConfig,
|
||||
setModalConfig,
|
||||
isFilterModalOpen,
|
||||
setIsFilterModalOpen,
|
||||
clearAllFilters,
|
||||
filterRegister,
|
||||
handleFilterSubmit,
|
||||
search,
|
||||
@@ -305,6 +415,16 @@ const useTenderListPresenter = () => {
|
||||
control,
|
||||
isMutating,
|
||||
shouldShowPagination,
|
||||
tableSectionRef,
|
||||
skeletonTbodyRef,
|
||||
dataTbodyRef,
|
||||
tendersList,
|
||||
navigateToTenderDetails,
|
||||
navigateToTenderFeedback,
|
||||
handlePaginationChange,
|
||||
getRowNumber,
|
||||
formatDateTimeCell,
|
||||
pagination,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import * as React from "react";
|
||||
import { Skeleton } from "./skeleton";
|
||||
import { TableBody, TableCell, TableRow } from "./table";
|
||||
|
||||
@@ -7,24 +8,23 @@ interface IProps {
|
||||
cellColSpan?: number;
|
||||
}
|
||||
|
||||
const TableSkeleton = ({
|
||||
column,
|
||||
length = 20,
|
||||
cellColSpan = 100,
|
||||
}: IProps) => {
|
||||
return (
|
||||
<TableBody data-cy="table-skeleton">
|
||||
{Array.from({ length }).map((_, i) => (
|
||||
<TableRow key={i} data-cy={`table-skeleton-row-${i}`}>
|
||||
{Array.from({ length: column }).map((_, j) => (
|
||||
<TableCell key={j} colSpan={cellColSpan} data-cy="table-skeleton-cell">
|
||||
<Skeleton className="h-8 rounded-lg" />
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
);
|
||||
};
|
||||
const TableSkeleton = React.forwardRef<HTMLTableSectionElement, IProps>(
|
||||
({ column, length = 20, cellColSpan = 100 }, ref) => {
|
||||
return (
|
||||
<TableBody ref={ref} data-cy="table-skeleton">
|
||||
{Array.from({ length }).map((_, i) => (
|
||||
<TableRow key={i} data-cy={`table-skeleton-row-${i}`}>
|
||||
{Array.from({ length: column }).map((_, j) => (
|
||||
<TableCell key={j} colSpan={cellColSpan} data-cy="table-skeleton-cell">
|
||||
<Skeleton className="h-8 rounded-lg" />
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
);
|
||||
},
|
||||
);
|
||||
TableSkeleton.displayName = "TableSkeleton";
|
||||
|
||||
export default TableSkeleton;
|
||||
|
||||
+11
-11
@@ -30,17 +30,17 @@ export function TableHeader({
|
||||
);
|
||||
}
|
||||
|
||||
export function TableBody({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableSectionElement>) {
|
||||
return (
|
||||
<tbody
|
||||
className={cn("[&_tr:last-child]:border-0 [&_tr]:border-stroke/60 dark:[&_tr]:border-dark-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0 [&_tr]:border-stroke/60 dark:[&_tr]:border-dark-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableBody.displayName = "TableBody";
|
||||
|
||||
export function TableFooter({
|
||||
className,
|
||||
|
||||
Reference in New Issue
Block a user