dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-18 03:16:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

import export- cancelable, better design

Browse Source
This commit is contained in:
Jan Prochazka
2020-11-15 18:55:42 +01:00
parent eaf45d8768
commit 801bf05a31
5 changed files with 110 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
packages/web/src/impexp/ImportExportConfigurator.js
View File

@@ -36,6 +36,10 @@ const Wrapper = styled.div`
display: flex;
`;
const SourceListWrapper = styled.div`
margin: 10px;
`;
const Column = styled.div`
margin: 10px;
flex: 1;
@@ -77,6 +81,12 @@ const ArrowWrapper = styled.div`
align-self: center;
`;
const Title = styled.div`
font-size: 20px;
text-align: center;
margin: 10px 0px;
`;
function getFileFilters(storageType) {
const res = [];
if (storageType == 'csv') res.push({ name: 'CSV files', extensions: ['csv'] });
@@ -194,8 +204,16 @@ function SourceTargetConfig({
const archiveFiles = useArchiveFiles({ folder: values[archiveFolderField] });
return (
<Column>
{direction == 'source' && <Label theme={theme}>Source configuration</Label>}
{direction == 'target' && <Label theme={theme}>Target configuration</Label>}
{direction == 'source' && (
<Title theme={theme}>
<FontIcon icon="icon import" /> Source configuration
</Title>
)}
{direction == 'target' && (
<Title theme={theme}>
<FontIcon icon="icon export" /> Target configuration
</Title>
)}
<FormReactSelect options={types.filter((x) => x.directions.includes(direction))} name={storageTypeField} />
{(storageType == 'database' || storageType == 'query') && (
<>
@@ -396,45 +414,51 @@ export default function ImportExportConfigurator({ uploadedFile = undefined, onC
schemaNameField="targetSchemaName"
/>
</Wrapper>
<TableControl rows={sourceList || []}>
<TableColumn fieldName="source" header="Source" formatter={(row) => <SourceName name={row} />} />
<TableColumn
fieldName="action"
header="Action"
formatter={(row) => (
<SelectField
options={getActionOptions(row, values, targetDbinfo)}
value={values[`actionType_${row}`] || getActionOptions(row, values, targetDbinfo)[0].value}
onChange={(e) => setFieldValue(`actionType_${row}`, e.target.value)}
/>
)}
/>
<TableColumn
fieldName="target"
header="Target"
formatter={(row) => (
<TextField
value={getTargetName(row, values)}
onChange={(e) => setFieldValue(`targetName_${row}`, e.target.value)}
/>
)}
/>
<TableColumn
fieldName="preview"
header="Preview"
formatter={(row) =>
supportsPreview ? (
<CheckboxField
checked={previewSource == row}
onChange={(e) => {
if (e.target.checked) setPreviewSource(row);
else setPreviewSource(null);
}}
<SourceListWrapper>
<Title>
<FontIcon icon="icon tables" /> Map source tables/files
</Title>
<TableControl rows={sourceList || []}>
<TableColumn fieldName="source" header="Source" formatter={(row) => <SourceName name={row} />} />
<TableColumn
fieldName="action"
header="Action"
formatter={(row) => (
<SelectField
options={getActionOptions(row, values, targetDbinfo)}
value={values[`actionType_${row}`] || getActionOptions(row, values, targetDbinfo)[0].value}
onChange={(e) => setFieldValue(`actionType_${row}`, e.target.value)}
/>
) : null
}
/>
</TableControl>
)}
/>
<TableColumn
fieldName="target"
header="Target"
formatter={(row) => (
<TextField
value={getTargetName(row, values)}
onChange={(e) => setFieldValue(`targetName_${row}`, e.target.value)}
/>
)}
/>
<TableColumn
fieldName="preview"
header="Preview"
formatter={(row) =>
supportsPreview ? (
<CheckboxField
checked={previewSource == row}
onChange={(e) => {
if (e.target.checked) setPreviewSource(row);
else setPreviewSource(null);
}}
/>
) : null
}
/>
</TableControl>
{(sourceList || []).length == 0 && <ErrorInfo message="No source tables/files" icon="img alert" />}
</SourceListWrapper>
</Container>
);
}