This commit is contained in:
Jan Prochazka
2021-10-24 16:24:17 +02:00
parent a9b201e1cb
commit 4c62f22f6f

View File

@@ -8,6 +8,7 @@
import _ from 'lodash'; import _ from 'lodash';
import { derived, writable } from 'svelte/store'; import { derived, writable } from 'svelte/store';
import TableControl from '../elements/TableControl.svelte'; import TableControl from '../elements/TableControl.svelte';
import VerticalSplitter from '../elements/VerticalSplitter.svelte';
import FormFieldTemplateTiny from '../forms/FormFieldTemplateTiny.svelte'; import FormFieldTemplateTiny from '../forms/FormFieldTemplateTiny.svelte';
import FormProviderCore from '../forms/FormProviderCore.svelte'; import FormProviderCore from '../forms/FormProviderCore.svelte';
import FontIcon from '../icons/FontIcon.svelte'; import FontIcon from '../icons/FontIcon.svelte';
@@ -60,52 +61,70 @@
</script> </script>
<div class="wrapper"> <div class="wrapper">
<FormProviderCore {values}> <VerticalSplitter>
<div class="topbar"> <div slot="1" class="flexcol">
<div class="col-3"> <FormProviderCore {values}>
<FormConnectionSelect name="sourceConid" label="Source server" templateProps={{ noMargin: true }} isNative /> <div class="topbar">
</div> <div class="col-3">
<div class="col-3"> <FormConnectionSelect
<FormDatabaseSelect name="sourceConid"
conidName="sourceConid" label="Source server"
name="sourceDatabase" templateProps={{ noMargin: true }}
label="Source database" isNative
templateProps={{ noMargin: true }} />
isNative </div>
/> <div class="col-3">
</div> <FormDatabaseSelect
<div class="arrow"> conidName="sourceConid"
<FontIcon icon="icon arrow-right-bold" /> name="sourceDatabase"
</div> label="Source database"
<div class="col-3"> templateProps={{ noMargin: true }}
<FormConnectionSelect name="targetConid" label="Target server" templateProps={{ noMargin: true }} isNative /> isNative
</div> />
<div class="col-3"> </div>
<FormDatabaseSelect <div class="arrow">
conidName="targetConid" <FontIcon icon="icon arrow-right-bold" />
name="targetDatabase" </div>
label="Target database" <div class="col-3">
templateProps={{ noMargin: true }} <FormConnectionSelect
isNative name="targetConid"
label="Target server"
templateProps={{ noMargin: true }}
isNative
/>
</div>
<div class="col-3">
<FormDatabaseSelect
conidName="targetConid"
name="targetDatabase"
label="Target database"
templateProps={{ noMargin: true }}
isNative
/>
</div>
</div>
</FormProviderCore>
<div class="tableWrapper">
<TableControl
rows={diffRows}
bind:selectedIndex={pairIndex}
selectable
disableFocusOutline
columns={[
{ fieldName: 'type', header: 'Type' },
{ fieldName: 'sourceSchemaName', header: 'Schema' },
{ fieldName: 'sourcePureName', header: 'Name' },
{ fieldName: 'state', header: 'Action' },
{ fieldName: 'targetSchemaName', header: 'Schema' },
{ fieldName: 'targetPureName', header: 'Name' },
]}
/> />
</div> </div>
</div> </div>
</FormProviderCore>
<TableControl <svelte:fragment slot="2" />
rows={diffRows} </VerticalSplitter>
bind:selectedIndex={pairIndex}
selectable
disableFocusOutline
columns={[
{ fieldName: 'type', header: 'Type' },
{ fieldName: 'sourceSchemaName', header: 'Schema' },
{ fieldName: 'sourcePureName', header: 'Name' },
{ fieldName: 'state', header: 'Action' },
{ fieldName: 'targetSchemaName', header: 'Schema' },
{ fieldName: 'targetPureName', header: 'Name' },
]}
/>
</div> </div>
<style> <style>
@@ -114,9 +133,15 @@
flex: 1; flex: 1;
} }
.flexcol {
flex: 1;
display: flex;
flex-direction: column;
}
.topbar { .topbar {
display: flex; display: flex;
margin: 10px 0px; margin: 10px 0px;
width: 100%;
} }
.arrow { .arrow {
font-size: 30px; font-size: 30px;
@@ -125,4 +150,10 @@
position: relative; position: relative;
top: 10px; top: 10px;
} }
.tableWrapper {
overflow-y: scroll;
width: 100%;
flex: 1;
}
</style> </style>