Web: Files: Added modal view and aside view for SelectFileDialog component.

products/ASC.Files/Client/src/components/panels/SelectFileDialog/asideView.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { StyledAsidePanel, StyledSelectFilePanel } from "../StyledPanels";
+import Text from "@appserver/components/text";
+import ModalDialog from "@appserver/components/modal-dialog";
+import SelectFolderInput from "../SelectFolderInput";
+import FileListBody from "./fileListBody";
+const SelectFileDialogAsideView = ({
+  t,
+  isPanelVisible,
+  zIndex,
+  onClose,
+  isVisible,
+  isCommonWithoutProvider,
+  foldersType,
+  isLoadingData,
+  onFileClick,
+  onClickInput,
+  onCloseSelectFolderDialog,
+  onSelectFolder,
+  onSetLoadingData,
+  filesList,
+}) => (
+  <StyledAsidePanel visible={isPanelVisible}>
+    <ModalDialog
+      visible={isPanelVisible}
+      zIndex={zIndex}
+      onClose={onClose}
+      //displayType="aside"
+    >
+      <ModalDialog.Header>{t("SelectFile")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        <StyledSelectFilePanel>
+          <Text fontWeight="600" fontSize="14px">
+            {t("ChooseByUser")}
+          </Text>
+          <SelectFolderInput
+            onClickInput={onClickInput}
+            onClose={onCloseSelectFolderDialog}
+            onSelectFolder={onSelectFolder}
+            onSetLoadingData={onSetLoadingData}
+            isPanelVisible={isVisible}
+            foldersType={foldersType}
+            isNeedArrowIcon
+            isCommonWithoutProvider={isCommonWithoutProvider}
+          />
+          <div className="modal-dialog_body-files-list">
+            <FileListBody
+              isLoadingData={isLoadingData}
+              filesList={filesList}
+              onFileClick={onFileClick}
+            />
+          </div>
+        </StyledSelectFilePanel>
+      </ModalDialog.Body>
+    </ModalDialog>
+  </StyledAsidePanel>
+);
+export default SelectFileDialogAsideView;

products/ASC.Files/Client/src/components/panels/SelectFileDialog/fileListBody.js

@@ -0,0 +1,39 @@
+import React from "react";
+import Loader from "@appserver/components/loader";
+import Text from "@appserver/components/text";
+import { useTranslation } from "react-i18next";
+const FileListBody = ({ isLoadingData, filesList, onFileClick }) => {
+  const { t } = useTranslation(["SelectFile", "Common"]);
+
+  return (
+    <>
+      {!isLoadingData ? (
+        filesList.length > 0 ? (
+          filesList.map((data, index) => (
+            <div className="file-name">
+              <div
+                id={`${index}`}
+                key={`${index}`}
+                className="entry-title"
+                onClick={onFileClick}
+              >
+                {data.title.substring(0, data.title.indexOf(".gz"))}
+              </div>
+              <div className="file-exst">{".gz"}</div>
+            </div>
+          ))
+        ) : (
+          <Text>{`${t("Home:EmptyFolderHeader")}`} </Text>
+        )
+      ) : (
+        <div key="loader" className="panel-loader-wrapper">
+          <Loader type="oval" size="16px" className="panel-loader" />
+          <Text as="span">{`${t("Common:LoadingProcessing")} ${t(
+            "Common:LoadingDescription"
+          )}`}</Text>
+        </div>
+      )}
+    </>
+  );
+};
+export default FileListBody;

products/ASC.Files/Client/src/components/panels/SelectFileDialog/index.js

@@ -4,16 +4,12 @@ import { inject, observer } from "mobx-react";
 import { I18nextProvider } from "react-i18next";
 import { withTranslation } from "react-i18next";
 import PropTypes from "prop-types";
-import SelectFolderInput from "../SelectFolderInput";
+
 import stores from "../../../store/index";
 import i18n from "../SelectFileInput/i18n";
-import { StyledAsidePanel, StyledSelectFilePanel } from "../StyledPanels";
-import ModalDialog from "@appserver/components/modal-dialog";
-import IconButton from "@appserver/components/icon-button";
-import { getBackupFiles, getFolderInfo } from "@appserver/common/api/files";
-import SelectFolderDialog from "../SelectFolderDialog";
-import Text from "@appserver/components/text";
-import Loader from "@appserver/components/loader";
+import SelectFileDialogModalView from "./modalView";
+import SelectFileDialogAsideView from "./asideView";
+
 class SelectFileDialogBody extends React.Component {
   constructor(props) {
     super(props);
@@ -59,6 +55,7 @@ class SelectFileDialogBody extends React.Component {
       selectedFolder: id,
     });
   };
+
   onFileClick = (e) => {
     console.log("e", e.target.id);
     const { onSetFileName, onClose } = this.props;
@@ -80,65 +77,45 @@ class SelectFileDialogBody extends React.Component {
     });
   };
   render() {
-    const { t, isPanelVisible, onClose, zIndex, foldersType } = this.props;
-    const { isVisible, filesList, selectedFolder, isLoadingData } = this.state;
-    //console.log("isLoadingData", isLoadingData);
-    return (
-      <StyledAsidePanel visible={isPanelVisible}>
-        <ModalDialog
-          visible={isPanelVisible}
-          zIndex={zIndex}
-          onClose={onClose}
-          //displayType="aside"
-        >
-          <ModalDialog.Header>{t("SelectFile")}</ModalDialog.Header>
-          <ModalDialog.Body>
-            <StyledSelectFilePanel>
-              <Text fontWeight="600" fontSize="14px">
-                {t("ChooseByUser")}
-              </Text>
-              <SelectFolderInput
-                onClickInput={this.onClickInput}
-                onClose={this.onClose}
-                onSelectFolder={this.onSelectFolder}
-                onSetLoadingData={this.onSetLoadingData}
-                isPanelVisible={isVisible}
-                foldersType={foldersType}
-                isNeedArrowIcon
-              />
-              <div className="modal-dialog_body-files-list">
-                <Text fontWeight="600" fontSize="14px">
-                  {" "}
-                  {"Список файлов:"}
-                </Text>
-                {!isLoadingData ? (
-                  filesList &&
-                  filesList.map((data, index) => (
-                    <div className="file-name">
-                      <div
-                        id={`${index}`}
-                        key={`${index}`}
-                        className="entry-title"
-                        onClick={this.onFileClick}
-                      >
-                        {data.title.substring(0, data.title.indexOf(".gz"))}
-                      </div>
-                      <div className="file-exst">{".gz"}</div>
-                    </div>
-                  ))
-                ) : (
-                  <div key="loader" className="panel-loader-wrapper">
-                    <Loader type="oval" size="16px" className="panel-loader" />
-                    <Text as="span">{`${t("Common:LoadingProcessing")} ${t(
-                      "Common:LoadingDescription"
-                    )}`}</Text>
-                  </div>
-                )}
-              </div>
-            </StyledSelectFilePanel>
-          </ModalDialog.Body>
-        </ModalDialog>
-      </StyledAsidePanel>
+    const {
+      t,
+      isPanelVisible,
+      onClose,
+      zIndex,
+      foldersType,
+      isCommonWithoutProvider,
+    } = this.props;
+    const { isVisible, filesList, isLoadingData } = this.state;
+    let type = "aside";
+    return type === "aside" ? (
+      <SelectFileDialogAsideView
+        t={t}
+        isPanelVisible={isPanelVisible}
+        zIndex={zIndex}
+        onClose={onClose}
+        isVisible={isVisible}
+        isCommonWithoutProvider={isCommonWithoutProvider}
+        foldersType={foldersType}
+        filesList={filesList}
+        isLoadingData={isLoadingData}
+        onFileClick={this.onFileClick}
+        onClickInput={this.onClickInput}
+        onCloseSelectFolderDialog={this.onClose}
+        onSelectFolder={this.onSelectFolder}
+        onSetLoadingData={this.onSetLoadingData}
+      />
+    ) : (
+      <SelectFileDialogModalView
+        t={t}
+        isPanelVisible={isPanelVisible}
+        onClose={onClose}
+        onSelectFolder={this.onSelectFolder}
+        foldersType={foldersType}
+        onFileClick={this.onFileClick}
+        filesList={filesList}
+        isLoadingData={isLoadingData}
+        onSelectFolder={this.onSelectFolder}
+      />
     );
   }
 }
