forked from tsai/budibase
Martin McKeaveney
6 years ago
19 changed files with 580 additions and 36 deletions
@ -0,0 +1,47 @@ |
|||||
|
<script> |
||||
|
export let title |
||||
|
export let icon |
||||
|
|
||||
|
export let primary |
||||
|
export let secondary |
||||
|
export let tertiary |
||||
|
</script> |
||||
|
|
||||
|
<div on:click class:primary class:secondary class:tertiary> |
||||
|
<i class={icon} /> |
||||
|
<span>{title}</span> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
div { |
||||
|
height: 90px; |
||||
|
border-radius: 3px; |
||||
|
color: var(--ink); |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
div:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.primary { |
||||
|
background: var(--ink); |
||||
|
color: var(--white); |
||||
|
} |
||||
|
|
||||
|
.secondary { |
||||
|
background: var(--secondary); |
||||
|
} |
||||
|
|
||||
|
.tertiary { |
||||
|
background: var(--white); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,79 @@ |
|||||
|
<script> |
||||
|
import * as blockDefinitions from "constants/backend" |
||||
|
import Block from "./Block.svelte" |
||||
|
|
||||
|
console.log(blockDefinitions) |
||||
|
|
||||
|
const HEADINGS = [ |
||||
|
{ |
||||
|
title: "Fields", |
||||
|
key: "FIELDS", |
||||
|
}, |
||||
|
{ |
||||
|
title: "Blocks", |
||||
|
key: "BLOCKS", |
||||
|
}, |
||||
|
{ |
||||
|
title: "Table", |
||||
|
key: "TABLES", |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
let selectedTab = "FIELDS" |
||||
|
</script> |
||||
|
|
||||
|
<section> |
||||
|
<header> |
||||
|
{#each HEADINGS as tab} |
||||
|
<span |
||||
|
class:selected={selectedTab === tab.key} |
||||
|
on:click={() => (selectedTab = tab.key)}> |
||||
|
{tab.title} |
||||
|
</span> |
||||
|
{/each} |
||||
|
</header> |
||||
|
|
||||
|
<div class="block-grid"> |
||||
|
{#each Object.values(blockDefinitions[selectedTab]) as blockDefinition} |
||||
|
<Block |
||||
|
primary={true} |
||||
|
secondary={false} |
||||
|
tertiary={false} |
||||
|
title={blockDefinition.name} |
||||
|
icon={blockDefinition.icon} /> |
||||
|
{/each} |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<style> |
||||
|
header { |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
margin-right: 20px; |
||||
|
padding: 10px; |
||||
|
border-radius: 3px; |
||||
|
color: var(--ink-lighter); |
||||
|
font-size: 14px; |
||||
|
background: var(--light-grey); |
||||
|
} |
||||
|
|
||||
|
span:hover { |
||||
|
background: var(--secondary); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.selected { |
||||
|
background: var(--secondary); |
||||
|
color: var(--ink); |
||||
|
} |
||||
|
|
||||
|
.block-grid { |
||||
|
margin-top: 20px; |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
grid-gap: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,46 @@ |
|||||
|
<script> |
||||
|
export let icon |
||||
|
export let className |
||||
|
export let title |
||||
|
export let selected |
||||
|
export let indented |
||||
|
</script> |
||||
|
|
||||
|
<div class:selected on:click class={className}> |
||||
|
<i class:indented class={icon} /> |
||||
|
<span>{title}</span> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.indented { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
div { |
||||
|
padding: 0 10px 0 10px; |
||||
|
width: 260px; |
||||
|
height: 40px; |
||||
|
border-radius: 3px; |
||||
|
font-weight: bold; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
transition: 0.3s background-color; |
||||
|
color: var(--ink); |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.selected { |
||||
|
background-color: var(--secondary); |
||||
|
} |
||||
|
|
||||
|
div:hover { |
||||
|
background-color: var(--secondary); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
i { |
||||
|
color: var(--dark-grey); |
||||
|
font-size: 20px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,90 @@ |
|||||
|
<script> |
||||
|
import { getContext } from "svelte" |
||||
|
import { Switcher } from "@budibase/bbui" |
||||
|
import { goto } from "@sveltech/routify" |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import BlockNavigator from "./BlockNavigator.svelte"; |
||||
|
import SchemaManagementDrawer from "../SchemaManagementDrawer.svelte" |
||||
|
import HierarchyRow from "../HierarchyRow.svelte" |
||||
|
import ListItem from "./ListItem.svelte" |
||||
|
import { Button } from "@budibase/bbui" |
||||
|
|
||||
|
const { open, close } = getContext("simple-modal") |
||||
|
|
||||
|
const HEADINGS = [ |
||||
|
{ |
||||
|
title: "Navigate", |
||||
|
key: "NAVIGATE", |
||||
|
}, |
||||
|
{ |
||||
|
title: "Add", |
||||
|
key: "ADD", |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
let selectedTab = "NAVIGATE" |
||||
|
|
||||
|
function selectModel(model) { |
||||
|
backendUiStore.actions.models.select(model) |
||||
|
} |
||||
|
|
||||
|
function selectField() {} |
||||
|
</script> |
||||
|
|
||||
|
<div class="items-root"> |
||||
|
{#if $backendUiStore.selectedDatabase._id} |
||||
|
<div class="hierarchy"> |
||||
|
<div class="components-list-container"> |
||||
|
<Switcher headings={HEADINGS} bind:value={selectedTab}> |
||||
|
{#if selectedTab === 'NAVIGATE'} |
||||
|
<Button |
||||
|
secondary |
||||
|
wide |
||||
|
on:click={() => $goto(`./database/${$backendUiStore.selectedDatabase._id}/newmodel`)}> |
||||
|
Create New Model |
||||
|
</Button> |
||||
|
<div class="hierarchy-items-container"> |
||||
|
{#each $backendUiStore.models as model} |
||||
|
<ListItem |
||||
|
selected={model._id === $backendUiStore.selectedModel._id} |
||||
|
title={model.name} |
||||
|
icon="ri-table-fill" |
||||
|
on:click={() => selectModel(model)} /> |
||||
|
{#each Object.keys(model.schema) as field} |
||||
|
<ListItem |
||||
|
indented |
||||
|
icon="ri-layout-column-fill" |
||||
|
title={field} |
||||
|
on:click={() => selectField(model.schema[field])} /> |
||||
|
{/each} |
||||
|
{/each} |
||||
|
</div> |
||||
|
{:else if selectedTab === 'ADD'} |
||||
|
<BlockNavigator /> |
||||
|
{/if} |
||||
|
</Switcher> |
||||
|
</div> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.items-root { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
max-height: 100%; |
||||
|
height: 100%; |
||||
|
background: var(--white); |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.hierarchy { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.hierarchy-items-container { |
||||
|
margin-top: 20px; |
||||
|
flex: 1 1 auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,111 @@ |
|||||
|
<script> |
||||
|
import { getContext, onMount } from "svelte" |
||||
|
import { Button, Switcher } from "@budibase/bbui" |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import HierarchyRow from "./HierarchyRow.svelte" |
||||
|
import NavItem from "./NavItem.svelte" |
||||
|
import getIcon from "components/common/icon" |
||||
|
import api from "builderStore/api" |
||||
|
import { |
||||
|
CreateEditModelModal, |
||||
|
CreateEditViewModal, |
||||
|
} from "components/database/ModelDataTable/modals" |
||||
|
|
||||
|
const { open, close } = getContext("simple-modal") |
||||
|
|
||||
|
const ITEMS = [ |
||||
|
{ |
||||
|
title: "Setup", |
||||
|
key: "SETUP", |
||||
|
}, |
||||
|
{ |
||||
|
title: "Filter", |
||||
|
key: "FILTER", |
||||
|
}, |
||||
|
{ |
||||
|
title: "Delete", |
||||
|
key: "DELETE", |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
let selectedTab = "SETUP" |
||||
|
let modelName = $backendUiStore.selectedModel.name |
||||
|
let edited |
||||
|
|
||||
|
$: if (modelName) { |
||||
|
edited = modelName !== $backendUiStore.selectedModel.name |
||||
|
} |
||||
|
|
||||
|
async function deleteModel() { |
||||
|
const modelToDelete = $backendUiStore.selectedModel |
||||
|
const DELETE_MODEL_URL = `/api/${instanceId}/models/${modelToDelete._id}/${modelToDelete._rev}` |
||||
|
const response = await api.delete(DELETE_MODEL_URL) |
||||
|
backendUiStore.update(state => { |
||||
|
state.models = state.models.filter( |
||||
|
model => model._id !== modelToDelete._id |
||||
|
) |
||||
|
state.selectedView = {} |
||||
|
return state |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function selectView(view) { |
||||
|
backendUiStore.update(state => { |
||||
|
state.selectedView = view.name |
||||
|
return state |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="items-root"> |
||||
|
<Switcher headings={ITEMS} bind:value={selectedTab}> |
||||
|
{#if selectedTab === 'SETUP'} |
||||
|
<div class="titled-input"> |
||||
|
<header>Name</header> |
||||
|
<input type="text" class="budibase__input" bind:value={modelName} /> |
||||
|
</div> |
||||
|
<div class="titled-input"> |
||||
|
<header>Import Data</header> |
||||
|
<Button wide secondary>Import CSV</Button> |
||||
|
</div> |
||||
|
|
||||
|
<Button |
||||
|
disabled={!edited} |
||||
|
attention={edited} |
||||
|
wide |
||||
|
on:click={() => alert('Clicked!')}> |
||||
|
Save |
||||
|
</Button> |
||||
|
{:else if selectedTab === 'DELETE'} |
||||
|
<div class="titled-input"> |
||||
|
<header>Danger Zone</header> |
||||
|
<Button error wide on:click={deleteModel}> |
||||
|
Delete |
||||
|
</Button> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</Switcher> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.items-root { |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
max-height: 100%; |
||||
|
height: 100%; |
||||
|
background-color: var(--white); |
||||
|
} |
||||
|
|
||||
|
.titled-input { |
||||
|
padding: 20px; |
||||
|
background: var(--light-grey); |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.titled-input header { |
||||
|
display: block; |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,101 @@ |
|||||
|
const FIELD_TYPES = ["string", "number", "boolean"] |
||||
|
|
||||
|
export const FIELDS = { |
||||
|
PLAIN_TEXT: { |
||||
|
name: "Plain Text", |
||||
|
icon: "ri-text", |
||||
|
definition: { |
||||
|
type: "string", |
||||
|
constraints: { |
||||
|
type: "string", |
||||
|
length: {}, |
||||
|
presence: false, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
NUMBER: { |
||||
|
name: "Number", |
||||
|
icon: "ri-number-1", |
||||
|
definition: { |
||||
|
type: "number", |
||||
|
constraints: { |
||||
|
type: "number", |
||||
|
presence: false, |
||||
|
numericality: {}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
BOOLEAN: { |
||||
|
name: "True/False", |
||||
|
icon: "ri-toggle-line", |
||||
|
definition: { |
||||
|
type: "boolean", |
||||
|
constraints: { |
||||
|
type: "boolean", |
||||
|
presence: false, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
OPTIONS: { |
||||
|
name: "Options", |
||||
|
icon: "ri-list-check-2", |
||||
|
definition: { |
||||
|
type: "options", |
||||
|
constraints: { |
||||
|
type: "string", |
||||
|
presence: false, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
DATETIME: { |
||||
|
name: "Date/Time", |
||||
|
icon: "ri-calendar-event-fill", |
||||
|
definition: { |
||||
|
type: "date", |
||||
|
constraints: { |
||||
|
type: "date", |
||||
|
datetime: {}, |
||||
|
presence: false, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
IMAGE: { |
||||
|
name: "Image", |
||||
|
icon: "ri-image-line", |
||||
|
definition: { |
||||
|
type: "image", |
||||
|
constraints: { |
||||
|
type: "string", |
||||
|
presence: false, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
FILE: { |
||||
|
name: "Image", |
||||
|
icon: "ri-file-line", |
||||
|
definition: { |
||||
|
type: "file", |
||||
|
constraints: { |
||||
|
type: "string", |
||||
|
presence: false, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
DATA_LINK: { |
||||
|
name: "Data Links", |
||||
|
icon: "ri-link", |
||||
|
definition: { |
||||
|
type: "link", |
||||
|
modelId: null, |
||||
|
constraints: { |
||||
|
type: "array", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
export const BLOCKS = { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
export const TABLES = {} |
||||
@ -0,0 +1,49 @@ |
|||||
|
<script> |
||||
|
export let title |
||||
|
export let icon |
||||
|
|
||||
|
export let primary |
||||
|
export let secondary |
||||
|
export let tertiary |
||||
|
</script> |
||||
|
|
||||
|
<!-- TODO: Move to bbui --> |
||||
|
<div on:click class:primary class:secondary class:tertiary> |
||||
|
<i class={icon} /> |
||||
|
<span>{title}</span> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
div { |
||||
|
width: 120px; |
||||
|
height: 90px; |
||||
|
border-radius: 3px; |
||||
|
color: var(--ink); |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
div:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.primary { |
||||
|
background: var(--ink); |
||||
|
color: var(--white); |
||||
|
} |
||||
|
|
||||
|
.secondary { |
||||
|
background: var(--secondary); |
||||
|
} |
||||
|
|
||||
|
.tertiary { |
||||
|
background: var(--white); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,40 @@ |
|||||
|
<script> |
||||
|
import { FIELDS } from "constants/backend"; |
||||
|
import Block from "./Block.svelte"; |
||||
|
</script> |
||||
|
|
||||
|
<section> |
||||
|
<header> |
||||
|
<h2>Create New Table</h2> |
||||
|
<span>Before you can view your table, you need to set it up.</span> |
||||
|
</header> |
||||
|
|
||||
|
<div class="block-row"> |
||||
|
<h4>Fields</h4> |
||||
|
<div class="blocks"> |
||||
|
{#each Object.values(FIELDS) as field} |
||||
|
<Block primary title={field.name} icon={field.icon} /> |
||||
|
{/each} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- TODO: More block rows --> |
||||
|
|
||||
|
</section> |
||||
|
|
||||
|
<style> |
||||
|
h2 { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.block-row { |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
|
||||
|
.block-row .blocks { |
||||
|
display: grid; |
||||
|
grid-auto-flow: column; |
||||
|
grid-gap: 10px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue