files widget refactor

This commit is contained in:
Jan Prochazka
2020-12-30 17:11:59 +01:00
parent 351ac5e6a7
commit 99ab1b38cd
5 changed files with 115 additions and 70 deletions

View File

@@ -2,92 +2,45 @@ import React from 'react';
import _ from 'lodash';
import { AppObjectList } from '../appobj/AppObjectList';
import { useOpenedTabs } from '../utility/globalState';
import ClosedTabAppObject from '../appobj/ClosedTabAppObject';
import { WidgetsInnerContainer } from './WidgetStyles';
import {
SavedSqlFileAppObject,
SavedShellFileAppObject,
SavedChartFileAppObject,
SavedMarkdownFileAppObject,
} from '../appobj/SavedFileAppObject';
import { SavedFileAppObject } from '../appobj/SavedFileAppObject';
import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
import { useFiles } from '../utility/metadataLoaders';
import useHasPermission from '../utility/useHasPermission';
function SavedFilesList() {
const sqlFiles = useFiles({ folder: 'sql' });
const shellFiles = useFiles({ folder: 'shell' });
const markdownFiles = useFiles({ folder: 'markdown' });
const chartFiles = useFiles({ folder: 'charts' });
const queryFiles = useFiles({ folder: 'query' });
function SavedSqlFilesList() {
const files = useFiles({ folder: 'sql' });
const files = [
...(sqlFiles || []),
...(shellFiles || []),
...(markdownFiles || []),
...(chartFiles || []),
...(queryFiles || []),
];
return (
<>
<WidgetsInnerContainer>
<AppObjectList list={files} AppObjectComponent={SavedSqlFileAppObject} />
</WidgetsInnerContainer>
</>
);
}
function SavedShellFilesList() {
const files = useFiles({ folder: 'shell' });
return (
<>
<WidgetsInnerContainer>
<AppObjectList list={files} AppObjectComponent={SavedShellFileAppObject} />
</WidgetsInnerContainer>
</>
);
}
function SavedChartFilesList() {
const files = useFiles({ folder: 'charts' });
return (
<>
<WidgetsInnerContainer>
<AppObjectList list={files} AppObjectComponent={SavedChartFileAppObject} />
</WidgetsInnerContainer>
</>
);
}
function SavedMarkdownFilesList() {
const files = useFiles({ folder: 'markdown' });
return (
<>
<WidgetsInnerContainer>
<AppObjectList list={files} AppObjectComponent={SavedMarkdownFileAppObject} />
<AppObjectList
list={files}
AppObjectComponent={SavedFileAppObject}
groupFunc={(data) => _.startCase(data.folder)}
/>
</WidgetsInnerContainer>
</>
);
}
export default function FilesWidget() {
const hasPermission = useHasPermission();
return (
<WidgetColumnBar>
{hasPermission('files/sql/read') && (
<WidgetColumnBarItem title="Saved SQL files" name="sqlFiles" height="15%">
<SavedSqlFilesList />
</WidgetColumnBarItem>
)}
{hasPermission('files/shell/read') && (
<WidgetColumnBarItem title="Saved shell files" name="shellFiles" height="15%">
<SavedShellFilesList />
</WidgetColumnBarItem>
)}
{hasPermission('files/charts/read') && (
<WidgetColumnBarItem title="Saved charts" name="charts" height="15%">
<SavedChartFilesList />
</WidgetColumnBarItem>
)}
{hasPermission('files/markdown/read') && (
<WidgetColumnBarItem title="Saved markdown pages" name="markdown" height="15%">
<SavedMarkdownFilesList />
</WidgetColumnBarItem>
)}
<WidgetColumnBarItem title="Saved files" name="files">
<SavedFilesList />
</WidgetColumnBarItem>
</WidgetColumnBar>
);
}