added filter by room to trash

This commit is contained in:
Mushka Nikita 2023-05-22 12:27:09 +03:00
parent 39fa59b485
commit 191de3e991
9 changed files with 152 additions and 109 deletions

View File

@ -40,7 +40,7 @@ const convertToItems = (folders) => {
const items = folders.map((folder) => {
const { id, title, roomType, logo } = folder;
const icon = logo.original ? logo.original : getRoomLogo(roomType);
const icon = logo.medium ? logo.medium : getRoomLogo(roomType);
return { id, label: title, icon };
});

View File

@ -34,6 +34,7 @@ import ViewRowsReactSvgUrl from "PUBLIC_DIR/images/view-rows.react.svg?url";
import ViewTilesReactSvgUrl from "PUBLIC_DIR/images/view-tiles.react.svg?url";
import { showLoader, hideLoader } from "./FilterUtils";
import { getRoomInfo } from "@docspace/common/api/rooms";
const getFilterType = (filterValues) => {
const filterType = result(
@ -68,6 +69,17 @@ const getAuthorType = (filterValues) => {
return authorType ? authorType : null;
};
const getRoomId = (filterValues) => {
const filterRoomId = result(
find(filterValues, (value) => {
return value.group === FilterGroups.filterRoom;
}),
"key"
);
return filterRoomId || null;
};
const getSearchParams = (filterValues) => {
const searchParams = result(
find(filterValues, (value) => {
@ -325,6 +337,8 @@ const SectionFilterContent = ({
const withSubfolders = getSearchParams(data);
const withContent = getFilterContent(data);
const roomId = getRoomId(data);
const newFilter = filter.clone();
newFilter.page = 0;
@ -342,6 +356,10 @@ const SectionFilterContent = ({
withSubfolders === FilterKeys.excludeSubfolders ? "false" : "true";
newFilter.searchInContent = withContent === "true" ? "true" : null;
if (isTrash) {
newFilter.roomId = roomId;
}
setIsLoading(true);
fetchFiles(selectedFolderId, newFilter).finally(() =>
@ -351,6 +369,8 @@ const SectionFilterContent = ({
},
[
isRooms,
isAccountsPage,
isTrash,
fetchFiles,
fetchRooms,
fetchPeople,
@ -359,7 +379,6 @@ const SectionFilterContent = ({
accountsFilter,
filter,
selectedFolderId,
isAccountsPage,
]
);
@ -822,7 +841,6 @@ const SectionFilterContent = ({
if (!isMe) {
const user = await getUser(filter.authorType.replace("user_", ""));
label = user.displayName;
}
@ -836,6 +854,17 @@ const SectionFilterContent = ({
label: label,
});
}
if (filter.roomId) {
const room = await getRoomInfo(filter.roomId);
const label = room.title;
filterValues.push({
key: filter.roomId,
group: FilterGroups.filterRoom,
label: label,
});
}
}
// return filterValues;
@ -887,6 +916,7 @@ const SectionFilterContent = ({
}, [
filter.withSubfolders,
filter.authorType,
filter.roomId,
filter.filterType,
filter.searchInContent,
filter.excludeSubject,
@ -1417,7 +1447,7 @@ const SectionFilterContent = ({
{
id: "filter_search-by-room-content-header",
key: "filter_search-by-room-content-header",
group: FilterGroups.filterRooms,
group: FilterGroups.filterRoom,
label: "Room",
isHeader: true,
isLast: true,
@ -1425,7 +1455,7 @@ const SectionFilterContent = ({
{
id: "filter_search-by-room-content",
key: "filter_search-by-room-content",
group: FilterGroups.filterRooms,
group: FilterGroups.filterRoom,
withoutHeader: true,
label: "Select room",
displaySelectorType: "button",
@ -1445,6 +1475,7 @@ const SectionFilterContent = ({
isAccountsPage,
isFavoritesFolder,
isRecentFolder,
isTrash,
]);
const getViewSettingsData = React.useCallback(() => {
@ -1766,6 +1797,7 @@ const SectionFilterContent = ({
infoPanelVisible,
viewAs,
isPersonalRoom,
isTrash,
]);
const removeSelectedItem = React.useCallback(
@ -1860,6 +1892,9 @@ const SectionFilterContent = ({
if (group === FilterGroups.filterContent) {
newFilter.searchInContent = null;
}
if (group === FilterGroups.filterRoom) {
newFilter.roomId = null;
}
newFilter.page = 0;

View File

@ -1227,6 +1227,7 @@ class FilesStore {
if (filter && isEmptyList) {
const {
authorType,
roomId,
search,
withSubfolders,
filterType,
@ -1234,6 +1235,7 @@ class FilesStore {
} = filter;
const isFiltered =
authorType ||
roomId ||
search ||
!withSubfolders ||
filterType ||
@ -3490,8 +3492,14 @@ class FilesStore {
withoutTags,
} = this.roomsFilter;
const { authorType, search, withSubfolders, filterType, searchInContent } =
this.filter;
const {
authorType,
roomId,
search,
withSubfolders,
filterType,
searchInContent,
} = this.filter;
const isFiltered =
isRoomsFolder || isArchiveFolder
@ -3503,6 +3511,7 @@ class FilesStore {
tags ||
withoutTags
: authorType ||
roomId ||
search ||
!withSubfolders ||
filterType ||

View File

@ -390,11 +390,8 @@ class UploadDataStore {
};
startConversion = async (t, isOpen = false) => {
const {
isRecentFolder,
isFavoritesFolder,
isShareFolder,
} = this.treeFoldersStore;
const { isRecentFolder, isFavoritesFolder, isShareFolder } =
this.treeFoldersStore;
if (!this.converted) return;
@ -777,14 +774,8 @@ class UploadDataStore {
};
refreshFiles = async (currentFile) => {
const {
files,
setFiles,
folders,
setFolders,
filter,
setFilter,
} = this.filesStore;
const { files, setFiles, folders, setFolders, filter, setFilter } =
this.filesStore;
const { withPaging } = this.authStore.settingsStore;
@ -1335,10 +1326,8 @@ class UploadDataStore {
deleteAfter,
operationId
) => {
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = this.secondaryProgressDataStore;
const { setSecondaryProgressBarData, clearSecondaryProgressData } =
this.secondaryProgressDataStore;
return copyToFolder(
destFolderId,
@ -1389,10 +1378,8 @@ class UploadDataStore {
deleteAfter,
operationId
) => {
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = this.secondaryProgressDataStore;
const { setSecondaryProgressBarData, clearSecondaryProgressData } =
this.secondaryProgressDataStore;
return moveToFolder(
destFolderId,
@ -1493,10 +1480,8 @@ class UploadDataStore {
};
loopFilesOperations = async (data, pbData, isDownloadAction) => {
const {
clearSecondaryProgressData,
setSecondaryProgressBarData,
} = this.secondaryProgressDataStore;
const { clearSecondaryProgressData, setSecondaryProgressBarData } =
this.secondaryProgressDataStore;
const label = this.secondaryProgressDataStore.label;
let progress = data.progress;
@ -1543,11 +1528,8 @@ class UploadDataStore {
removeFiles,
} = this.filesStore;
const {
clearSecondaryProgressData,
setSecondaryProgressBarData,
label,
} = this.secondaryProgressDataStore;
const { clearSecondaryProgressData, setSecondaryProgressBarData, label } =
this.secondaryProgressDataStore;
const { withPaging } = this.authStore.settingsStore;
let receivedFolder = destFolderId;
@ -1625,12 +1607,8 @@ class UploadDataStore {
};
clearActiveOperations = (fileIds = [], folderIds = []) => {
const {
activeFiles,
activeFolders,
setActiveFiles,
setActiveFolders,
} = this.filesStore;
const { activeFiles, activeFolders, setActiveFiles, setActiveFolders } =
this.filesStore;
const newActiveFiles = activeFiles.filter((el) => !fileIds?.includes(el));
const newActiveFolders = activeFolders.filter(

View File

@ -11,6 +11,7 @@ const DEFAULT_FILTER_TYPE = null;
const DEFAULT_SEARCH_TYPE = true; //withSubfolders
const DEFAULT_SEARCH = null;
const DEFAULT_AUTHOR_TYPE = null;
const DEFAULT_ROOM_ID = null;
const DEFAULT_SELECTED_ITEM = {};
const DEFAULT_FOLDER = "@my";
const DEFAULT_SEARCH_IN_CONTENT = null;
@ -19,6 +20,7 @@ const DEFAULT_EXCLUDE_SUBJECT = null;
const SEARCH_TYPE = "withSubfolders";
const AUTHOR_TYPE = "authorType";
const FILTER_TYPE = "filterType";
const ROOM_ID = "roomId";
const SEARCH = "search";
const SORT_BY = "sortby";
const SORT_ORDER = "sortorder";
@ -51,11 +53,13 @@ class FilesFilter {
const filterType =
(urlFilter[FILTER_TYPE] && +urlFilter[FILTER_TYPE]) ||
defaultFilter.filterType;
const authorType =
(urlFilter[AUTHOR_TYPE] &&
urlFilter[AUTHOR_TYPE].includes("_") &&
urlFilter[AUTHOR_TYPE]) ||
defaultFilter.authorType;
const roomId = urlFilter[ROOM_ID] || defaultFilter.roomId;
const withSubfolders =
(urlFilter[SEARCH_TYPE] && urlFilter[SEARCH_TYPE]) ||
defaultFilter.withSubfolders;
@ -84,6 +88,7 @@ class FilesFilter {
filterType,
withSubfolders,
search,
roomId,
authorType,
defaultFilter.selectedItem,
folder,
@ -104,6 +109,7 @@ class FilesFilter {
filterType = DEFAULT_FILTER_TYPE,
withSubfolders = DEFAULT_SEARCH_TYPE,
search = DEFAULT_SEARCH,
roomId = DEFAULT_ROOM_ID,
authorType = DEFAULT_AUTHOR_TYPE,
selectedItem = DEFAULT_SELECTED_ITEM,
folder = DEFAULT_FOLDER,
@ -118,8 +124,9 @@ class FilesFilter {
this.filterType = filterType;
this.withSubfolders = withSubfolders;
this.search = search;
this.total = total;
this.roomId = roomId;
this.authorType = authorType;
this.total = total;
this.selectedItem = selectedItem;
this.folder = folder;
this.searchInContent = searchInContent;
@ -146,6 +153,7 @@ class FilesFilter {
pageCount,
search,
sortBy,
roomId,
sortOrder,
withSubfolders,
startIndex,
@ -157,6 +165,7 @@ class FilesFilter {
filterType || (search ?? "").trim() || authorType
? withSubfolders
: false;
const userIdOrGroupId =
authorType && authorType.includes("_")
? authorType.slice(authorType.indexOf("_") + 1)
@ -171,6 +180,7 @@ class FilesFilter {
filterType: filterType,
filterValue: (search ?? "").trim(),
withSubfolders: isFilterSet,
roomId: roomId,
userIdOrGroupId,
searchInContent,
excludeSubject,
@ -191,6 +201,7 @@ class FilesFilter {
sortBy,
sortOrder,
withSubfolders,
roomId,
searchInContent,
excludeSubject,
} = this;
@ -199,39 +210,16 @@ class FilesFilter {
const URLParams = queryString.parse(window.location.href);
if (filterType) {
dtoFilter[FILTER_TYPE] = filterType;
}
if (withSubfolders) {
dtoFilter[SEARCH_TYPE] = withSubfolders;
}
if (search) {
dtoFilter[SEARCH] = search.trim();
}
if (authorType) {
dtoFilter[AUTHOR_TYPE] = authorType;
}
if (folder) {
dtoFilter[FOLDER] = folder;
}
if (pageCount !== DEFAULT_PAGE_COUNT) {
dtoFilter[PAGE_COUNT] = pageCount;
}
if (URLParams.preview) {
dtoFilter[PREVIEW] = URLParams.preview;
}
if (searchInContent) {
dtoFilter[SEARCH_IN_CONTENT] = searchInContent;
}
if (excludeSubject) {
dtoFilter[EXCLUDE_SUBJECT] = excludeSubject;
}
if (filterType) dtoFilter[FILTER_TYPE] = filterType;
if (withSubfolders) dtoFilter[SEARCH_TYPE] = withSubfolders;
if (search) dtoFilter[SEARCH] = search.trim();
if (roomId) dtoFilter[ROOM_ID] = roomId;
if (authorType) dtoFilter[AUTHOR_TYPE] = authorType;
if (folder) dtoFilter[FOLDER] = folder;
if (pageCount !== DEFAULT_PAGE_COUNT) dtoFilter[PAGE_COUNT] = pageCount;
if (URLParams.preview) dtoFilter[PREVIEW] = URLParams.preview;
if (searchInContent) dtoFilter[SEARCH_IN_CONTENT] = searchInContent;
if (excludeSubject) dtoFilter[EXCLUDE_SUBJECT] = excludeSubject;
dtoFilter[PAGE] = page + 1;
dtoFilter[SORT_BY] = sortBy;
@ -256,6 +244,7 @@ class FilesFilter {
this.filterType,
this.withSubfolders,
this.search,
this.roomId,
this.authorType,
this.selectedItem,
this.folder,
@ -267,9 +256,10 @@ class FilesFilter {
equals(filter) {
const equals =
this.filterType === filter.filterType &&
this.authorType === filter.authorType &&
this.withSubfolders === filter.withSubfolders &&
this.search === filter.search &&
this.roomId === filter.roomId &&
this.authorType === filter.authorType &&
this.sortBy === filter.sortBy &&
this.sortOrder === filter.sortOrder &&
this.viewAs === filter.viewAs &&

View File

@ -16,6 +16,7 @@ import Portal from "@docspace/components/portal";
import FilterBlockItem from "./FilterBlockItem";
import PeopleSelector from "client/PeopleSelector";
import RoomSelector from "@docspace/client/src/components/RoomSelector";
import {
StyledFilterBlock,
@ -24,6 +25,7 @@ import {
StyledControlContainer,
StyledCrossIcon,
} from "./StyledFilterBlock";
import { FilterSelectorTypes } from "../../../constants";
//TODO: fix translate
const FilterBlock = ({
@ -40,21 +42,20 @@ const FilterBlock = ({
}) => {
const [showSelector, setShowSelector] = React.useState({
show: false,
isAuthor: false,
type: null,
group: "",
});
const [filterData, setFilterData] = React.useState([]);
const [filterValues, setFilterValues] = React.useState([]);
const [isLoading, setIsLoading] = React.useState(false);
const changeShowSelector = React.useCallback((isAuthor, group) => {
setShowSelector((val) => {
return {
show: !val.show,
isAuthor: isAuthor,
group: group,
};
});
const changeShowSelector = React.useCallback((selectorType, group) => {
setShowSelector((val) => ({
show: !val.show,
type: selectorType,
group: group,
}));
}, []);
const changeSelectedItems = React.useCallback(
@ -109,8 +110,11 @@ const FilterBlock = ({
changeSelectedItems([]);
setFilterValues([]);
selectedFilterValue.length > 0 && onFilter && onFilter([]);
}, [changeSelectedItems, selectedFilterValue.length]);
selectedFilterValue &&
selectedFilterValue.length > 0 &&
onFilter &&
onFilter([]);
}, [changeSelectedItems, selectedFilterValue?.length]);
const changeFilterValue = React.useCallback(
(group, key, isSelected, label, isMultiSelect, withOptions) => {
@ -133,9 +137,8 @@ const FilterBlock = ({
value[groupIdx].key.splice(itemIdx, 1);
if (value[groupIdx].key.length === 0) {
if (value[groupIdx].key.length === 0)
value = value.filter((item) => item.group !== group);
}
} else {
value = value.filter((item) => item.group !== group);
}
@ -348,15 +351,24 @@ const FilterBlock = ({
{showSelector.show ? (
<>
<StyledFilterBlock>
<PeopleSelector
withOutCurrentAuthorizedUser
className="people-selector"
isMultiSelect={false}
onAccept={selectOption}
onBackClick={onArrowClick}
headerLabel={selectorLabel}
/>
{showSelector.type === FilterSelectorTypes.people ? (
<PeopleSelector
withOutCurrentAuthorizedUser
className="people-selector"
isMultiSelect={false}
onAccept={selectOption}
onBackClick={onArrowClick}
headerLabel={selectorLabel}
/>
) : (
<RoomSelector
className="people-selector"
isMultiSelect={false}
onAccept={selectOption}
onBackClick={onArrowClick}
headerLabel={selectorLabel}
/>
)}
<StyledControlContainer onClick={hideFilterBlock}>
<StyledCrossIcon />
</StyledControlContainer>

View File

@ -24,7 +24,11 @@ import {
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
import XIcon from "PUBLIC_DIR/images/x.react.svg";
import { FilterGroups, FilterKeys } from "../../../constants";
import {
FilterGroups,
FilterKeys,
FilterSelectorTypes,
} from "../../../constants";
const FilterBlockItem = ({
group,
@ -55,7 +59,7 @@ const FilterBlockItem = ({
);
};
const showSelectorAction = (event, isAuthor, group, ref) => {
const showSelectorAction = (event, selectorType, group, ref) => {
let target = event.target;
while (!!target.parentNode) {
@ -67,13 +71,16 @@ const FilterBlockItem = ({
}
}
showSelector && showSelector(isAuthor, group);
showSelector && showSelector(selectorType, group);
};
const getSelectorItem = (item) => {
const clearSelectorRef = React.useRef(null);
const isAuthor = item.key === "user";
const isRoomsSelector = item.group === FilterGroups.filterRoom;
const selectorType = isRoomsSelector
? FilterSelectorTypes.rooms
: FilterSelectorTypes.people;
return !item.isSelected ||
item.selectedKey === "me" ||
@ -85,7 +92,9 @@ const FilterBlockItem = ({
: { height: "0", width: "0" }
}
key={item.key}
onClick={(event) => showSelectorAction(event, isAuthor, item.group, [])}
onClick={(event) =>
showSelectorAction(event, selectorType, item.group, [])
}
>
{item?.displaySelectorType === "button" && (
<SelectorAddButton id="filter_add-author" />
@ -102,7 +111,7 @@ const FilterBlockItem = ({
onClick={(event) =>
showSelectorAction(
event,
isAuthor,
selectorType,
item.group,
clearSelectorRef.current
)
@ -185,7 +194,11 @@ const FilterBlockItem = ({
};
const getTagItem = (item) => {
const isAuthor = item.key === FilterKeys.user;
const isRoomsSelector = item.group === FilterGroups.filterRoom;
const selectorType = isRoomsSelector
? FilterSelectorTypes.rooms
: FilterSelectorTypes.people;
if (
item.group === FilterGroups.filterAuthor ||
@ -209,7 +222,7 @@ const FilterBlockItem = ({
id={item.id}
onClick={
item.key === FilterKeys.other
? (event) => showSelectorAction(event, isAuthor, item.group, [])
? (event) => showSelectorAction(event, selectorType, item.group, [])
: () =>
changeFilterValueAction(
item.key,

View File

@ -407,7 +407,7 @@ export const FilterGroups = Object.freeze({
filterType: "filter-filterType",
filterAuthor: "filter-author",
filterFolders: "filter-folders",
filterRooms: "filter-rooms",
filterRoom: "filter-room",
filterContent: "filter-withContent",
roomFilterProviderType: "filter-provider-type",
roomFilterType: "filter-type",
@ -426,3 +426,8 @@ export const FilterKeys = Object.freeze({
other: "other",
user: "user",
});
export const FilterSelectorTypes = Object.freeze({
people: "people-selector",
rooms: "rooms-selector",
});

View File

@ -26,6 +26,7 @@
search: "",
filterType: null,
authorType: null,
roomId: null,
withSubfolders: true,
},
keysForReload: [