MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Re-working UI after some review.

This commit is contained in:
mike12345567 2021-07-05 10:48:28 +01:00
parent 161fa46776
commit ea8fea98a9
1 changed files with 29 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
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,40 +135,29 @@
</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">
<div class="left-name">
<Input label="From name" bind:value={fromRelationship.name} />
</div>
<div class="right-name">
<Input label="To name" bind:value={toRelationship.name} />
</div>
</div>
<div class="table-selector">
<Select <Select
label="Relationship" label="Relationship type"
options={relationshipTypes} options={relationshipTypes}
bind:value={fromRelationship.relationshipType} bind:value={fromRelationship.relationshipType}
/> />
<div class="headings">
<Detail>Tables</Detail>
</div>
<Select <Select
label="From" label="Select from table"
options={tableOptions} options={tableOptions}
bind:value={toRelationship.tableId} bind:value={toRelationship.tableId}
/> />
<Select <Select
label={"Has many"} label={"Select to table"}
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"}
@ -182,8 +171,11 @@
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>