arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Improve filter options

Browse source
This commit is contained in:
Arthur Belleville 2025-07-09 22:48:33 +02:00
parent 5cf3b2ecb4
commit 7ba3e490a0
No known key found for this signature in database
1 changed files with 46 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
ui/src/pages/tablo.tsx
View file

@ -21,14 +21,15 @@ import { TabloInsert, TabloUpdate, UserTablo } from "@ui/types/tablos.types";
import { useNavigate } from "react-router-dom";
type FilterOption = {
id: "all" | "owned" | "invited";
id: "all" | "todo" | "in_progress" | "done";
name: string;
};
const filterOptions: FilterOption[] = [
{ id: "all", name: "Tous" },
{ id: "owned", name: "Mes tablos" },
{ id: "invited", name: "Invitations" },
{ id: "todo", name: "À faire" },
{ id: "in_progress", name: "En cours" },
{ id: "done", name: "Terminé" },
];
export const TabloPage = () => {
@ -41,9 +42,9 @@ export const TabloPage = () => {
const [viewingTablo, setViewingTablo] = useState<UserTablo | null>(null);
const [deletingTablo, setDeletingTablo] = useState<UserTablo | null>(null);
const [isDeleting, setIsDeleting] = useState(false);
const [filterType, setFilterType] = useState<"all" | "owned" | "invited">(
"all"
);
const [filterType, setFilterType] = useState<
"all" | "todo" | "in_progress" | "done"
>("all");
const navigate = useNavigate();
const { data: tablos, isLoading, error } = useTablosList();
@ -51,12 +52,14 @@ export const TabloPage = () => {
const { mutateAsync: updateTablo } = useUpdateTablo();
const { mutateAsync: deleteTablo } = useDeleteTablo();
// Filter tablos based on ownership
// Filter tablos based on status
const filteredTablos = tablos?.filter((tablo) => {
if (filterType === "owned") {
return tablo.is_admin;
} else if (filterType === "invited") {
return !tablo.is_admin;
if (filterType === "todo") {
return tablo.status === "todo";
} else if (filterType === "in_progress") {
return tablo.status === "in_progress";
} else if (filterType === "done") {
return tablo.status === "done";
}
return true; // 'all' case
});
@ -547,7 +550,7 @@ export const TabloPage = () => {
placeholder="Filtrer"
selectedKey={filterType}
onSelectionChange={(key) =>
setFilterType(key as "all" | "owned" | "invited")
setFilterType(key as "all" | "todo" | "in_progress" | "done")
}
className="min-w-36"
>
@ -602,33 +605,39 @@ export const TabloPage = () => {
<div className="flex justify-center items-center min-h-64">
<div className="text-center">
<p className="text-gray-500 dark:text-gray-400 mb-4">
{filterType === "owned"
? "Aucun tablo possédé trouvé"
: filterType === "invited"
? "Aucune invitation trouvée"
{filterType === "todo"
? "Aucun tablo 'À faire' trouvé"
: filterType === "in_progress"
? "Aucun tablo 'En cours' trouvé"
: filterType === "done"
? "Aucun tablo 'Terminé' trouvé"
: "Aucun tablo trouvé"}
</p>
<button
type="button"
className="flex items-center gap-1.5 px-4 py-2 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200"
onClick={openCreateModal}
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
></path>
</svg>
<span>Créer votre premier tablo</span>
</button>
{filterType === "all" && (
<div className="flex justify-center">
<button
type="button"
className="flex items-center gap-1.5 px-4 py-2 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200"
onClick={openCreateModal}
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
></path>
</svg>
<span>Créer votre premier tablo</span>
</button>
</div>
)}
</div>
</div>
)}