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

Autoscreen ux changes
5 years ago · 4d18fa2360
3 changed files with 122 additions and 56 deletions
--- 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;
--- 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>
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
@ -12,32 +12,36 @@
  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("/")
      oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
@ -86,6 +90,7 @@
    selectedScreens = []
    screenName = ""
    url = ""
+    createdScreens = []
  })

  export const showModal = () => {
@ -109,9 +114,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>