Web: Files: SelectedFile: Added loader for files list.
This commit is contained in:
parent
3a5d9be209
commit
a360e6cb6e
@ -13,6 +13,7 @@ import IconButton from "@appserver/components/icon-button";
|
|||||||
import { getBackupFiles, getFolderInfo } from "@appserver/common/api/files";
|
import { getBackupFiles, getFolderInfo } from "@appserver/common/api/files";
|
||||||
import SelectFolderDialog from "../SelectFolderDialog";
|
import SelectFolderDialog from "../SelectFolderDialog";
|
||||||
import Text from "@appserver/components/text";
|
import Text from "@appserver/components/text";
|
||||||
|
import Loader from "@appserver/components/loader";
|
||||||
class SelectFileDialogBody extends React.Component {
|
class SelectFileDialogBody extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@ -35,9 +36,11 @@ class SelectFileDialogBody extends React.Component {
|
|||||||
if (selectedFolder !== prevState.selectedFolder) {
|
if (selectedFolder !== prevState.selectedFolder) {
|
||||||
if (foldersType === "common") {
|
if (foldersType === "common") {
|
||||||
//debugger;
|
//debugger;
|
||||||
getBackupFiles(selectedFolder).then((filesList) =>
|
this.setState({ isLoadingData: true }, function () {
|
||||||
this.setState({ filesList: filesList })
|
getBackupFiles(selectedFolder)
|
||||||
);
|
.then((filesList) => this.setState({ filesList: filesList }))
|
||||||
|
.finally(() => this.setState({ isLoadingData: false }));
|
||||||
|
});
|
||||||
console.log("selectedFolder", selectedFolder);
|
console.log("selectedFolder", selectedFolder);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -45,7 +48,7 @@ class SelectFileDialogBody extends React.Component {
|
|||||||
|
|
||||||
onClickInput = () => {
|
onClickInput = () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
isVisible: !this.state.isVisible,
|
isVisible: true,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
onClose = () => {
|
onClose = () => {
|
||||||
@ -69,32 +72,49 @@ class SelectFileDialogBody extends React.Component {
|
|||||||
},
|
},
|
||||||
function () {
|
function () {
|
||||||
onClose && onClose();
|
onClose && onClose();
|
||||||
|
onSetFileName & onSetFileName(filesList[index].title);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
onSetFileName & onSetFileName(filesList[index].title);
|
};
|
||||||
|
onSetLoadingData = (loading) => {
|
||||||
|
this.setState({
|
||||||
|
isLoadingData: loading,
|
||||||
|
});
|
||||||
};
|
};
|
||||||
render() {
|
render() {
|
||||||
const { t, isPanelVisible, onClose, zIndex, foldersType } = this.props;
|
const { t, isPanelVisible, onClose, zIndex, foldersType } = this.props;
|
||||||
const { isVisible, filesList, selectedFolder } = this.state;
|
const { isVisible, filesList, selectedFolder, isLoadingData } = this.state;
|
||||||
console.log("filesList", filesList);
|
//console.log("isLoadingData", isLoadingData);
|
||||||
return (
|
return (
|
||||||
<StyledAsidePanel visible={isPanelVisible}>
|
<StyledAsidePanel visible={isPanelVisible}>
|
||||||
<ModalDialog visible={isPanelVisible} zIndex={zIndex} onClose={onClose}>
|
<ModalDialog
|
||||||
|
visible={isPanelVisible}
|
||||||
|
zIndex={zIndex}
|
||||||
|
onClose={onClose}
|
||||||
|
//displayType="aside"
|
||||||
|
>
|
||||||
<ModalDialog.Header>{t("SelectFile")}</ModalDialog.Header>
|
<ModalDialog.Header>{t("SelectFile")}</ModalDialog.Header>
|
||||||
<ModalDialog.Body>
|
<ModalDialog.Body>
|
||||||
<StyledSelectFilePanel>
|
<StyledSelectFilePanel>
|
||||||
<Text fontWeight="600">{t("ChooseByUser")}</Text>
|
<Text fontWeight="600" fontSize="14px">
|
||||||
|
{t("ChooseByUser")}
|
||||||
|
</Text>
|
||||||
<SelectFolderInput
|
<SelectFolderInput
|
||||||
onClickInput={this.onClickInput}
|
onClickInput={this.onClickInput}
|
||||||
onClose={this.onClose}
|
onClose={this.onClose}
|
||||||
onSelectFolder={this.onSelectFolder}
|
onSelectFolder={this.onSelectFolder}
|
||||||
|
onSetLoadingData={this.onSetLoadingData}
|
||||||
isPanelVisible={isVisible}
|
isPanelVisible={isVisible}
|
||||||
foldersType={foldersType}
|
foldersType={foldersType}
|
||||||
isNeedArrowIcon
|
isNeedArrowIcon
|
||||||
/>
|
/>
|
||||||
<div className="modal-dialog_body-files-list">
|
<div className="modal-dialog_body-files-list">
|
||||||
<Text fontWeight="600"> {"Список файлов:"}</Text>
|
<Text fontWeight="600" fontSize="14px">
|
||||||
{filesList &&
|
{" "}
|
||||||
|
{"Список файлов:"}
|
||||||
|
</Text>
|
||||||
|
{!isLoadingData ? (
|
||||||
|
filesList &&
|
||||||
filesList.map((data, index) => (
|
filesList.map((data, index) => (
|
||||||
<div className="file-name">
|
<div className="file-name">
|
||||||
<div
|
<div
|
||||||
@ -107,7 +127,15 @@ class SelectFileDialogBody extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
<div className="file-exst">{".gz"}</div>
|
<div className="file-exst">{".gz"}</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))
|
||||||
|
) : (
|
||||||
|
<div key="loader" className="panel-loader-wrapper">
|
||||||
|
<Loader type="oval" size="16px" className="panel-loader" />
|
||||||
|
<Text as="span">{`${t("Common:LoadingProcessing")} ${t(
|
||||||
|
"Common:LoadingDescription"
|
||||||
|
)}`}</Text>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</StyledSelectFilePanel>
|
</StyledSelectFilePanel>
|
||||||
</ModalDialog.Body>
|
</ModalDialog.Body>
|
||||||
|
@ -533,6 +533,13 @@ const StyledSelectFilePanel = styled.div`
|
|||||||
.file-exst {
|
.file-exst {
|
||||||
color: #a3a9ae;
|
color: #a3a9ae;
|
||||||
}
|
}
|
||||||
|
.panel-loader-wrapper {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.panel-loader {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
export {
|
export {
|
||||||
StyledAsidePanel,
|
StyledAsidePanel,
|
||||||
|
Loading…
Reference in New Issue
Block a user