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

Autoscreen fixes

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -25,8 +25,7 @@
       key: "layout",
     },
   ]
-
+  let newLayoutModal
-  let modal
   $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
 
   const navigate = ({ detail }) => {
@@ -93,14 +92,18 @@
         {#each $store.layouts as layout, idx (layout._id)}
           <Layout {layout} border={idx > 0} />
         {/each}
-        <Modal bind:this={modal}>
+        <Modal bind:this={newLayoutModal}>
           <NewLayoutModal />
         </Modal>
       </div>
     </Tab>
   </Tabs>
   <div class="add-button">
-    <Icon hoverable name="AddCircle" on:click={showModal()} />
+    <Icon
+      hoverable
+      name="AddCircle"
+      on:click={selected === "Layouts" ? newLayoutModal.show() : showModal()}
+    />
   </div>
 </div>
 

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -10,16 +10,39 @@
     ProgressCircle,
   } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
+  import { onDestroy } from "svelte"
+
+  import { createEventDispatcher } from "svelte"
 
-  export let selectedScreens = []
   export let chooseModal
   export let save
   export let showProgressCircle = false
+
+  let selectedScreens = []
+
   const blankScreen = "createFromScratch"
+  const dispatch = createEventDispatcher()
+
+  function setScreens() {
+    dispatch("save", {
+      screens: selectedScreens,
+    })
+  }
 
   $: blankSelected = selectedScreens?.length === 1
   $: autoSelected = selectedScreens?.length > 0 && !blankSelected
+
   let templates = getTemplates($store, $tables.list)
+
+  const confirm = async () => {
+    if (autoSelected) {
+      setScreens()
+      await save()
+    } else {
+      setScreens()
+      chooseModal(1)
+    }
+  }
   const toggleScreenSelection = table => {
     if (selectedScreens.find(s => s.table === table.name)) {
       selectedScreens = selectedScreens.filter(
@@ -32,14 +55,18 @@
       selectedScreens = [...partialTemplates, ...selectedScreens]
     }
   }
+
+  onDestroy(() => {
+    selectedScreens = []
+  })
 </script>
 
-<div style="overflow-y: auto; max-height: 1000px">
+<div>
   <ModalContent
     title="Add screens"
     confirmText="Add Screens"
     cancelText="Cancel"
-    onConfirm={() => (autoSelected ? save() : chooseModal(1))}
+    onConfirm={() => confirm()}
     disabled={!selectedScreens.length}
     size="L"
   >
@@ -70,29 +97,31 @@
           {/if}
         </div>
       </div>
-      <Detail size="S">Autogenerated Screens</Detail>
+      {#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}
+        {#each $tables.list.filter(table => table._id !== "ta_users") as table}
-        <div
-          class:disabled={blankSelected}
-          class:selected={selectedScreens.find(x => x.table === 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"
+            class:disabled={blankSelected}
+            class:selected={selectedScreens.find(x => x.table === table.name)}
+            on:click={() => toggleScreenSelection(table)}
+            class="item"
           >
-            {#if selectedScreens.find(x => x.table === table.name)}
+            <div class="content">
-              <div class="checkmark-spacing">
+              <div class="text">{table.name}</div>
-                <Icon size="S" name="CheckmarkCircleOutline" />
+            </div>
-              </div>
+            <div
-            {/if}
+              style="color: var(--spectrum-global-color-green-600); float: right"
+            >
+              {#if selectedScreens.find(x => x.table === table.name)}
+                <div class="checkmark-spacing">
+                  <Icon size="S" name="CheckmarkCircleOutline" />
+                </div>
+              {/if}
+            </div>
           </div>
-        </div>
+        {/each}
-      {/each}
+      {/if}
     </Layout>
     <div slot="footer">
       {#if showProgressCircle}

packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte

@@ -2,6 +2,7 @@
   import { ModalContent, Input, ProgressCircle } from "@budibase/bbui"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { selectedAccessRole, allScreens } from "builderStore"
+  import { onDestroy } from "svelte"
 
   export let screenName
   export let url
@@ -32,6 +33,11 @@
         screen.routing.roleId === roleId
     )
   }
+
+  onDestroy(() => {
+    screenName = ""
+    url = ""
+  })
 </script>
 
 <ModalContent

packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte

@@ -4,7 +4,6 @@
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { Modal } from "@budibase/bbui"
   import { store, selectedAccessRole, allScreens } from "builderStore"
-  import { onDestroy } from "svelte"
   import analytics, { Events } from "analytics"
 
   let newScreenModal
@@ -34,7 +33,6 @@
     for (let screen of createdScreens) {
       await saveScreens(screen)
     }
-
     await store.actions.routing.fetch()
     selectedScreens = []
     createdScreens = []
@@ -42,6 +40,7 @@
     url = ""
     showProgressCircle = false
   }
+
   const saveScreens = async draftScreen => {
     let existingScreenCount = $store.screens.filter(
       s => s.props._instanceName == draftScreen.props._instanceName
@@ -90,17 +89,14 @@
     )
   }
 
-  onDestroy(() => {
-    selectedScreens = []
-    screenName = ""
-    url = ""
-    createdScreens = []
-  })
-
   export const showModal = () => {
     newScreenModal.show()
   }
 
+  const setScreens = evt => {
+    selectedScreens = evt.detail.screens
+  }
+
   const chooseModal = index => {
     /*
     0 = newScreenModal
@@ -119,7 +115,7 @@
 
 <Modal bind:this={newScreenModal}>
   <NewScreenModal
-    bind:selectedScreens
+    on:save={setScreens}
     {showProgressCircle}
     {save}
     {chooseModal}