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

Web: SelectFolder: Optimization, refactoring.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2022-04-06 18:04:43 +03:00
parent ca8e47dbc7
commit 3ef7ae85de
20 changed files with 645 additions and 665 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/asc-web-common/api/files/index.js
View File

@ -181,6 +181,37 @@ export function getFoldersTree() {
);
}
export function getCommonFoldersTree() {
return request({ method: "get", url: "/files/@common" }).then(
(commonFolders) => {
return [
{
id: commonFolders.current.id,
key: 0 - 1,
parentId: commonFolders.current.parentId,
title: commonFolders.current.title,
rootFolderType: +commonFolders.current.rootFolderType,
rootFolderName: "@common",
pathParts: commonFolders.pathParts,
foldersCount: commonFolders.current.foldersCount,
newItems: commonFolders.new,
},
];
}
);
}
export function getThirdPartyFoldersTree() {
return request({ method: "get", url: "/files/thirdparty/common" }).then(
(commonThirdPartyArray) => {
commonThirdPartyArray.map((currentValue, index) => {
commonThirdPartyArray[index].key = `0-${index}`;
});
return commonThirdPartyArray;
}
);
}
export function getMyFolderList(filter = FilesFilter.getDefault()) {
const options = {
method: "get",

5
products/ASC.Files/Client/src/components/FolderTreeBody/index.js
View File

@ -9,7 +9,7 @@ import { StyledSelectFolderPanel } from "../panels/StyledPanels";
const FolderTreeBody = ({
isLoadingData,
expandedKeys,
folderList,
resultingFolderTree,
onSelect,
withoutProvider,
certainFolders,
@ -36,7 +36,7 @@ const FolderTreeBody = ({
<TreeFolders
isPanel={true}
expandedPanelKeys={expandedKeys}
data={folderList}
data={resultingFolderTree}
filter={filter}
onSelect={onSelect}
withoutProvider={withoutProvider}
@ -88,6 +88,7 @@ export default inject(
({ filesStore, treeFoldersStore, selectedFolderStore }) => {
const { filter, isLoading } = filesStore;
const { expandedPanelKeys } = treeFoldersStore;
return {
expandedKeys: expandedPanelKeys ? expandedPanelKeys : null,
filter,

2
products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js
View File

@ -11,7 +11,7 @@ import { getFoldersTree } from "@appserver/common/api/files";
import {
exceptSortedByTagsFolders,
exceptPrivacyTrashFolders,
} from "../SelectFolderDialog/ExceptionFoldersConstants";
} from "../SelectionPanel/ExceptionFoldersConstants";
class SelectFileDialogModalView extends React.Component {
constructor(props) {

44
products/ASC.Files/Client/src/components/panels/SelectFolderDialog/AsideView.js
View File

@ -20,7 +20,7 @@ const SelectFolderDialogAsideView = ({
certainFolders,
folderId,
isLoadingData,
folderList,
resultingFolderTree,
onSelect,
footer,
showButtons,
@ -28,7 +28,6 @@ const SelectFolderDialogAsideView = ({
headerName,
header,
canCreate,
isLoading,
primaryButtonName,
noTreeSwitcher,
}) => {
@ -75,12 +74,12 @@ const SelectFolderDialogAsideView = ({
<FolderTreeBody
theme={theme}
isLoadingData={isLoadingData}
folderList={folderList}
resultingFolderTree={resultingFolderTree}
onSelect={onSelect}
withoutProvider={withoutProvider}
certainFolders={certainFolders}
isAvailable={isAvailable}
selectedKeys={[folderId]}
selectedKeys={[`${folderId}`]}
heightContent={asideHeightContent}
displayType={DISPLAY_TYPE}
/>
@ -90,25 +89,24 @@ const SelectFolderDialogAsideView = ({
<ModalDialog.Footer theme={theme}>
<StyledSelectFolderPanel theme={theme}>
{footer}
{showButtons && (
<div className="select-folder-dialog-modal_buttons">
<Button
theme={theme}
className="select-folder-dialog-buttons-save"
primary
size="normal"
label={primaryButtonName}
onClick={onSave}
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
size="normal"
label={t("Common:CancelButton")}
onClick={onClose}
isDisabled={isLoadingData || isLoading}
/>
</div>
)}
<div className="select-folder-dialog-modal_buttons">
<Button
theme={theme}
className="select-folder-dialog-buttons-save"
primary
size="normal"
label={primaryButtonName}
onClick={onSave}
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
size="normal"
label={t("Common:CancelButton")}
onClick={onClose}
isDisabled={isLoadingData}
/>
</div>
</StyledSelectFolderPanel>
</ModalDialog.Footer>
</ModalDialog>

44
products/ASC.Files/Client/src/components/panels/SelectFolderDialog/ModalView.js
View File

@ -18,7 +18,7 @@ const SelectFolderDialogModalView = ({
certainFolders,
folderId,
isLoadingData,
folderList,
resultingFolderTree,
onSelect,
header,
footer,
@ -26,7 +26,6 @@ const SelectFolderDialogModalView = ({
showButtons,
onSave,
canCreate,
isLoading,
primaryButtonName,
noTreeSwitcher,
}) => {
@ -54,12 +53,12 @@ const SelectFolderDialogModalView = ({
<FolderTreeBody
theme={theme}
isLoadingData={isLoadingData}
folderList={folderList}
resultingFolderTree={resultingFolderTree}
onSelect={onSelect}
withoutProvider={withoutProvider}
certainFolders={certainFolders}
isAvailable={isAvailable}
selectedKeys={[folderId]}
selectedKeys={[`${folderId}`]}
heightContent={modalHeightContent}
/>
</StyledSelectFolderPanel>
@ -67,25 +66,24 @@ const SelectFolderDialogModalView = ({
<ModalDialog.Footer theme={theme}>
<StyledSelectFolderPanel theme={theme}>
{footer}
{showButtons && (
<div className="select-folder-dialog-modal_buttons">
<Button
theme={theme}
className="select-folder-dialog-buttons-save"
primary
size="small"
label={primaryButtonName}
onClick={onSave}
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
size="small"
label={t("Common:CancelButton")}
onClick={onClose}
isDisabled={isLoadingData || isLoading}
/>
</div>
)}
<div className="select-folder-dialog-modal_buttons">
<Button
theme={theme}
className="select-folder-dialog-buttons-save"
primary
size="small"
label={primaryButtonName}
onClick={onSave}
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
size="small"
label={t("Common:CancelButton")}
onClick={onClose}
isDisabled={isLoadingData}
/>
</div>
</StyledSelectFolderPanel>
</ModalDialog.Footer>
</ModalDialog>

559
products/ASC.Files/Client/src/components/panels/SelectFolderDialog/index.js
View File

@ -4,13 +4,10 @@ import { I18nextProvider } from "react-i18next";
import { withTranslation } from "react-i18next";
import PropTypes from "prop-types";
import throttle from "lodash/throttle";
import { getCommonThirdPartyList } from "@appserver/common/api/settings";
import {
getCommonFolderList,
getFolder,
getFolderPath,
getFoldersTree,
} from "@appserver/common/api/files";
import SelectFolderInput from "../SelectFolderInput";
@ -19,63 +16,100 @@ import SelectFolderDialogAsideView from "./AsideView";
import SelectFolderDialogModalView from "./ModalView";
import stores from "../../../store/index";
import utils from "@appserver/components/utils";
import { FolderType } from "@appserver/common/constants";
import { isArrayEqual } from "@appserver/components/utils/array";
import store from "studio/store";
import toastr from "studio/toastr";
import {
exceptSortedByTagsFolders,
exceptPrivacyTrashFolders,
} from "./ExceptionFoldersConstants";
import SelectionPanel from "../SelectionPanel/SelectionPanelBody";
const { auth: authStore } = store;
const { desktop } = utils.device;
let pathName = "";
let folderList;
class SelectFolderModalDialog extends React.Component {
constructor(props) {
super(props);
const {
isSetFolderImmediately,
id,
displayType,
selectionButtonPrimary,
t,
} = this.props;
const isNeedFolder = id ? true : isSetFolderImmediately;
this.buttonName = selectionButtonPrimary
? t("Common:Select")
: t("Common:SaveButton");
const { id, displayType } = this.props;
this.state = {
isLoadingData: false,
isLoading: false,
isAvailable: true,
certainFolders: true,
folderId: "",
isInitialLoader: false,
folderId: id ? id : "",
displayType: displayType || this.getDisplayType(),
isSetFolderImmediately: isNeedFolder,
canCreate: true,
isAvailable: true,
};
this.throttledResize = throttle(this.setDisplayType, 300);
this.folderTitle = "";
this.noTreeSwitcher = false;
}
componentDidMount() {
const { onSetLoadingData, onSetLoadingInput, displayType } = this.props;
authStore.init(true); // it will work if authStore is not initialized
async componentDidMount() {
const {
treeFolders,
foldersType,
id,
onSetBaseFolderPath,
onSelectFolder,
foldersList,
treeFromInput,
isSetFolderImmediately,
setSelectedNode,
setSelectedFolder,
setExpandedPanelKeys,
displayType,
} = this.props;
!displayType && window.addEventListener("resize", this.throttledResize);
this.setState({ isLoadingData: true }, function () {
onSetLoadingData && onSetLoadingData(true);
onSetLoadingInput && onSetLoadingInput(true);
this.trySwitch();
let timerId = setTimeout(() => {
this.setState({ isInitialLoader: true });
}, 1000);
let resultingFolderTree, resultingId;
try {
[
resultingFolderTree,
resultingId,
] = await SelectionPanel.getBasicFolderInfo(
treeFolders,
foldersType,
id,
onSetBaseFolderPath,
onSelectFolder,
foldersList,
isSetFolderImmediately,
setSelectedNode,
setSelectedFolder,
setExpandedPanelKeys
);
clearTimeout(timerId);
timerId = null;
} catch (e) {
toastr.error(e);
clearTimeout(timerId);
timerId = null;
this.setState({ isInitialLoader: false });
return;
}
const tree = treeFromInput ? treeFromInput : resultingFolderTree;
if (tree.length === 0) {
this.setState({ isAvailable: false });
onSelectFolder(null);
//this.loadersCompletes();
return;
}
this.setState({
resultingFolderTree: tree,
isInitialLoader: false,
...((foldersType === "common" || isSetFolderImmediately) && {
folderId: treeFromInput ? id : resultingId,
}),
});
}
@ -95,7 +129,7 @@ class SelectFolderModalDialog extends React.Component {
) {
this.setState({
canCreate: canCreate,
isLoading: false,
isLoadingData: false,
});
}
@ -103,88 +137,6 @@ class SelectFolderModalDialog extends React.Component {
this.onResetInfo();
}
}
trySwitch = async () => {
const {
folderPath,
onSelectFolder,
onSetBaseFolderPath,
foldersType,
id,
selectedFolderId,
foldersList,
} = this.props;
switch (foldersType) {
case "exceptSortedByTags":
try {
const foldersTree = await getFoldersTree();
[folderList, this.noTreeSwitcher] = SelectFolderDialog.convertFolders(
foldersTree,
exceptSortedByTagsFolders
);
this.setBaseSettings();
} catch (err) {
console.error("error", err);
this.loadersCompletes();
}
break;
case "exceptPrivacyTrashFolders":
try {
const foldersTree = await getFoldersTree();
[folderList, this.noTreeSwitcher] = SelectFolderDialog.convertFolders(
foldersTree,
exceptPrivacyTrashFolders
);
this.setBaseSettings();
} catch (err) {
console.error(err);
this.loadersCompletes();
}
break;
case "common":
try {
folderList = await SelectFolderDialog.getCommonFolders();
folderPath.length === 0 &&
!selectedFolderId &&
onSelectFolder &&
onSelectFolder(`${id ? id : folderList[0].id}`);
this.setState({
folderId: `${
selectedFolderId ? selectedFolderId : id ? id : folderList[0].id
}`,
});
!id &&
!selectedFolderId &&
onSetBaseFolderPath &&
onSetBaseFolderPath(folderList[0].title);
this.setFolderInfo();
} catch (err) {
console.error(err);
this.loadersCompletes();
}
break;
case "third-party":
try {
folderList = foldersList
? foldersList
: await SelectFolderDialog.getCommonThirdPartyList();
this.setBaseSettings();
} catch (err) {
console.error(err);
this.loadersCompletes();
}
break;
}
};
loadersCompletes = () => {
const {
@ -200,161 +152,6 @@ class SelectFolderModalDialog extends React.Component {
isLoadingData: false,
});
};
setBaseSettings = async () => {
const { isSetFolderImmediately } = this.state;
const {
onSelectFolder,
onSetBaseFolderPath,
id,
selectedFolderId,
showButtons,
} = this.props;
if (folderList.length === 0) {
this.setState({ isAvailable: false });
onSelectFolder(null);
this.loadersCompletes();
return;
}
!id && showButtons && this.setFolderToTree(folderList[0].id);
isSetFolderImmediately &&
!selectedFolderId &&
onSelectFolder &&
onSelectFolder(
`${selectedFolderId ? selectedFolderId : id ? id : folderList[0].id}`
);
isSetFolderImmediately &&
this.setState({
folderId: `${
selectedFolderId ? selectedFolderId : id ? id : folderList[0].id
}`,
});
if (onSetBaseFolderPath) {
try {
this.folderTitle = await SelectFolderDialog.getFolderPath(
id ? id : folderList[0].id
);
!id &&
!selectedFolderId &&
isSetFolderImmediately &&
onSetBaseFolderPath(this.folderTitle);
} catch (err) {
console.error(err);
}
}
this.setFolderInfo();
};
setFolderInfo = () => {
const {
id,
onSetFileName,
fileName,
selectedFolderId,
dialogWithFiles,
onSetBaseFolderPath,
} = this.props;
fileName && onSetFileName && onSetFileName(fileName);
if (!id && !selectedFolderId) {
this.loadersCompletes();
return;
}
if (selectedFolderId) {
onSetBaseFolderPath
? this.setBaseFolderPath(selectedFolderId)
: this.loadersCompletes();
}
if (id && !selectedFolderId) {
if (!dialogWithFiles) this.setSelectedFolder(id);
else {
this.setBaseFolderPath(id);
}
}
};
setBaseFolderPath = () => {
const { onSetBaseFolderPath, selectedFolderId } = this.props;
SelectFolderDialog.getFolderPath(selectedFolderId)
.then((folderPath) => (this.folderTitle = folderPath))
.then(() => onSetBaseFolderPath(this.folderTitle))
.catch((error) => console.log("error", error))
.finally(() => {
this.loadersCompletes();
});
};
setSelectedFolder = async (id) => {
const { onSetBaseFolderPath } = this.props;
let folder,
folderPath,
requests = [];
requests.push(getFolder(id));
if (onSetBaseFolderPath) {
requests.push(getFolderPath(id));
}
try {
[folder, folderPath] = await Promise.all(requests);
} catch (e) {
console.error(e);
}
folder && this.setFolderObjectToTree(id, folder);
if (onSetBaseFolderPath && folderPath) {
this.folderTitle = SelectFolderInput.setFullFolderPath(folderPath);
onSetBaseFolderPath(this.folderTitle);
}
this.loadersCompletes();
};
setFolderToTree = (id) => {
getFolder(id)
.then((data) => {
this.setFolderObjectToTree(id, data);
})
.catch((error) => console.log("error", error));
};
setFolderObjectToTree = (id, data) => {
const {
setSelectedNode,
setSelectedFolder,
selectionButtonPrimary,
setExpandedPanelKeys,
onSetBaseFolderPath,
} = this.props;
const isInput = !!onSetBaseFolderPath;
if (!selectionButtonPrimary || isInput) {
//TODO: it need for canCreate function now, will need when passed the folder id - need to come up with a different solution.
setSelectedNode([id + ""]);
const newPathParts = SelectFolderDialog.convertPathParts(data.pathParts);
isInput && setExpandedPanelKeys(newPathParts);
setSelectedFolder({
folders: data.folders,
...data.current,
pathParts: newPathParts,
...{ new: data.new },
});
}
};
componentWillUnmount() {
const {
@ -388,130 +185,52 @@ class SelectFolderModalDialog extends React.Component {
onSelect = async (folder) => {
const {
onSelectFolder,
onClose,
showButtons,
onSetFullPath,
selectionButtonPrimary,
onSetLoadingData,
onSetLoadingInput,
setSelectedNode,
setExpandedPanelKeys,
setSelectedFolder,
} = this.props;
const { folderId } = this.state;
let requests = [];
if (isArrayEqual([folder[0]], [folderId])) {
return;
}
onSetLoadingData && onSetLoadingData(true);
onSetLoadingInput && onSetLoadingInput(true);
this.setState({
folderId: folder[0],
});
let folderInfo, folderPath;
if (showButtons && !selectionButtonPrimary) {
this.setState({
isLoading: true,
canCreate: false,
});
}
try {
if (showButtons && onSetFullPath) {
requests.push(getFolder(folder[0]), getFolderPath(folder));
[folderInfo, folderPath] = await Promise.all(requests);
} else {
showButtons
? (folderInfo = await getFolder(folder[0]))
: (folderPath = await getFolderPath(folder));
}
if (folderInfo) {
this.setFolderObjectToTree(folder[0], folderInfo);
}
if (folderPath) {
pathName = SelectFolderInput.setFullFolderPath(folderPath);
onSetFullPath && onSetFullPath(pathName);
}
} catch (e) {
console.error(e);
toastr.error();
if (showButtons) {
this.setState({
isLoading: false,
canCreate: true,
});
onClose && onClose();
}
}
onSelectFolder && onSelectFolder(folder[0]);
!showButtons && onClose && onClose();
this.loadersCompletes();
SelectionPanel.setFolderObjectToTree(
folder[0],
setSelectedNode,
setExpandedPanelKeys,
setSelectedFolder
);
};
onSave = (e) => {
const { onClose, onSave } = this.props;
const { onClose, onSave, onSetNewFolderPath, onSelectFolder } = this.props;
const { folderId } = this.state;
onSave && onSave(e, folderId);
onSetNewFolderPath && onSetNewFolderPath(folderId);
onSelectFolder && onSelectFolder(folderId);
onClose && onClose();
};
onResetInfo = async () => {
const { id, foldersType, onSelectFolder } = this.props;
switch (foldersType) {
case "common":
try {
if (!id) {
folderList = await SelectFolderDialog.getCommonFolders();
}
const {
id,
setSelectedNode,
setExpandedPanelKeys,
setSelectedFolder,
} = this.props;
onSelectFolder && onSelectFolder(`${id ? id : folderList[0].id}`);
SelectionPanel.setFolderObjectToTree(
id,
setSelectedNode,
setExpandedPanelKeys,
setSelectedFolder
);
this.setState({
folderId: `${id ? id : folderList[0].id}`,
});
this.setFolderToTree(id ? id : folderList[0].id);
this.loadersCompletes();
} catch (err) {
console.error(err);
this.loadersCompletes();
}
break;
case "third-party":
try {
if (!id) {
folderList = await SelectFolderDialog.getCommonThirdPartyList();
}
onSelectFolder && onSelectFolder(`${id ? id : folderList[0].id}`);
this.setState({
folderId: `${id ? id : folderList[0].id}`,
});
this.setFolderToTree(id ? id : folderList[0].id);
this.loadersCompletes();
} catch (err) {
console.error(err);
this.loadersCompletes();
}
break;
}
this.setState({
folderId: id,
});
};
render() {
@ -528,18 +247,19 @@ class SelectFolderModalDialog extends React.Component {
header,
headerName,
footer,
showButtons,
buttonName,
} = this.props;
const {
isAvailable,
certainFolders,
folderId,
displayType,
isLoadingData,
canCreate,
isLoading,
isLoadingData,
isAvailable,
resultingFolderTree,
} = this.state;
const primaryButtonName = buttonName ? buttonName : t("Common:SaveButton");
return displayType === "aside" ? (
<SelectFolderDialogAsideView
theme={theme}
@ -550,21 +270,19 @@ class SelectFolderModalDialog extends React.Component {
withoutProvider={withoutProvider}
isNeedArrowIcon={isNeedArrowIcon}
asideHeightContent={asideHeightContent}
isAvailable={isAvailable}
certainFolders={certainFolders}
certainFolders={true}
folderId={folderId}
folderList={folderList}
resultingFolderTree={resultingFolderTree}
onSelect={this.onSelect}
onSave={this.onSave}
header={header}
headerName={headerName}
footer={footer}
showButtons={showButtons}
isLoadingData={isLoadingData}
canCreate={canCreate}
isLoading={isLoading}
primaryButtonName={this.buttonName}
isLoadingData={isLoadingData}
primaryButtonName={primaryButtonName}
noTreeSwitcher={this.noTreeSwitcher}
isAvailable={isAvailable}
/>
) : (
<SelectFolderDialogModalView
@ -575,21 +293,19 @@ class SelectFolderModalDialog extends React.Component {
onClose={onClose}
withoutProvider={withoutProvider}
modalHeightContent={modalHeightContent}
isAvailable={isAvailable}
certainFolders={certainFolders}
certainFolders={true}
folderId={folderId}
folderList={folderList}
resultingFolderTree={resultingFolderTree}
onSelect={this.onSelect}
onSave={this.onSave}
header={header}
headerName={headerName}
footer={footer}
showButtons={showButtons}
canCreate={canCreate}
isLoadingData={isLoadingData}
isLoading={isLoading}
primaryButtonName={this.buttonName}
primaryButtonName={primaryButtonName}
noTreeSwitcher={this.noTreeSwitcher}
isAvailable={isAvailable}
/>
);
}
@ -638,7 +354,11 @@ const SelectFolderDialogWrapper = inject(
filesStore,
auth,
}) => {
const { setSelectedNode, setExpandedPanelKeys } = treeFoldersStore;
const {
setSelectedNode,
setExpandedPanelKeys,
treeFolders,
} = treeFoldersStore;
const { canCreate } = filesStore;
const { setSelectedFolder, id } = selectedFolderStore;
const { setFolderId, setFile } = selectedFilesStore;
@ -651,6 +371,7 @@ const SelectFolderDialogWrapper = inject(
setExpandedPanelKeys,
setFolderId,
setFile,
treeFolders,
};
}
)(
@ -709,40 +430,6 @@ class SelectFolderDialog extends React.Component {
return convertFoldersArray;
};
static convertPathParts = (pathParts) => {
let newPathParts = [];
for (let i = 0; i < pathParts.length - 1; i++) {
if (typeof pathParts[i] === "number") {
newPathParts.push(String(pathParts[i]));
} else {
newPathParts.push(pathParts[i]);
}
}
return newPathParts;
};
static convertFolders = (folders, arrayOfExceptions) => {
let newArray = [];
let noSubfoldersCount = 0;
let needHideSwitcher = false;
for (let i = 0; i < folders.length; i++) {
if (!arrayOfExceptions.includes(folders[i].rootFolderType)) {
newArray.push(folders[i]);
if (
folders[i].foldersCount === 0 ||
folders[i].rootFolderType === FolderType.Privacy
) {
noSubfoldersCount += 1;
}
}
}
if (newArray.length === noSubfoldersCount) {
needHideSwitcher = true;
}
return [newArray, needHideSwitcher];
};
render() {
return (

28
products/ASC.Files/Client/src/components/panels/SelectFolderInput/SelectFolderInputWrapper.js Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import { Provider as MobxProvider } from "mobx-react";
import { I18nextProvider } from "react-i18next";
import stores from "../../../store/index";
import store from "studio/store";
import SelectFolderInput from "./index";
import i18n from "./i18n";
const { auth: authStore } = store;
const SelectFolderModalWrapper = (props) => <SelectFolderInput {...props} />;
class SelectFolderInputWrapper extends React.Component {
componentDidMount() {
authStore.init(true);
}
render() {
return (
<MobxProvider auth={authStore} {...stores}>
<I18nextProvider i18n={i18n}>
<SelectFolderModalWrapper {...this.props} />
</I18nextProvider>
</MobxProvider>
);
}
}
export default SelectFolderInputWrapper;

35
products/ASC.Files/Client/src/components/panels/SelectFolderInput/i18n.js Normal file
View File

@ -0,0 +1,35 @@
import i18n from "i18next";
import Backend from "i18next-http-backend";
import { LANGUAGE } from "@appserver/common/constants";
import config from "../../../../package.json";
import { loadLanguagePath } from "@appserver/common/utils";
const newInstance = i18n.createInstance();
newInstance.use(Backend).init({
lng: localStorage.getItem(LANGUAGE) || "en",
fallbackLng: "en",
load: "currentOnly",
//debug: true,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
format: function (value, format) {
if (format === "lowercase") return value.toLowerCase();
return value;
},
},
backend: {
loadPath: loadLanguagePath(config.homepage),
},
ns: ["SelectFolder"],
defaultNS: "SelectFolder",
react: {
useSuspense: false,
},
});
export default newInstance;

305
products/ASC.Files/Client/src/components/panels/SelectFolderInput/index.js
View File

@ -1,204 +1,239 @@
import React from "react";
import { Provider as MobxProvider, inject, observer } from "mobx-react";
import { inject, observer } from "mobx-react";
import PropTypes from "prop-types";
import stores from "../../../store/index";
import SelectFolderDialog from "../SelectFolderDialog/index";
import StyledComponent from "./StyledSelectFolderInput";
import { getFolderPath } from "@appserver/common/api/files";
import toastr from "@appserver/components/toast/toastr";
import SelectionPanel from "../SelectionPanel/SelectionPanelBody";
import SelectFolderDialog from "../SelectFolderDialog";
import SimpleFileInput from "../../SimpleFileInput";
let path = "";
class SelectFolderInputBody extends React.PureComponent {
class SelectFolderInput extends React.PureComponent {
constructor(props) {
super(props);
const { id, foldersType, isSetFolderImmediately } = this.props;
const isNeedLoader =
!!id || isSetFolderImmediately || foldersType === "common";
this.state = {
isLoading: false,
isLoading: isNeedLoader,
baseFolderPath: "",
fullFolderPath: "",
newFolderPath: "",
resultingFolderTree: [],
baseId: "",
};
}
componentDidMount() {
const { folderPath, setFirstLoad } = this.props;
if (folderPath.length !== 0) {
this.setState({
fullFolderPath: folderPath,
});
}
async componentDidMount() {
const {
setFirstLoad,
treeFolders,
foldersType,
id,
onSelectFolder,
foldersList,
isSetFolderImmediately,
setSelectedNode,
setSelectedFolder,
setExpandedPanelKeys,
} = this.props;
setFirstLoad(false);
// let resultingFolderTree, resultingId;
// console.log("input mount");
// try {
// [
// resultingFolderTree,
// resultingId,
// ] = await SelectionPanel.getBasicFolderInfo(
// treeFolders,
// foldersType,
// id,
// this.onSetBaseFolderPath,
// onSelectFolder,
// foldersList,
// isSetFolderImmediately,
// setSelectedNode,
// setSelectedFolder,
// setExpandedPanelKeys
// );
// } catch (e) {
// toastr.error(e);
// return;
// }
// this.setState({
// resultingFolderTree,
// baseId: resultingId,
// isLoading: false,
// });
}
componentDidUpdate(prevProps) {
const { isSuccessSave, isReset } = this.props;
const { fullFolderPath, baseFolderPath } = this.state;
const { newFolderPath, baseFolderPath } = this.state;
if (isSuccessSave && isSuccessSave !== prevProps.isSuccessSave) {
fullFolderPath &&
newFolderPath &&
this.setState({
baseFolderPath: fullFolderPath,
baseFolderPath: newFolderPath,
});
}
if (isReset && isReset !== prevProps.isReset) {
this.setState({
fullFolderPath: baseFolderPath,
newFolderPath: baseFolderPath,
});
}
}
setFolderPath = async (folderId) => {
const foldersArray = await getFolderPath(folderId);
onSetFullPath = (pathName) => {
this.setState({
fullFolderPath: pathName,
});
const convertFolderPath = (foldersArray) => {
let path = "";
if (foldersArray.length > 1) {
for (let item of foldersArray) {
if (!path) {
path = path + `${item.title}`;
} else path = path + " " + "/" + " " + `${item.title}`;
}
} else {
for (let item of foldersArray) {
path = `${item.title}`;
}
}
return path;
};
const convertFoldersArray = convertFolderPath(foldersArray);
return convertFoldersArray;
};
onSetNewFolderPath = async (folderId) => {
let timerId = setTimeout(() => {
this.setState({ isLoading: true });
}, 500);
try {
const convertFoldersArray = await this.setFolderPath(folderId);
clearTimeout(timerId);
timerId = null;
this.setState({
newFolderPath: convertFoldersArray,
isLoading: false,
});
} catch (e) {
toastr.error(e);
clearTimeout(timerId);
timerId = null;
this.setState({
isLoading: false,
});
}
};
onSetBaseFolderPath = (pathName) => {
this.setState({
baseFolderPath: pathName,
});
onSetBaseFolderPath = async (folderId) => {
//console.log("onSetBaseFolderPath", folderId);
try {
const convertFoldersArray = await this.setFolderPath(folderId);
this.setState({
baseFolderPath: convertFoldersArray,
isLoading: false,
});
} catch (e) {
toastr.error(e);
this.setState({
isLoading: false,
});
}
};
onSetLoadingInput = (loading) => {
onSetLoadingInput = (isLoading) => {
this.setState({
isLoading: loading,
isLoading,
});
};
render() {
const {
name,
isLoading,
baseFolderPath,
newFolderPath,
resultingFolderTree,
baseId,
} = this.state;
const {
onClickInput,
isPanelVisible,
withoutProvider,
onClose,
isError,
isSavingProcess,
isDisabled,
onSelectFolder,
onSetLoadingData,
foldersType,
folderPath,
isNeedArrowIcon,
isSetFolderImmediately,
id,
selectedFolderId,
displayType,
dialogWithFiles,
modalHeightContent,
asideHeightContent,
zIndex,
showButtons,
header,
headerName,
footer,
selectionButtonPrimary,
fontSizeInput,
t,
placeholder,
maxInputWidth,
isReset,
foldersList,
isDisabled,
isPanelVisible,
id,
theme,
...rest
} = this.props;
const { isLoading, baseFolderPath, fullFolderPath } = this.state;
const passedId = baseId !== id && id ? id : baseId;
console.log("resultingFolderTree", resultingFolderTree, isLoading);
return (
<StyledComponent maxInputWidth={maxInputWidth} theme={theme}>
<StyledComponent maxWidth={maxInputWidth}>
<SimpleFileInput
theme={theme}
name={name}
className="select-folder_file-input"
textField={fullFolderPath || baseFolderPath}
isDisabled={isLoading || isSavingProcess || isDisabled}
textField={newFolderPath || baseFolderPath}
isError={isError}
onClickInput={onClickInput}
fontSizeInput={fontSizeInput}
maxInputWidth={maxInputWidth}
placeholder={placeholder}
isDisabled={isDisabled || isLoading}
/>
{/* {isPanelVisible && ( */}
<SelectFolderDialog
theme={theme}
zIndex={zIndex}
{...rest}
id={passedId}
isPanelVisible={isPanelVisible}
onClose={onClose}
folderPath={folderPath}
onSelectFolder={onSelectFolder}
onSetLoadingData={onSetLoadingData}
foldersType={foldersType}
withoutProvider={withoutProvider}
onSetFullPath={this.onSetFullPath}
onSetBaseFolderPath={this.onSetBaseFolderPath}
onSetLoadingInput={this.onSetLoadingInput}
isNeedArrowIcon={isNeedArrowIcon}
isSetFolderImmediately={isSetFolderImmediately}
id={id}
selectedFolderId={selectedFolderId}
displayType={displayType}
dialogWithFiles={dialogWithFiles}
modalHeightContent={modalHeightContent}
asideHeightContent={asideHeightContent}
showButtons={showButtons}
header={header}
headerName={headerName}
footer={footer}
selectionButtonPrimary={selectionButtonPrimary}
isReset={isReset}
foldersList={foldersList}
onSetNewFolderPath={this.onSetNewFolderPath}
/>
{/* )} */}
</StyledComponent>
);
}
}
SelectFolderInputBody.propTypes = {
SelectFolderInput.propTypes = {
onClickInput: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
onSelectFolder: PropTypes.func.isRequired,
onSetLoadingData: PropTypes.func,
isPanelVisible: PropTypes.bool.isRequired,
name: PropTypes.string,
withoutProvider: PropTypes.bool,
isError: PropTypes.bool,
isSavingProcess: PropTypes.bool,
hasError: PropTypes.bool,
isDisabled: PropTypes.bool,
placeholder: PropTypes.string,
};
SelectFolderInputBody.defaultProps = {
withoutProvider: false,
SelectFolderInput.defaultProps = {
hasError: false,
isDisabled: false,
isError: false,
folderPath: "",
placeholder: "",
};
const SelectFolderInputBodyWrapper = inject(({ filesStore }) => {
const { setFirstLoad } = filesStore;
return {
setFirstLoad,
};
})(observer(SelectFolderInputBody));
class SelectFolderInput extends React.Component {
static setFullFolderPath = (foldersArray) => {
path = "";
if (foldersArray.length > 1) {
for (let item of foldersArray) {
if (!path) {
path = path + `${item.title}`;
} else path = path + " " + "/" + " " + `${item.title}`;
}
} else {
for (let item of foldersArray) {
path = `${item.title}`;
}
}
return path;
};
render() {
return (
<MobxProvider {...stores}>
<SelectFolderInputBodyWrapper {...this.props} />
</MobxProvider>
);
export default inject(
({ filesStore, treeFoldersStore, selectedFolderStore }) => {
const {
setSelectedNode,
setExpandedPanelKeys,
treeFolders,
} = treeFoldersStore;
const { setSelectedFolder } = selectedFolderStore;
const { setFirstLoad } = filesStore;
return {
setFirstLoad,
treeFolders,
setSelectedNode,
setExpandedPanelKeys,
setSelectedFolder,
};
}
}
export default SelectFolderInput;
)(observer(SelectFolderInput));

0
products/ASC.Files/Client/src/components/panels/SelectFolderDialog/ExceptionFoldersConstants.js → products/ASC.Files/Client/src/components/panels/SelectionPanel/ExceptionFoldersConstants.js
View File

189
products/ASC.Files/Client/src/components/panels/SelectionPanel/SelectionPanelBody.js Normal file
View File

@ -0,0 +1,189 @@
import React from "react";
import ModalDialog from "@appserver/components/modal-dialog";
import IconButton from "@appserver/components/icon-button";
import Button from "@appserver/components/button";
import Loaders from "@appserver/common/components/Loaders";
import {
getCommonFoldersTree,
getFolder,
getFoldersTree,
getThirdPartyFoldersTree,
} from "@appserver/common/api/files";
import toastr from "studio/toastr";
import {
exceptSortedByTagsFolders,
exceptPrivacyTrashFolders,
} from "./ExceptionFoldersConstants";
const SelectionPanelBody = ({
isPanelVisible,
isDataLoading,
hasNextPage,
resultingFolderTree,
footerChild,
headerChild,
loadNextPage,
loadingText,
onButtonClick,
onClose,
onArrowClickAction,
onSelectFile,
onFolderClick,
items,
folderId,
isNextPageLoading,
isInitialLoader,
page,
title,
t,
selectedFileInfo,
buttonText,
}) => {
console.log("isRootPage", isRootPage);
return <></>;
};
class SelectionPanel extends React.Component {
static convertPathParts = (pathParts) => {
let newPathParts = [];
for (let i = 0; i < pathParts.length - 1; i++) {
if (typeof pathParts[i] === "number") {
newPathParts.push(String(pathParts[i]));
} else {
newPathParts.push(pathParts[i]);
}
}
return newPathParts;
};
static setFolderObjectToTree = async (
id,
setSelectedNode,
setExpandedPanelKeys,
setSelectedFolder
) => {
const data = await getFolder(id);
setSelectedNode([id + ""]);
const newPathParts = this.convertPathParts(data.pathParts);
setExpandedPanelKeys(newPathParts);
setSelectedFolder({
folders: data.folders,
...data.current,
pathParts: newPathParts,
...{ new: data.new },
});
};
static getBasicFolderInfo = async (
treeFolders,
foldersType,
id,
onSetBaseFolderPath,
onSelectFolder,
foldersList,
isSetFolderImmediately,
setSelectedNode,
setSelectedFolder,
setExpandedPanelKeys
) => {
//console.log("getBasicFolderInfo", setSelectedNode);
//debugger;
const getRequestFolderTree = () => {
switch (foldersType) {
case "exceptSortedByTags":
case "exceptPrivacyTrashFolders":
try {
return getFoldersTree();
} catch (err) {
console.error(err);
}
break;
case "common":
try {
return getCommonFoldersTree();
} catch (err) {
console.error(err);
}
break;
case "third-party":
try {
return getThirdPartyFoldersTree();
} catch (err) {
console.error(err);
}
break;
}
};
const filterFoldersTree = (folders, arrayOfExceptions) => {
let newArray = [];
for (let i = 0; i < folders.length; i++) {
if (!arrayOfExceptions.includes(folders[i].rootFolderType)) {
newArray.push(folders[i]);
}
}
return newArray;
};
const getExceptionsFolders = (treeFolders) => {
switch (foldersType) {
case "exceptSortedByTags":
return filterFoldersTree(treeFolders, exceptSortedByTagsFolders);
case "exceptPrivacyTrashFolders":
return filterFoldersTree(treeFolders, exceptPrivacyTrashFolders);
}
};
let requestedTreeFolders, filteredTreeFolders, passedId;
const treeFoldersLength = treeFolders.length;
if (treeFoldersLength === 0) {
try {
requestedTreeFolders = foldersList
? foldersList
: await getRequestFolderTree();
} catch (e) {
toastr.error(e);
return;
}
}
const foldersTree =
treeFoldersLength > 0 ? treeFolders : requestedTreeFolders;
if (id || isSetFolderImmediately || foldersType === "common") {
passedId = id ? id : foldersTree[0].id;
console.log("passedId", passedId, id, foldersTree[0].id);
onSetBaseFolderPath && onSetBaseFolderPath(passedId);
onSelectFolder && onSelectFolder(passedId);
await SelectionPanel.setFolderObjectToTree(
passedId,
setSelectedNode,
setExpandedPanelKeys,
setSelectedFolder
);
}
if (
foldersType === "exceptSortedByTags" ||
foldersType === "exceptPrivacyTrashFolders"
) {
filteredTreeFolders = getExceptionsFolders(foldersTree);
}
console.log("base info requestedTreeFolders", requestedTreeFolders);
return [filteredTreeFolders || requestedTreeFolders, passedId];
};
render() {
return <SelectionPanelBody {...this.props} />;
}
}
export default SelectionPanel;

0
products/ASC.Files/Client/src/components/panels/SelectionPanel/StyledSelectionPanel.js Normal file
View File

3
products/ASC.Files/Client/webpack.config.js
View File

@ -171,7 +171,8 @@ var config = {
"./utils": "./src/helpers/utils.js",
"./SelectFileDialog": "./src/components/panels/SelectFileDialog",
"./SelectFolderDialog": "./src/components/panels/SelectFolderDialog",
"./SelectFolderInput": "./src/components/panels/SelectFolderInput",
"./SelectFolderInput":
"./src/components/panels/SelectFolderInput/SelectFolderInputWrapper.js",
"./SelectFileInput": "./src/components/panels/SelectFileInput",
},
shared: {

5
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/DesktopView.js
View File

@ -14,12 +14,11 @@ import { StyledBackup } from "./StyledBackup";
import AutoBackup from "./auto-backup";
import ManualBackup from "./manual-backup";
import RestoreBackup from "./restore-backup";
import SelectFolderDialog from "files/SelectFolderDialog";
import toastr from "@appserver/components/toast/toastr";
import moment from "moment";
import { getBackupStorage } from "@appserver/common/api/settings";
import HelpButton from "@appserver/components/help-button";
import { getThirdPartyFoldersTree } from "@appserver/common/api/files";
class BackupDesktopView extends React.Component {
constructor(props) {
super(props);
@ -57,7 +56,7 @@ class BackupDesktopView extends React.Component {
enableAutoBackup(),
getBackupSchedule(),
getBackupStorage(),
SelectFolderDialog.getCommonThirdPartyList(),
getThirdPartyFoldersTree(),
];
try {

4
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/auto-backup/index.js
View File

@ -24,7 +24,7 @@ import { StyledModules, StyledAutoBackup } from "../StyledBackup";
import ThirdPartyModule from "./sub-components/ThirdPartyModule";
import DocumentsModule from "./sub-components/DocumentsModule";
import ThirdPartyStorageModule from "./sub-components/ThirdPartyStorageModule";
import { getThirdPartyFoldersTree } from "@appserver/common/api/files";
const {
DocumentModuleType,
ResourcesModuleType,
@ -93,7 +93,7 @@ class AutomaticBackup extends React.PureComponent {
backupSchedule,
backupStorage,
] = await Promise.all([
SelectFolderDialog.getCommonThirdPartyList(),
getThirdPartyFoldersTree,
getBackupSchedule(),
getBackupStorage(),
]);

10
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/auto-backup/sub-components/DocumentsModule.js
View File

@ -25,9 +25,9 @@ class DocumentsModule extends React.PureComponent {
});
};
onSelectFolder = (selectedFolder) => {
onSelectFolder = (id) => {
const { setSelectedFolder } = this.props;
setSelectedFolder(selectedFolder);
setSelectedFolder(`${id}`);
};
render() {
@ -52,7 +52,7 @@ class DocumentsModule extends React.PureComponent {
isError={isError}
foldersType="common"
withoutProvider
isSavingProcess={isLoadingData}
isDisabled={isLoadingData}
id={passedId}
isReset={isReset}
isSuccessSave={isSuccessSave}
@ -65,12 +65,12 @@ class DocumentsModule extends React.PureComponent {
}
export default inject(({ backup }) => {
const { setSelectedFolder, defaultFolderId, defaultStorageType } = backup;
const { setSelectedFolder, selectedFolderId, defaultStorageType } = backup;
const isDocumentsDefault =
defaultStorageType === `${BackupStorageType.DocumentModuleType}`;
const passedId = isDocumentsDefault ? defaultFolderId : "";
const passedId = isDocumentsDefault ? selectedFolderId : "";
return {
setSelectedFolder,

11
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/auto-backup/sub-components/ThirdPartyModule.js
View File

@ -26,9 +26,9 @@ class ThirdPartyModule extends React.PureComponent {
});
};
onSelectFolder = (selectedFolder) => {
onSelectFolder = (id) => {
const { setSelectedFolder } = this.props;
setSelectedFolder(selectedFolder);
setSelectedFolder(`${id}`);
};
render() {
@ -53,7 +53,7 @@ class ThirdPartyModule extends React.PureComponent {
isPanelVisible={isPanelVisible}
isError={isError}
foldersType="third-party"
isSavingProcess={isLoadingData}
isDisabled={isLoadingData}
id={passedId}
isReset={isReset}
isSuccessSave={isSuccessSave}
@ -69,14 +69,15 @@ class ThirdPartyModule extends React.PureComponent {
export default inject(({ backup }) => {
const {
setSelectedFolder,
defaultFolderId,
selectedFolderId,
defaultStorageType,
commonThirdPartyList,
} = backup;
const isResourcesDefault =
defaultStorageType === `${BackupStorageType.ResourcesModuleType}`;
const passedId = isResourcesDefault ? defaultFolderId : "";
const passedId = isResourcesDefault ? selectedFolderId : "";
return {
setSelectedFolder,

8
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/manual-backup/index.js
View File

@ -9,12 +9,12 @@ import RadioButton from "@appserver/components/radio-button";
import toastr from "@appserver/components/toast/toastr";
import Loader from "@appserver/components/loader";
import { BackupStorageType } from "@appserver/common/constants";
import SelectFolderDialog from "files/SelectFolderDialog";
import ThirdPartyModule from "./sub-components/ThirdPartyModule";
import DocumentsModule from "./sub-components/DocumentsModule";
import ThirdPartyStorageModule from "./sub-components/ThirdPartyStorageModule";
import { StyledModules, StyledManualBackup } from "./../StyledBackup";
import { saveToSessionStorage, getFromSessionStorage } from "../../../../utils";
import { getThirdPartyFoldersTree } from "@appserver/common/api/files";
let selectedStorageType = "";
@ -60,7 +60,7 @@ class ManualBackup extends React.Component {
try {
getProgress(t);
const commonThirdPartyList = await SelectFolderDialog.getCommonThirdPartyList();
const commonThirdPartyList = await getThirdPartyFoldersTree();
commonThirdPartyList && setCommonThirdPartyList(commonThirdPartyList);
} catch (error) {
console.error(error);
@ -150,10 +150,6 @@ class ManualBackup extends React.Component {
if (isCheckedDocuments || isCheckedThirdParty) {
saveToSessionStorage("LocalCopyFolder", `${selectedFolder}`);
SelectFolderDialog.getFolderPath(selectedFolder).then((folderPath) => {
saveToSessionStorage("LocalCopyPath", `${folderPath}`);
});
} else {
saveToSessionStorage("LocalCopyStorage", `${selectedStorageId}`);
saveToSessionStorage(

13
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/manual-backup/sub-components/DocumentsModule.js
View File

@ -5,20 +5,17 @@ import Button from "@appserver/components/button";
import { getFromSessionStorage } from "../../../../../utils";
import { BackupStorageType } from "@appserver/common/constants";
let folderPath = "";
let folder = "";
class DocumentsModule extends React.Component {
constructor(props) {
super(props);
folderPath = getFromSessionStorage("LocalCopyPath");
folder = getFromSessionStorage("LocalCopyFolder");
this.state = {
isStartCopy: false,
selectedFolder: folder || "",
isPanelVisible: false,
folderPath: folderPath || "",
};
}
@ -63,12 +60,7 @@ class DocumentsModule extends React.Component {
render() {
const { isMaxProgress, t, buttonSize } = this.props;
const {
isPanelVisible,
isStartCopy,
folderPath,
selectedFolder,
} = this.state;
const { isPanelVisible, isStartCopy, selectedFolder } = this.state;
const isModuleDisabled = !isMaxProgress || isStartCopy || !selectedFolder;
return (
@ -79,9 +71,8 @@ class DocumentsModule extends React.Component {
name={"common"}
onClose={this.onClose}
onClickInput={this.onClickInput}
folderPath={folderPath}
isPanelVisible={isPanelVisible}
isSavingProcess={isModuleDisabled}
isDisabled={isModuleDisabled}
foldersType="common"
withoutProvider
fontSizeInput={"13px"}

14
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/manual-backup/sub-components/ThirdPartyModule.js
View File

@ -6,13 +6,11 @@ import Button from "@appserver/components/button";
import { getFromSessionStorage } from "../../../../../utils";
import { BackupStorageType } from "@appserver/common/constants";
let folderPath = "";
let folder = "";
class ThirdPartyModule extends React.Component {
constructor(props) {
super(props);
folderPath = getFromSessionStorage("LocalCopyPath");
folder = getFromSessionStorage("LocalCopyFolder");
this.state = {
@ -21,7 +19,6 @@ class ThirdPartyModule extends React.Component {
selectedFolder: folder || "",
isPanelVisible: false,
isError: false,
folderPath: folderPath || "",
};
}
@ -90,13 +87,7 @@ class ThirdPartyModule extends React.Component {
};
render() {
const { isMaxProgress, t, commonThirdPartyList, buttonSize } = this.props;
const {
isPanelVisible,
isLoadingData,
isError,
folderPath,
isStartCopy,
} = this.state;
const { isPanelVisible, isLoadingData, isError, isStartCopy } = this.state;
const isModuleDisabled = !isMaxProgress || isStartCopy || isLoadingData;
return (
@ -108,10 +99,9 @@ class ThirdPartyModule extends React.Component {
onClose={this.onClose}
onClickInput={this.onClickInput}
onSetLoadingData={this.onSetLoadingData}
isSavingProcess={isModuleDisabled}
isDisabled={isModuleDisabled}
isPanelVisible={isPanelVisible}
isError={isError}
folderPath={folderPath}
foldersType="third-party"
fontSizeInput={"13px"}
foldersList={commonThirdPartyList}