* Web:Settings: Backup: Added create schedule at document module, added information about created schedule for documents module and Refactoring.

packages/asc-web-common/api/portal/index.js

@@ -115,7 +115,7 @@ export function createBackupSchedule(
   backupsStored,
   Period,
   Hour,
-  Day,
+  Day = null,
   backupMail = false
 ) {
   const storageParams = [

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

@@ -43,26 +43,29 @@ class OperationsDialog extends React.PureComponent {
     };
   }
   componentDidMount() {
-    const { fetchTreeFolders, getCommonFolder } = this.props;
+    const { fetchTreeFolders, getCommonFolder, folderPath } = this.props;
     this.setState({ isLoading: true }, function () {
       fetchTreeFolders()
         .then(() => getCommonFolder())
         .finally(() => this.setState({ isLoading: false }));
     });
-  }
 
-  componentDidUpdate(prevProps) {
+    if (folderPath.length !== 0) {
-    const { commonTreeFolder, onSelectFolder } = this.props;
+      this.getTitlesFolders(folderPath);
-
+    }
-    if (commonTreeFolder.length !== prevProps.commonTreeFolder.length) {
+  }
-      onSelectFolder(commonTreeFolder.id);
+
+  componentDidUpdate(prevProps) {
+    const { commonTreeFolder, onSelectFolder, folderPath } = this.props;
+
+    if (
+      commonTreeFolder.length !== prevProps.commonTreeFolder.length &&
+      folderPath.length === 0
+    ) {
+      onSelectFolder([`${commonTreeFolder.id}`]);
     }
   }
 
-  // onClose = () => {
-  //   const { setPanelVisible } = this.props;
-  //   setPanelVisible(false);
-  // };
   onSelect = (folder, treeNode) => {
     const { onSelectFolder, onClose } = this.props;
     this.setState({ isLoadingData: true }, function () {
@@ -84,10 +87,7 @@ class OperationsDialog extends React.PureComponent {
   };
   getTitlesFolders = (folderPath) => {
     const { selectedInput } = this.state;
-    //debugger;
-    //console.log("selectedInput", selectedInput);
 
-    //debugger;
     path = "";
     if (folderPath.length > 1) {
       for (let item of folderPath) {
@@ -109,10 +109,6 @@ class OperationsDialog extends React.PureComponent {
       });
     }
   };
-  // onClickInput = (e) => {
-  //   const { setPanelVisible } = this.props;
-  //   setPanelVisible(true);
-  // };
 
   render() {
     const {
@@ -130,7 +126,6 @@ class OperationsDialog extends React.PureComponent {
     } = this.props;
     const { isLoading, selectedInput, isLoadingData } = this.state;
     const zIndex = 310;
-    console.log("folderList ", isLoadingData);
 
     return (
       <StyledComponent>
@@ -184,12 +179,13 @@ class OperationsDialog extends React.PureComponent {
 OperationsDialog.defaultProps = {
   isCommonWithoutProvider: false,
   folderList: "",
+  folderPath: "",
 };
 const OperationsDialogWrapper = inject(
   ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
     const { filter } = filesStore;
     const { setPanelVisible, panelVisible } = auth;
-    const { getFolderPath, folderPath } = auth.settingsStore;
+    const { getFolderPath } = auth.settingsStore;
     const {
       fetchTreeFolders,
       expandedPanelKeys,
@@ -208,8 +204,6 @@ const OperationsDialogWrapper = inject(
       commonTreeFolder,
       getCommonFolder,
       panelVisible,
-
-      folderPath,
     };
   }
 )(observer(withTranslation("OperationsPanel")(OperationsDialog)));

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

@@ -11,11 +11,16 @@ import styled from "styled-components";
 import moment from "moment";
 import ScheduleComponent from "./sub-components/scheduleComponent";
 import {
+  createBackupSchedule,
   deleteBackupSchedule,
   getBackupProgress,
+  getBackupSchedule,
 } from "@appserver/common/api/portal";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
 import toastr from "@appserver/components/toast/toastr";
+import FileInputWithFolderPath from "@appserver/components/file-input-with-folder-path";
+import OperationsDialog from "files/OperationsDialog";
+import { getFolderPath } from "@appserver/common/api/files";
 
 const StyledComponent = styled.div`
   ${commonSettingsStyles}
@@ -58,6 +63,7 @@ const StyledComponent = styled.div`
 const StyledModules = styled.div`
   margin-bottom: 40px;
 `;
+
 class AutomaticBackup extends React.Component {
   constructor(props) {
     super(props);
@@ -67,7 +73,6 @@ class AutomaticBackup extends React.Component {
     moment.locale(this.lng);
 
     this.state = {
-      backupMail: false,
       isShowedStorageType: false, //if current automatic storage not choose
 
       isShowDocuments: false,
@@ -84,14 +89,19 @@ class AutomaticBackup extends React.Component {
 
       selectedOption: t("DailyPeriodSchedule"),
       selectedWeekdayOption: "",
+      selectedNumberWeekdayOption: "2",
       selectedTimeOption: "12:00",
       selectedMonthOption: "1",
       selectedMaxCopies: "10",
-
+      selectedNumberMaxCopies: "10",
+      selectedPermission: "disable",
       weekOptions: [],
 
       isCopyingToLocal: true,
       isLoadingData: false,
+      selectedFolder: "",
+      isPanelVisible: false,
+      isLoading: false,
     };
 
     this.periodOptions = [
@@ -123,6 +133,7 @@ class AutomaticBackup extends React.Component {
 
   componentDidMount() {
     this.getWeekdaysOptions();
+
     getBackupProgress().then((res) => {
       if (res) {
         if (res.progress === 100)
@@ -131,8 +142,68 @@ class AutomaticBackup extends React.Component {
           });
         if (res.progress !== 100)
           this.timerId = setInterval(() => this.getProgress(), 1000);
+      } else {
+        this.setState({
+          isCopyingToLocal: false,
+        });
       }
     });
+
+    this.setState({ isLoading: true }, function () {
+      getBackupSchedule()
+        .then((selectedSchedule) => {
+          if (selectedSchedule) {
+            this.folderId = selectedSchedule.storageParams.folderId;
+            this.onSelectFolder([`${this.folderId}`]);
+            getFolderPath(this.folderId)
+              .then((folderPath) => (this.folderPath = folderPath))
+              .then(() => {
+                this.setState({
+                  selectedPermission: "enable",
+                  isShowedStorageTypes: true,
+                });
+
+                if (selectedSchedule.storageType === 0) {
+                  // Documents Module
+                  this.setState({
+                    isShowDocuments: true,
+                    isCheckedDocuments: true,
+                    selectedTimeOption: `${selectedSchedule.cronParams.hour}:00`,
+                    selectedMaxCopies: `${selectedSchedule.backupsStored}`,
+                  });
+
+                  if (selectedSchedule.cronParams.period === 1) {
+                    //Every Week option
+                    const selectedDay = selectedSchedule.cronParams.day; //selected number of week
+                    const arrayIndex =
+                      this.lng === "en" ? selectedDay - 1 : selectedDay - 2;
+                    console.log("this.weekdaysOptions", this.weekdaysOptions);
+                    this.setState({
+                      selectedOption: this.periodOptions[1].label,
+                      weeklySchedule: true,
+                      selectedWeekdayOption: this.weekdaysOptions[arrayIndex]
+                        .label,
+                    });
+                  } else {
+                    if (selectedSchedule.cronParams.period === 2) {
+                      //Every Month option
+                      this.setState({
+                        selectedOption: this.periodOptions[2].label,
+                        monthlySchedule: true,
+                        selectedMonthOption: `${selectedSchedule.cronParams.day}`, //selected day of month
+                      });
+                    }
+                  }
+                }
+              });
+          }
+        })
+        .finally(() =>
+          this.setState({
+            isLoading: false,
+          })
+        );
+    });
   }
   componentWillUnmount() {
     clearInterval(this.timerId);
@@ -181,7 +252,7 @@ class AutomaticBackup extends React.Component {
     const { t } = this.props;
     for (let item = 1; item <= 30; item++) {
       let obj = {
-        key: item,
+        key: `${item}`,
         label: `${item} ${t("MaxCopies")}`,
       };
       this.maxNumberCopiesArray.push(obj);
@@ -190,7 +261,7 @@ class AutomaticBackup extends React.Component {
   getWeekdaysOptions = () => {
     for (let item = 0; item < this.arrayWeekdays.length; item++) {
       let obj = {
-        key: item + 4,
+        key: `${item + 1}`,
         label: `${this.arrayWeekdays[item]}`,
       };
       this.weekdaysOptions.push(obj);
@@ -258,32 +329,32 @@ class AutomaticBackup extends React.Component {
           isCheckedThirdPartyStorage: true,
         });
   };
-  onClickCheckbox = (e) => {
-    const { backupMail } = this.state;
-    let change = !backupMail;
-    this.setState({ backupMail: change });
-  };
 
-  onSelectPeriodAndWeekday = (options) => {
+  onSelectPeriod = (options) => {
     console.log("options", options);
 
     const key = options.key;
     const label = options.label;
 
-    if (key <= 3) {
+    this.setState({ selectedOption: label });
-      this.setState({ selectedOption: label });
+    key === 1
-      key === 1
+      ? this.setState({ weeklySchedule: false, monthlySchedule: false })
-        ? this.setState({ weeklySchedule: false, monthlySchedule: false })
+      : key === 2
-        : key === 2
+      ? this.setState({ weeklySchedule: true, monthlySchedule: false })
-        ? this.setState({ weeklySchedule: true, monthlySchedule: false })
+      : this.setState({ monthlySchedule: true, weeklySchedule: false });
-        : this.setState({ monthlySchedule: true, weeklySchedule: false });
-    } else {
-      this.setState({
-        selectedWeekdayOption: label,
-      });
-    }
   };
 
+  onSelectWeedDay = (options) => {
+    console.log("options", options);
+
+    const key = options.key;
+    const label = options.label;
+
+    this.setState({
+      selectedNumberWeekdayOption: key,
+      selectedWeekdayOption: label,
+    });
+  };
   onSelectMonthNumberAndTimeOptions = (options) => {
     const key = options.key;
     const label = options.label;
@@ -296,9 +367,12 @@ class AutomaticBackup extends React.Component {
     }
   };
   onSelectMaxCopies = (options) => {
+    const key = options.key;
+    const label = options.label;
     console.log("opr max", options);
     this.setState({
-      selectedMaxCopies: options.label,
+      selectedNumberMaxCopies: key,
+      selectedMaxCopies: label,
     });
   };
 
@@ -311,10 +385,73 @@ class AutomaticBackup extends React.Component {
         .finally(() => this.setState({ isLoadingData: false }));
     });
   };
-  render() {
+
-    const { t, language } = this.props;
+  onSelectFolder = (folderId) => {
+    console.log("folderId", folderId);
+    this.setState({
+      selectedFolder: folderId,
+    });
+  };
+
+  onSaveDocumentsModuleSettings = () => {
+    const {
+      selectedFolder,
+      weeklySchedule,
+      selectedTimeOption,
+      monthlySchedule,
+      selectedMonthOption,
+      selectedNumberWeekdayOption,
+      selectedNumberMaxCopies,
+    } = this.state;
+    const { t } = this.props;
+    this.setState({ isLoadingData: true }, function () {
+      let period = weeklySchedule ? "1" : monthlySchedule ? "2" : "0";
+
+      let day = weeklySchedule
+        ? selectedNumberWeekdayOption
+        : monthlySchedule
+        ? selectedMonthOption
+        : null;
+
+      let time = selectedTimeOption.substring(
+        0,
+        selectedTimeOption.indexOf(":")
+      );
+
+      console.log("selectedNumberMaxCopies", selectedNumberMaxCopies);
+      console.log("period", period);
+      console.log("selectedTimeOption", selectedTimeOption);
+      console.log("time", time);
+      console.log("day", day);
+      createBackupSchedule(
+        "0",
+        "folderId",
+        selectedFolder[0],
+        selectedNumberMaxCopies,
+        period,
+        time,
+        day
+      )
+        .then(() => toastr.success(t("SuccessfullySaveSettingsMessage")))
+        .catch((error) => console.log("error", error))
+        .finally(() => this.setState({ isLoadingData: false }));
+    });
+  };
+
+  onClickInput = (e) => {
+    this.setState({
+      isPanelVisible: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      isPanelVisible: false,
+    });
+  };
+  render() {
+    const { t, panelVisible } = this.props;
     const {
-      backupMail,
       isShowedStorageTypes,
       isCheckedDocuments,
       isCheckedThirdParty,
@@ -332,10 +469,15 @@ class AutomaticBackup extends React.Component {
       selectedMaxCopies,
       isCopyingToLocal,
       isLoadingData,
+      isPanelVisible,
+      selectedPermission,
+      isLoading,
     } = this.state;
 
-    console.log("isCheckedDocuments", isCheckedDocuments);
+    console.log("this.folderPath", this.folderPath);
-    return (
+    return isLoading ? (
+      <></>
+    ) : (
       <StyledComponent>
         <RadioButtonGroup
           className="automatic-backup_main "
@@ -353,7 +495,7 @@ class AutomaticBackup extends React.Component {
           isDisabled={isLoadingData}
           onClick={this.onClickPermissions}
           orientation="vertical"
-          selected="disable"
+          selected={selectedPermission}
         />
 
         {isShowedStorageTypes && (
@@ -373,28 +515,51 @@ class AutomaticBackup extends React.Component {
                 {t("DocumentsModuleDescription")}
               </Text>
               {isShowDocuments && (
-                <ScheduleComponent
+                <>
-                  weeklySchedule={weeklySchedule}
+                  <OperationsDialog
-                  monthlySchedule={monthlySchedule}
+                    onSelectFolder={this.onSelectFolder}
-                  weekOptions={weekOptions}
+                    name={"common"}
-                  selectedOption={selectedOption}
+                    onClose={this.onClose}
-                  selectedWeekdayOption={selectedWeekdayOption}
+                    onClickInput={this.onClickInput}
-                  selectedTimeOption={selectedTimeOption}
+                    isPanelVisible={isPanelVisible}
-                  selectedMonthOption={selectedMonthOption}
+                    isCommonWithoutProvider
-                  selectedMaxCopies={selectedMaxCopies}
+                    folderPath={this.folderPath}
-                  periodOptions={this.periodOptions}
+                  />
-                  monthNumberOptionsArray={this.monthNumberOptionsArray}
+
-                  timeOptionsArray={this.timeOptionsArray}
+                  <ScheduleComponent
-                  maxNumberCopiesArray={this.maxNumberCopiesArray}
+                    weeklySchedule={weeklySchedule}
-                  backupMail={backupMail}
+                    monthlySchedule={monthlySchedule}
-                  onClickCheckbox={this.onClickCheckbox}
+                    weekOptions={weekOptions}
-                  onSelectMaxCopies={this.onSelectMaxCopies}
+                    selectedOption={selectedOption}
-                  onSelectMonthNumberAndTimeOptions={
+                    selectedWeekdayOption={selectedWeekdayOption}
-                    this.onSelectMonthNumberAndTimeOptions
+                    selectedTimeOption={selectedTimeOption}
-                  }
+                    selectedMonthOption={selectedMonthOption}
-                  onSelectPeriodAndWeekday={this.onSelectPeriodAndWeekday}
+                    selectedMaxCopies={selectedMaxCopies}
-                />
+                    periodOptions={this.periodOptions}
+                    monthNumberOptionsArray={this.monthNumberOptionsArray}
+                    timeOptionsArray={this.timeOptionsArray}
+                    maxNumberCopiesArray={this.maxNumberCopiesArray}
+                    onClickCheckbox={this.onClickCheckbox}
+                    onSelectMaxCopies={this.onSelectMaxCopies}
+                    onSelectMonthNumberAndTimeOptions={
+                      this.onSelectMonthNumberAndTimeOptions
+                    }
+                    onSelectWeedDay={this.onSelectWeedDay}
+                    onSelectPeriod={this.onSelectPeriod}
+                  />
+                </>
               )}
+
+              <SaveCancelButtons
+                className="team-template_buttons"
+                onSaveClick={this.onSaveDocumentsModuleSettings}
+                onCancelClick={() => console.log("cancel")}
+                showReminder={false}
+                reminderTest={t("YouHaveUnsavedChanges")}
+                saveButtonLabel={t("SaveButton")}
+                cancelButtonLabel={t("CancelButton")}
+                isDisabled={isCopyingToLocal || isLoadingData}
+              />
             </StyledModules>
 
             <StyledModules>
@@ -414,27 +579,37 @@ class AutomaticBackup extends React.Component {
                 {t("ThirdPartyResourceNoteDescription")}
               </Text>
               {isShowThirdParty && (
-                <ScheduleComponent
+                <>
-                  weeklySchedule={weeklySchedule}
+                  <OperationsDialog
-                  monthlySchedule={monthlySchedule}
+                    onSelectFolder={this.onSelectFolder}
-                  weekOptions={weekOptions}
+                    name={"common"}
-                  selectedOption={selectedOption}
+                    onClose={this.onClose}
-                  selectedWeekdayOption={selectedWeekdayOption}
+                    onClickInput={this.onClickInput}
-                  selectedTimeOption={selectedTimeOption}
+                    isPanelVisible={isPanelVisible}
-                  selectedMonthOption={selectedMonthOption}
+                    isCommonWithoutProvider
-                  selectedMaxCopies={selectedMaxCopies}
+                  />
-                  periodOptions={this.periodOptions}
+                  <ScheduleComponent
-                  monthNumberOptionsArray={this.monthNumberOptionsArray}
+                    weeklySchedule={weeklySchedule}
-                  timeOptionsArray={this.timeOptionsArray}
+                    monthlySchedule={monthlySchedule}
-                  maxNumberCopiesArray={this.maxNumberCopiesArray}
+                    weekOptions={weekOptions}
-                  backupMail={backupMail}
+                    selectedOption={selectedOption}
-                  onClickCheckbox={this.onClickCheckbox}
+                    selectedWeekdayOption={selectedWeekdayOption}
-                  onSelectMaxCopies={this.onSelectMaxCopies}
+                    selectedTimeOption={selectedTimeOption}
-                  onSelectMonthNumberAndTimeOptions={
+                    selectedMonthOption={selectedMonthOption}
-                    this.onSelectMonthNumberAndTimeOptions
+                    selectedMaxCopies={selectedMaxCopies}
-                  }
+                    periodOptions={this.periodOptions}
-                  onSelectPeriodAndWeekday={this.onSelectPeriodAndWeekday}
+                    monthNumberOptionsArray={this.monthNumberOptionsArray}
-                />
+                    timeOptionsArray={this.timeOptionsArray}
+                    maxNumberCopiesArray={this.maxNumberCopiesArray}
+                    onClickCheckbox={this.onClickCheckbox}
+                    onSelectMaxCopies={this.onSelectMaxCopies}
+                    onSelectMonthNumberAndTimeOptions={
+                      this.onSelectMonthNumberAndTimeOptions
+                    }
+                    onSelectWeedDay={this.onSelectWeedDay}
+                    onSelectPeriod={this.onSelectPeriod}
+                  />
+                </>
               )}
             </StyledModules>
 
@@ -468,13 +643,13 @@ class AutomaticBackup extends React.Component {
                   monthNumberOptionsArray={this.monthNumberOptionsArray}
                   timeOptionsArray={this.timeOptionsArray}
                   maxNumberCopiesArray={this.maxNumberCopiesArray}
-                  backupMail={backupMail}
                   onClickCheckbox={this.onClickCheckbox}
                   onSelectMaxCopies={this.onSelectMaxCopies}
                   onSelectMonthNumberAndTimeOptions={
                     this.onSelectMonthNumberAndTimeOptions
                   }
-                  onSelectPeriodAndWeekday={this.onSelectPeriodAndWeekday}
+                  onSelectWeedDay={this.onSelectWeedDay}
+                  onSelectPeriod={this.onSelectPeriod}
                 />
               )}
             </StyledModules>
@@ -497,8 +672,9 @@ class AutomaticBackup extends React.Component {
 }
 export default inject(({ auth }) => {
   const { language } = auth;
-
+  const { panelVisible } = auth;
   return {
     language,
+    panelVisible,
   };
 })(withTranslation("Settings")(observer(AutomaticBackup)));

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

@@ -25,7 +25,7 @@ const DocumentsModule = ({ maxProgress, setInterval }) => {
 
   const onClickButton = () => {
     console.log("selectedFolder", selectedFolder);
-    startBackup("0", "folderId", selectedFolder);
+    startBackup("0", "folderId", selectedFolder[0]);
     setInterval();
   };
   //console.log("thirdparty!!! commonThirdPartyList", commonThirdPartyList);

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

@@ -13,13 +13,12 @@ const ScheduleComponent = ({
   timeOptionsArray,
   periodOptions,
   monthNumberOptionsArray,
-  onSelectPeriodAndWeekday,
   onSelectMonthNumberAndTimeOptions,
   selectedMaxCopies,
   onSelectMaxCopies,
   maxNumberCopiesArray,
-  onClickCheckbox,
+  onSelectPeriod,
-  backupMail,
+  onSelectWeedDay,
 }) => {
   const { t } = useTranslation("Settings");
   return (
@@ -30,7 +29,7 @@ const ScheduleComponent = ({
           key: 0,
           label: selectedOption,
         }}
-        onSelect={onSelectPeriodAndWeekday}
+        onSelect={onSelectPeriod}
         isDisabled={false}
         noBorder={false}
         scaled={false}
@@ -46,7 +45,7 @@ const ScheduleComponent = ({
             key: 0,
             label: selectedWeekdayOption,
           }}
-          onSelect={onSelectPeriodAndWeekday}
+          onSelect={onSelectWeedDay}
           isDisabled={false}
           noBorder={false}
           scaled={false}
@@ -103,14 +102,14 @@ const ScheduleComponent = ({
         size="content"
         className="backup_combobox"
       />
-      <div className="backup-include_mail">
+      {/* <div className="backup-include_mail">
         <Checkbox
           name={"backupMail"}
           isChecked={backupMail}
           label={t("IncludeMail")}
           onChange={onClickCheckbox}
         />
-      </div>
+      </div> */}
     </div>
   );
 };