Web: Files: fixed DeleteDialog scrollbar, added new traslations
This commit is contained in:
parent
63bf49d256
commit
74ca153aa8
@ -1,4 +1,4 @@
|
|||||||
import React, { memo } from "react";
|
import React from "react";
|
||||||
import ModalDialogContainer from "../ModalDialogContainer";
|
import ModalDialogContainer from "../ModalDialogContainer";
|
||||||
import {
|
import {
|
||||||
toastr,
|
toastr,
|
||||||
@ -6,11 +6,9 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Text,
|
Text,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
CustomScrollbarsVirtualList
|
Scrollbar
|
||||||
} from "asc-web-components";
|
} from "asc-web-components";
|
||||||
import { withTranslation } from "react-i18next";
|
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 i18n from "./i18n";
|
||||||
import { api, utils } from "asc-web-common";
|
import { api, utils } from "asc-web-common";
|
||||||
|
|
||||||
@ -51,33 +49,30 @@ class DeleteDialogComponent extends React.Component {
|
|||||||
const folderIds = [];
|
const folderIds = [];
|
||||||
const fileIds = [];
|
const fileIds = [];
|
||||||
|
|
||||||
|
|
||||||
let i = 0;
|
let i = 0;
|
||||||
while (selection.length !== i) {
|
while (selection.length !== i) {
|
||||||
if (selection[i].fileExst && selection[i].checked) {
|
if (selection[i].fileExst && selection[i].checked) {
|
||||||
fileIds.push(selection[i].id.toString());
|
fileIds.push(selection[i].id.toString());
|
||||||
} else if(selection[i].checked) {
|
} else if (selection[i].checked) {
|
||||||
folderIds.push(selection[i].id.toString());
|
folderIds.push(selection[i].id.toString());
|
||||||
}
|
}
|
||||||
i++;
|
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 => {
|
onChange = event => {
|
||||||
@ -92,7 +87,6 @@ class DeleteDialogComponent extends React.Component {
|
|||||||
a.checked = !a.checked;
|
a.checked = !a.checked;
|
||||||
this.setState({ selection: newSelection });
|
this.setState({ selection: newSelection });
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
const a = newSelection.find(x => x.id === id && !x.fileExst);
|
const a = newSelection.find(x => x.id === id && !x.fileExst);
|
||||||
a.checked = !a.checked;
|
a.checked = !a.checked;
|
||||||
this.setState({ selection: newSelection });
|
this.setState({ selection: newSelection });
|
||||||
@ -100,66 +94,18 @@ class DeleteDialogComponent extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
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 (
|
return (
|
||||||
<ModalDialogContainer>
|
<ModalDialogContainer>
|
||||||
<ModalDialog
|
<ModalDialog
|
||||||
@ -168,9 +114,37 @@ class DeleteDialogComponent extends React.Component {
|
|||||||
headerContent={t("ConfirmationTitle")}
|
headerContent={t("ConfirmationTitle")}
|
||||||
bodyContent={
|
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>
|
</div>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,12 @@
|
|||||||
"OKButton": "OK",
|
"OKButton": "OK",
|
||||||
"CancelButton": "Cancel",
|
"CancelButton": "Cancel",
|
||||||
"ConfirmationTitle": "Confirmation",
|
"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?",
|
"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?"
|
||||||
}
|
}
|
@ -2,8 +2,13 @@
|
|||||||
"OKButton": "ОК",
|
"OKButton": "ОК",
|
||||||
"CancelButton": "Отмена",
|
"CancelButton": "Отмена",
|
||||||
"ConfirmationTitle": "Подтверждение удаления",
|
"ConfirmationTitle": "Подтверждение удаления",
|
||||||
|
"QuestionDeleteFile": "Вы собираетесь удалить этот файл?",
|
||||||
|
"FilesModule": "Файлы",
|
||||||
|
"FoldersModule": "Папки",
|
||||||
|
|
||||||
"DeleteDialogQuestion": "Вы собираетесь удалить эти элементы?",
|
"DeleteDialogQuestion": "Вы собираетесь удалить эти элементы?",
|
||||||
"DeleteDialogMessage": "Пожалуйста, обратите внимание, что если вы предоставили кому-то доступ к этим файлам/папкам, они станут недоступны. Вы уверены, что хотите продолжить?",
|
"DeleteDialogMessage": "Пожалуйста, обратите внимание, что если вы предоставили кому-то доступ к этим файлам/папкам, они станут недоступны. Вы уверены, что хотите продолжить?",
|
||||||
"DeleteDialogNote": "Замечание: Это действие не может быть отменено."
|
"DeleteDialogNote": "Замечание: Это действие не может быть отменено.",
|
||||||
|
"QuestionDeleteFolder": "Вы собираетесь удалить эту папку?",
|
||||||
|
"QuestionDeleteElements": "Вы собираетесь удалить эти элементы?"
|
||||||
}
|
}
|
@ -43,14 +43,14 @@ const ModalDialogContainer = styled.div`
|
|||||||
.heading-toggle-content {
|
.heading-toggle-content {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.delete_dialog-header-text {
|
.delete_dialog-header-text {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete_dialog-text {
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -445,7 +445,7 @@ const mapStateToProps = state => {
|
|||||||
isRecycleBinFolder: treeFolders[indexOfTrash].id === id,
|
isRecycleBinFolder: treeFolders[indexOfTrash].id === id,
|
||||||
parentId,
|
parentId,
|
||||||
selection,
|
selection,
|
||||||
title: title,
|
title,
|
||||||
filter,
|
filter,
|
||||||
|
|
||||||
deleteDialogVisible: isCanBeDeleted(selectedFolder, user)
|
deleteDialogVisible: isCanBeDeleted(selectedFolder, user)
|
||||||
|
@ -10,62 +10,25 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dialogs": {
|
"dialogs": {
|
||||||
"InviteDialog": {
|
"DeleteDialog":{
|
||||||
"Resource": [
|
"Resource": [
|
||||||
"HelpAnswerLinkInviteSettings",
|
"OKButton",
|
||||||
"CopyToClipboard",
|
"CancelButton",
|
||||||
"CloseButton",
|
"ConfirmationTitle"
|
||||||
"GetShortenLink",
|
|
||||||
"LoadingProcessing",
|
|
||||||
"InviteUsersAsCollaborators",
|
|
||||||
"InviteLinkTitle"
|
|
||||||
],
|
],
|
||||||
"ResourceJS": [
|
"UserControlsCommonResource": [
|
||||||
"LinkCopySuccess"
|
"QuestionDeleteFile"
|
||||||
]
|
|
||||||
},
|
|
||||||
"ChangeEmailDialog":{
|
|
||||||
"Resource": [
|
|
||||||
"EmailChangeTitle",
|
|
||||||
"EnterEmail",
|
|
||||||
"EmailActivationDescription",
|
|
||||||
"SendButton"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"DeleteSelfProfileDialog":{
|
|
||||||
"Resource": [
|
|
||||||
"DeleteProfileTitle",
|
|
||||||
"DeleteProfileInfo",
|
|
||||||
"CloseButton",
|
|
||||||
"SendButton"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ChangePhoneDialog":{
|
|
||||||
"Resource": [
|
|
||||||
"SendButton",
|
|
||||||
"MobilePhoneChangeTitle",
|
|
||||||
"MobilePhoneEraseDescription"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"DeleteProfileEverDialog":{
|
|
||||||
"Resource": [
|
|
||||||
"Confirmation",
|
|
||||||
"DeleteUserConfirmation",
|
|
||||||
"Warning",
|
|
||||||
"DeleteUserDataConfirmation"
|
|
||||||
],
|
],
|
||||||
"PeopleResource": [
|
"FeedResource": [
|
||||||
"SuccessfullyDeleteUserInfoMessage"
|
"FilesModule",
|
||||||
],
|
"FoldersModule"
|
||||||
"UserControlsCommonResource":[
|
|
||||||
"NotBeUndone"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"ChangePasswordDialog":{
|
"EmptyTrashDialog": {
|
||||||
"Resource": [
|
"Resource": [
|
||||||
"PasswordChangeTitle",
|
"OKButton",
|
||||||
"MessageSendPasswordChangeInstructionsOnEmail",
|
"CancelButton",
|
||||||
"SendButton"
|
"ConfirmationTitle"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user