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

Merge pull request #3520 from Budibase/feature/auto-screen-ui 

Autoscreen ux changes
This commit is contained in:
Peter Clement 2021-11-24 13:48:51 +00:00 committed by GitHub
parent 03753530cd dd3d6aa630
commit 4d18fa2360
3 changed files with 122 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,20 @@
<script> <script>
import { store } from "builderStore" import { store } from "builderStore"
import { tables } from "stores/backend" import { tables } from "stores/backend"
import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui" import {
ModalContent,
Body,
Detail,
Layout,
Icon,
ProgressCircle,
} from "@budibase/bbui"
import getTemplates from "builderStore/store/screenTemplates" import getTemplates from "builderStore/store/screenTemplates"
export let selectedScreens = [] export let selectedScreens = []
export let chooseModal export let chooseModal
export let save export let save
export let showProgressCircle = false
const blankScreen = "createFromScratch" const blankScreen = "createFromScratch"
$: blankSelected = selectedScreens?.length === 1 $: blankSelected = selectedScreens?.length === 1
@ -27,78 +34,108 @@
} }
</script> </script>
<ModalContent <div style="overflow-y: auto; max-height: 1000px">
title="Add screens" <ModalContent
confirmText="Add Screens" title="Add screens"
cancelText="Cancel" confirmText="Add Screens"
onConfirm={() => (autoSelected ? save() : chooseModal(1))} cancelText="Cancel"
disabled={!selectedScreens.length} onConfirm={() => (autoSelected ? save() : chooseModal(1))}
size="L" disabled={!selectedScreens.length}
> size="L"
<Body size="XS"
>Please select the screens you would like to add to your application.
Autogenerated screens come with CRUD functionality.</Body
> >
<Body size="XS"
<Layout noPadding gap="S"> >Please select the screens you would like to add to your application.
<Detail size="S">Blank screen</Detail> Autogenerated screens come with CRUD functionality.</Body
<div
class="item"
class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
on:click={() =>
toggleScreenSelection(templates.find(t => t.id === blankScreen))}
class:disabled={autoSelected}
> >
<div data-cy="blank-screen" class="content">
<Body size="S">Blank</Body>
</div>
<div style="color: var(--spectrum-global-color-green-600); float: right">
{#if selectedScreens.find(x => x.id === blankScreen)}
<Icon size="S" name="CheckmarkCircleOutline" />
{/if}
</div>
</div>
<Detail size="S">Autogenerated Screens</Detail>
{#each $tables.list.filter(table => table._id !== "ta_users") as table} <Layout noPadding gap="S">
<Detail size="S">Blank screen</Detail>
<div <div
class:disabled={blankSelected}
class:selected={selectedScreens.find(x => x.name.includes(table.name))}
on:click={() => toggleScreenSelection(table)}
class="item" class="item"
class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
on:click={() =>
toggleScreenSelection(templates.find(t => t.id === blankScreen))}
class:disabled={autoSelected}
> >
<div class="content"> <div data-cy="blank-screen" class="content">
{table.name} <div class="text">Blank</div>
</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.name.includes(table.name))} {#if selectedScreens.find(x => x.id === blankScreen)}
<Icon size="S" name="CheckmarkCircleOutline" /> <div class="checkmark-spacing">
<Icon size="S" name="CheckmarkCircleOutline" />
</div>
{/if} {/if}
</div> </div>
</div> </div>
{/each} <Detail size="S">Autogenerated Screens</Detail>
</Layout>
</ModalContent> {#each $tables.list.filter(table => table._id !== "ta_users") as table}
<div
class:disabled={blankSelected}
class:selected={selectedScreens.find(x =>
x.name.includes(table.name)
)}
on:click={() => toggleScreenSelection(table)}
class="item"
>
<div class="content">
<div class="text">{table.name}</div>
</div>
<div
style="color: var(--spectrum-global-color-green-600); float: right"
>
{#if selectedScreens.find(x => x.name.includes(table.name))}
<div class="checkmark-spacing">
<Icon size="S" name="CheckmarkCircleOutline" />
</div>
{/if}
</div>
</div>
{/each}
</Layout>
<div slot="footer">
{#if showProgressCircle}
<div class="footer-progress"><ProgressCircle size="S" /></div>
{/if}
</div>
</ModalContent>
</div>
<style> <style>
.disabled { .disabled {
opacity: 0.3; opacity: 0.3;
pointer-events: none; pointer-events: none;
} }
.checkmark-spacing {
margin-right: var(--spacing-m);
}
.content { .content {
letter-spacing: 0px; letter-spacing: 0px;
} }
.footer-progress {
margin-top: var(--spacing-s);
}
.text {
font-weight: 600;
margin-left: var(--spacing-m);
font-size: 14px;
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);
padding: var(--spectrum-alias-item-padding-s); padding: var(--spectrum-alias-item-padding-s);
background: var(--background); background: var(--spectrum-alias-background-color-primary);
transition: 0.3s all; transition: 0.3s all;
border: solid var(--spectrum-alias-border-color); border: 1px solid #e7e7e7;
border-radius: 2px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
border-width: 1px; border-width: 1px;
display: flex; display: flex;

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

@ -1,5 +1,5 @@
<script> <script>
import { ModalContent, Input } from "@budibase/bbui" import { ModalContent, Input, ProgressCircle } 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"
@ -7,6 +7,8 @@
export let url export let url
export let chooseModal export let chooseModal
export let save export let save
export let showProgressCircle = false
let routeError let routeError
let roleId = $selectedAccessRole || "BASIC" let roleId = $selectedAccessRole || "BASIC"
@ -48,4 +50,15 @@
bind:value={url} bind:value={url}
on:change={routeChanged} on:change={routeChanged}
/> />
<div slot="footer">
{#if showProgressCircle}
<div class="footer-progress"><ProgressCircle size="S" /></div>
{/if}
</div>
</ModalContent> </ModalContent>
<style>
.footer-progress {
margin-top: var(--spacing-s);
}
</style>

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

@ -12,32 +12,36 @@
let screenName = "" let screenName = ""
let url = "" let url = ""
let selectedScreens = [] let selectedScreens = []
let roleId = $selectedAccessRole || "BASIC" let roleId = $selectedAccessRole || "BASIC"
let showProgressCircle = false
let routeError let routeError
let createdScreens = [] let createdScreens = []
$: {
selectedScreens?.forEach(screen => { const createScreens = async () => {
createdScreens = [...createdScreens, screen.create()] for (let screen of selectedScreens) {
}) let test = screen.create()
createdScreens.push(test)
}
} }
const save = async () => { const save = async () => {
showProgressCircle = true
await createScreens()
for (let screen of createdScreens) { for (let screen of createdScreens) {
await saveScreens(screen) await saveScreens(screen)
} }
await store.actions.routing.fetch() await store.actions.routing.fetch()
selectedScreens = [] selectedScreens = []
createdScreens = []
screenName = "" screenName = ""
url = "" url = ""
showProgressCircle = false
} }
const saveScreens = async draftScreen => { const saveScreens = async draftScreen => {
let existingScreenCount = $store.screens.filter( let existingScreenCount = $store.screens.filter(
s => s.props._instanceName == draftScreen.props._instanceName s => s.props._instanceName == draftScreen.props._instanceName
).length ).length
if (existingScreenCount > 0) { if (existingScreenCount > 0) {
let oldUrlArr = draftScreen.routing.route.split("/") let oldUrlArr = draftScreen.routing.route.split("/")
oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}` oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
@ -86,6 +90,7 @@
selectedScreens = [] selectedScreens = []
screenName = "" screenName = ""
url = "" url = ""
createdScreens = []
}) })
export const showModal = () => { export const showModal = () => {
@ -109,9 +114,20 @@
</script> </script>
<Modal bind:this={newScreenModal}> <Modal bind:this={newScreenModal}>
<NewScreenModal bind:selectedScreens {save} {chooseModal} /> <NewScreenModal
bind:selectedScreens
{showProgressCircle}
{save}
{chooseModal}
/>
</Modal> </Modal>
<Modal bind:this={screenDetailsModal}> <Modal bind:this={screenDetailsModal}>
<ScreenDetailsModal bind:screenName bind:url {save} {chooseModal} /> <ScreenDetailsModal
bind:screenName
bind:url
{showProgressCircle}
{save}
{chooseModal}
/>
</Modal> </Modal>