Web: SelectFile/SelectFolder: Fixed displaying "Not available folders" for empty third-party folders.

This commit is contained in:
Tatiana Lopaeva 2021-08-16 16:51:32 +03:00
parent e634b5c72f
commit 46d3720216
8 changed files with 52 additions and 21 deletions

View File

@ -46,7 +46,14 @@ const FolderTreeBody = ({
</div>
</StyledSelectFolderPanel>
) : (
<Text as="span">{t("NotAvailableFolder")}</Text>
<StyledSelectFolderPanel
heightContent={heightContent}
isHeaderChildren={isHeaderChildren}
>
<div className="tree-folder-empty-list select-folder-dialog_tree-folder">
<Text as="span">{t("NotAvailableFolder")}</Text>
</div>
</StyledSelectFolderPanel>
)
) : (
<StyledSelectFolderPanel heightContent={heightContent}>

View File

@ -13,6 +13,7 @@ import Backdrop from "@appserver/components/backdrop";
import Button from "@appserver/components/button";
import Loaders from "@appserver/common/components/Loaders";
import Loader from "@appserver/components/loader";
import EmptyContainer from "../../EmptyContainer/EmptyContainer";
const DISPLAY_TYPE = "aside";
const SelectFileDialogAsideView = ({
t,
@ -41,6 +42,7 @@ const SelectFileDialogAsideView = ({
isTranslationsReady,
passedId,
headerName,
isAvailableFolderList,
}) => {
const [isLoadingData, setIsLoadingData] = useState(false);
const onSetLoadingData = (loading) => {
@ -107,13 +109,20 @@ const SelectFileDialogAsideView = ({
loadingText={loadingText}
selectedFile={selectedFile}
/>
) : (
) : isAvailableFolderList ? (
<div key="loader">
<Loader type="oval" size="16px" className="panel-loader" />
<Text as="span">{`${t("Common:LoadingProcessing")} ${t(
"Common:LoadingDescription"
)}`}</Text>
</div>
) : (
<div className="select-file-dialog_empty-container">
<EmptyContainer
headerText={t("Home:EmptyFolderHeader")}
imageSrc="/static/images/empty_screen.png"
/>
</div>
)}
</div>
</div>

View File

@ -25,6 +25,7 @@ class SelectFileDialogModalViewBody extends React.Component {
super(props);
this.state = {
isLoading: true,
isAvailable: true,
};
this.folderList = "";
}
@ -83,7 +84,9 @@ class SelectFileDialogModalViewBody extends React.Component {
case "third-party":
try {
this.folderList = await SelectFolderDialog.getCommonThirdPartyList();
this.onSetSelectedFolder();
this.folderList.length !== 0
? this.onSetSelectedFolder()
: this.setState({ isAvailable: false });
} catch (err) {
console.error(err);
}
@ -104,6 +107,7 @@ class SelectFileDialogModalViewBody extends React.Component {
onSetSelectedFolder = () => {
const { onSelectFolder, selectedFolder, passedId } = this.props;
onSelectFolder &&
onSelectFolder(
`${
@ -146,7 +150,7 @@ class SelectFileDialogModalViewBody extends React.Component {
headerName,
} = this.props;
const { isLoading } = this.state;
const { isLoading, isAvailable } = this.state;
const isHeaderChildren = !!header;
@ -176,7 +180,7 @@ class SelectFileDialogModalViewBody extends React.Component {
onSelect={this.onSelect}
withoutProvider={withoutProvider}
certainFolders
isAvailableFolders
isAvailable={isAvailable}
filter={filter}
selectedKeys={[selectedFolder]}
isHeaderChildren={isHeaderChildren}

View File

@ -36,6 +36,7 @@ class SelectFileDialogBody extends React.Component {
displayType: this.getDisplayType(),
page: 0,
filterParams: this.getFilterParameters(),
isAvailableFolderList: true,
};
this.throttledResize = throttle(this.setDisplayType, 300);
this.newFilter = filter.clone();
@ -119,14 +120,20 @@ class SelectFileDialogBody extends React.Component {
onSelectFolder = (id) => {
const { setFolderId } = this.props;
setFolderId(id);
if (id) {
setFolderId(id);
this.setState({
selectedFolder: id,
hasNextPage: true,
filesList: [],
page: 0,
});
this.setState({
selectedFolder: id,
hasNextPage: true,
filesList: [],
page: 0,
});
} else
this.setState({
isAvailableFolderList: false,
});
};
onSelectFile = (e) => {
@ -214,6 +221,7 @@ class SelectFileDialogBody extends React.Component {
selectedFile,
fileName,
passedId,
isAvailableFolderList,
} = this.state;
const loadingText = loadingLabel
@ -249,6 +257,7 @@ class SelectFileDialogBody extends React.Component {
isTranslationsReady={tReady}
passedId={passedId}
header={header}
isAvailableFolderList={isAvailableFolderList}
/>
) : (
<SelectFileDialogModalView

View File

@ -88,7 +88,7 @@ const SelectFolderDialogAsideView = ({
size="big"
label={t("Common:SaveButton")}
onClick={onSave}
isDisabled={isLoadingData || !canCreate}
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
primary

View File

@ -65,7 +65,7 @@ const SelectFolderDialogModalView = ({
size="medium"
label={t("Common:SaveButton")}
onClick={onSave}
isDisabled={isLoadingData || !canCreate}
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
primary

View File

@ -166,14 +166,16 @@ class SelectFolderModalDialog extends React.Component {
showButtons,
} = this.props;
folderList.length === 0 && this.setState({ isAvailable: false });
if (folderList.length === 0) {
this.setState({ isAvailable: false });
onSelectFolder(null);
this.loadersCompletes();
return;
}
folderList.length !== 0 &&
showButtons &&
this.setSelectedFolderToTee(folderList[0].id);
showButtons && this.setSelectedFolderToTee(folderList[0].id);
isSetFolderImmediately &&
folderList.length !== 0 &&
!selectedFolderId &&
onSelectFolder &&
onSelectFolder(
@ -181,7 +183,6 @@ class SelectFolderModalDialog extends React.Component {
);
isSetFolderImmediately &&
folderList.length !== 0 &&
this.setState({
folderId: `${
selectedFolderId ? selectedFolderId : id ? id : folderList[0].id
@ -196,7 +197,6 @@ class SelectFolderModalDialog extends React.Component {
!id &&
!selectedFolderId &&
isSetFolderImmediately &&
folderList.length !== 0 &&
onSetBaseFolderPath &&
onSetBaseFolderPath(this.folderTitle);
} catch (err) {

View File

@ -97,6 +97,7 @@ class SelectFolderInputBody extends React.PureComponent {
modalHeightContent,
asideHeightContent,
zIndex,
showButtons,
} = this.props;
const { isLoading, baseFolderPath, fullFolderPath } = this.state;
@ -131,6 +132,7 @@ class SelectFolderInputBody extends React.PureComponent {
dialogWithFiles={dialogWithFiles}
modalHeightContent={modalHeightContent}
asideHeightContent={asideHeightContent}
showButtons={showButtons}
/>
</StyledComponent>
);