chore(env): update application version to 2.2.6 in production environment
feat(tenders): enhance TendersTable with improved title truncation and tooltip support - Updated TendersTable to include a tooltip for tender titles exceeding 40 characters, improving user experience by providing additional context. - Refactored imports in TendersTable for better organization and clarity.
This commit is contained in:
AmirReza Jamali
+1
-1
@@ -1,4 +1,4 @@
|
||||
NEXT_PUBLIC_APP_VERSION=2.2.5
|
||||
NEXT_PUBLIC_APP_VERSION=2.2.6
|
||||
NEXT_PUBLIC_TOAST_AUTO_CLOSE_DURATION=2500
|
||||
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyCTjdsk2jE34IfnvSKP1JMTIf_Abd7tbt0
|
||||
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=opplens-270d1.firebaseapp.com
|
||||
|
||||
@@ -2,6 +2,10 @@
|
||||
|
||||
import { ExclamationIcon, EyeIcon } from "@/assets/icons";
|
||||
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
|
||||
import IsVisible from "@/components/ui/IsVisible";
|
||||
import ListHeader from "@/components/ui/ListHeader";
|
||||
import ListWrapper from "@/components/ui/ListWrapper";
|
||||
import Pagination from "@/components/ui/pagination";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
Table,
|
||||
@@ -12,13 +16,10 @@ import {
|
||||
TableRow,
|
||||
TableSortProvider,
|
||||
} from "@/components/ui/table";
|
||||
import IsVisible from "@/components/ui/IsVisible";
|
||||
import ListHeader from "@/components/ui/ListHeader";
|
||||
import ListWrapper from "@/components/ui/ListWrapper";
|
||||
import Pagination from "@/components/ui/pagination";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { truncateString } from "@/utils/shared";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import TenderListFilters from "./TenderListFilters";
|
||||
import useTenderListPresenter from "./useTenderListPresenter";
|
||||
@@ -78,102 +79,129 @@ const TendersTable = () => {
|
||||
sortOrder={sortOrder}
|
||||
onSortChange={handleSortChange}
|
||||
>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
{columns.map((column) => {
|
||||
const sortKey = columnSortKeys[column];
|
||||
return (
|
||||
<TableHead
|
||||
key={column}
|
||||
colSpan={100}
|
||||
sortable={Boolean(sortKey)}
|
||||
sortKey={sortKey}
|
||||
defaultSortOrder={columnDefaultOrder[column]}
|
||||
>
|
||||
{column}
|
||||
</TableHead>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
{columns.map((column) => {
|
||||
const sortKey = columnSortKeys[column];
|
||||
return (
|
||||
<TableHead
|
||||
key={column}
|
||||
colSpan={100}
|
||||
sortable={Boolean(sortKey)}
|
||||
sortKey={sortKey}
|
||||
defaultSortOrder={columnDefaultOrder[column]}
|
||||
>
|
||||
{column}
|
||||
</TableHead>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
{isPending ? (
|
||||
<TableSkeleton ref={skeletonTbodyRef} column={columns.length} />
|
||||
) : (
|
||||
<TableBody ref={dataTbodyRef}>
|
||||
<EmptyListWrapper
|
||||
list={tendersList}
|
||||
columns={columns}
|
||||
emptyMessage="No tenders were found"
|
||||
isLoading={false}
|
||||
>
|
||||
{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>
|
||||
{isPending ? (
|
||||
<TableSkeleton ref={skeletonTbodyRef} column={columns.length} />
|
||||
) : (
|
||||
<TableBody ref={dataTbodyRef}>
|
||||
<EmptyListWrapper
|
||||
list={tendersList}
|
||||
columns={columns}
|
||||
emptyMessage="No tenders were found"
|
||||
isLoading={false}
|
||||
>
|
||||
{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.length > 40 ? (
|
||||
<span
|
||||
data-tooltip-id="tender-title"
|
||||
data-tooltip-content={item.title}
|
||||
data-tooltip-place="top"
|
||||
className="cursor-help underline decoration-dotted decoration-1 underline-offset-4"
|
||||
>
|
||||
{truncateString(item.title, 20, 20)}
|
||||
</span>
|
||||
) : (
|
||||
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
|
||||
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>
|
||||
<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>
|
||||
</TableSortProvider>
|
||||
<Tooltip
|
||||
{..._TooltipDefaultParams({
|
||||
id: "tender-title",
|
||||
styles: {
|
||||
maxWidth: "320px",
|
||||
whiteSpace: "normal",
|
||||
lineHeight: "1.5",
|
||||
textAlign: "start",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<IsVisible condition={shouldShowPagination}>
|
||||
<Pagination
|
||||
|
||||
Reference in New Issue
Block a user