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

Merge branch 'feature/files' of github.com:ONLYOFFICE/AppServer into feature/files

Browse Source
This commit is contained in:
Artem Tarasov 2020-10-07 18:23:34 +03:00
commit 5806daa594
12 changed files with 407 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
products/ASC.Files/Client/src/components/pages/Home/Section/Body/EmptyFolderContainer.js
View File

@ -4,18 +4,20 @@ import { EmptyScreenContainer } from "asc-web-components";
const EmptyFolderWrapper = styled.div`
.empty-folder_container {
.ec-image {
padding-right: 16px;
margin: 0 0 0 auto;
}
.empty-folder_link {
margin-right: 8px;
margin-right: 7px;
}
.empty-folder_container-links {
display: grid;
margin: 8px 0;
grid-template-columns: 12px 1fr;
grid-column-gap: 8px;
}
.flex-wrapper_container {
display: flex;
margin: 12px 0;
flex-wrap: wrap;
}
.empty-folder_container_up-image {
@ -24,7 +26,8 @@ const EmptyFolderWrapper = styled.div`
}
.empty-folder_container_plus-image {
margin: -8px 8px 0 0;
display: flex;
margin: -10px 8px 0 0;
line-height: unset;
}
@ -36,7 +39,7 @@ const EmptyFolderWrapper = styled.div`
}
`;
const EmptyFoldersContainer = props => {
const EmptyFoldersContainer = (props) => {
const imageAlt = "Empty folder image";
const {
imageSrc,
@ -44,7 +47,6 @@ const EmptyFoldersContainer = props => {
subheadingText,
descriptionText,
buttons,
widthProp
} = props;
return (
@ -57,7 +59,6 @@ const EmptyFoldersContainer = props => {
subheadingText={subheadingText}
descriptionText={descriptionText}
buttons={buttons}
widthProp={widthProp}
/>
</EmptyFolderWrapper>
);

316
products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js
View File

@ -13,6 +13,7 @@ import {
RowContainer,
Link,
DragAndDrop,
Box,
} from "asc-web-components";
import EmptyFolderContainer from "./EmptyFolderContainer";
import FilesRowContent from "./FilesRowContent";
@ -90,7 +91,8 @@ const { FileAction } = constants;
const linkStyles = {
isHovered: true,
type: "action",
fontSize: "14px",
fontWeight: "600",
color: "#555f65",
className: "empty-folder_link",
display: "flex",
};
@ -243,7 +245,7 @@ class SectionBodyContent extends React.Component {
setTreeFolders,
setIsLoading,
fetchFiles,
setUpdateTree
setUpdateTree,
} = this.props;
const items = [...folders, ...files];
const item = items.find((o) => o.id === id && !o.fileExst); //TODO maybe need files find and folders find, not at one function?
@ -309,7 +311,7 @@ class SectionBodyContent extends React.Component {
t,
setProgressBarData,
fetchFiles,
setUpdateTree
setUpdateTree,
} = this.props;
api.files.getProgress().then((res) => {
const deleteProgress = res.find((x) => x.id === id);
@ -502,8 +504,8 @@ class SectionBodyContent extends React.Component {
"data-id": item.id,
"data-version": item.version,
};
case "selector0":
case "selector1":
case "separator0":
case "separator1":
return { key: option, isSeparator: true };
case "block-unblock-version":
return {
@ -519,7 +521,7 @@ class SectionBodyContent extends React.Component {
label: t("SharingSettings"),
icon: "CatalogSharedIcon",
onClick: this.onClickShare,
disabled: isSharable
disabled: isSharable,
};
case "send-by-email":
return {
@ -705,7 +707,7 @@ class SectionBodyContent extends React.Component {
};
renderEmptyRootFolderContainer = () => {
const { currentFolderType, title, t, widthProp } = this.props;
const { currentFolderType, title, t } = this.props;
const subheadingText = t("SubheadingEmptyText");
const myDescription = t("MyEmptyContainerDescription");
const shareDescription = t("SharedEmptyContainerDescription");
@ -726,16 +728,20 @@ class SectionBodyContent extends React.Component {
>
+
</Link>
<Link data-format="docx" onClick={this.onCreate} {...linkStyles}>
{t("Document")},
</Link>
<Link data-format="xlsx" onClick={this.onCreate} {...linkStyles}>
{t("Spreadsheet")},
</Link>
<Link data-format="pptx" onClick={this.onCreate} {...linkStyles}>
{t("Presentation")}
</Link>
<Box className="flex-wrapper_container">
<Link data-format="docx" onClick={this.onCreate} {...linkStyles}>
{t("Document")},
</Link>
<Link data-format="xlsx" onClick={this.onCreate} {...linkStyles}>
{t("Spreadsheet")},
</Link>
<Link data-format="pptx" onClick={this.onCreate} {...linkStyles}>
{t("Presentation")}
</Link>
</Box>
</div>
<div className="empty-folder_container-links">
<Link
className="empty-folder_container_plus-image"
@ -777,7 +783,6 @@ class SectionBodyContent extends React.Component {
descriptionText={myDescription}
imageSrc="images/empty_screen.png"
buttons={commonButtons}
widthProp={widthProp}
/>
);
case "Share":
@ -787,7 +792,6 @@ class SectionBodyContent extends React.Component {
subheadingText={subheadingText}
descriptionText={shareDescription}
imageSrc="images/empty_screen_forme.png"
widthProp={widthProp}
/>
);
case "Common":
@ -798,7 +802,6 @@ class SectionBodyContent extends React.Component {
descriptionText={commonDescription}
imageSrc="images/empty_screen_corporate.png"
buttons={commonButtons}
widthProp={widthProp}
/>
);
case "Trash":
@ -809,7 +812,6 @@ class SectionBodyContent extends React.Component {
descriptionText={trashDescription}
imageSrc="images/empty_screen_trash.png"
buttons={trashButtons}
widthProp={widthProp}
/>
);
default:
@ -818,7 +820,7 @@ class SectionBodyContent extends React.Component {
};
renderEmptyFolderContainer = () => {
const { t, widthProp } = this.props;
const { t } = this.props;
const buttons = (
<>
<div className="empty-folder_container-links">
@ -833,16 +835,20 @@ class SectionBodyContent extends React.Component {
>
+
</Link>
<Link data-format="docx" onClick={this.onCreate} {...linkStyles}>
{t("Document")},
</Link>
<Link data-format="xlsx" onClick={this.onCreate} {...linkStyles}>
{t("Spreadsheet")},
</Link>
<Link data-format="pptx" onClick={this.onCreate} {...linkStyles}>
{t("Presentation")}
</Link>
<Box className="flex-wrapper_container">
<Link data-format="docx" onClick={this.onCreate} {...linkStyles}>
{t("Document")},
</Link>
<Link data-format="xlsx" onClick={this.onCreate} {...linkStyles}>
{t("Spreadsheet")},
</Link>
<Link data-format="pptx" onClick={this.onCreate} {...linkStyles}>
{t("Presentation")}
</Link>
</Box>
</div>
<div className="empty-folder_container-links">
<Link
className="empty-folder_container_plus-image"
@ -858,6 +864,7 @@ class SectionBodyContent extends React.Component {
{t("Folder")}
</Link>
</div>
<div className="empty-folder_container-links">
<img
className="empty-folder_container_up-image"
@ -877,13 +884,12 @@ class SectionBodyContent extends React.Component {
headerText={t("EmptyFolderHeader")}
imageSrc="images/empty_screen.png"
buttons={buttons}
widthProp={widthProp}
/>
);
};
renderEmptyFilterContainer = () => {
const { t, widthProp } = this.props;
const { t } = this.props;
const subheadingText = t("EmptyFilterSubheadingText");
const descriptionText = t("EmptyFilterDescriptionText");
@ -910,7 +916,6 @@ class SectionBodyContent extends React.Component {
descriptionText={descriptionText}
imageSrc="images/empty_screen_filter.png"
buttons={buttons}
widthProp={widthProp}
/>
);
};
@ -1270,7 +1275,7 @@ class SectionBodyContent extends React.Component {
parentId: folderId,
fileExst: fileAction.extension,
});
}
};
render() {
const {
@ -1295,7 +1300,7 @@ class SectionBodyContent extends React.Component {
isMobile,
firstLoad,
filesList,
mediaFormats
mediaFormats,
} = this.props;
const {
@ -1314,7 +1319,7 @@ class SectionBodyContent extends React.Component {
const items = filesList;
const tooltipLabel = this.getTooltipLabel();
if (fileAction && fileAction.type === FileAction.Create) {
this.onCreateAddTempItem(items, folderId, fileAction);
}
@ -1412,122 +1417,127 @@ class SectionBodyContent extends React.Component {
const classNameProp =
isFolder && item.access < 2 ? { className: " dropable" } : {};
return (
<DragAndDrop
{...classNameProp}
onDrop={this.onDrop.bind(this, item)}
onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`}
{...contextOptionsProps}
value={value}
isFolder={!item.fileExst}
>
<Tile
key={item.id}
item={item}
isFolder={!item.fileExst}
element={element}
onSelect={this.onContentRowSelect}
editing={editingId}
viewAs={viewAs}
{...checkedProps}
{...contextOptionsProps}
needForUpdate={this.needForUpdate}
>
<FilesTileContent
item={item}
viewer={viewer}
culture={settings.culture}
onEditComplete={this.onEditComplete}
onMediaFileClick={this.onMediaFileClick}
/>
</Tile>
</DragAndDrop>
);
})}
</TileContainer>
) : (
<RowContainer draggable useReactWindow={false}>
{items.map((item) => {
const { checked, isFolder, value, contextOptions } = item;
const isEdit =
!!fileAction.type &&
editingId === item.id &&
item.fileExst === fileAction.extension;
const contextOptionsProps =
contextOptions && contextOptions.length > 0
? { contextOptions: this.getFilesContextOptions(contextOptions, item) }
: {};
const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(item, isEdit || item.id <= 0);
const classNameProp =
isFolder && item.access < 2 ? { className: " dropable" } : {};
return (
<DragAndDrop
{...classNameProp}
onDrop={this.onDrop.bind(this, item)}
onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`}
{...contextOptionsProps}
value={value}
>
<SimpleFilesRow
widthProp={widthProp}
key={item.id}
data={item}
element={element}
onSelect={this.onContentRowSelect}
editing={editingId}
{...checkedProps}
{...contextOptionsProps}
needForUpdate={this.needForUpdate}
selectItem={this.onSelectItem.bind(this, item)}
>
<FilesRowContent
widthProp={widthProp}
isMobile={isMobile}
item={item}
viewer={viewer}
culture={settings.culture}
onEditComplete={this.onEditComplete}
onMediaFileClick={this.onMediaFileClick}
/>
</SimpleFilesRow>
</DragAndDrop>
);
})}
</RowContainer>
)}
{playlist.length > 0 && mediaViewerVisible && (
<MediaViewer
currentFileId={currentMediaFileId}
allowConvert={true} //TODO
canDelete={(fileId) => {
return true;
}} //TODO
canDownload={(fileId) => {
return true;
}} //TODO
visible={mediaViewerVisible}
playlist={playlist}
onDelete={this.onDeleteMediaFile}
onDownload={this.onDownloadMediaFile}
onClose={this.onMediaViewerClose}
onEmptyPlaylistError={this.onMediaViewerClose}
extsMediaPreviewed={mediaFormats.extsMediaPreviewed} //TODO
extsImagePreviewed={mediaFormats.extsImagePreviewed} //TODO
/>
)}
{showSharingPanel && (
<SharingPanel
onClose={this.onClickShare}
visible={showSharingPanel}
/>
)}
</>
);
return (
<DragAndDrop
{...classNameProp}
onDrop={this.onDrop.bind(this, item)}
onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`}
{...contextOptionsProps}
value={value}
isFolder={!item.fileExst}
>
<Tile
key={item.id}
item={item}
isFolder={!item.fileExst}
element={element}
onSelect={this.onContentRowSelect}
editing={editingId}
viewAs={viewAs}
{...checkedProps}
{...contextOptionsProps}
needForUpdate={this.needForUpdate}
>
<FilesTileContent
item={item}
viewer={viewer}
culture={settings.culture}
onEditComplete={this.onEditComplete}
onMediaFileClick={this.onMediaFileClick}
/>
</Tile>
</DragAndDrop>
);
})}
</TileContainer>
) : (
<RowContainer draggable useReactWindow={false}>
{items.map((item) => {
const { checked, isFolder, value, contextOptions } = item;
const isEdit =
!!fileAction.type &&
editingId === item.id &&
item.fileExst === fileAction.extension;
const contextOptionsProps =
contextOptions && contextOptions.length > 0
? {
contextOptions: this.getFilesContextOptions(
contextOptions,
item
),
}
: {};
const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(item, isEdit || item.id <= 0);
const classNameProp =
isFolder && item.access < 2 ? { className: " dropable" } : {};
return (
<DragAndDrop
{...classNameProp}
onDrop={this.onDrop.bind(this, item)}
onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`}
{...contextOptionsProps}
value={value}
>
<SimpleFilesRow
widthProp={widthProp}
key={item.id}
data={item}
element={element}
onSelect={this.onContentRowSelect}
editing={editingId}
{...checkedProps}
{...contextOptionsProps}
needForUpdate={this.needForUpdate}
selectItem={this.onSelectItem.bind(this, item)}
>
<FilesRowContent
widthProp={widthProp}
isMobile={isMobile}
item={item}
viewer={viewer}
culture={settings.culture}
onEditComplete={this.onEditComplete}
onMediaFileClick={this.onMediaFileClick}
/>
</SimpleFilesRow>
</DragAndDrop>
);
})}
</RowContainer>
)}
{playlist.length > 0 && mediaViewerVisible && (
<MediaViewer
currentFileId={currentMediaFileId}
allowConvert={true} //TODO
canDelete={(fileId) => {
return true;
}} //TODO
canDownload={(fileId) => {
return true;
}} //TODO
visible={mediaViewerVisible}
playlist={playlist}
onDelete={this.onDeleteMediaFile}
onDownload={this.onDownloadMediaFile}
onClose={this.onMediaViewerClose}
onEmptyPlaylistError={this.onMediaViewerClose}
extsMediaPreviewed={mediaFormats.extsMediaPreviewed} //TODO
extsImagePreviewed={mediaFormats.extsImagePreviewed} //TODO
/>
)}
{showSharingPanel && (
<SharingPanel
onClose={this.onClickShare}
visible={showSharingPanel}
/>
)}
</>
);
}
}
@ -1586,7 +1596,7 @@ const mapStateToProps = (state) => {
viewAs: getViewAs(state),
viewer: getViewer(state),
filesList: getFilesList(state),
mediaFormats: getMediaViewerFormats(state)
mediaFormats: getMediaViewerFormats(state),
};
};

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";

