CB-4570 fix: show quota placeholder correctly

This commit is contained in:
s.teleshev
2024-02-07 20:51:25 +01:00
parent 9063fb58bd
commit d86b35e47a
5 changed files with 46 additions and 37 deletions
@@ -9,7 +9,8 @@ import type { IResultSetElementKey } from './IResultSetDataKey';
export interface IResultSetDataContentAction {
activeElement: IResultSetElementKey | null;
isContentTruncated: (element: IResultSetElementKey) => boolean;
isImageTruncated: (element: IResultSetElementKey) => boolean;
isTextTruncated: (element: IResultSetElementKey) => boolean;
isDownloadable: (element: IResultSetElementKey) => boolean;
getFileDataUrl: (element: IResultSetElementKey) => Promise<string>;
resolveFileDataUrl: (element: IResultSetElementKey) => Promise<string>;
@@ -79,15 +79,26 @@ export class ResultSetDataContentAction extends DatabaseDataAction<any, IDatabas
return result;
}
isContentTruncated(elementKey: IResultSetElementKey) {
isImageTruncated(elementKey: IResultSetElementKey) {
const limit = this.getLimitInfo(elementKey).limit;
const content = this.format.get(elementKey);
const cachedImage = elementKey ? this.retrieveFileDataUrlFromCache(elementKey) : '';
const isLoadedFullImage = Boolean(cachedImage) && this.format.isBinary(elementKey);
if (!isNotNullDefined(limit) || !isResultSetContentValue(content) || isLoadedFullImage) {
return false;
}
return (content.contentLength ?? 0) > limit;
}
isTextTruncated(elementKey: IResultSetElementKey) {
const limit = this.getLimitInfo(elementKey).limit;
const content = this.format.get(elementKey);
const cachedFullText = elementKey ? this.retrieveFileFullTextFromCache(elementKey) : '';
const isLoadedFullText = Boolean(cachedFullText) && this.format.isText(elementKey);
const cachedImage = elementKey ? this.retrieveFileDataUrlFromCache(elementKey) : '';
const isLoadedFullImage = Boolean(cachedImage) && this.format.isBinary(elementKey);
if (!isNotNullDefined(limit) || !isResultSetContentValue(content) || isLoadedFullText || isLoadedFullImage) {
if (!isNotNullDefined(limit) || !isResultSetContentValue(content) || isLoadedFullText) {
return false;
}
@@ -154,11 +154,7 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
return false;
}
if (this.selectedCell && this.formatAction.isBinary(this.selectedCell)) {
return this.contentAction.isContentTruncated(this.selectedCell);
}
return false;
return this.selectedCell && this.contentAction.isImageTruncated(this.selectedCell);
},
get shouldShowImage() {
const isFullImage = !this.truncated && this.savedSrc;
@@ -230,19 +226,22 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
<Container vertical>
<Container fill overflow center>
{data.shouldShowImage && <img src={data.src} className={s(style, { img: true, stretch: state.stretch })} />}
<QuotaPlaceholder model={data.model} resultIndex={data.resultIndex} elementKey={data.selectedCell}>
{isDownloadable && (
<Button
disabled={loading}
loading={
!!data.contentAction.activeElement && ResultSetDataKeysUtils.isElementsKeyEqual(data.contentAction.activeElement, data.selectedCell)
}
onClick={load}
>
{`${translate('ui_view')} (${valueSize})`}
</Button>
)}
</QuotaPlaceholder>
{data.truncated ? (
<QuotaPlaceholder model={data.model} resultIndex={data.resultIndex} elementKey={data.selectedCell}>
{isDownloadable && (
<Button
disabled={loading}
loading={
!!data.contentAction.activeElement &&
ResultSetDataKeysUtils.isElementsKeyEqual(data.contentAction.activeElement, data.selectedCell)
}
onClick={load}
>
{`${translate('ui_view')} (${valueSize})`}
</Button>
)}
</QuotaPlaceholder>
) : null}
</Container>
<Tools loading={loading} stretch={state.stretch} onToggleStretch={state.toggleStretch} onSave={save} onUpload={upload} />
</Container>
@@ -38,10 +38,6 @@ export const QuotaPlaceholder: React.FC<React.PropsWithChildren<Props>> = observ
const { contentAction } = useResultSetActions({ model, resultIndex });
const limitInfo = elementKey ? contentAction.getLimitInfo(elementKey) : null;
if (!elementKey || (elementKey && !contentAction.isContentTruncated(elementKey))) {
return null;
}
return (
<Container className={className} keepSize={keepSize} vertical center>
<Container center vertical>
@@ -125,7 +125,7 @@ export const TextValuePresentation: TabContainerPanelComponent<IDataValuePanelPr
const valueSize =
isResultSetContentValue(contentValue) && isNotNullDefined(contentValue.contentLength) ? bytesToSize(contentValue.contentLength) : undefined;
const canSave = firstSelectedCell && contentAction.isDownloadable(firstSelectedCell);
const shouldShowPasteButton = textValueData.isTextColumn && firstSelectedCell && contentAction.isContentTruncated(firstSelectedCell);
const shouldShowPasteButton = textValueData.isTextColumn && firstSelectedCell && contentAction.isTextTruncated(firstSelectedCell);
const typeExtension = useMemo(() => getTypeExtension(contentType!) ?? [], [contentType]);
const extensions = useCodemirrorExtensions(undefined, typeExtension);
@@ -185,15 +185,17 @@ export const TextValuePresentation: TabContainerPanelComponent<IDataValuePanelPr
onChange={valueChangeHandler}
/>
</Group>
<QuotaPlaceholder model={model} resultIndex={resultIndex} elementKey={firstSelectedCell} keepSize>
{shouldShowPasteButton && (
<Container keepSize>
<Button disabled={model.isLoading()} onClick={textValueData.pasteFullText}>
{`${translate('ui_show_more')} (${valueSize})`}
</Button>
</Container>
)}
</QuotaPlaceholder>
{firstSelectedCell && contentAction.isTextTruncated(firstSelectedCell) ? (
<QuotaPlaceholder model={model} resultIndex={resultIndex} elementKey={firstSelectedCell} keepSize>
{shouldShowPasteButton && (
<Container keepSize>
<Button disabled={model.isLoading()} onClick={textValueData.pasteFullText}>
{`${translate('ui_show_more')} (${valueSize})`}
</Button>
</Container>
)}
</QuotaPlaceholder>
) : null}
<Container keepSize center overflow>
{canSave && (
<ActionIconButton title={translate('ui_download')} name="/icons/export.svg" disabled={model.isLoading()} img onClick={saveHandler} />