Web: Files: fixed DeleteDialog scrollbar, added new traslations

products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React from "react";
 import ModalDialogContainer from "../ModalDialogContainer";
 import {
   toastr,
@@ -6,11 +6,9 @@ import {
   Button,
   Text,
   Checkbox,
-  CustomScrollbarsVirtualList
+  Scrollbar
 } from "asc-web-components";
 import { withTranslation } from "react-i18next";
-import { FixedSizeList as List, areEqual } from "react-window";
-import AutoSizer from "react-virtualized-auto-sizer";
 import i18n from "./i18n";
 import { api, utils } from "asc-web-common";
 
@@ -51,7 +49,6 @@ class DeleteDialogComponent extends React.Component {
     const folderIds = [];
     const fileIds = [];
 
-    
     let i = 0;
     while (selection.length !== i) {
       if (selection[i].fileExst && selection[i].checked) {
@@ -62,22 +59,20 @@ class DeleteDialogComponent extends React.Component {
       i++;
     }
 
-    console.log("fileIds", fileIds);
+    this.setState({ isLoading: true }, () => {
-    console.log("folderIds", folderIds);
+      files
-
+        .removeFiles(folderIds, fileIds, deleteAfter, immediately)
-    //this.setState({ isLoading: true }, () => {
+        .then((res) => {
-    //  files
+          console.log("res", res);
-    //    .removeFiles(folderIds, fileIds, deleteAfter, immediately)
+          toastr.success(successMessage);
-    //    .then(() => {
+        })
-    //      toastr.success(successMessage);
+        .catch(err => {
-    //    })
+          toastr.error(err);
-    //    .catch(err => {
+        })
-    //      toastr.error(err);
+        .finally(() => {
-    //    })
+          this.setState({ isLoading: false }, () => onClose());
-    //    .finally(() => {
+        });
-    //      this.setState({ isLoading: false }, () => onClose());
+    });
-    //    });
-    //});
   };
 
   onChange = event => {
@@ -92,7 +87,6 @@ class DeleteDialogComponent extends React.Component {
       a.checked = !a.checked;
       this.setState({ selection: newSelection });
     } else {
-
       const a = newSelection.find(x => x.id === id && !x.fileExst);
       a.checked = !a.checked;
       this.setState({ selection: newSelection });
@@ -100,66 +94,18 @@ class DeleteDialogComponent extends React.Component {
   };
 
   render() {
-    const { onClose, visible, t, selection } = this.props;
+    const { onClose, visible, t } = this.props;
-    const { isLoading, filesList, foldersList } = this.state;
+    const { isLoading, filesList, foldersList, selection } = this.state;
 
-    const renderItems = memo(({ data, index, style }) => {
+    const checkedSelections = selection.filter(x => x.checked === true);
-      return (
-        <Checkbox
-          truncate
-          style={style}
-          className="modal-dialog-checkbox"
-          //value={data[index].id}
-          value={`${data[index].fileExst}/${data[index].id}`}
-          onChange={this.onChange}
-          key={`checkbox_${index}`}
-          isChecked={data[index].checked}
-          label={data[index].title}
-        />
-      );
-    }, areEqual);
 
-    const renderList = ({ height, width }) => {
+    const questionMessage =
-      const filesHeight = filesList.length * 25;
+      checkedSelections.length === 1
-      const foldersHeight = foldersList.length * 25;
+        ? checkedSelections[0].fileExst
+          ? t("QuestionDeleteFile")
+          : t("QuestionDeleteFolder")
+        : t("QuestionDeleteElements");
 
-      return (
-        <>
-          <Text isBold>Folders:</Text>
-          <List
-            className="List"
-            height={foldersHeight}
-            width={width}
-            itemSize={25}
-            itemCount={foldersList.length}
-            itemData={foldersList}
-            outerElementType={CustomScrollbarsVirtualList}
-          >
-            {renderItems}
-          </List>
-
-          <Text isBold className="delete_dialog-header-text">
-            Files:
-          </Text>
-          <List
-            className="List"
-            height={filesHeight}
-            width={width}
-            itemSize={25}
-            itemCount={filesList.length}
-            itemData={filesList}
-            outerElementType={CustomScrollbarsVirtualList}
-          >
-            {renderItems}
-          </List>
-        </>
-      );
-    };
-
-    const containerStyles = {
-      height: selection.length * 25 + 50,
-      maxHeight: 480
-    };
     return (
       <ModalDialogContainer>
         <ModalDialog
@@ -168,9 +114,37 @@ class DeleteDialogComponent extends React.Component {
           headerContent={t("ConfirmationTitle")}
           bodyContent={
             <>
-              <Text>{t("DeleteDialogQuestion")}</Text>
+              <div className="modal-dialog-content">
-              <div style={containerStyles} className="modal-dialog-content">
+                <Text className="delete_dialog-header-text">{questionMessage}</Text>
-                <AutoSizer>{renderList}</AutoSizer>
+                <Scrollbar style={{ height: 330 }} stype="mediumBlack">
+                  <Text isBold>{t("FoldersModule")}:</Text>
+                  {foldersList.map((item, index) => (
+                    <Checkbox
+                      truncate
+                      className="modal-dialog-checkbox"
+                      value={`${item.fileExst}/${item.id}`}
+                      onChange={this.onChange}
+                      key={`checkbox_${index}`}
+                      isChecked={item.checked}
+                      label={item.title}
+                    />
+                  ))}
+
+                  <Text isBold className="delete_dialog-text">
+                    {t("FilesModule")}:
+                  </Text>
+                  {filesList.map((item, index) => (
+                    <Checkbox
+                      truncate
+                      className="modal-dialog-checkbox"
+                      value={`${item.fileExst}/${item.id}`}
+                      onChange={this.onChange}
+                      key={`checkbox_${index}`}
+                      isChecked={item.checked}
+                      label={item.title}
+                    />
+                  ))}
+                </Scrollbar>
               </div>
             </>
           }

products/ASC.Files/Client/src/components/dialogs/DeleteDialog/locales/en/translation.json

@@ -2,7 +2,12 @@
   "OKButton": "OK",
   "CancelButton": "Cancel",
   "ConfirmationTitle": "Confirmation",
+  "QuestionDeleteFile": "Are you sure you want to delete this file?",
+  "FilesModule": "Files",
+  "FoldersModule": "Folders",
   
   "DeleteDialogQuestion": "Are you sure you want to delete these elements?",
-  "DeleteDialogNote": "Note: This action can not be undone."
+  "DeleteDialogNote": "Note: This action can not be undone.",
+  "QuestionDeleteFolder": "Are you sure you want to delete this folder?",
+  "QuestionDeleteElements": "Are you sure you want to delete these elements?"
 }

products/ASC.Files/Client/src/components/dialogs/DeleteDialog/locales/ru/translation.json

@@ -2,8 +2,13 @@
   "OKButton": "ОК",
   "CancelButton": "Отмена",
   "ConfirmationTitle": "Подтверждение удаления",
+  "QuestionDeleteFile": "Вы собираетесь удалить этот файл?",
+  "FilesModule": "Файлы",
+  "FoldersModule": "Папки",
 
   "DeleteDialogQuestion": "Вы собираетесь удалить эти элементы?",
   "DeleteDialogMessage": "Пожалуйста, обратите внимание, что если вы предоставили кому-то доступ к этим файлам/папкам, они станут недоступны. Вы уверены, что хотите продолжить?",
-  "DeleteDialogNote": "Замечание: Это действие не может быть отменено."
+  "DeleteDialogNote": "Замечание: Это действие не может быть отменено.",
+  "QuestionDeleteFolder": "Вы собираетесь удалить эту папку?",
+  "QuestionDeleteElements": "Вы собираетесь удалить эти элементы?"
 }

products/ASC.Files/Client/src/components/dialogs/ModalDialogContainer.js

@@ -43,14 +43,14 @@ const ModalDialogContainer = styled.div`
     .heading-toggle-content {
       font-size: 16px;
     }
-
-
   }
 
 
-
-
   .delete_dialog-header-text {
+    padding-bottom: 8px;
+  }
+
+  .delete_dialog-text {
     padding-top: 8px;
   }
 

products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js

@@ -445,7 +445,7 @@ const mapStateToProps = state => {
     isRecycleBinFolder: treeFolders[indexOfTrash].id === id,
     parentId,
     selection,
-    title: title,
+    title,
     filter,
 
     deleteDialogVisible: isCanBeDeleted(selectedFolder, user)

products/ASC.Files/Client/src/resourceConfig.json

@@ -10,62 +10,25 @@
     ]
   },
   "dialogs": {
-    "InviteDialog": {
+  "DeleteDialog":{
     "Resource": [
-        "HelpAnswerLinkInviteSettings",
+      "OKButton",
-        "CopyToClipboard",
+      "CancelButton",
-        "CloseButton",
+      "ConfirmationTitle"
-        "GetShortenLink",
-        "LoadingProcessing",
-        "InviteUsersAsCollaborators",
-        "InviteLinkTitle"
-      ],
-    "ResourceJS": [
-      "LinkCopySuccess"
-    ]
-  },
-  "ChangeEmailDialog":{
-    "Resource": [
-      "EmailChangeTitle",
-      "EnterEmail",
-      "EmailActivationDescription",
-      "SendButton"
-    ]
-  },
-  "DeleteSelfProfileDialog":{
-    "Resource": [
-      "DeleteProfileTitle",
-      "DeleteProfileInfo",
-      "CloseButton",
-      "SendButton"
-    ]
-  },
-  "ChangePhoneDialog":{
-    "Resource": [
-      "SendButton",
-      "MobilePhoneChangeTitle",
-      "MobilePhoneEraseDescription"
-    ]
-  },
-  "DeleteProfileEverDialog":{
-    "Resource": [
-      "Confirmation",
-      "DeleteUserConfirmation",
-      "Warning",
-      "DeleteUserDataConfirmation"      
-    ],
-    "PeopleResource": [
-      "SuccessfullyDeleteUserInfoMessage"
     ],
     "UserControlsCommonResource": [
-      "NotBeUndone"
+      "QuestionDeleteFile"
+    ],
+    "FeedResource": [
+      "FilesModule",
+      "FoldersModule"
     ]
   },
-  "ChangePasswordDialog":{
+  "EmptyTrashDialog": {
     "Resource": [
-      "PasswordChangeTitle",
+      "OKButton",
-      "MessageSendPasswordChangeInstructionsOnEmail",
+      "CancelButton",
-      "SendButton"
+      "ConfirmationTitle"
     ]
   }
 },