2
products/ASC.Files/Client/yarn.lock
View File

@ -2193,7 +2193,7 @@ asap@~2.0.6:
sjcl "^1.0.8"
"asc-web-components@file:../../../packages/asc-web-components":
version "1.0.458"
version "1.0.459"
dependencies:
email-addresses "^3.1.0"
html-to-react "^1.4.2"

2
products/ASC.People/Client/yarn.lock
View File

@ -2186,7 +2186,7 @@ asap@~2.0.6:
sjcl "^1.0.8"
"asc-web-components@file:../../../packages/asc-web-components":
version "1.0.458"
version "1.0.459"
dependencies:
email-addresses "^3.1.0"
html-to-react "^1.4.2"

2
web/ASC.Web.Client/yarn.lock
View File

@ -2186,7 +2186,7 @@ asap@~2.0.6:
sjcl "^1.0.8"
"asc-web-components@file:../../packages/asc-web-components":
version "1.0.458"
version "1.0.459"
dependencies:
email-addresses "^3.1.0"
html-to-react "^1.4.2"

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;
};

107
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,18 +388,24 @@ 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) {
const data = { fileId, version, continueVersion };
return request({
method: "put",
url: `/files/file/${fileId}/history`,
url: `/files/file/${fileId}/history`,
data
});
}
@ -404,7 +453,7 @@ export function storeForceSave(val) {
export function forceSave(val) {
const data = { set: val };
return request({ method: "put", url: "files/forcesave", data });
}
}
export function thirdParty(val) {
const data = { set: val };
@ -412,5 +461,5 @@ export function thirdParty(val) {
}
export function getSettingsFiles() {
return request({ method: "get", url: `/files/settings` });
}
return request({ method: "get", url: `/files/settings` });
}

