iterate over package app instances
This commit is contained in:
Martin McKeaveney
parent
5dffa5c7ce
commit
d905677faf
|
|
@ -20,13 +20,13 @@
|
|||
<BackendNav />
|
||||
</div>
|
||||
<div class="content">
|
||||
{#if activeNav === 'database'}
|
||||
<!-- {#if activeNav === 'database'} -->
|
||||
<Database />
|
||||
{:else if activeNav === 'actions'}
|
||||
<!-- {:else if activeNav === 'actions'}
|
||||
<ActionsAndTriggers />
|
||||
{:else if activeNav === 'access levels'}
|
||||
<AccessLevels />
|
||||
{/if}
|
||||
{/if} -->
|
||||
</div>
|
||||
<div class="nav">
|
||||
<SchemaManagementDrawer />
|
||||
|
|
@ -43,9 +43,6 @@
|
|||
.content {
|
||||
flex: 1 1 auto;
|
||||
margin: 80px 60px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,13 @@
|
|||
import { fade } from "svelte/transition"
|
||||
import { SettingsIcon, PreviewIcon, HelpIcon } from "./common/Icons/"
|
||||
|
||||
const TABS = {
|
||||
BACKEND: "backend",
|
||||
FRONTEND: "frontend",
|
||||
}
|
||||
|
||||
let selectedTab = TABS.BACKEND
|
||||
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
@ -19,37 +26,37 @@
|
|||
color="var(--slate)"
|
||||
hoverColor="var(--secondary75)"/> -->
|
||||
<span
|
||||
class:active={$store.isBackend}
|
||||
class:active={selectedTab === TABS.BACKEND}
|
||||
class="topnavitem"
|
||||
on:click={store.showBackend}>
|
||||
on:click={() => selectedTab = TABS.BACKEND}>
|
||||
Backend
|
||||
</span>
|
||||
<span
|
||||
class:active={!$store.isBackend}
|
||||
class:active={selectedTab === TABS.FRONTEND}
|
||||
class="topnavitem"
|
||||
on:click={store.showFrontend}>
|
||||
on:click={() => selectedTab = TABS.FRONTEND}>
|
||||
Frontend
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="toprightnav">
|
||||
<span
|
||||
class:active={!$store.isBackend}
|
||||
class:active={selectedTab === TABS.FRONTEND}
|
||||
class="topnavitemright"
|
||||
on:click={store.showFrontend}>
|
||||
on:click={() => selectedTab === TABS.FRONTEND}>
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
<span
|
||||
class:active={!$store.isBackend}
|
||||
class:active={selectedTab === TABS.FRONTEND}
|
||||
class="topnavitemright"
|
||||
on:click={store.showFrontend}>
|
||||
on:click={() => selectedTab === TABS.FRONTEND}>
|
||||
<PreviewIcon />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
{#if $store.isBackend}
|
||||
{#if selectedTab === TABS.BACKEND}
|
||||
<div in:fade out:fade>
|
||||
<BackendRoot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ export const getStore = () => {
|
|||
currentComponentProps: null,
|
||||
currentNodeIsNew: false,
|
||||
errors: [],
|
||||
isBackend: true,
|
||||
hasAppPackage: false,
|
||||
accessLevels: { version: 0, levels: [] },
|
||||
currentNode: null,
|
||||
|
|
@ -66,6 +65,61 @@ export const getStore = () => {
|
|||
|
||||
const store = writable(initial)
|
||||
|
||||
// store.api = {
|
||||
// appDefinition: {
|
||||
// create: () => {},
|
||||
// },
|
||||
// records: {
|
||||
// create: () => {},
|
||||
// update: () => {},
|
||||
// delete: () => {},
|
||||
// },
|
||||
// indexes: {
|
||||
// create: () => {},
|
||||
// update: () => {},
|
||||
// delete: () => {},
|
||||
// },
|
||||
// pages: {
|
||||
// create: () => {},
|
||||
// update: () => {},
|
||||
// delete: () => {},
|
||||
// },
|
||||
// screens: {
|
||||
// create: () => {},
|
||||
// select: () => {},
|
||||
// rename: () => {}
|
||||
// },
|
||||
// accessLevels: {
|
||||
// create: () => {},
|
||||
// update: () => {},
|
||||
// delete: () => {},
|
||||
// },
|
||||
// users: {
|
||||
// create: () => {},
|
||||
// update: () => {},
|
||||
// delete: () => {},
|
||||
// },
|
||||
// actions: {
|
||||
// update: () => {},
|
||||
// delete: () => {}
|
||||
// },
|
||||
// triggers: {
|
||||
// create: () => {},
|
||||
// update: () => {},
|
||||
// delete: () => {},
|
||||
// },
|
||||
// stylesheets: {
|
||||
// create: () => {},
|
||||
// update: () => {},
|
||||
// delete: () => {},
|
||||
// },
|
||||
// components: {
|
||||
// create: () => {},
|
||||
// update: () => {},
|
||||
// delete: () => {},
|
||||
// }
|
||||
// }
|
||||
|
||||
store.initialise = initialise(store, initial)
|
||||
store.newChildRecord = newRecord(store, false)
|
||||
store.newRootRecord = newRecord(store, true)
|
||||
|
|
@ -94,8 +148,8 @@ export const getStore = () => {
|
|||
store.addStylesheet = addStylesheet(store)
|
||||
store.removeStylesheet = removeStylesheet(store)
|
||||
store.savePage = savePage(store)
|
||||
store.showFrontend = showFrontend(store)
|
||||
store.showBackend = showBackend(store)
|
||||
// store.showFrontend = showFrontend(store)
|
||||
// store.showBackend = showBackend(store)
|
||||
store.showSettings = showSettings(store)
|
||||
store.useAnalytics = useAnalytics(store)
|
||||
store.createGeneratedComponents = createGeneratedComponents(store)
|
||||
|
|
@ -172,6 +226,7 @@ const initialise = (store, initial) => async () => {
|
|||
initial.builtins = [getBuiltin("##builtin/screenslot")]
|
||||
initial.actions = values(pkg.appDefinition.actions)
|
||||
initial.triggers = pkg.appDefinition.triggers
|
||||
initial.appInstances = pkg.application.instances
|
||||
|
||||
if (!!initial.hierarchy && !isEmpty(initial.hierarchy)) {
|
||||
initial.hierarchy = constructHierarchy(initial.hierarchy)
|
||||
|
|
@ -185,9 +240,9 @@ const initialise = (store, initial) => async () => {
|
|||
}
|
||||
|
||||
const showSettings = store => () => {
|
||||
store.update(s => {
|
||||
s.showSettings = !s.showSettings
|
||||
return s
|
||||
store.update(state => {
|
||||
state.showSettings = !state.showSettings
|
||||
return state
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -198,20 +253,6 @@ const useAnalytics = store => () => {
|
|||
})
|
||||
}
|
||||
|
||||
const showBackend = store => () => {
|
||||
store.update(s => {
|
||||
s.isBackend = true
|
||||
return s
|
||||
})
|
||||
}
|
||||
|
||||
const showFrontend = store => () => {
|
||||
store.update(s => {
|
||||
s.isBackend = false
|
||||
return s
|
||||
})
|
||||
}
|
||||
|
||||
const newRecord = (store, useRoot) => () => {
|
||||
store.update(s => {
|
||||
s.currentNodeIsNew = true
|
||||
|
|
@ -377,10 +418,10 @@ const saveAction = store => (newAction, isNew, oldAction = null) => {
|
|||
}
|
||||
|
||||
const deleteAction = store => action => {
|
||||
store.update(s => {
|
||||
s.actions = filter(a => a.name !== action.name)(s.actions)
|
||||
saveBackend(s)
|
||||
return s
|
||||
store.update(state => {
|
||||
state.actions = state.actions.filter(a => a.name !== action.name);
|
||||
saveBackend(state);
|
||||
return state;
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
|
||||
<style>
|
||||
.select-container {
|
||||
padding-bottom: 10px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--secondary50);
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
max-width: 300px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
@ -43,7 +43,6 @@
|
|||
.arrow {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 30px;
|
||||
|
|
|
|||
|
|
@ -1,52 +1,60 @@
|
|||
<script>
|
||||
import Select from "../../common/Select.svelte"
|
||||
import ActionButton from "../../common/ActionButton.svelte"
|
||||
|
||||
let pages = [1, 2, 3]
|
||||
|
||||
export let data = []
|
||||
export let data = [
|
||||
{ name: "Joe", inStock: true },
|
||||
{ name: "Mike", inStock: false },
|
||||
{ name: "Martin", inStock: true },
|
||||
]
|
||||
export let headers = ["name", "inStock"]
|
||||
export let pageSize = 10
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<h4 class="budibase__title--3">Shoe database</h4>
|
||||
<div class="table-controls">
|
||||
<Select />
|
||||
<ActionButton primary>Create new record</ActionButton>
|
||||
</div>
|
||||
<table class="uk-table">
|
||||
<caption>Shoe Database</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table Heading</th>
|
||||
<th>Table Heading</th>
|
||||
<th>Table Heading</th>
|
||||
<th>Edit</th>
|
||||
{#each headers as header}
|
||||
<th>{header}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Table Footer</td>
|
||||
<td>Table Footer</td>
|
||||
<td>Table Footer</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Table Data</td>
|
||||
<td>Table Data</td>
|
||||
<td>Table Data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table Data</td>
|
||||
<td>Table Data</td>
|
||||
<td>Table Data</td>
|
||||
</tr>
|
||||
{#each data as row}
|
||||
<tr>
|
||||
<td>
|
||||
<i class="ri-more-line" />
|
||||
</td>
|
||||
{#each headers as header}
|
||||
<td>{row[header]}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<button>Previous</button>
|
||||
<button>Next</button>
|
||||
{#each data as page}
|
||||
<!-- {#each data as page}
|
||||
<button>{page}</button>
|
||||
{/each}
|
||||
{/each} -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
table {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
thead {
|
||||
|
|
@ -56,8 +64,16 @@
|
|||
thead th {
|
||||
color: var(--button-text);
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
import { store } from "../builderStore"
|
||||
import HierarchyRow from "./HierarchyRow.svelte"
|
||||
import DatabasesList from "./DatabasesList.svelte"
|
||||
import DropdownButton from "../common/DropdownButton.svelte"
|
||||
import UsersList from "./UsersList.svelte"
|
||||
import { hierarchy as hierarchyFunctions } from "../../../core/src"
|
||||
import NavItem from "./NavItem.svelte"
|
||||
import getIcon from "../common/icon"
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
<div class="components-list-container">
|
||||
<div class="nav-group-header">
|
||||
<div class="hierarchy-title">Databases</div>
|
||||
<DropdownButton iconName="plus" actions={databaseManagementActions} />
|
||||
<i class="ri-add-line" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -89,11 +89,12 @@
|
|||
<div class="components-list-container">
|
||||
<div class="nav-group-header">
|
||||
<div class="hierarchy-title">Users</div>
|
||||
<DropdownButton iconName="plus" actions={userManagementActions} />
|
||||
<i class="ri-add-line" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hierarchy-items-container">
|
||||
<UsersList />
|
||||
<!-- {#each $store.hierarchy.children as record}
|
||||
<HierarchyRow node={record} type="record" />
|
||||
{/each} -->
|
||||
|
|
|
|||
|
|
@ -3,30 +3,12 @@
|
|||
import getIcon from "../common/icon"
|
||||
import { CheckIcon } from "../common/Icons"
|
||||
|
||||
const getPage = (s, name) => {
|
||||
const props = s.pages[name]
|
||||
return { name, props }
|
||||
}
|
||||
|
||||
$: databases = $store.app
|
||||
|
||||
const pages = [
|
||||
{
|
||||
title: "Main",
|
||||
id: "main",
|
||||
},
|
||||
{
|
||||
title: "Login",
|
||||
id: "unauthenticated",
|
||||
},
|
||||
]
|
||||
|
||||
store.setCurrentPage("main")
|
||||
$: instances = $store.appInstances
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<ul>
|
||||
{#each pages as { title, id }}
|
||||
{#each $store.appInstances as { id, name }}
|
||||
<li>
|
||||
<span class="icon">
|
||||
{#if id === $store.currentPageName}
|
||||
|
|
@ -37,7 +19,7 @@
|
|||
<button
|
||||
class:active={id === $store.currentPageName}
|
||||
on:click={() => store.setCurrentPage(id)}>
|
||||
{title}
|
||||
{name}
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@
|
|||
<div>
|
||||
<div
|
||||
on:click={() => store.selectExistingNode(node.nodeId)}
|
||||
class="budibase__nav-item"
|
||||
class="budibase__nav-item hierarchy-item"
|
||||
class:capitalized={type === "record"}
|
||||
style="padding-left: {20 + level * 20}px"
|
||||
class:selected={navActive}>
|
||||
<i class={ICON_MAP[type]} />
|
||||
|
|
@ -42,3 +43,14 @@
|
|||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hierarchy-item {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.capitalized {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@
|
|||
.nav-group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<script>
|
||||
import { store } from "../builderStore"
|
||||
import getIcon from "../common/icon"
|
||||
import { CheckIcon } from "../common/Icons"
|
||||
|
||||
const getPage = (s, name) => {
|
||||
const props = s.pages[name]
|
||||
return { name, props }
|
||||
}
|
||||
|
||||
const pages = [
|
||||
{
|
||||
title: "Joe",
|
||||
id: "joe",
|
||||
},
|
||||
{
|
||||
title: "Mike",
|
||||
id: "mike",
|
||||
},
|
||||
{
|
||||
title: "Martin",
|
||||
id: "martin",
|
||||
},
|
||||
]
|
||||
|
||||
store.setCurrentPage("main")
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<ul>
|
||||
{#each pages as { title, id }}
|
||||
<li>
|
||||
<i class="ri-user-4-line" />
|
||||
<button
|
||||
class:active={id === $store.currentPageName}
|
||||
on:click={() => store.setCurrentPage(id)}>
|
||||
{title}
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
padding-bottom: 10px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--secondary50);
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding-left: 1.8rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0 0 0 6px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-family: Roboto;
|
||||
font-size: 0.8rem;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue