Web: Settings/Files: Added delete selected backup file, refactoring.

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

@@ -553,9 +553,7 @@ const StyledSelectFilePanel = styled.div`
 
     padding: 7px 0px;
   }
-  .file-exst {
-    color: #a3a9ae;
-  }
+
   .panel-loader-wrapper {
     margin-top: 8px;
   }
@@ -603,6 +601,9 @@ const StyledFilesList = styled.div`
     //margin-top: 7px;
     font-weight: 600;
   }
+  .file-exst {
+    color: #a3a9ae;
+  }
   .modal-dialog_file-name:hover {
     background-color: #eceef1;
     border-radius: 3px;

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

@@ -289,6 +289,7 @@ class RestoreBackup extends React.Component {
             t={t}
             isVisibleDialog={isVisibleDialog}
             isLoading={isLoading}
+            iconUrl={ICON_URL}
             onModalClose={this.onModalClose}
           />
         )}

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

@@ -144,9 +144,6 @@ const StyledBackupList = styled.div`
   .backup-list_trash-icon {
     width: 16px;
     height: 16px;
-    path {
-      fill: #657077;
-    }
   }
   .backup-list_aside-header_title {
     margin: 0px;
@@ -191,11 +188,23 @@ const StyledBackupList = styled.div`
   }
   .backup-list_restore-link {
     margin-right: 16px;
+    color: #a3a9ae;
     max-width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .backup-list_restore-link:hover {
+    text-decoration: none;
+    font-weight: 600;
+    color: #657077;
+  }
+  .backup-list_trash-icon:hover {
+    path {
+      fill: #657077;
+    }
+  }
   .backup-list_trash-icon,
   .backup-list_restore-link {
     cursor: pointer;
@@ -203,9 +212,6 @@ const StyledBackupList = styled.div`
   .backup-list_trash-icon {
     margin-top: 1px;
   }
-  .backup-list_trash-icon:hover {
-    text-decoration: underline;
-  }
 `;
 export {
   StyledModules,

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

@@ -4,9 +4,9 @@ import AutoSizer from "react-virtualized-auto-sizer";
 
 import ListRow from "files/ListRow";
 import Link from "@appserver/components/link";
-import IconButton from "@appserver/components/icon-button";
 
 import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
+import TrashIcon from "../../../../../../../../../public/images/button.trash.react.svg";
 const BackupListBody = ({
   displayType,
   needRowSelection,
@@ -14,17 +14,22 @@ const BackupListBody = ({
   onIconClick,
   onRestoreClick,
   t,
+  iconUrl,
 }) => {
   const Item = ({ index, style }) => {
     const file = filesList[index];
     const fileName = file.fileName;
+    const fileExst = "gz";
+    const modifyFileName = fileName.substring(0, fileName.indexOf("gz"));
     return (
       <div style={style}>
         <ListRow
           displayType={displayType}
           needRowSelection={needRowSelection}
           index={index}
-          fileName={fileName}
+          fileName={modifyFileName}
+          fileExst={fileExst}
+          iconUrl={iconUrl}
         >
           <div data-index={index} className="backup-list_options">
             <Link
@@ -34,12 +39,9 @@ const BackupListBody = ({
             >
               {t("RestoreBackup")}
             </Link>
-
-            <IconButton
+            <TrashIcon
+              data-index={index}
               className="backup-list_trash-icon"
-              size={16}
-              color="#657077"
-              iconName="/static/images/button.trash.react.svg"
               onClick={onIconClick}
             />
           </div>

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

@@ -38,11 +38,16 @@ class BackupListModalDialog extends React.Component {
     if (isVisibleDialog) {
       window.addEventListener("resize", this.throttledResize);
     }
-    getBackupHistory().then((backupList) =>
-      this.setState({
-        filesList: backupList,
-      })
-    );
+
+    this.setState({ isLoading: true }, function () {
+      getBackupHistory()
+        .then((backupList) =>
+          this.setState({
+            filesList: backupList,
+          })
+        )
+        .finally(() => this.setState({ isLoading: false }));
+    });
   }
 
   componentWillUnmount() {
@@ -73,15 +78,26 @@ class BackupListModalDialog extends React.Component {
     });
   };
   onDeleteClick = (e) => {
-    console.log("delete");
+    const { filesList } = this.state;
+    const index =
+      e.target.dataset.index ||
+      (e.target.farthestViewportElement &&
+        e.target.farthestViewportElement.dataset.index);
+    if (!index) return;
 
-    //deleteBackup(filesList[index].id)
+    this.setState({ isLoading: true }, function () {
+      deleteBackup(filesList[+index].id)
+        .then(() => getBackupHistory())
+        .then((backupList) => this.setState({ filesList: backupList }))
+        .catch((error) => console.log("backup list error", error))
+        .finally(() => this.setState({ isLoading: false }));
+    });
   };
   onRestoreClick = (e) => {
     console.log("restore");
   };
   render() {
-    const { onModalClose, isVisibleDialog, t } = this.props;
+    const { onModalClose, isVisibleDialog, t, iconUrl } = this.props;
     const { filesList, displayType, isLoading } = this.state;
     // console.log("filesList", filesList);
     return (
@@ -110,6 +126,7 @@ class BackupListModalDialog extends React.Component {
                     filesList={filesList}
                     onIconClick={this.onDeleteClick}
                     onRestoreClick={this.onRestoreClick}
+                    iconUrl={iconUrl}
                   />
                 ) : (
                   <Text>{t("EmptyBackupList")}</Text>