From 35f4121d446aa0bde175dcd41f7fb869ec2742ab Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 23 Nov 2021 20:14:28 +0000
Subject: [PATCH] some autoscreen ux fixes
---
.../NavigationPanel/NewScreenModal.svelte | 129 +++++++++++-------
.../NavigationPanel/ScreenDetailsModal.svelte | 15 +-
.../NavigationPanel/ScreenWizard.svelte | 35 +++--
3 files changed, 123 insertions(+), 56 deletions(-)
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index e7c9ef6ff2..1483517c20 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -1,13 +1,20 @@
<script>
import { store } from "builderStore"
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"
export let selectedScreens = []
export let chooseModal
export let save
-
+ export let showProgressCircle = false
const blankScreen = "createFromScratch"
$: blankSelected = selectedScreens?.length === 1
@@ -27,78 +34,108 @@
}
</script>
-<ModalContent
- title="Add screens"
- confirmText="Add Screens"
- cancelText="Cancel"
- onConfirm={() => (autoSelected ? save() : chooseModal(1))}
- 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
+<div style="overflow-y: auto; max-height: 1000px">
+ <ModalContent
+ title="Add screens"
+ confirmText="Add Screens"
+ cancelText="Cancel"
+ onConfirm={() => (autoSelected ? save() : chooseModal(1))}
+ disabled={!selectedScreens.length}
+ size="L"
>
-
- <Layout noPadding gap="S">
- <Detail size="S">Blank screen</Detail>
- <div
- class="item"
- class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
- on:click={() =>
- toggleScreenSelection(templates.find(t => t.id === blankScreen))}
- class:disabled={autoSelected}
+ <Body size="XS"
+ >Please select the screens you would like to add to your application.
+ Autogenerated screens come with CRUD functionality.</Body
>
- <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
- class:disabled={blankSelected}
- class:selected={selectedScreens.find(x => x.name.includes(table.name))}
- on:click={() => toggleScreenSelection(table)}
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">
- {table.name}
+ <div data-cy="blank-screen" class="content">
+ <div class="text">Blank</div>
</div>
<div
style="color: var(--spectrum-global-color-green-600); float: right"
>
- {#if selectedScreens.find(x => x.name.includes(table.name))}
- <Icon size="S" name="CheckmarkCircleOutline" />
+ {#if selectedScreens.find(x => x.id === blankScreen)}
+ <div class="checkmark-spacing">
+ <Icon size="S" name="CheckmarkCircleOutline" />
+ </div>
{/if}
</div>
</div>
- {/each}
- </Layout>
-</ModalContent>
+ <Detail size="S">Autogenerated Screens</Detail>
+
+ {#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>
.disabled {
opacity: 0.3;
pointer-events: none;
}
+ .checkmark-spacing {
+ margin-right: var(--spacing-m);
+ }
.content {
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 {
cursor: pointer;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s);
- background: var(--background);
+ background: var(--spectrum-alias-background-color-primary);
transition: 0.3s all;
- border: solid var(--spectrum-alias-border-color);
- border-radius: 2px;
+ border: 1px solid #e7e7e7;
+ border-radius: 4px;
box-sizing: border-box;
border-width: 1px;
display: flex;
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
index f67f363ce8..e5cc839045 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
@@ -1,5 +1,5 @@
<script>
- import { ModalContent, Input } from "@budibase/bbui"
+ import { ModalContent, Input, ProgressCircle } from "@budibase/bbui"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import { selectedAccessRole, allScreens } from "builderStore"
@@ -7,6 +7,8 @@
export let url
export let chooseModal
export let save
+ export let showProgressCircle = false
+
let routeError
let roleId = $selectedAccessRole || "BASIC"
@@ -48,4 +50,15 @@
bind:value={url}
on:change={routeChanged}
/>
+ <div slot="footer">
+ {#if showProgressCircle}
+ <div class="footer-progress"><ProgressCircle size="S" /></div>
+ {/if}
+ </div>
</ModalContent>
+
+<style>
+ .footer-progress {
+ margin-top: var(--spacing-s);
+ }
+</style>
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
index 7018bc2ed4..a86f0c2d75 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
@@ -12,34 +12,39 @@
let screenName = ""
let url = ""
let selectedScreens = []
-
let roleId = $selectedAccessRole || "BASIC"
-
+ let showProgressCircle = false
let routeError
let createdScreens = []
- $: {
- selectedScreens?.forEach(screen => {
- createdScreens = [...createdScreens, screen.create()]
- })
+
+ const createScreens = async () => {
+ for (let screen of selectedScreens) {
+ let test = screen.create()
+ createdScreens.push(test)
+ }
}
const save = async () => {
+ showProgressCircle = true
+ await createScreens()
for (let screen of createdScreens) {
await saveScreens(screen)
}
await store.actions.routing.fetch()
selectedScreens = []
+ createdScreens = []
screenName = ""
url = ""
+ showProgressCircle = false
}
const saveScreens = async draftScreen => {
let existingScreenCount = $store.screens.filter(
s => s.props._instanceName == draftScreen.props._instanceName
).length
-
if (existingScreenCount > 0) {
let oldUrlArr = draftScreen.routing.route.split("/")
+ console.log(oldUrlArr)
oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
draftScreen.routing.route = oldUrlArr.join("/")
}
@@ -86,6 +91,7 @@
selectedScreens = []
screenName = ""
url = ""
+ createdScreens = []
})
export const showModal = () => {
@@ -109,9 +115,20 @@
</script>
<Modal bind:this={newScreenModal}>
- <NewScreenModal bind:selectedScreens {save} {chooseModal} />
+ <NewScreenModal
+ bind:selectedScreens
+ {showProgressCircle}
+ {save}
+ {chooseModal}
+ />
</Modal>
<Modal bind:this={screenDetailsModal}>
- <ScreenDetailsModal bind:screenName bind:url {save} {chooseModal} />
+ <ScreenDetailsModal
+ bind:screenName
+ bind:url
+ {showProgressCircle}
+ {save}
+ {chooseModal}
+ />
</Modal>