IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Files: Applied API changes on server in files filtering

Browse Source
This commit is contained in:
Alexey Safronov 2020-10-07 16:41:05 +03:00
parent e76e50dc79
commit ca37d2134d
4 changed files with 160 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
products/ASC.Files/Client/src/components/pages/Home/Section/Filter/index.js
View File

@ -1,20 +1,24 @@
import React from "react";
import { connect } from "react-redux";
import { fetchFiles, setViewAs, setIsLoading } from "../../../../../store/files/actions";
import {
fetchFiles,
setViewAs,
setIsLoading,
} from "../../../../../store/files/actions";
import find from "lodash/find";
import result from "lodash/result";
import { withTranslation } from "react-i18next";
import { withRouter } from "react-router";
import { getFilterByLocation } from "../../../../../helpers/converters";
import { constants, FilterInput } from 'asc-web-common';
import { constants, FilterInput } from "asc-web-common";
import isEqual from "lodash/isEqual";
import { isMobileOnly } from 'react-device-detect';
import { isMobileOnly } from "react-device-detect";
const { FilterType } = constants;
const getFilterType = filterValues => {
const getFilterType = (filterValues) => {
const filterType = result(
find(filterValues, value => {
find(filterValues, (value) => {
return value.group === "filter-filterType";
}),
"key"
@ -23,9 +27,9 @@ const getFilterType = filterValues => {
return filterType ? +filterType : null;
};
const getAuthorType = filterValues => {
const getAuthorType = (filterValues) => {
const authorType = result(
find(filterValues, value => {
find(filterValues, (value) => {
return value.group === "filter-author";
}),
"key"
@ -35,31 +39,30 @@ const getAuthorType = filterValues => {
};
const getSelectedItem = (filterValues, type) => {
const selectedItem = filterValues.find(item => item.key === type);
const selectedItem = filterValues.find((item) => item.key === type);
return selectedItem || null;
};
const getSearchParams = filterValues => {
const getSearchParams = (filterValues) => {
const searchParams = result(
find(filterValues, value => {
find(filterValues, (value) => {
return value.group === "filter-folders";
}),
"key"
);
return searchParams || 'true';
return searchParams || "true";
};
class SectionFilterContent extends React.Component {
constructor(props) {
super(props);
this.state = {
isReady: false
}
isReady: false,
};
}
onFilter = data => {
onFilter = (data) => {
const { setIsLoading, filter, selectedFolderId, fetchFiles } = this.props;
const filterType = getFilterType(data.filterValues) || null;
@ -70,8 +73,9 @@ class SectionFilterContent extends React.Component {
const authorType = getAuthorType(data.filterValues);
const withSubfolders = getSearchParams(data.filterValues);
const selectedItem = authorType ? getSelectedItem(data.filterValues, authorType) : null;
const selectedItem = authorType
? getSelectedItem(data.filterValues, authorType)
: null;
const selectedFilterItem = {};
if (selectedItem) {
selectedFilterItem.key = selectedItem.selectedItem.key;
@ -90,13 +94,12 @@ class SectionFilterContent extends React.Component {
newFilter.selectedItem = selectedFilterItem;
setIsLoading(true);
fetchFiles(selectedFolderId, newFilter)
.finally(() => setIsLoading(false));
fetchFiles(selectedFolderId, newFilter).finally(() => setIsLoading(false));
};
onChangeViewAs = (view) => {
this.props.setViewAs(view)
}
this.props.setViewAs(view);
};
getData = () => {
const { t, customNames, user, selectedItem } = this.props;
@ -107,48 +110,48 @@ class SectionFilterContent extends React.Component {
key: "filter-filterType",
group: "filter-filterType",
label: t("Type"),
isHeader: true
isHeader: true,
},
{
key: FilterType.FoldersOnly.toString(),
group: "filter-filterType",
label: t("Folders")
label: t("Folders"),
},
{
key: FilterType.DocumentsOnly.toString(),
group: "filter-filterType",
label: t("Documents")
label: t("Documents"),
},
{
key: FilterType.PresentationsOnly.toString(),
group: "filter-filterType",
label: t("Presentations")
label: t("Presentations"),
},
{
key: FilterType.SpreadsheetsOnly.toString(),
group: "filter-filterType",
label: t("Spreadsheets")
label: t("Spreadsheets"),
},
{
key: FilterType.ImagesOnly.toString(),
group: "filter-filterType",
label: t("Images")
label: t("Images"),
},
{
key: FilterType.MediaOnly.toString(),
group: "filter-filterType",
label: t("Media")
label: t("Media"),
},
{
key: FilterType.ArchiveOnly.toString(),
group: "filter-filterType",
label: t("Archives")
label: t("Archives"),
},
{
key: FilterType.FilesOnly.toString(),
group: "filter-filterType",
label: t("AllFiles")
}
label: t("AllFiles"),
},
];
const filterOptions = [
@ -168,7 +171,7 @@ class SectionFilterContent extends React.Component {
defaultSelectLabel: t("LblSelect"),
groupsCaption,
defaultOption: user,
selectedItem
selectedItem,
},
{
key: "group",
@ -176,18 +179,18 @@ class SectionFilterContent extends React.Component {
label: groupsCaption,
defaultSelectLabel: t("LblSelect"),
isSelector: true,
selectedItem
selectedItem,
},
{
key: "filter-folders",
group: "filter-folders",
label: t("Folders"),
isHeader: true
isHeader: true,
},
{
key: "false",
group: "filter-folders",
label: t('NoSubfolders')
label: t("NoSubfolders"),
},
];
@ -200,20 +203,22 @@ class SectionFilterContent extends React.Component {
const { t } = this.props;
const commonOptions = [
{ key: "lastModifiedDate", label: t("ByLastModifiedDate"), default: true },
{ key: "creationDate", label: t("ByCreationDate"), default: true },
{ key: "title", label: t("ByTitle"), default: true },
{ key: "type", label: t("ByType"), default: true },
{ key: "size", label: t("BySize"), default: true },
{ key: "author", label: t("ByAuthor"), default: true }
{ key: "DateAndTime", label: t("ByLastModifiedDate"), default: true },
{ key: "DateAndTimeCreation", label: t("ByCreationDate"), default: true },
{ key: "AZ", label: t("ByTitle"), default: true },
{ key: "Type", label: t("ByType"), default: true },
{ key: "Size", label: t("BySize"), default: true },
{ key: "Author", label: t("ByAuthor"), default: true },
];
const viewSettings = [
{ key: "row", label: t("ViewList"), isSetting: true, default: true },
{ key: "tile", label: t("ViewTiles"), isSetting: true, default: true }
{ key: "tile", label: t("ViewTiles"), isSetting: true, default: true },
];
//TODO: Need use mobile detect for better result
return window.innerWidth < 460 ? [...commonOptions, ...viewSettings] : commonOptions;
return window.innerWidth < 460
? [...commonOptions, ...viewSettings]
: commonOptions;
};
getSelectedFilterData = () => {
@ -221,7 +226,7 @@ class SectionFilterContent extends React.Component {
const selectedFilterData = {
filterValues: [],
sortDirection: filter.sortOrder === "ascending" ? "asc" : "desc",
sortId: filter.sortBy
sortId: filter.sortBy,
};
selectedFilterData.inputValue = filter.search;
@ -229,21 +234,21 @@ class SectionFilterContent extends React.Component {
if (filter.filterType >= 0) {
selectedFilterData.filterValues.push({
key: `${filter.filterType}`,
group: "filter-filterType"
group: "filter-filterType",
});
}
if (filter.authorType) {
selectedFilterData.filterValues.push({
key: `${filter.authorType}`,
group: "filter-author"
group: "filter-author",
});
}
if (filter.withSubfolders === 'false') {
if (filter.withSubfolders === "false") {
selectedFilterData.filterValues.push({
key: filter.withSubfolders,
group: "filter-folders"
group: "filter-folders",
});
}
@ -264,16 +269,20 @@ class SectionFilterContent extends React.Component {
return false;
};
shouldComponentUpdate(nextProps, nextState) {
return (!isEqual(this.props.filter, nextProps.filter) || this.props.selectedFolderId !== nextProps.selectedFolderId || this.state.isReady !== nextState.isReady || this.props.viewAs !== nextProps.viewAs);
return (
!isEqual(this.props.filter, nextProps.filter) ||
this.props.selectedFolderId !== nextProps.selectedFolderId ||
this.state.isReady !== nextState.isReady ||
this.props.viewAs !== nextProps.viewAs
);
}
render() {
const selectedFilterData = this.getSelectedFilterData();
const { t, i18n } = this.props;
const filterColumnCount = window.innerWidth < 500 ? {} : { filterColumnCount: 3 }
const filterColumnCount =
window.innerWidth < 500 ? {} : { filterColumnCount: 3 };
return (
<FilterInput
getFilterData={this.getData}
@ -281,7 +290,7 @@ class SectionFilterContent extends React.Component {
selectedFilterData={selectedFilterData}
onFilter={this.onFilter}
onChangeViewAs={this.onChangeViewAs}
viewAs={false} // TODO: include viewSelector after adding method getThumbnail - this.props.viewAs
viewAs={false} // TODO: include viewSelector after adding method getThumbnail - this.props.viewAs
directionAscLabel={t("DirectionAscLabel")}
directionDescLabel={t("DirectionDescLabel")}
placeholder={t("Search")}
@ -303,15 +312,12 @@ function mapStateToProps(state) {
customNames: state.auth.settings.customNames,
selectedFolderId: state.files.selectedFolder.id,
selectedItem: state.files.filter.selectedItem,
viewAs: state.files.viewAs
viewAs: state.files.viewAs,
};
}
export default connect(
mapStateToProps,
{
fetchFiles,
setViewAs,
setIsLoading
}
)(withRouter(withTranslation()(SectionFilterContent)));
export default connect(mapStateToProps, {
fetchFiles,
setViewAs,
setIsLoading,
})(withRouter(withTranslation()(SectionFilterContent)));

4
products/ASC.Files/Client/src/helpers/constants.js
View File

@ -7,6 +7,6 @@ export const SORT_BY = "sortby";
export const SORT_ORDER = "sortorder";
export const VIEW_AS = "viewas";
export const PAGE = "page";
export const PAGE_COUNT = "pagecount";
export const PAGE_COUNT = "count";
export const FOLDER = "folder";
export const PREVIEW = "preview"
export const PREVIEW = "preview";

20
web/ASC.Web.Common/src/api/files/filter.js
View File

@ -3,7 +3,7 @@ import { toUrlParams } from "../../utils";
const DEFAULT_PAGE = 0;
const DEFAULT_PAGE_COUNT = 25;
const DEFAULT_TOTAL = 0;
const DEFAULT_SORT_BY = "lastModifiedDate";
const DEFAULT_SORT_BY = "DateAndTime";
const DEFAULT_SORT_ORDER = "ascending";
const DEFAULT_VIEW = "row";
const DEFAULT_FILTER_TYPE = null;
@ -12,7 +12,7 @@ const DEFAULT_SEARCH = null;
const DEFAULT_FOLDER_PATH = [];
const DEFAULT_AUTHOR_TYPE = null;
const DEFAULT_SELECTED_ITEM = {};
const DEFAULT_FOLDER = '@my';
const DEFAULT_FOLDER = "@my";
// TODO: add next params
// subjectGroup bool
@ -79,12 +79,18 @@ class FilesFilter {
withSubfolders
} = this;
const isFilterSet = (filterType || (search ?? "").trim() || authorType) ? withSubfolders : false;
const userIdOrGroupId = authorType && authorType.includes('_') ? authorType.slice(authorType.indexOf('_') + 1) : null;
const isFilterSet =
filterType || (search ?? "").trim() || authorType
? withSubfolders
: false;
const userIdOrGroupId =
authorType && authorType.includes("_")
? authorType.slice(authorType.indexOf("_") + 1)
: null;
let dtoFilter = {
const dtoFilter = {
folder: folder,
pagecount: pageCount,
count: pageCount,
startIndex: this.getStartIndex(),
page: page,
sortby: sortBy,
@ -95,8 +101,6 @@ class FilesFilter {
userIdOrGroupId
};
return dtoFilter;
};

99
web/ASC.Web.Common/src/api/files/index.js
View File

@ -44,33 +44,44 @@ export function getFolder(folderId, filter) {
}
export function getFoldersTree() {
const rootFoldersPaths = ['@my', '@share', '@common', /*'@projects',*/ '@trash']; //TODO: need get from settings
const requestsArray = rootFoldersPaths.map(path => request({ method: "get", url: `/files/${path}?filterType=2` }));
const rootFoldersPaths = [
"@my",
"@share",
"@common",
/*'@projects',*/ "@trash"
]; //TODO: need get from settings
const requestsArray = rootFoldersPaths.map(path =>
request({ method: "get", url: `/files/${path}?filterType=2` })
);
return axios.all(requestsArray)
.then(axios.spread((...responses) =>
return axios.all(requestsArray).then(
axios.spread((...responses) =>
responses.map((data, index) => {
const trashIndex = 3;
return {
id: data.current.id,
key: `0-${index}`,
title: data.current.title,
folders: index !== trashIndex ? data.folders.map(folder => {
return {
id: folder.id,
title: folder.title,
access: folder.access,
foldersCount: folder.foldersCount,
rootFolderType: folder.rootFolderType,
newItems: folder.new
}
}) : null,
folders:
index !== trashIndex
? data.folders.map(folder => {
return {
id: folder.id,
title: folder.title,
access: folder.access,
foldersCount: folder.foldersCount,
rootFolderType: folder.rootFolderType,
newItems: folder.new
};
})
: null,
pathParts: data.pathParts,
foldersCount: index !== trashIndex ? data.current.foldersCount : null,
newItems: data.new
}
};
})
))
)
);
}
export function getMyFolderList(filter = FilesFilter.getDefault()) {
@ -284,7 +295,11 @@ export function getShareFiles(fileId) {
export function setShareFolder(folderId, share, notify, sharingMessage) {
const data = { share, notify, sharingMessage };
return request({ method: "put", url: `/files/folder/${folderId}/share`, data });
return request({
method: "put",
url: `/files/folder/${folderId}/share`,
data
});
}
export function setShareFiles(fileId, share, notify, sharingMessage) {
@ -294,7 +309,11 @@ export function setShareFiles(fileId, share, notify, sharingMessage) {
export function startUploadSession(folderId, fileName, fileSize, relativePath) {
const data = { fileName, fileSize, relativePath };
return request({ method: "post", url: `/files/${folderId}/upload/create_session.json`, data });
return request({
method: "post",
url: `/files/${folderId}/upload/create_session.json`,
data
});
}
export function uploadFile(url, data) {
@ -315,13 +334,37 @@ export function getProgress() {
return request({ method: "get", url: "/files/fileops" });
}
export function copyToFolder(destFolderId, folderIds, fileIds, conflictResolveType, deleteAfter) {
const data = { destFolderId, folderIds, fileIds, conflictResolveType, deleteAfter };
export function copyToFolder(
destFolderId,
folderIds,
fileIds,
conflictResolveType,
deleteAfter
) {
const data = {
destFolderId,
folderIds,
fileIds,
conflictResolveType,
deleteAfter
};
return request({ method: "put", url: "/files/fileops/copy", data });
}
export function moveToFolder(destFolderId, folderIds, fileIds, conflictResolveType, deleteAfter) {
const data = { destFolderId, folderIds, fileIds, conflictResolveType, deleteAfter };
export function moveToFolder(
destFolderId,
folderIds,
fileIds,
conflictResolveType,
deleteAfter
) {
const data = {
destFolderId,
folderIds,
fileIds,
conflictResolveType,
deleteAfter
};
return request({ method: "put", url: "/files/fileops/move", data });
}
@ -333,7 +376,7 @@ export function getFileVersionInfo(fileId) {
}
export function markAsRead(folderIds, fileIds) {
const data = { folderIds, fileIds};
const data = { folderIds, fileIds };
return request({ method: "put", url: "/files/fileops/markasread", data });
}
@ -345,11 +388,17 @@ export function getNewFiles(folderId) {
}
export function convertFile(fileId) {
return request({ method: "put", url: `/files/file/${fileId}/checkconversion` });
return request({
method: "put",
url: `/files/file/${fileId}/checkconversion`
});
}
export function getConvertFile(fileId) {
return request({ method: "get", url: `/files/file/${fileId}/checkconversion` });
return request({
method: "get",
url: `/files/file/${fileId}/checkconversion`
});
}
export function finalizeVersion(fileId, version, continueVersion) {