2
web/ASC.Web.Common/yarn.lock
View File

@ -3122,7 +3122,7 @@ arrify@^1.0.1:
integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
"asc-web-components@file:../../packages/asc-web-components":
version "1.0.458"
version "1.0.459"
dependencies:
email-addresses "^3.1.0"
html-to-react "^1.4.2"

2
web/ASC.Web.Components/package.json
View File

@ -1,6 +1,6 @@
{
"name": "asc-web-components",
"version": "1.0.458",
"version": "1.0.459",
"description": "Ascensio System SIA component library",
"license": "AGPL-3.0",
"main": "dist/asc-web-components.js",

132
web/ASC.Web.Components/src/components/empty-screen-container/index.js
View File

@ -1,89 +1,81 @@
import React from "react";
import styled, { css } from "styled-components";
import styled from "styled-components";
import PropTypes from "prop-types";
import Text from '../text';
const phoneSize = 464;
import Text from "../text";
import { mobile } from "../../utils/device";
const EmptyContentBody = styled.div`
margin: 0 auto;
padding: 50px 0;
display: grid;
grid-template-areas:
"img header"
${props => props.subheadingText && `"img subheading"`}
"img desc"
padding: 64px 0;
display: grid;
grid-template-areas:
"img headerText"
${props => props.subheadingText && `"img subheadingText"`}
${props => props.descriptionText && `"img descriptionText"`}
"img button";
min-width: 320px;
max-width: 742px;
grid-column-gap: 16px;
grid-row-gap: 12px;
max-width: 800px;
.ec-image {
grid-area: img;
margin: auto 0;
margin: 0 0 0 auto;
}
.ec-header {
grid-area: header;
grid-area: headerText;
}
.ec-subheading {
grid-area: subheading;
padding: 8px 0;
grid-area: subheadingText;
}
.ec-desc {
grid-area: desc;
padding-top: 5px;
grid-area: descriptionText;
}
.ec-buttons {
grid-area: button;
padding-top: 10px;
grid-area: button;
}
${props =>
props.widthProp <= phoneSize &&
css`
.ec-image {
display: none;
}
`}
@media (orientation: portrait) {
@media (max-width: 700px) {
.ec-image {
height: 21vw;
}
@media (max-width: 738px) {
padding-top: 0px;
max-width: 496px;
.ec-header {
font-size: 3.5vw;
padding-top: 16px;
}
.ec-subheading {
font-size: 2.9vw;
}
.ec-desc {
font-size: 2.4vw;
.ec-image {
max-height: 100px;
}
}
@media (max-width: 480px) {
.ec-image {
display: none;
}
@media ${mobile} {
min-width: 343px;
grid-template-areas:
"img"
"headerText"
${props => props.subheadingText && `"subheadingText"`}
${props => props.descriptionText && `"descriptionText"`}
"button";
.ec-header {
font-size: 4.75vw;
padding-top: 0px;
}
.ec-header,
.ec-subheading,
.ec-desc,
.ec-buttons {
padding-left: 16px;
}
.ec-subheading {
font-size: 4.15vw;
}
.ec-desc {
font-size: 3.7vw;
.ec-image {
height: 75px;
margin-left: 0;
}
}
}
@ -97,31 +89,41 @@ const EmptyContentImage = styled.img.attrs(props => ({
`;
const EmptyScreenContainer = props => {
const { imageSrc, imageAlt, headerText, subheadingText, descriptionText, buttons } = props;
const {
imageSrc,
imageAlt,
headerText,
subheadingText,
descriptionText,
buttons
} = props;
return (
<EmptyContentBody {...props}>
<EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} className="ec-image" />
<EmptyContentImage
imageSrc={imageSrc}
imageAlt={imageAlt}
className="ec-image"
/>
{headerText && (
<Text as="span" color="#333333" fontSize='24px' className="ec-header">{headerText}</Text>
<Text as="span" fontSize="19px" fontWeight="600" className="ec-header">
{headerText}
</Text>
)}
{subheadingText && (
<Text as="span" color="#737373" fontSize='18px' className="ec-subheading">{subheadingText}</Text>
<Text as="span" fontWeight="600" className="ec-subheading">
{subheadingText}
</Text>
)}
{descriptionText && (
<Text as="span" color="#737373" fontSize='14px' className="ec-desc">{descriptionText}</Text>
)}
{buttons && (
<div className="ec-buttons">
{buttons}
</div>
<Text as="span" color="#6A7378" fontSize="12px" className="ec-desc">
{descriptionText}
</Text>
)}
{buttons && <div className="ec-buttons">{buttons}</div>}
</EmptyContentBody>
);
};