@@ -155,7 +132,11 @@ const SelectFileDialogWrapper = inject(
       filter,
     };
   }
-)(observer(withTranslation(["SelectFile", "Common"])(SelectFileDialogBody)));
+)(
+  observer(
+    withTranslation(["SelectFile", "Common", "Home"])(SelectFileDialogBody)
+  )
+);
 
 class SelectFileDialog extends React.Component {
   render() {

products/ASC.Files/Client/src/components/panels/SelectFileDialog/modalView.js

@@ -0,0 +1,161 @@
+import React from "react";
+import { Provider as MobxProvider } from "mobx-react";
+import { inject, observer } from "mobx-react";
+import { I18nextProvider } from "react-i18next";
+
+import PropTypes from "prop-types";
+import stores from "../../../store/index";
+import i18n from "../SelectFileInput/i18n";
+import { StyledAsidePanel, StyledSelectFilePanel } from "../StyledPanels";
+import ModalDialog from "@appserver/components/modal-dialog";
+import SelectFolderDialog from "../SelectFolderDialog";
+import FolderTreeBody from "../SelectFolderDialog/folderTreeBody";
+import FileListBody from "./fileListBody";
+class SelectFileDialogModalViewBody extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoadingData: false,
+      isAvailableFolders: true,
+      certainFolders: true,
+    };
+    this.backupList;
+    this.convertedData = [];
+    this.folderList = "";
+  }
+
+  componentDidMount() {
+    const { foldersType, onSetLoadingData, onSelectFolder } = this.props;
+    switch (foldersType) {
+      case "common":
+        SelectFolderDialog.getCommonFolders()
+          .then((commonFolder) => {
+            this.folderList = commonFolder;
+          })
+          .then(() => onSelectFolder(`${this.folderList[0].id}`))
+          .finally(() => {
+            onSetLoadingData && onSetLoadingData(false);
+
+            this.setState({
+              isLoadingData: false,
+            });
+          });
+        break;
+      case "third-party":
+        SelectFolderDialog.getCommonThirdPartyList()
+          .then(
+            (commonThirdPartyArray) => (this.folderList = commonThirdPartyArray)
+          )
+          .finally(() => {
+            onSetLoadingData && onSetLoadingData(false);
+
+            this.setState({
+              isLoadingData: false,
+            });
+          });
+        break;
+    }
+  }
+
+  onSetLoadingData = (loading) => {
+    this.setState({
+      isLoadingData: loading,
+    });
+  };
+  onSelect = (folder) => {
+    const { onSelectFolder } = this.props;
+    onSelectFolder && onSelectFolder(folder[0]);
+  };
+  render() {
+    const {
+      t,
+      isPanelVisible,
+      onClose,
+      zIndex,
+      isCommonWithoutProvider,
+      expandedKeys,
+      filter,
+      onFileClick,
+      filesList,
+      isLoadingData,
+    } = this.props;
+    const { isAvailableFolders } = this.state;
+    console.log("filesList", filesList);
+    return (
+      <StyledAsidePanel visible={isPanelVisible}>
+        <ModalDialog
+          visible={isPanelVisible}
+          zIndex={zIndex}
+          onClose={onClose}
+          className="select-file-modal-dialog"
+          //style={{ maxWidth: "1000px" }}
+          displayType="modal"
+        >
+          <ModalDialog.Header>{t("SelectFile")}</ModalDialog.Header>
+          <ModalDialog.Body>
+            <StyledSelectFilePanel>
+              <div className="modal-dialog_body">
+                <div className="modal-dialog_tree-body">
+                  <FolderTreeBody
+                    expandedKeys={expandedKeys}
+                    folderList={this.folderList}
+                    onSelect={this.onSelect}
+                    isCommonWithoutProvider={isCommonWithoutProvider}
+                    certainFolders
+                    isAvailableFolders={isAvailableFolders}
+                    filter={filter}
+                  />
+                </div>
+                <div className="modal-dialog_files-body">
+                  <FileListBody
+                    isLoadingData={isLoadingData}
+                    filesList={filesList}
+                    onFileClick={onFileClick}
+                  />
+                </div>
+              </div>
+            </StyledSelectFilePanel>
+          </ModalDialog.Body>
+          <ModalDialog.Footer>
+            <Button
+              className="modal-dialog-button"
+              primary
+              size="big"
+              label={t("Common:CloseButton")}
+              tabIndex={1}
+              onClick={onModalClose}
+            />
+          </ModalDialog.Footer>
+        </ModalDialog>
+      </StyledAsidePanel>
+    );
+  }
+}
+
+const SelectFileDialogModalViewWrapper = inject(
+  ({ filesStore, treeFoldersStore, selectedFolderStore }) => {
+    const { getBackupFiles, filter } = filesStore;
+    const { expandedPanelKeys } = treeFoldersStore;
+    return {
+      getBackupFiles,
+      expandedKeys: expandedPanelKeys
+        ? expandedPanelKeys
+        : selectedFolderStore.pathParts,
+      filter,
+    };
+  }
+)(observer(SelectFileDialogModalViewBody));
+
+class SelectFileDialogModalView extends React.Component {
+  render() {
+    return (
+      <MobxProvider {...stores}>
+        <I18nextProvider i18n={i18n}>
+          <SelectFileDialogModalViewWrapper {...this.props} />
+        </I18nextProvider>
+      </MobxProvider>
+    );
+  }
+}
+
+export default SelectFileDialogModalView;

