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

Merge branch 'feature/files' into feature/files-recent

Browse Source 
# Conflicts:
#	products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRowContent.js
#	products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
This commit is contained in:
Vladislav Makhov 2020-10-16 17:15:14 +03:00
commit 3578340bcd
9 changed files with 439 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
products/ASC.Files/Client/src/App.js
View File

@ -31,12 +31,17 @@ const {
getModules, getModules,
setCurrentProductId, setCurrentProductId,
setCurrentProductHomePage, setCurrentProductHomePage,
getPortalPasswordSettings,
getPortalCultures, getPortalCultures,
} = commonStore.auth.actions; } = commonStore.auth.actions;
const { AUTH_KEY } = constants; const { AUTH_KEY } = constants;
class App extends React.Component { class App extends React.Component {
constructor(props) {
super(props);
this.isEditor = window.location.pathname.indexOf("doceditor") !== -1;
}
componentDidMount() { componentDidMount() {
utils.removeTempContent(); utils.removeTempContent();
@ -45,7 +50,6 @@ class App extends React.Component {
getUser, getUser,
getPortalSettings, getPortalSettings,
getModules, getModules,
getPortalPasswordSettings,
getPortalCultures, getPortalCultures,
fetchTreeFolders, fetchTreeFolders,
setIsLoaded, setIsLoaded,
@ -59,11 +63,12 @@ class App extends React.Component {
return setIsLoaded(); return setIsLoaded();
} }
const requests = [ const requests = this.isEditor
? [getUser()]
: [
getUser(), getUser(),
getPortalSettings(), getPortalSettings(),
getModules(), getModules(),
getPortalPasswordSettings(),
getPortalCultures(), getPortalCultures(),
fetchTreeFolders(), fetchTreeFolders(),
]; ];
@ -82,9 +87,7 @@ class App extends React.Component {
return navigator.onLine ? ( return navigator.onLine ? (
<Router history={history}> <Router history={history}>
{!window.location.pathname.startsWith(`${homepage}/doceditor`) && ( {!this.isEditor && <NavMenu />}
<NavMenu />
)}
<Main> <Main>
<Suspense fallback={null}> <Suspense fallback={null}>
<Switch> <Switch>
@ -144,7 +147,6 @@ const mapDispatchToProps = (dispatch) => {
getUser: () => getUser(dispatch), getUser: () => getUser(dispatch),
getPortalSettings: () => getPortalSettings(dispatch), getPortalSettings: () => getPortalSettings(dispatch),
getModules: () => getModules(dispatch), getModules: () => getModules(dispatch),
getPortalPasswordSettings: () => getPortalPasswordSettings(dispatch),
getPortalCultures: () => getPortalCultures(dispatch), getPortalCultures: () => getPortalCultures(dispatch),
fetchTreeFolders: () => fetchTreeFolders(dispatch), fetchTreeFolders: () => fetchTreeFolders(dispatch),
setIsLoaded: () => dispatch(setIsLoaded(true)), setIsLoaded: () => dispatch(setIsLoaded(true)),

16
products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js
View File

@ -113,14 +113,13 @@ class TreeFolders extends React.Component {
commonId, commonId,
rootFolderId, rootFolderId,
currentId, currentId,
draggableItems draggableItems,
} = this.props; } = this.props;
if (item.id === currentId) { if (item.id === currentId) {
return false; return false;
} }
if(draggableItems.find(x => x.id === item.id)) if (draggableItems.find((x) => x.id === item.id)) return false;
return false;
const isMy = rootFolderId === FolderType.USER; const isMy = rootFolderId === FolderType.USER;
const isCommon = rootFolderId === FolderType.COMMON; const isCommon = rootFolderId === FolderType.COMMON;
@ -190,6 +189,9 @@ class TreeFolders extends React.Component {
dragging={dragging} dragging={dragging}
isLeaf={item.foldersCount ? false : true} isLeaf={item.foldersCount ? false : true}
icon={this.getFolderIcon(item)} icon={this.getFolderIcon(item)}
newItems={item.newItems}
onBadgeClick={this.onBadgeClick}
showBadge={showBadge}
/> />
); );
}); });
@ -362,8 +364,10 @@ class TreeFolders extends React.Component {
const { dragging, id } = data.node.props; const { dragging, id } = data.node.props;
setDragging(false); setDragging(false);
if (dragging) { if (dragging) {
const promise = new Promise((resolve) => onConvertFiles(data.event, resolve)); const promise = new Promise((resolve) =>
promise.then(files => onTreeDrop(files, id)); onConvertFiles(data.event, resolve)
);
promise.then((files) => onTreeDrop(files, id));
} }
}; };
@ -424,7 +428,7 @@ function mapStateToProps(state) {
dragging: getDragging(state), dragging: getDragging(state),
updateTree: getUpdateTree(state), updateTree: getUpdateTree(state),
rootFolderId: getRootFolderId(state), rootFolderId: getRootFolderId(state),
draggableItems: getDraggableItems(state) draggableItems: getDraggableItems(state),
}; };
} }

2
products/ASC.Files/Client/src/components/pages/DocEditor/locales/ru/translation.json
View File

@ -49,7 +49,7 @@
"TitleRemoved": "Удалён", "TitleRemoved": "Удалён",
"TitleSubfolders": "Flds", "TitleSubfolders": "Flds",
"TitleDocuments": "Dcs", "TitleDocuments": "Dcs",
"Share": "Общий доступ", "Share": "Доступ",
"DownloadAs": "Скачать как", "DownloadAs": "Скачать как",
"More": "Больше", "More": "Больше",
"CloseButton": "Закрыть", "CloseButton": "Закрыть",

