diff --git a/src/frontend/apps/drive/src/features/drivers/Driver.ts b/src/frontend/apps/drive/src/features/drivers/Driver.ts index 2cbc8c74..dd46e2b1 100644 --- a/src/frontend/apps/drive/src/features/drivers/Driver.ts +++ b/src/frontend/apps/drive/src/features/drivers/Driver.ts @@ -39,6 +39,7 @@ export type ItemFilters = { is_creator_me?: boolean; ordering?: string; is_favorite?: boolean; + category?: string; }; export type PaginatedChildrenResult = { diff --git a/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.tsx b/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.tsx index 5eb15bef..fecfa59b 100644 --- a/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.tsx +++ b/src/frontend/apps/drive/src/features/explorer/components/app-view/ExplorerFilters.tsx @@ -1,4 +1,4 @@ -import { Filter, FilterOption, IconSize } from "@gouvfr-lasuite/ui-kit"; +import { FileIcon, Filter, FilterOption, IconSize } from "@gouvfr-lasuite/ui-kit"; import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import folderIcon from "@/assets/folder/folder.svg"; @@ -50,14 +50,62 @@ export const ExplorerFilters = () => { return (
- onChange("type", value)} + onChange("category", value)} />
); }; +// A representative mimetype per category, resolved to an icon by the ui-kit's +// getMimeCategory so filter options match the icons shown on items. +const CATEGORY_OPTIONS: { value: string; mimetype: string }[] = [ + { value: "doc", mimetype: "application/vnd.oasis.opendocument.text" }, + { value: "powerpoint", mimetype: "application/vnd.oasis.opendocument.presentation" }, + { value: "calc", mimetype: "application/vnd.oasis.opendocument.spreadsheet" }, + { value: "pdf", mimetype: "application/pdf" }, + { value: "image", mimetype: "image/png" }, + { value: "video", mimetype: "video/mp4" }, + { value: "audio", mimetype: "audio/mpeg" }, + { value: "archive", mimetype: "application/zip" }, + { value: "other", mimetype: "text/plain" }, +]; + +export const ExplorerFilterCategory = (props: { + value: string | null; + onChange: (value: Key | null) => void; +}) => { + const { t } = useTranslation(); + + const options: FilterOption[] = useMemo( + () => [ + // Reset sits at the top of the list, above the categories, as in the design. + { ...getResetOption(t), showSeparator: true }, + ...CATEGORY_OPTIONS.map(({ value, mimetype }) => ({ + label: t(`explorer.filters.category.options.${value}`), + value, + render: () => ( +
+ + {t(`explorer.filters.category.options.${value}`)} +
+ ), + })), + ], + [t], + ); + + return ( + + ); +}; + export const ExplorerFilterType = (props: { value: ItemType | null; onChange: (value: Key | null) => void; diff --git a/src/frontend/apps/drive/src/features/i18n/translations.json b/src/frontend/apps/drive/src/features/i18n/translations.json index c2734ccb..aec73603 100644 --- a/src/frontend/apps/drive/src/features/i18n/translations.json +++ b/src/frontend/apps/drive/src/features/i18n/translations.json @@ -262,6 +262,20 @@ "reset": "Reset" } }, + "category": { + "label": "Type", + "options": { + "doc": "Text document", + "powerpoint": "Slides", + "calc": "Spreadsheet", + "pdf": "PDF", + "image": "Image", + "video": "Video", + "audio": "Audio", + "archive": "Archive", + "other": "Other" + } + }, "workspace": { "label": "Workspace" }, @@ -867,6 +881,20 @@ "reset": "Réinitialiser" } }, + "category": { + "label": "Type", + "options": { + "doc": "Document texte", + "powerpoint": "Présentation", + "calc": "Tableur", + "pdf": "PDF", + "image": "Image", + "video": "Vidéo", + "audio": "Audio", + "archive": "Archive", + "other": "Autre" + } + }, "workspace": { "label": "Espace" },