products/ASC.Files/Client/src/components/panels/SelectFolderDialog/folderTreeBody.js

@@ -0,0 +1,43 @@
+import React from "react";
+import Loader from "@appserver/components/loader";
+import Text from "@appserver/components/text";
+import TreeFolders from "../../Article/Body/TreeFolders";
+import { useTranslation } from "react-i18next";
+const FolderTreeBody = ({
+  isLoadingData,
+  expandedKeys,
+  folderList,
+  onSelect,
+  isCommonWithoutProvider,
+  certainFolders,
+  isAvailableFolders,
+  filter,
+}) => {
+  const { t } = useTranslation(["SelectFile", "Common"]);
+  return (
+    <>
+      {!isLoadingData ? (
+        isAvailableFolders ? (
+          <TreeFolders
+            expandedPanelKeys={expandedKeys}
+            data={folderList}
+            filter={filter}
+            onSelect={onSelect}
+            withoutProvider={isCommonWithoutProvider}
+            certainFolders={certainFolders}
+          />
+        ) : (
+          <Text as="span">{t("NotAvailableFolder")}</Text>
+        )
+      ) : (
+        <div key="loader" className="panel-loader-wrapper">
+          <Loader type="oval" size="16px" className="panel-loader" />
+          <Text as="span">{`${t("Common:LoadingProcessing")} ${t(
+            "Common:LoadingDescription"
+          )}`}</Text>
+        </div>
+      )}
+    </>
+  );
+};
+export default FolderTreeBody;

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

