CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-02 01:56:57 +13:00
Code Issues Projects Releases Wiki Activity

Re-working UI after some review.

Browse source
This commit is contained in:
mike12345567 2021-07-05 10:48:28 +01:00
parent 6d48dc33b6
commit dcd4774693
1 changed files with 29 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/CreateEditRelationship/CreateEditRelationship.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import { RelationshipTypes } from "constants/backend" import { RelationshipTypes } from "constants/backend"
import { Button, Input, ModalContent, Select } from "@budibase/bbui" import { Button, Input, ModalContent, Select, Detail } from "@budibase/bbui"
import { tables } from "stores/backend" import { tables } from "stores/backend"
import { uuid } from "builderStore/uuid" import { uuid } from "builderStore/uuid"
@ -135,55 +135,47 @@
</script> </script>
<ModalContent <ModalContent
size="XL"
title="Create Relationship" title="Create Relationship"
confirmText="Save" confirmText="Save"
onConfirm={saveRelationship} onConfirm={saveRelationship}
disabled={!valid} disabled={!valid}
> >
<div class="relationship-names"> <Select
<div class="left-name"> label="Relationship type"
<Input label="From name" bind:value={fromRelationship.name} /> options={relationshipTypes}
</div> bind:value={fromRelationship.relationshipType}
<div class="right-name"> />
<Input label="To name" bind:value={toRelationship.name} /> <div class="headings">
</div> <Detail>Tables</Detail>
</div> </div>
<Select
<div class="table-selector"> label="Select from table"
<Select options={tableOptions}
label="Relationship" bind:value={toRelationship.tableId}
options={relationshipTypes} />
bind:value={fromRelationship.relationshipType} <Select
/> label={"Select to table"}
<Select
label="From"
options={tableOptions}
bind:value={toRelationship.tableId}
/>
<Select
label={"Has many"}
options={tableOptions} options={tableOptions}
bind:value={fromRelationship.tableId} bind:value={fromRelationship.tableId}
/> />
{#if fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_MANY}
{#if fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_MANY} <Select
<Select
label={"Through"} label={"Through"}
options={tableOptions} options={tableOptions}
bind:value={fromRelationship.through} bind:value={fromRelationship.through}
/> />
{:else if toTable} {:else if toTable}
<Select <Select
label={`Foreign Key (${toTable?.name})`} label={`Foreign Key (${toTable?.name})`}
options={Object.keys(toTable?.schema)} options={Object.keys(toTable?.schema)}
bind:value={fromRelationship.fieldName} bind:value={fromRelationship.fieldName}
/> />
{/if} {/if}
<div class="headings">
<Detail>Column names</Detail>
</div> </div>
<Input label="From table column" bind:value={fromRelationship.name} />
<Input label="To table column" bind:value={toRelationship.name} />
<div slot="footer"> <div slot="footer">
{#if originalFromName !== null} {#if originalFromName !== null}
<Button warning text on:click={deleteRelationship}>Delete</Button> <Button warning text on:click={deleteRelationship}>Delete</Button>
@ -192,19 +184,7 @@
</ModalContent> </ModalContent>
<style> <style>
.table-selector { .headings {
display: grid; margin-top: var(--spacing-s);
grid-template-columns: repeat(5, 1fr);
grid-gap: var(--spacing-xl);
}
.relationship-names {
display: grid;
grid-gap: var(--spacing-xl);
}
.left-name {
grid-column: 1;
}
.right-name {
grid-column: 2;
} }
</style> </style>