Web: Settings/Files: Added delete selected backup file, refactoring.
This commit is contained in:
parent
2fb339df88
commit
7b38a52d0c
@ -553,9 +553,7 @@ const StyledSelectFilePanel = styled.div`
|
|||||||
|
|
||||||
padding: 7px 0px;
|
padding: 7px 0px;
|
||||||
}
|
}
|
||||||
.file-exst {
|
|
||||||
color: #a3a9ae;
|
|
||||||
}
|
|
||||||
.panel-loader-wrapper {
|
.panel-loader-wrapper {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
@ -603,6 +601,9 @@ const StyledFilesList = styled.div`
|
|||||||
//margin-top: 7px;
|
//margin-top: 7px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
.file-exst {
|
||||||
|
color: #a3a9ae;
|
||||||
|
}
|
||||||
.modal-dialog_file-name:hover {
|
.modal-dialog_file-name:hover {
|
||||||
background-color: #eceef1;
|
background-color: #eceef1;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
@ -289,6 +289,7 @@ class RestoreBackup extends React.Component {
|
|||||||
t={t}
|
t={t}
|
||||||
isVisibleDialog={isVisibleDialog}
|
isVisibleDialog={isVisibleDialog}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
|
iconUrl={ICON_URL}
|
||||||
onModalClose={this.onModalClose}
|
onModalClose={this.onModalClose}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -144,9 +144,6 @@ const StyledBackupList = styled.div`
|
|||||||
.backup-list_trash-icon {
|
.backup-list_trash-icon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
path {
|
|
||||||
fill: #657077;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.backup-list_aside-header_title {
|
.backup-list_aside-header_title {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
@ -191,11 +188,23 @@ const StyledBackupList = styled.div`
|
|||||||
}
|
}
|
||||||
.backup-list_restore-link {
|
.backup-list_restore-link {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
|
color: #a3a9ae;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
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_trash-icon,
|
||||||
.backup-list_restore-link {
|
.backup-list_restore-link {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -203,9 +212,6 @@ const StyledBackupList = styled.div`
|
|||||||
.backup-list_trash-icon {
|
.backup-list_trash-icon {
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
}
|
}
|
||||||
.backup-list_trash-icon:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
export {
|
export {
|
||||||
StyledModules,
|
StyledModules,
|
||||||
|
@ -4,9 +4,9 @@ import AutoSizer from "react-virtualized-auto-sizer";
|
|||||||
|
|
||||||
import ListRow from "files/ListRow";
|
import ListRow from "files/ListRow";
|
||||||
import Link from "@appserver/components/link";
|
import Link from "@appserver/components/link";
|
||||||
import IconButton from "@appserver/components/icon-button";
|
|
||||||
|
|
||||||
import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
|
import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
|
||||||
|
import TrashIcon from "../../../../../../../../../public/images/button.trash.react.svg";
|
||||||
const BackupListBody = ({
|
const BackupListBody = ({
|
||||||
displayType,
|
displayType,
|
||||||
needRowSelection,
|
needRowSelection,
|
||||||
@ -14,17 +14,22 @@ const BackupListBody = ({
|
|||||||
onIconClick,
|
onIconClick,
|
||||||
onRestoreClick,
|
onRestoreClick,
|
||||||
t,
|
t,
|
||||||
|
iconUrl,
|
||||||
}) => {
|
}) => {
|
||||||
const Item = ({ index, style }) => {
|
const Item = ({ index, style }) => {
|
||||||
const file = filesList[index];
|
const file = filesList[index];
|
||||||
const fileName = file.fileName;
|
const fileName = file.fileName;
|
||||||
|
const fileExst = "gz";
|
||||||
|
const modifyFileName = fileName.substring(0, fileName.indexOf("gz"));
|
||||||
return (
|
return (
|
||||||
<div style={style}>
|
<div style={style}>
|
||||||
<ListRow
|
<ListRow
|
||||||
displayType={displayType}
|
displayType={displayType}
|
||||||
needRowSelection={needRowSelection}
|
needRowSelection={needRowSelection}
|
||||||
index={index}
|
index={index}
|
||||||
fileName={fileName}
|
fileName={modifyFileName}
|
||||||
|
fileExst={fileExst}
|
||||||
|
iconUrl={iconUrl}
|
||||||
>
|
>
|
||||||
<div data-index={index} className="backup-list_options">
|
<div data-index={index} className="backup-list_options">
|
||||||
<Link
|
<Link
|
||||||
@ -34,12 +39,9 @@ const BackupListBody = ({
|
|||||||
>
|
>
|
||||||
{t("RestoreBackup")}
|
{t("RestoreBackup")}
|
||||||
</Link>
|
</Link>
|
||||||
|
<TrashIcon
|
||||||
<IconButton
|
data-index={index}
|
||||||
className="backup-list_trash-icon"
|
className="backup-list_trash-icon"
|
||||||
size={16}
|
|
||||||
color="#657077"
|
|
||||||
iconName="/static/images/button.trash.react.svg"
|
|
||||||
onClick={onIconClick}
|
onClick={onIconClick}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -38,11 +38,16 @@ class BackupListModalDialog extends React.Component {
|
|||||||
if (isVisibleDialog) {
|
if (isVisibleDialog) {
|
||||||
window.addEventListener("resize", this.throttledResize);
|
window.addEventListener("resize", this.throttledResize);
|
||||||
}
|
}
|
||||||
getBackupHistory().then((backupList) =>
|
|
||||||
|
this.setState({ isLoading: true }, function () {
|
||||||
|
getBackupHistory()
|
||||||
|
.then((backupList) =>
|
||||||
this.setState({
|
this.setState({
|
||||||
filesList: backupList,
|
filesList: backupList,
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
|
.finally(() => this.setState({ isLoading: false }));
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
@ -73,15 +78,26 @@ class BackupListModalDialog extends React.Component {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
onDeleteClick = (e) => {
|
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) => {
|
onRestoreClick = (e) => {
|
||||||
console.log("restore");
|
console.log("restore");
|
||||||
};
|
};
|
||||||
render() {
|
render() {
|
||||||
const { onModalClose, isVisibleDialog, t } = this.props;
|
const { onModalClose, isVisibleDialog, t, iconUrl } = this.props;
|
||||||
const { filesList, displayType, isLoading } = this.state;
|
const { filesList, displayType, isLoading } = this.state;
|
||||||
// console.log("filesList", filesList);
|
// console.log("filesList", filesList);
|
||||||
return (
|
return (
|
||||||
@ -110,6 +126,7 @@ class BackupListModalDialog extends React.Component {
|
|||||||
filesList={filesList}
|
filesList={filesList}
|
||||||
onIconClick={this.onDeleteClick}
|
onIconClick={this.onDeleteClick}
|
||||||
onRestoreClick={this.onRestoreClick}
|
onRestoreClick={this.onRestoreClick}
|
||||||
|
iconUrl={iconUrl}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Text>{t("EmptyBackupList")}</Text>
|
<Text>{t("EmptyBackupList")}</Text>
|
||||||
|
Loading…
Reference in New Issue
Block a user