@@ -10,7 +10,7 @@ import ModalDialog from "@appserver/components/modal-dialog";
 import Loader from "@appserver/components/loader";
 import Text from "@appserver/components/text";
 import { StyledAsidePanel, StyledSelectFolderPanel } from "../StyledPanels";
-import TreeFolders from "../../Article/Body/TreeFolders";
+import FolderTreeBody from "./folderTreeBody";
 import {
   getCommonFolderList,
   getFolderPath,
@@ -133,27 +133,16 @@ class SelectFolderModalDialog extends React.Component {
           </ModalDialog.Header>
 
           <ModalDialog.Body>
-            {!isLoadingData ? (
-              isAvailableFolders ? (
-                <TreeFolders
-                  expandedPanelKeys={expandedKeys}
-                  data={folderList}
-                  filter={filter}
-                  onSelect={this.onSelect}
-                  withoutProvider={isCommonWithoutProvider}
-                  certainFolders={certainFolders}
-                />
-              ) : (
-                <Text as="span">{t("NotAvailableFolder")}</Text>
-              )
-            ) : (
-              <div key="loader" className="panel-loader-wrapper">
-                <Loader type="oval" size="16px" className="panel-loader" />
-                <Text as="span">{`${t("Common:LoadingProcessing")} ${t(
-                  "Common:LoadingDescription"
-                )}`}</Text>
-              </div>
-            )}
+            <FolderTreeBody
+              isLoadingData={isLoadingData}
+              expandedKeys={expandedKeys}
+              folderList={folderList}
+              onSelect={this.onSelect}
+              isCommonWithoutProvider={isCommonWithoutProvider}
+              certainFolders={certainFolders}
+              isAvailableFolders={isAvailableFolders}
+              filter={filter}
+            />
           </ModalDialog.Body>
         </ModalDialog>
       </StyledAsidePanel>

products/ASC.Files/Client/src/components/panels/StyledPanels.js

@@ -540,6 +540,13 @@ const StyledSelectFilePanel = styled.div`
     display: inline;
     margin-right: 10px;
   }
+  .modal-dialog_body {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    .modal-dialog_tree-body {
+      margin-top: 16px;
+    }
+  }
 `;
 export {
   StyledAsidePanel,

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-restore-backup/documents.js

@@ -11,6 +11,7 @@ class Documents extends React.Component {
         onClose={onClose}
         onClickInput={onClickInput}
         foldersType="common"
+        isCommonWithoutProvider
       />
     );
   }