314
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRowContent.js
View File

@ -1,11 +1,17 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { withRouter } from "react-router"; import { withRouter } from "react-router";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import styled from "styled-components"; import styled from "styled-components";
import { RowContent, Link, Text, Icons, IconButton, Badge } from "asc-web-components"; import {
import { constants, api, toastr, store as initStore } from 'asc-web-common'; RowContent,
Link,
Text,
Icons,
IconButton,
Badge,
} from "asc-web-components";
import { constants, api, toastr, store as initStore } from "asc-web-common";
import { import {
clearProgressData, clearProgressData,
createFile, createFile,
@ -18,7 +24,7 @@ import {
setTreeFolders, setTreeFolders,
setUpdateTree, setUpdateTree,
updateFile, updateFile,
} from '../../../../../store/files/actions'; } from "../../../../../store/files/actions";
import { import {
canConvert, canConvert,
canWebEdit, canWebEdit,
@ -38,13 +44,13 @@ import {
isImage, isImage,
isSound, isSound,
isVideo, isVideo,
} from '../../../../../store/files/selectors'; } from "../../../../../store/files/selectors";
import { NewFilesPanel } from "../../../../panels"; import { NewFilesPanel } from "../../../../panels";
import { ConvertDialog } from "../../../../dialogs"; import { ConvertDialog } from "../../../../dialogs";
import EditingWrapperComponent from "./EditingWrapperComponent"; import EditingWrapperComponent from "./EditingWrapperComponent";
const { FileAction } = constants; const { FileAction } = constants;
const sideColor = '#A3A9AE'; const sideColor = "#A3A9AE";
const { getSettings } = initStore.auth.selectors; const { getSettings } = initStore.auth.selectors;
const SimpleFilesRowContent = styled(RowContent)` const SimpleFilesRowContent = styled(RowContent)`
@ -75,22 +81,25 @@ const SimpleFilesRowContent = styled(RowContent)`
} }
`; `;
const okIcon = <Icons.CheckIcon const okIcon = (
className='edit-ok-icon' <Icons.CheckIcon
size='scale' className="edit-ok-icon"
size="scale"
isfill={true} isfill={true}
color='#A3A9AE' color="#A3A9AE"
/>; />
);
const cancelIcon = <Icons.CrossIcon const cancelIcon = (
className='edit-cancel-icon' <Icons.CrossIcon
size='scale' className="edit-cancel-icon"
size="scale"
isfill={true} isfill={true}
color='#A3A9AE' color="#A3A9AE"
/>; />
);
class FilesRowContent extends React.PureComponent { class FilesRowContent extends React.PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
let titleWithoutExt = getTitleWithoutExst(props.item); let titleWithoutExt = getTitleWithoutExst(props.item);
@ -105,30 +114,37 @@ class FilesRowContent extends React.PureComponent {
showNewFilesPanel: false, showNewFilesPanel: false,
newFolderId: [], newFolderId: [],
newItems: props.item.new || props.item.fileStatus === 2, newItems: props.item.new || props.item.fileStatus === 2,
showConvertDialog: false showConvertDialog: false,
//loading: false //loading: false
}; };
} }
completeAction = (id) => { completeAction = (id) => {
this.props.onEditComplete(id, !this.props.item.fileExst); this.props.onEditComplete(id, !this.props.item.fileExst);
} };
updateItem = (e) => { updateItem = (e) => {
const { fileAction, updateFile, renameFolder, item, setIsLoading } = this.props; const {
fileAction,
updateFile,
renameFolder,
item,
setIsLoading,
} = this.props;
const { itemTitle } = this.state; const { itemTitle } = this.state;
const originalTitle = getTitleWithoutExst(item); const originalTitle = getTitleWithoutExst(item);
setIsLoading(true); setIsLoading(true);
if (originalTitle === itemTitle) if (originalTitle === itemTitle) return this.completeAction(fileAction.id);
return this.completeAction(fileAction.id);
item.fileExst item.fileExst
? updateFile(fileAction.id, itemTitle) ? updateFile(fileAction.id, itemTitle)
.then(() => this.completeAction(fileAction.id)).finally(() => setIsLoading(false)) .then(() => this.completeAction(fileAction.id))
.finally(() => setIsLoading(false))
: renameFolder(fileAction.id, itemTitle) : renameFolder(fileAction.id, itemTitle)
.then(() => this.completeAction(fileAction.id)).finally(() => setIsLoading(false)); .then(() => this.completeAction(fileAction.id))
.finally(() => setIsLoading(false));
}; };
createItem = (e) => { createItem = (e) => {
@ -139,29 +155,28 @@ class FilesRowContent extends React.PureComponent {
const itemId = e.currentTarget.dataset.itemid; const itemId = e.currentTarget.dataset.itemid;
if (itemTitle.trim() === '') if (itemTitle.trim() === "") return this.completeAction(itemId);
return this.completeAction(itemId);
let newTab = item.fileExst let newTab = item.fileExst ? window.open("about:blank", "_blank") : null;
? window.open('about:blank', '_blank')
: null;
!item.fileExst !item.fileExst
? createFolder(item.parentId, itemTitle) ? createFolder(item.parentId, itemTitle)
.then(() => this.completeAction(itemId)).finally(() => setIsLoading(false)) .then(() => this.completeAction(itemId))
.finally(() => setIsLoading(false))
: createFile(item.parentId, `${itemTitle}.${item.fileExst}`) : createFile(item.parentId, `${itemTitle}.${item.fileExst}`)
.then((file) => { .then((file) => {
newTab.location = file.webUrl; newTab.location = file.webUrl;
this.completeAction(itemId); this.completeAction(itemId);
}).finally(() => setIsLoading(false)) })
} .finally(() => setIsLoading(false));
};
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
const { fileAction, item, newRowItems, setNewRowItems } = this.props; const { fileAction, item, newRowItems, setNewRowItems } = this.props;
const itemId = item.id.toString(); const itemId = item.id.toString();
if (newRowItems.length && newRowItems.includes(itemId)) { if (newRowItems.length && newRowItems.includes(itemId)) {
const rowItems = newRowItems.filter(x => x !== itemId) const rowItems = newRowItems.filter((x) => x !== itemId);
if (this.state.newItems !== 0) { if (this.state.newItems !== 0) {
this.setState({ newItems: 0 }, () => setNewRowItems(rowItems)); this.setState({ newItems: 0 }, () => setNewRowItems(rowItems));
} }
@ -169,27 +184,39 @@ class FilesRowContent extends React.PureComponent {
if (fileAction) { if (fileAction) {
if (fileAction.id !== prevProps.fileAction.id) { if (fileAction.id !== prevProps.fileAction.id) {
this.setState({ editingId: fileAction.id }) this.setState({ editingId: fileAction.id });
} }
} }
} }
renameTitle = e => { renameTitle = (e) => {
this.setState({ itemTitle: e.target.value }); this.setState({ itemTitle: e.target.value });
} };
cancelUpdateItem = e => { cancelUpdateItem = (e) => {
this.completeAction(e); this.completeAction(e);
} };
onClickUpdateItem = e => { onClickUpdateItem = (e) => {
(this.props.fileAction.type === FileAction.Create) this.props.fileAction.type === FileAction.Create
? this.createItem(e) ? this.createItem(e)
: this.updateItem(e); : this.updateItem(e);
} };
onFilesClick = () => { onFilesClick = () => {
const { filter, parentFolder, setIsLoading, onMediaFileClick, fetchFiles, isImage, isSound, isVideo, canWebEdit, item, openDocEditor } = this.props; const {
filter,
parentFolder,
setIsLoading,
onMediaFileClick,
fetchFiles,
isImage,
isSound,
isVideo,
canWebEdit,
item,
openDocEditor
} = this.props;
const { id, fileExst, viewUrl } = item; const { id, fileExst, viewUrl } = item;
if (!fileExst) { if (!fileExst) {
@ -201,7 +228,7 @@ class FilesRowContent extends React.PureComponent {
} }
fetchFiles(id, newFilter) fetchFiles(id, newFilter)
.catch(err => { .catch((err) => {
toastr.error(err); toastr.error(err);
setIsLoading(false); setIsLoading(false);
}) })
@ -221,17 +248,19 @@ class FilesRowContent extends React.PureComponent {
}; };
onMobileRowClick = (e) => { onMobileRowClick = (e) => {
if (window.innerWidth > 1024) const { isTrashFolder } = this.props;
return;
if (isTrashFolder || window.innerWidth > 1024) return;
this.onFilesClick(); this.onFilesClick();
} };
getStatusByDate = () => { getStatusByDate = () => {
const { culture, t, item } = this.props; const { culture, t, item } = this.props;
const { created, updated, version, fileExst } = item; const { created, updated, version, fileExst } = item;
const title = version > 1 const title =
version > 1
? t("TitleModified") ? t("TitleModified")
: fileExst : fileExst
? t("TitleUploaded") ? t("TitleUploaded")
@ -247,11 +276,11 @@ class FilesRowContent extends React.PureComponent {
const { t } = this.props; const { t } = this.props;
switch (format) { switch (format) {
case 'docx': case "docx":
return t("NewDocument"); return t("NewDocument");
case 'xlsx': case "xlsx":
return t("NewSpreadsheet"); return t("NewSpreadsheet");
case 'pptx': case "pptx":
return t("NewPresentation"); return t("NewPresentation");
default: default:
return t("NewFolder"); return t("NewFolder");
@ -263,11 +292,19 @@ class FilesRowContent extends React.PureComponent {
const fileId = e.currentTarget.dataset.id; const fileId = e.currentTarget.dataset.id;
history.push(`${settings.homepage}/${fileId}/history`); history.push(`${settings.homepage}/${fileId}/history`);
} };
onBadgeClick = () => { onBadgeClick = () => {
const { showNewFilesPanel } = this.state; const { showNewFilesPanel } = this.state;
const { item, treeFolders, setTreeFolders, rootFolderId, newItems, setNewRowItems, setUpdateTree } = this.props; const {
item,
treeFolders,
setTreeFolders,
rootFolderId,
newItems,
setNewRowItems,
setUpdateTree,
} = this.props;
if (item.fileExst) { if (item.fileExst) {
api.files api.files
.markAsRead([], [item.id]) .markAsRead([], [item.id])
@ -279,7 +316,7 @@ class FilesRowContent extends React.PureComponent {
setTreeFolders(data); setTreeFolders(data);
setNewRowItems([`${item.id}`]); setNewRowItems([`${item.id}`]);
}) })
.catch((err) => toastr.error(err)) .catch((err) => toastr.error(err));
} else { } else {
const newFolderId = this.props.selectedFolder.pathParts; const newFolderId = this.props.selectedFolder.pathParts;
newFolderId.push(item.id); newFolderId.push(item.id);
@ -288,7 +325,7 @@ class FilesRowContent extends React.PureComponent {
newFolderId, newFolderId,
}); });
} }
} };
onShowNewFilesPanel = () => { onShowNewFilesPanel = () => {
const { showNewFilesPanel } = this.state; const { showNewFilesPanel } = this.state;
@ -298,39 +335,55 @@ class FilesRowContent extends React.PureComponent {
setConvertDialogVisible = () => setConvertDialogVisible = () =>
this.setState({ showConvertDialog: !this.state.showConvertDialog }); this.setState({ showConvertDialog: !this.state.showConvertDialog });
getConvertProgress = fileId => { getConvertProgress = (fileId) => {
const { selectedFolder, filter, setIsLoading, setProgressBarData, t, clearProgressData, fetchFiles } = this.props; const {
api.files.getConvertFile(fileId).then(res => { selectedFolder,
filter,
setIsLoading,
setProgressBarData,
t,
clearProgressData,
fetchFiles,
} = this.props;
api.files.getConvertFile(fileId).then((res) => {
if (res && res[0] && res[0].progress !== 100) { if (res && res[0] && res[0].progress !== 100) {
setProgressBarData({ visible: true, percent: res[0].progress, label: t("Convert") }); setProgressBarData({
visible: true,
percent: res[0].progress,
label: t("Convert"),
});
setTimeout(() => this.getConvertProgress(fileId), 1000); setTimeout(() => this.getConvertProgress(fileId), 1000);
} else { } else {
if (res[0].error) { if (res[0].error) {
toastr.error(res[0].error); toastr.error(res[0].error);
clearProgressData(); clearProgressData();
} else { } else {
setProgressBarData({ visible: true, percent: 100, label: t("Convert") }); setProgressBarData({
setTimeout(() => clearProgressData(), 5000) visible: true,
percent: 100,
label: t("Convert"),
});
setTimeout(() => clearProgressData(), 5000);
const newFilter = filter.clone(); const newFilter = filter.clone();
fetchFiles(selectedFolder.id, newFilter) fetchFiles(selectedFolder.id, newFilter)
.catch(err => toastr.error(err)) .catch((err) => toastr.error(err))
.finally(() => setIsLoading(false)); .finally(() => setIsLoading(false));
} }
} }
}); });
} };
onConvert = () => { onConvert = () => {
const { item, t, setProgressBarData } = this.props; const { item, t, setProgressBarData } = this.props;
setProgressBarData({ visible: true, percent: 0, label: t("Convert") }); setProgressBarData({ visible: true, percent: 0, label: t("Convert") });
this.setState({ showConvertDialog: false }, () => this.setState({ showConvertDialog: false }, () =>
api.files.convertFile(item.id).then(convertRes => { api.files.convertFile(item.id).then((convertRes) => {
if (convertRes && convertRes[0] && convertRes[0].progress !== 100) { if (convertRes && convertRes[0] && convertRes[0].progress !== 100) {
this.getConvertProgress(item.id); this.getConvertProgress(item.id);
} }
}) })
); );
} };
render() { render() {
const { const {
@ -343,7 +396,7 @@ class FilesRowContent extends React.PureComponent {
isLoading, isLoading,
isMobile, isMobile,
canWebEdit, canWebEdit,
canConvert canConvert,
} = this.props; } = this.props;
const { const {
itemTitle, itemTitle,
@ -351,7 +404,7 @@ class FilesRowContent extends React.PureComponent {
showNewFilesPanel, showNewFilesPanel,
newItems, newItems,
newFolderId, newFolderId,
showConvertDialog showConvertDialog,
} = this.state; } = this.state;
const { const {
contentLength, contentLength,
@ -363,18 +416,23 @@ class FilesRowContent extends React.PureComponent {
fileStatus, fileStatus,
id, id,
versionGroup, versionGroup,
locked locked,
} = item; } = item;
const titleWithoutExt = getTitleWithoutExst(item); const titleWithoutExt = getTitleWithoutExst(item);
const fileOwner = createdBy && ((this.props.viewer.id === createdBy.id && t("AuthorMe")) || createdBy.displayName); const fileOwner =
createdBy &&
((this.props.viewer.id === createdBy.id && t("AuthorMe")) ||
createdBy.displayName);
const updatedDate = updated && this.getStatusByDate(); const updatedDate = updated && this.getStatusByDate();
const isEdit = (id === editingId) && (fileExst === fileAction.extension); const isEdit = id === editingId && fileExst === fileAction.extension;
const linkStyles = isTrashFolder ? { noHover: true } : { onClick: this.onFilesClick }; const linkStyles = isTrashFolder
? { noHover: true }
: { onClick: this.onMobileRowClick };
const showNew = !!newItems; const showNew = !!newItems;
return isEdit return isEdit ? (
? <EditingWrapperComponent <EditingWrapperComponent
itemTitle={itemTitle} itemTitle={itemTitle}
okIcon={okIcon} okIcon={okIcon}
cancelIcon={cancelIcon} cancelIcon={cancelIcon}
@ -384,7 +442,7 @@ class FilesRowContent extends React.PureComponent {
itemId={id} itemId={id}
isLoading={isLoading} isLoading={isLoading}
/> />
: ( ) : (
<> <>
{showConvertDialog && ( {showConvertDialog && (
<ConvertDialog <ConvertDialog
@ -409,11 +467,11 @@ class FilesRowContent extends React.PureComponent {
onClick={this.onMobileRowClick} onClick={this.onMobileRowClick}
> >
<Link <Link
containerWidth='55%' containerWidth="55%"
type='page' type="page"
title={titleWithoutExt} title={titleWithoutExt}
fontWeight="600" fontWeight="600"
fontSize='15px' fontSize="15px"
{...linkStyles} {...linkStyles}
color="#333" color="#333"
isTextOverflow isTextOverflow
@ -421,56 +479,56 @@ class FilesRowContent extends React.PureComponent {
{titleWithoutExt} {titleWithoutExt}
</Link> </Link>
<> <>
{fileExst ? {fileExst ? (
<div className='badges'> <div className="badges">
<Text <Text
className='badge-ext' className="badge-ext"
as="span" as="span"
color="#A3A9AE" color="#A3A9AE"
fontSize='15px' fontSize="15px"
fontWeight={600} fontWeight={600}
title={fileExst} title={fileExst}
truncate={true} truncate={true}
> >
{fileExst} {fileExst}
</Text> </Text>
{canConvert && {canConvert && (
<IconButton <IconButton
onClick={this.setConvertDialogVisible} onClick={this.setConvertDialogVisible}
iconName="FileActionsConvertIcon" iconName="FileActionsConvertIcon"
className='badge' className="badge"
size='small' size="small"
isfill={true} isfill={true}
color='#A3A9AE' color="#A3A9AE"
/> />
} )}
{canWebEdit && {canWebEdit && (
<Icons.AccessEditIcon <Icons.AccessEditIcon
className='badge' className="badge"
size='small' size="small"
isfill={true} isfill={true}
color='#A3A9AE' color="#A3A9AE"
/> />
} )}
{fileStatus === 1 && {fileStatus === 1 && (
<Icons.FileActionsConvertEditDocIcon <Icons.FileActionsConvertEditDocIcon
className='badge' className="badge"
size='small' size="small"
isfill={true} isfill={true}
color='#3B72A7' color="#3B72A7"
/> />
} )}
{locked && {locked && (
<Icons.FileActionsLockedIcon <Icons.FileActionsLockedIcon
className='badge' className="badge"
size='small' size="small"
isfill={true} isfill={true}
color='#3B72A7' color="#3B72A7"
/> />
} )}
{versionGroup > 1 && {versionGroup > 1 && (
<Badge <Badge
className='badge-version' className="badge-version"
backgroundColor="#A3A9AE" backgroundColor="#A3A9AE"
borderRadius="11px" borderRadius="11px"
color="#FFFFFF" color="#FFFFFF"
@ -482,10 +540,10 @@ class FilesRowContent extends React.PureComponent {
padding="0 5px" padding="0 5px"
data-id={id} data-id={id}
/> />
} )}
{showNew && {showNew && (
<Badge <Badge
className='badge-version' className="badge-version"
backgroundColor="#ED7309" backgroundColor="#ED7309"
borderRadius="11px" borderRadius="11px"
color="#FFFFFF" color="#FFFFFF"
@ -497,13 +555,13 @@ class FilesRowContent extends React.PureComponent {
padding="0 5px" padding="0 5px"
data-id={id} data-id={id}
/> />
} )}
</div> </div>
: ) : (
<div className='badges'> <div className="badges">
{showNew && {showNew && (
<Badge <Badge
className='badge-version' className="badge-version"
backgroundColor="#ED7309" backgroundColor="#ED7309"
borderRadius="11px" borderRadius="11px"
color="#FFFFFF" color="#FFFFFF"
@ -515,16 +573,16 @@ class FilesRowContent extends React.PureComponent {
padding="0 5px" padding="0 5px"
data-id={id} data-id={id}
/> />
} )}
</div> </div>
} )}
</> </>
<Text <Text
containerMinWidth='120px' containerMinWidth="120px"
containerWidth='15%' containerWidth="15%"
as="div" as="div"
color={sideColor} color={sideColor}
fontSize='12px' fontSize="12px"
fontWeight={400} fontWeight={400}
title={fileOwner} title={fileOwner}
truncate={true} truncate={true}
@ -532,10 +590,10 @@ class FilesRowContent extends React.PureComponent {
{fileOwner} {fileOwner}
</Text> </Text>
<Text <Text
containerMinWidth='200px' containerMinWidth="200px"
containerWidth='15%' containerWidth="15%"
title={updatedDate} title={updatedDate}
fontSize='12px' fontSize="12px"
fontWeight={400} fontWeight={400}
color={sideColor} color={sideColor}
className="row_update-text" className="row_update-text"
@ -543,24 +601,26 @@ class FilesRowContent extends React.PureComponent {
{updatedDate && updatedDate} {updatedDate && updatedDate}
</Text> </Text>
<Text <Text
containerMinWidth='90px' containerMinWidth="90px"
containerWidth='10%' containerWidth="10%"
as="div" as="div"
color={sideColor} color={sideColor}
fontSize='12px' fontSize="12px"
fontWeight={400} fontWeight={400}
title='' title=""
truncate={true} truncate={true}
> >
{fileExst {fileExst
? contentLength ? contentLength
: `${t("TitleDocuments")}: ${filesCount} | ${t("TitleSubfolders")}: ${foldersCount}`} : `${t("TitleDocuments")}: ${filesCount} | ${t(
"TitleSubfolders"
)}: ${foldersCount}`}
</Text> </Text>
</SimpleFilesRowContent> </SimpleFilesRowContent>
</> </>
) );
}
} }
};
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
return { return {
@ -583,7 +643,7 @@ function mapStateToProps(state, props) {
isImage: isImage(props.item.fileExst)(state), isImage: isImage(props.item.fileExst)(state),
isSound: isSound(props.item.fileExst)(state), isSound: isSound(props.item.fileExst)(state),
isVideo: isVideo(props.item.fileExst)(state), isVideo: isVideo(props.item.fileExst)(state),
} };
} }
export default connect(mapStateToProps, { export default connect(mapStateToProps, {
@ -597,5 +657,5 @@ export default connect(mapStateToProps, {
setNewRowItems, setNewRowItems,
setIsLoading, setIsLoading,
clearProgressData, clearProgressData,
fetchFiles fetchFiles,
})(withRouter(withTranslation()(FilesRowContent))); })(withRouter(withTranslation()(FilesRowContent)));

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

@ -1250,7 +1250,7 @@ class SectionBodyContent extends React.Component {
<Text <Text
className="share-button" className="share-button"
as="span" as="span"
title={"Share"} title={this.props.t("Share")}
fontSize="12px" fontSize="12px"
fontWeight={400} fontWeight={400}
color="#A3A9AE" color="#A3A9AE"
@ -1264,7 +1264,7 @@ class SectionBodyContent extends React.Component {
size={16} size={16}
iconName="CatalogSharedIcon" iconName="CatalogSharedIcon"
/> />
Share {this.props.t("Share")}
</Text> </Text>
); );
}; };
@ -1466,8 +1466,11 @@ class SectionBodyContent extends React.Component {
const checkedProps = isEdit || item.id <= 0 ? {} : { checked }; const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(item, isEdit || item.id <= 0); const element = this.getItemIcon(item, isEdit || item.id <= 0);
const sharedButton = const sharedButton =
isEdit || item.id <= 0 ? null : this.getSharedButton(); isRecycleBin || isEdit || item.id <= 0
const displayShareButton = widthProp > 500 ? "96px" : "26px"; ? null
: this.getSharedButton();
const displayShareButton =
widthProp < 500 ? "26px" : isRecycleBin ? "38px" : "96px";
let classNameProp = let classNameProp =
isFolder && item.access < 2 && !isRecycleBin isFolder && item.access < 2 && !isRecycleBin
? { className: " dropable" } ? { className: " dropable" }

2
products/ASC.Files/Client/src/components/pages/Home/locales/ru/translation.json
View File

@ -54,7 +54,7 @@
"TitleRemoved": "Удалён", "TitleRemoved": "Удалён",
"TitleSubfolders": "Папки", "TitleSubfolders": "Папки",
"TitleDocuments": "Файлы", "TitleDocuments": "Файлы",
"Share": "Общий доступ", "Share": "Доступ",
"DownloadAs": "Скачать как", "DownloadAs": "Скачать как",
"More": "Больше", "More": "Больше",
"CloseButton": "Закрыть", "CloseButton": "Закрыть",

84
products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
View File

@ -11,7 +11,7 @@ import {
RowContainer, RowContainer,
Text, Text,
Link, Link,
Button Button,
} from "asc-web-components"; } from "asc-web-components";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { utils as commonUtils, api, toastr } from "asc-web-common"; import { utils as commonUtils, api, toastr } from "asc-web-common";
@ -21,15 +21,11 @@ import {
StyledContent, StyledContent,
StyledHeaderContent, StyledHeaderContent,
StyledBody, StyledBody,
StyledFooter StyledFooter,
} from "../StyledPanels"; } from "../StyledPanels";
import { import {
getFileIcon, getFileIcon,
getFolderIcon, getFolderIcon,
canWebEdit,
isImage,
isSound,
isVideo,
getFilter, getFilter,
getFiles, getFiles,
getFolders, getFolders,
@ -42,13 +38,13 @@ import {
setTreeFolders, setTreeFolders,
setUpdateTree, setUpdateTree,
setNewRowItems, setNewRowItems,
setIsLoading,
addFileToRecentlyViewed addFileToRecentlyViewed
} from "../../../store/files/actions"; } from "../../../store/files/actions";
import { createI18N } from "../../../helpers/i18n"; import { createI18N } from "../../../helpers/i18n";
const i18n = createI18N({ const i18n = createI18N({
page: "NewFilesPanel", page: "NewFilesPanel",
localesPath: "panels/NewFilesPanel" localesPath: "panels/NewFilesPanel",
}); });
const { changeLanguage } = commonUtils; const { changeLanguage } = commonUtils;
@ -67,8 +63,8 @@ class NewFilesPanelComponent extends React.Component {
setIsLoading(true); setIsLoading(true);
api.files api.files
.getNewFiles(folderId[folderId.length - 1]) .getNewFiles(folderId[folderId.length - 1])
.then(files => this.setState({ files })) .then((files) => this.setState({ files }))
.catch(err => toastr.error(err)) .catch((err) => toastr.error(err))
.finally(() => setIsLoading(false)); .finally(() => setIsLoading(false));
} }
@ -80,7 +76,7 @@ class NewFilesPanelComponent extends React.Component {
return ( return (
<ReactSVG <ReactSVG
beforeInjection={svg => { beforeInjection={(svg) => {
svg.setAttribute("style", "margin-top: 4px"); svg.setAttribute("style", "margin-top: 4px");
isEdit && svg.setAttribute("style", "margin-left: 24px"); isEdit && svg.setAttribute("style", "margin-left: 24px");
}} }}
@ -110,15 +106,14 @@ class NewFilesPanelComponent extends React.Component {
api.files api.files
.markAsRead(folderIds, fileIds) .markAsRead(folderIds, fileIds)
.then(() => { .then(() => {
this.props.setUpdateTree(true);
this.setNewFilesCount(folderId, markAsReadFiles); this.setNewFilesCount(folderId, markAsReadFiles);
this.props.setNewRowItems(itemsIds); this.props.setNewRowItems(itemsIds);
}) })
.catch(err => toastr.error(err)) .catch((err) => toastr.error(err))
.finally(() => onClose()); .finally(() => onClose());
}; };
onNewFilesClick = item => { onNewFilesClick = (item) => {
const { onClose, /*setIsLoading,*/ folderId } = this.props; const { onClose, /*setIsLoading,*/ folderId } = this.props;
const folderIds = []; const folderIds = [];
const fileId = []; const fileId = [];
@ -133,29 +128,30 @@ class NewFilesPanelComponent extends React.Component {
this.setNewFilesCount(folderId, false, item); this.setNewFilesCount(folderId, false, item);
this.onFilesClick(item); this.onFilesClick(item);
}) })
.catch(err => toastr.error(err)) .catch((err) => toastr.error(err))
.finally(() => { .finally(() => {
!isFile && onClose(); !isFile && onClose();
}); });
}; };
onFilesClick = item => { onFilesClick = (item) => {
const { id, fileExst, viewUrl } = item; const { id, fileExst, viewUrl, fileType } = item;
const { filter, setMediaViewerData, fetchFiles, canWebEdit, addFileToRecentlyViewed } = this.props; const { filter, setMediaViewerData, fetchFiles, addFileToRecentlyViewed } = this.props;
if (!fileExst) { if (!fileExst) {
fetchFiles(id, filter).catch(err => toastr.error(err)); fetchFiles(id, filter).catch((err) => toastr.error(err));
} else { } else {
if (canWebEdit) { const canEdit = [5, 6, 7].includes(fileType); //TODO: maybe dirty
const isMedia = [2, 3, 4].includes(fileType);
if (canEdit) {
return addFileToRecentlyViewed(id) return addFileToRecentlyViewed(id)
.then(() => console.log("Pushed to recently viewed")) .then(() => console.log("Pushed to recently viewed"))
.catch(e => console.error(e)) .catch(e => console.error(e))
.finally(window.open(`./doceditor?fileId=${id}`, "_blank")); .finally(window.open(`./doceditor?fileId=${id}`, "_blank"));
} }
const isOpenMedia = if (isMedia) {
isImage(fileExst) || isSound(fileExst) || isVideo(fileExst);
if (isOpenMedia) {
const mediaItem = { visible: true, id }; const mediaItem = { visible: true, id };
setMediaViewerData(mediaItem); setMediaViewerData(mediaItem);
return; return;
@ -166,15 +162,21 @@ class NewFilesPanelComponent extends React.Component {
}; };
setNewFilesCount = (folderPath, markAsReadAll, item) => { setNewFilesCount = (folderPath, markAsReadAll, item) => {
const { treeFolders, setTreeFolders, folders, files } = this.props; const {
treeFolders,
setTreeFolders,
folders,
files,
setUpdateTree,
} = this.props;
const data = treeFolders; const data = treeFolders;
let dataItem; let dataItem;
const loop = (index, newData) => { const loop = (index, newData) => {
dataItem = newData.find(x => x.id === folderPath[index]); dataItem = newData.find((x) => x.id === folderPath[index]);
if (index === folderPath.length - 1) { if (index === folderPath.length - 1) {
const rootItem = data.find(x => x.id === folderPath[0]); const rootItem = data.find((x) => x.id === folderPath[0]);
const newFilesCounter = dataItem.newItems const newFilesCounter = dataItem.newItems
? dataItem.newItems ? dataItem.newItems
: dataItem.new; : dataItem.new;
@ -192,28 +194,29 @@ class NewFilesPanelComponent extends React.Component {
if (folderPath.length > 1) { if (folderPath.length > 1) {
loop(0, data); loop(0, data);
} else { } else {
dataItem = data.find(x => x.id === +folderPath[0]); dataItem = data.find((x) => x.id === +folderPath[0]);
dataItem.newItems = markAsReadAll ? 0 : dataItem.newItems - 1; dataItem.newItems = markAsReadAll ? 0 : dataItem.newItems - 1;
if (item && item.fileExst) { if (item && item.fileExst) {
const fileItem = files.find(x => x.id === item.id && x.fileExst); const fileItem = files.find((x) => x.id === item.id && x.fileExst);
if (fileItem) { if (fileItem) {
fileItem.new = markAsReadAll ? 0 : fileItem.new - 1; fileItem.new = markAsReadAll ? 0 : fileItem.new - 1;
} else { } else {
const filesFolder = folders.find(x => x.id === item.folderId); const filesFolder = folders.find((x) => x.id === item.folderId);
if (filesFolder) { if (filesFolder) {
filesFolder.new = markAsReadAll ? 0 : filesFolder.new - 1; filesFolder.new = markAsReadAll ? 0 : filesFolder.new - 1;
} }
} }
this.props.setNewRowItems([`${item.id}`]); this.props.setNewRowItems([`${item.id}`]);
} else if (item && !item.fileExst) { } else if (item && !item.fileExst) {
const folderItem = folders.find(x => x.id === item.id && !x.fileExst); const folderItem = folders.find((x) => x.id === item.id && !x.fileExst);
if (folderItem) { if (folderItem) {
folderItem.new = markAsReadAll ? 0 : folderItem.new - 1; folderItem.new = markAsReadAll ? 0 : folderItem.new - 1;
} }
} }
} }
setUpdateTree(true);
setTreeFolders(data); setTreeFolders(data);
}; };
@ -235,7 +238,7 @@ class NewFilesPanelComponent extends React.Component {
</StyledHeaderContent> </StyledHeaderContent>
<StyledBody className="files-operations-body"> <StyledBody className="files-operations-body">
<RowContainer useReactWindow manualHeight="83vh"> <RowContainer useReactWindow manualHeight="83vh">
{files.map(file => { {files.map((file) => {
const element = this.getItemIcon(file); const element = this.getItemIcon(file);
return ( return (
<Row key={file.id} element={element}> <Row key={file.id} element={element}>
@ -287,29 +290,32 @@ class NewFilesPanelComponent extends React.Component {
NewFilesPanelComponent.propTypes = { NewFilesPanelComponent.propTypes = {
onClose: PropTypes.func, onClose: PropTypes.func,
visible: PropTypes.bool visible: PropTypes.bool,
}; };
const NewFilesPanelContainerTranslated = withTranslation()( const NewFilesPanelContainerTranslated = withTranslation()(
NewFilesPanelComponent NewFilesPanelComponent
); );
const NewFilesPanel = props => ( const NewFilesPanel = (props) => (
<NewFilesPanelContainerTranslated i18n={i18n} {...props} /> <NewFilesPanelContainerTranslated i18n={i18n} {...props} />
); );
const mapStateToProps = (state, props) => { const mapStateToProps = (state) => {
return { return {
filter: getFilter(state), filter: getFilter(state),
files: getFiles(state), files: getFiles(state),
folders: getFolders(state), folders: getFolders(state),
treeFolders: getTreeFolders(state), treeFolders: getTreeFolders(state),
selectedFolder: getSelectedFolder(state), selectedFolder: getSelectedFolder(state),
canWebEdit: canWebEdit(props.item.fileExst)(state),
}; };
}; };
export default connect( export default connect(mapStateToProps, {
mapStateToProps, setMediaViewerData,
{ setMediaViewerData, setTreeFolders, setUpdateTree, setNewRowItems, setIsLoading, fetchFiles, addFileToRecentlyViewed } setTreeFolders,
)(withRouter(NewFilesPanel)); setUpdateTree,
setNewRowItems,
fetchFiles,
addFileToRecentlyViewed
})(withRouter(NewFilesPanel));

21
products/ASC.Files/Client/src/store/files/selectors.js
View File

@ -529,11 +529,14 @@ export const getSelected = (state) => {
const getSelectionSelector = (state) => { const getSelectionSelector = (state) => {
return state.files.selection; return state.files.selection;
} };
export const getSelection = createSelector(getSelectionSelector, selection => { export const getSelection = createSelector(
getSelectionSelector,
(selection) => {
return selection; return selection;
}); }
);
export const getSelectionLength = (state) => { export const getSelectionLength = (state) => {
return state.files.selection.length; return state.files.selection.length;
@ -643,7 +646,15 @@ const getFilesContextOptions = (item, isRecycleBin, canOpenPlayer) => {
export const getItemsList = createSelector( export const getItemsList = createSelector(
[getFolders, getFiles], [getFolders, getFiles],
(folders, files) => { (folders, files) => {
return folders && files ? [...folders, ...files] : []; const items =
folders && files
? [...folders, ...files]
: folders
? folders
: files
? files
: [];
return items;
} }
); );
@ -799,6 +810,7 @@ export const getFilesList = (state) => {
const isSoundItem = isSound(item.fileExst)(state); const isSoundItem = isSound(item.fileExst)(state);
const isEbookItem = isEbook(item.fileExst)(state); const isEbookItem = isEbook(item.fileExst)(state);
const isHtmlItem = isHtml(item.fileExst)(state); const isHtmlItem = isHtml(item.fileExst)(state);
const isCanWebEdit = canWebEdit(item.fileExst)(state);
const icon = fileExst const icon = fileExst
? getFileIcon( ? getFileIcon(
@ -849,6 +861,7 @@ export const getFilesList = (state) => {
providerKey, providerKey,
draggable, draggable,
canOpenPlayer, canOpenPlayer,
canWebEdit: isCanWebEdit,
}; };
}); });
} }

3
products/ASC.People/Client/src/components/pages/Home/Section/Body/index.js
View File

@ -64,6 +64,9 @@ class SectionBodyContent extends React.PureComponent {
if (!isLoaded) return; if (!isLoaded) return;
if(peopleList.length <= 0) setIsLoaded(); if(peopleList.length <= 0) setIsLoaded();
setIsLoaded(false)
fetchPeople(filter) fetchPeople(filter)
.then(() => isLoaded && setIsLoaded(true)) .then(() => isLoaded && setIsLoaded(true))
.catch((error) => { .catch((error) => {