Commit f2115324 authored by mehdilouraoui's avatar mehdilouraoui
Browse files

feat(search-filter): add to delete tag to search filter

parent 210fac67
......@@ -11,9 +11,15 @@ type FiltersProps = {
filesAndFolders: FilesAndFolders[];
tags: TagMap;
setFilters: (filters: FilterMethod<FilesAndFolders>[]) => void;
toDelete: string[];
};
const Filters: FC<FiltersProps> = ({ filesAndFolders, tags, setFilters }) => {
const Filters: FC<FiltersProps> = ({
filesAndFolders,
tags,
toDelete,
setFilters,
}) => {
const [typeFilters, setTypeFilters] = useState<
FilterMethod<FilesAndFolders>[]
>([]);
......@@ -40,11 +46,7 @@ const Filters: FC<FiltersProps> = ({ filesAndFolders, tags, setFilters }) => {
<SizeFilter setFilters={setSizeFilters} />
</Box>
<Box flex={1}>
<TagFilter
filesAndFolders={filesAndFolders}
tags={tags}
setFilters={setTagFilters}
/>
<TagFilter tags={tags} setFilters={setTagFilters} toDelete={toDelete} />
</Box>
</Box>
);
......
import React, { FC, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { FilesAndFolders } from "reducers/files-and-folders/files-and-folders-types";
import {
ElementWithToDelete,
FilesAndFolders,
} from "reducers/files-and-folders/files-and-folders-types";
import { TagMap } from "reducers/tags/tags-types";
import Filter from "./filter";
import { FilterMethod } from "typings/filter-types";
type TagFilterProps = {
filesAndFolders: FilesAndFolders[];
tags: TagMap;
setFilters: (filters: FilterMethod<FilesAndFolders>[]) => void;
toDelete: string[];
};
const computeAvailableOptions = (tags, toDelete, t) => {
const availableOptions = Object.values(tags).map(({ name }) => name);
const availableOptionsWithToDelete = [
...availableOptions,
t("common.toDelete"),
];
return toDelete.length > 0 ? availableOptionsWithToDelete : availableOptions;
};
const makeTagFilter = (
......@@ -18,25 +30,36 @@ const makeTagFilter = (
const option =
Object.values(tags).find(({ name }) => name === selectedOption) ||
Object.values(tags)[0];
return (filesAndFolders: FilesAndFolders) =>
option.ffIds.includes(filesAndFolders.id);
};
const TagFilter: FC<TagFilterProps> = ({ tags, setFilters }) => {
const toDeleteFilter: FilterMethod<FilesAndFolders> = (
filesAndFolders: ElementWithToDelete
): boolean => {
return filesAndFolders.toDelete;
};
const TagFilter: FC<TagFilterProps> = ({ tags, toDelete, setFilters }) => {
const { t } = useTranslation();
const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
useEffect(() => {
const selectedFilters = selectedOptions.map((selectedOption) =>
makeTagFilter(tags, selectedOption)
);
setFilters(selectedFilters);
const selectedFilters = selectedOptions
.filter((selectedOption) => selectedOption !== t("common.toDelete"))
.map((selectedOption) => makeTagFilter(tags, selectedOption));
const toDeleteFilters = selectedOptions.includes(t("common.toDelete"))
? [toDeleteFilter]
: [];
setFilters([...selectedFilters, ...toDeleteFilters]);
}, [tags, setFilters, selectedOptions]);
return (
<Filter
name={t("search.tag")}
availableOptions={Object.values(tags).map(({ name }) => name)}
availableOptions={computeAvailableOptions(tags, toDelete, t)}
selectedOptions={selectedOptions}
setSelectedOptions={setSelectedOptions}
/>
......
......@@ -76,6 +76,7 @@ export const SearchModalContainer = ({ isModalOpen, closeModal }) => {
<SearchModal
exportToCsv={exportToCsv}
filesAndFolders={filesAndFoldersWithToDelete}
toDelete={toDelete}
columns={columns}
tags={tags}
isModalOpen={isModalOpen}
......
......@@ -34,6 +34,7 @@ type SearchModalProps = {
columns: Column<ElementWithToDelete>[];
filesAndFolders: ElementWithToDelete[];
tags: TagMap;
toDelete: string[];
};
export const SearchModal: FC<SearchModalProps> = ({
......@@ -43,6 +44,7 @@ export const SearchModal: FC<SearchModalProps> = ({
closeModal,
filesAndFolders,
tags,
toDelete,
}) => {
const { t } = useTranslation();
const classes = useStyles();
......@@ -115,6 +117,7 @@ export const SearchModal: FC<SearchModalProps> = ({
<Filters
setFilters={setFilters}
filesAndFolders={filesAndFoldersArray}
toDelete={toDelete}
tags={tags}
/>
</Box>
......
......@@ -18,7 +18,13 @@ import {
} from "./tags-types";
const initialState: TagsState = {
tags: {},
tags: {
"to-delete": {
id: "",
name: "",
ffIds: [""],
},
},
};
/**
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment