ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Initial commit of screen workflow updates

master
Dean 5 years ago
parent
ac58e20660
commit
5801eb886c
4 changed files with 256 additions and 110 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 153
      packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
  2. 134
      packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
  3. 28
      packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
  4. 51
      packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte

153
packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
View File

@ -0,0 +1,153 @@
<script>
import { store, selectedAccessRole } from "builderStore"
import { ModalContent, Layout, Select } from "@budibase/bbui"
import { tables, datasources, roles } from "stores/backend"
import getTemplates from "builderStore/store/screenTemplates"
import ICONS from "../../backend/DatasourceNavigator/icons"
import { IntegrationNames } from "constants"
export let onCancel
export let onConfirm
let selectedScreens = []
let screenAccessRole = $selectedAccessRole + ""
const toggleScreenSelection = table => {
if (selectedScreens.find(s => s.table === table.name)) {
selectedScreens = selectedScreens.filter(
screen => screen.table !== table.name
)
} else {
let partialTemplates = getTemplates($store, $tables.list).filter(
template => template.table === table.name
)
selectedScreens = [...partialTemplates, ...selectedScreens]
}
}
const confirmDatasourceSelection = async () => {
await onConfirm({
templates: selectedScreens,
screenAccessRole,
})
}
$: filteredSources = $datasources.list.reduce((acc, datasource) => {
acc["restSources"] = !acc["restSources"] ? [] : acc["restSources"]
acc["otherSources"] = !acc["otherSources"] ? [] : acc["otherSources"]
if (datasource.source === IntegrationNames.REST) {
acc["restSources"].push(datasource)
} else {
acc["otherSources"].push(datasource)
}
return acc
}, {})
</script>
<ModalContent
title="Create CRUD Screens"
confirmText="Confirm"
cancelText="Back"
onConfirm={confirmDatasourceSelection}
{onCancel}
disabled={!selectedScreens.length}
size="L"
>
<Layout noPadding gap="XS">
{#each filteredSources.otherSources as datasource}
<div class="data-source-header">
<div class="datasource-icon">
<svelte:component
this={ICONS[datasource.source]}
height="24"
width="24"
/>
</div>
<div class="content">
<div class="text">{datasource.name}</div>
</div>
</div>
{#if Array.isArray(datasource.entities)}
{#each datasource.entities.filter(table => table._id !== "ta_users") as table}
<div
class="data-source-entry"
class:selected={selectedScreens.find(x => x.table === table.name)}
on:click={() => toggleScreenSelection(table)}
>
<svg
width="16px"
height="16px"
class="spectrum-Icon"
style="color: white"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-Table" />
</svg>
{table.name}
</div>
{/each}
{/if}
{#if datasource["entities"] && !Array.isArray(datasource.entities)}
{#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
<div
class="data-source-entry"
class:selected={selectedScreens.find(
x => x.table === datasource.entities[table_key].name
)}
on:click={() =>
toggleScreenSelection(datasource.entities[table_key])}
>
<svg
width="16px"
height="16px"
class="spectrum-Icon"
style="color: white"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-Table" />
</svg>
{datasource.entities[table_key].name}
</div>
{/each}
{/if}
{/each}
<Select
bind:value={screenAccessRole}
label="Screen access"
getOptionLabel={role => role.name}
getOptionValue={role => role._id}
getOptionColor={role => role.color}
options={$roles}
/>
</Layout>
</ModalContent>
<style>
.data-source-header {
display: flex;
align-items: center;
}
.data-source-header .content {
padding: var(--spectrum-alias-item-padding-l);
}
.data-source-entry {
cursor: pointer;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-primary);
transition: 0.3s all;
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
box-sizing: border-box;
border-width: 1px;
display: flex;
align-items: center;
}
.data-source-entry:hover,
.selected {
background: var(--spectrum-alias-background-color-tertiary);
}
</style>

134
packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
View File

@ -1,43 +1,17 @@
<script> <script>
import { store } from "builderStore"
import { tables } from "stores/backend" import { tables } from "stores/backend"
import { import { ModalContent, Body, Layout, Icon } from "@budibase/bbui"
ModalContent,
Body,
Detail,
Layout,
Icon,
ProgressCircle,
} from "@budibase/bbui"
import getTemplates from "builderStore/store/screenTemplates"
export let onConfirm export let onConfirm
export let onCancel export let onCancel
export let showProgressCircle = false
const blankScreen = "createFromScratch" let autoCreateModeKey = "autoCreate"
let blankScreenModeKey = "blankScreen"
let selectedScreens = [] let selectedScreenMode
let templates = getTemplates($store, $tables.list)
$: blankSelected = selectedScreens?.length === 1
$: autoSelected = selectedScreens?.length > 0 && !blankSelected
const toggleScreenSelection = table => {
if (selectedScreens.find(s => s.table === table.name)) {
selectedScreens = selectedScreens.filter(
screen => screen.table !== table.name
)
} else {
let partialTemplates = getTemplates($store, $tables.list).filter(
template => template.table === table.name
)
selectedScreens = [...partialTemplates, ...selectedScreens]
}
}
const confirmScreenSelection = async () => { const confirmScreenSelection = async () => {
await onConfirm(selectedScreens) await onConfirm(selectedScreenMode)
} }
</script> </script>
@ -48,70 +22,74 @@
cancelText="Cancel" cancelText="Cancel"
onConfirm={confirmScreenSelection} onConfirm={confirmScreenSelection}
{onCancel} {onCancel}
disabled={!selectedScreens.length} disabled={!selectedScreenMode}
size="L" size="L"
> >
<Body size="S"> <Body size="S">Add a blank screen</Body>
Please select the screens you would like to add to your application.
Autogenerated screens come with CRUD functionality.
</Body>
<Layout noPadding gap="S"> <Layout noPadding gap="S">
<Detail size="S">Blank screen</Detail>
<div <div
class="item" class="screen-type item"
class:selected={selectedScreens.find(x => x.id.includes(blankScreen))} class:selected={selectedScreenMode == blankScreenModeKey}
on:click={() => on:click={() => {
toggleScreenSelection(templates.find(t => t.id === blankScreen))} selectedScreenMode = blankScreenModeKey
class:disabled={autoSelected} }}
> >
<div data-cy="blank-screen" class="content"> <div data-cy="blank-screen" class="content screen-type-wrap">
<div class="text">Blank</div> <Icon name="WebPage" />
<span class="text">Blank</span>
</div> </div>
<div <div
style="color: var(--spectrum-global-color-green-600); float: right" style="color: var(--spectrum-global-color-green-600); float: right"
> >
{#if selectedScreens.find(x => x.id === blankScreen)} {#if selectedScreenMode == blankScreenModeKey}
<div class="checkmark-spacing"> <div class="checkmark-spacing">
<Icon size="S" name="CheckmarkCircleOutline" /> <Icon size="S" name="CheckmarkCircle" />
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
{#if $tables.list.filter(table => table._id !== "ta_users").length > 0}
<Detail size="S">Autogenerated Screens</Detail>
{#each $tables.list.filter(table => table._id !== "ta_users") as table} <Body size="S">
<div Add autogenerated screens with CRUD functionality to get a working app
class:disabled={blankSelected} quickly! (Requires a data source)
class:selected={selectedScreens.find(x => x.table === table.name)} </Body>
on:click={() => toggleScreenSelection(table)}
class="item" <div
> class="screen-type item"
<div class="content"> class:selected={selectedScreenMode == autoCreateModeKey}
<div class="text">{table.name}</div> on:click={() => {
</div> selectedScreenMode = autoCreateModeKey
<div }}
style="color: var(--spectrum-global-color-green-600); float: right" class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
> .length}
{#if selectedScreens.find(x => x.table === table.name)} >
<div class="checkmark-spacing"> <div data-cy="autogenerated-screens" class="content screen-type-wrap">
<Icon size="S" name="CheckmarkCircleOutline" /> <Icon name="WebPages" />
</div> <span class="text">Autogenerated Screens</span>
{/if} </div>
<div
style="color: var(--spectrum-global-color-green-600); float: right"
>
{#if selectedScreenMode == autoCreateModeKey}
<div class="checkmark-spacing">
<Icon size="S" name="CheckmarkCircle" />
</div> </div>
</div> {/if}
{/each} </div>
{/if} </div>
</Layout> </Layout>
<div slot="footer">
{#if showProgressCircle}
<div class="footer-progress"><ProgressCircle size="S" /></div>
{/if}
</div>
</ModalContent> </ModalContent>
</div> </div>
<style> <style>
.screen-type.item {
padding: var(--spectrum-alias-item-padding-xl);
}
.screen-type-wrap {
display: flex;
flex-direction: row;
align-items: center;
}
.disabled { .disabled {
opacity: 0.3; opacity: 0.3;
pointer-events: none; pointer-events: none;
@ -119,22 +97,15 @@
.checkmark-spacing { .checkmark-spacing {
margin-right: var(--spacing-m); margin-right: var(--spacing-m);
} }
.content { .content {
letter-spacing: 0px; letter-spacing: 0px;
} }
.footer-progress {
margin-top: var(--spacing-s);
}
.text { .text {
font-weight: 600; font-weight: 600;
margin-left: var(--spacing-m); margin-left: var(--spacing-m);
font-size: 14px; font-size: 14px;
text-transform: capitalize; text-transform: capitalize;
} }
.item { .item {
cursor: pointer; cursor: pointer;
grid-gap: var(--spectrum-alias-grid-margin-xsmall); grid-gap: var(--spectrum-alias-grid-margin-xsmall);
@ -150,7 +121,6 @@
align-items: center; align-items: center;
height: 60px; height: 60px;
} }
.item:hover, .item:hover,
.selected { .selected {
background: var(--spectrum-alias-background-color-tertiary); background: var(--spectrum-alias-background-color-tertiary);

28
packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
View File

@ -1,18 +1,18 @@
<script> <script>
import { ModalContent, Input, ProgressCircle } from "@budibase/bbui" import { ModalContent, Input, Select } from "@budibase/bbui"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import { selectedAccessRole, allScreens } from "builderStore" import { selectedAccessRole, allScreens } from "builderStore"
import { get } from "svelte/store" import { get } from "svelte/store"
import { roles } from "stores/backend"
export let onConfirm export let onConfirm
export let onCancel export let onCancel
export let showProgressCircle = false
export let screenName
export let screenUrl export let screenUrl
export let confirmText = "Continue" export let confirmText = "Continue"
let routeError let routeError
let touched = false let touched = false
let screenAccessRole = $selectedAccessRole + ""
const routeChanged = event => { const routeChanged = event => {
if (!event.detail.startsWith("/")) { if (!event.detail.startsWith("/")) {
@ -38,8 +38,8 @@
const confirmScreenDetails = async () => { const confirmScreenDetails = async () => {
await onConfirm({ await onConfirm({
screenName,
screenUrl, screenUrl,
screenAccessRole,
}) })
} }
</script> </script>
@ -51,24 +51,24 @@
onConfirm={confirmScreenDetails} onConfirm={confirmScreenDetails}
{onCancel} {onCancel}
cancelText={"Back"} cancelText={"Back"}
disabled={!screenName || !screenUrl || routeError || !touched} disabled={!screenAccessRole || !screenUrl || routeError || !touched}
> >
<Input label="Name" bind:value={screenName} /> <!-- <Input label="Name" bind:value={screenName} /> -->
<Input <Input
label="URL" label="URL"
error={routeError} error={routeError}
bind:value={screenUrl} bind:value={screenUrl}
on:change={routeChanged} on:change={routeChanged}
/> />
<div slot="footer"> <Select
{#if showProgressCircle} bind:value={screenAccessRole}
<div class="footer-progress"><ProgressCircle size="S" /></div> label="Screen access"
{/if} getOptionLabel={role => role.name}
</div> getOptionValue={role => role._id}
getOptionColor={role => role.color}
options={$roles}
/>
</ModalContent> </ModalContent>
<style> <style>
.footer-progress {
margin-top: var(--spacing-s);
}
</style> </style>

51
packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
View File

@ -1,11 +1,14 @@
<script> <script>
import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte" import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte"
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
import DatasourceModal from "components/design/NavigationPanel/DatasourceModal.svelte"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import { Modal, notifications } from "@budibase/bbui" import { Modal, notifications } from "@budibase/bbui"
import { store, selectedAccessRole } from "builderStore" import { store, selectedAccessRole } from "builderStore"
import analytics, { Events } from "analytics" import analytics, { Events } from "analytics"
import { get } from "svelte/store" import { get } from "svelte/store"
import getTemplates from "builderStore/store/screenTemplates"
import { tables } from "stores/backend"
let pendingScreen let pendingScreen
let showProgressCircle = false let showProgressCircle = false
@ -13,6 +16,7 @@
// Modal refs // Modal refs
let newScreenModal let newScreenModal
let screenDetailsModal let screenDetailsModal
let datasourceModal
// External handler to show the screen wizard // External handler to show the screen wizard
export const showModal = () => { export const showModal = () => {
@ -24,7 +28,7 @@
} }
// Creates an array of screens, checking and sanitising their URLs // Creates an array of screens, checking and sanitising their URLs
const createScreens = async screens => { const createScreens = async ({ screens, screenAccessRole }) => {
if (!screens?.length) { if (!screens?.length) {
return return
} }
@ -46,7 +50,9 @@
screen.routing.route = sanitizeUrl(screen.routing.route) screen.routing.route = sanitizeUrl(screen.routing.route)
// Use the currently selected role // Use the currently selected role
screen.routing.roleId = get(selectedAccessRole) || "BASIC" screen.routing.roleId = screenAccessRole
? screenAccessRole
: get(selectedAccessRole) || "BASIC"
// Create the screen // Create the screen
await store.actions.screens.save(screen) await store.actions.screens.save(screen)
@ -98,37 +104,54 @@
} }
// Handler for NewScreenModal // Handler for NewScreenModal
const confirmScreenSelection = async templates => { const confirmScreenSelection = async mode => {
// Handle template selection if (mode == "autoCreate") {
datasourceModal.show()
} else {
let templates = getTemplates($store, $tables.list)
const blankScreenTemplate = templates.find(
t => t.id === "createFromScratch"
)
pendingScreen = blankScreenTemplate.create()
screenDetailsModal.show()
}
}
// Handler for DatasourceModal
const confirmScreenDatasources = async ({ templates, screenAccessRole }) => {
console.log("selected ", screenAccessRole)
console.log("global ", $selectedAccessRole)
// // Handle template selection
if (templates?.length > 1) { if (templates?.length > 1) {
// Autoscreens, so create immediately // Autoscreens, so create immediately
const screens = templates.map(template => template.create()) const screens = templates.map(template => template.create())
await createScreens(screens) await createScreens({ screens, screenAccessRole })
} else {
// Empty screen, so proceed to the next modal
pendingScreen = templates[0].create()
screenDetailsModal.show()
} }
} }
// Handler for ScreenDetailsModal // Handler for ScreenDetailsModal
const confirmScreenDetails = async ({ screenName, screenUrl }) => { const confirmScreenDetails = async ({ screenUrl, screenAccessRole }) => {
if (!pendingScreen) { if (!pendingScreen) {
return return
} }
pendingScreen.props._instanceName = screenName
pendingScreen.routing.route = screenUrl pendingScreen.routing.route = screenUrl
await createScreens([pendingScreen]) await createScreens({ screens: [pendingScreen], screenAccessRole })
} }
</script> </script>
<Modal bind:this={newScreenModal}> <Modal bind:this={newScreenModal}>
<NewScreenModal onConfirm={confirmScreenSelection} {showProgressCircle} /> <NewScreenModal onConfirm={confirmScreenSelection} />
</Modal>
<Modal bind:this={datasourceModal}>
<DatasourceModal
onConfirm={confirmScreenDatasources}
onCancel={() => newScreenModal.show()}
/>
</Modal> </Modal>
<Modal bind:this={screenDetailsModal}> <Modal bind:this={screenDetailsModal}>
<ScreenDetailsModal <ScreenDetailsModal
{showProgressCircle}
onConfirm={confirmScreenDetails} onConfirm={confirmScreenDetails}
onCancel={() => newScreenModal.show()} onCancel={() => newScreenModal.show()}
/> />

Write Preview
Loading…
Cancel
Save