Merge pull request #1267 from Budibase/collapsible-routes

Collapsible routes

packages/builder/src/builderStore/index.js

@@ -2,7 +2,6 @@ import { getFrontendStore } from "./store/frontend"
 import { getBackendUiStore } from "./store/backend"
 import { getAutomationStore } from "./store/automation"
 import { getHostingStore } from "./store/hosting"
-
 import { getThemeStore } from "./store/theme"
 import { derived, writable } from "svelte/store"
 import analytics from "analytics"
@@ -66,3 +65,5 @@ export const initialise = async () => {
     console.log(err)
   }
 }
+
+export const screenSearchString = writable(null)

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte

@@ -1,11 +1,15 @@
 <script>
-  import { goto } from "@sveltech/routify"
+  import {
-  import { store, selectedComponent, currentAsset } from "builderStore"
+    store,
+    selectedComponent,
+    currentAsset,
+    screenSearchString,
+  } from "builderStore"
   import instantiateStore from "./dragDropStore"
-
   import ComponentTree from "./ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
+  import { get } from "svelte/store"
 
   const ROUTE_NAME_MAP = {
     "/": {
@@ -21,33 +25,66 @@
   export let indent
   export let border
 
+  let routeManuallyOpened = false
   $: selectedScreen = $currentAsset
+  $: allScreens = getAllScreens(route)
+  $: filteredScreens = getFilteredScreens(allScreens, $screenSearchString)
+  $: hasSearchMatch = $screenSearchString && filteredScreens.length > 0
+  $: noSearchMatch = $screenSearchString && !filteredScreens.length
+  $: routeSelected =
+    route.subpaths[selectedScreen?.routing?.route] !== undefined
+  $: routeOpened = routeManuallyOpened || routeSelected || hasSearchMatch
 
   const changeScreen = screenId => {
     store.actions.screens.select(screenId)
   }
+
+  const getAllScreens = route => {
+    let screens = []
+    Object.entries(route.subpaths).forEach(([route, subpath]) => {
+      Object.entries(subpath.screens).forEach(([role, id]) => {
+        screens.push({ id, route, role })
+      })
+    })
+    return screens
+  }
+
+  const getFilteredScreens = (screens, searchString) => {
+    return screens.filter(
+      screen => !searchString || screen.route.includes(searchString)
+    )
+  }
+
+  const toggleManuallyOpened = () => {
+    if (get(screenSearchString)) {
+      return
+    }
+    routeManuallyOpened = !routeManuallyOpened
+  }
 </script>
 
+{#if !noSearchMatch}
   <NavItem
     icon="ri-folder-line"
     text={path}
-  opened={true}
+    on:click={toggleManuallyOpened}
+    opened={routeOpened}
     {border}
     withArrow={route.subpaths} />
 
-{#each Object.entries(route.subpaths) as [url, subpath]}
+  {#if routeOpened}
-  {#each Object.entries(subpath.screens) as [role, screenId]}
+    {#each filteredScreens as screen (screen.id)}
       <NavItem
         icon="ri-artboard-2-line"
         indentLevel={indent || 1}
-      selected={$store.selectedScreenId === screenId}
+        selected={$store.selectedScreenId === screen.id}
-      opened={$store.selectedScreenId === screenId}
+        opened={$store.selectedScreenId === screen.id}
-      text={ROUTE_NAME_MAP[url]?.[role] || url}
+        text={ROUTE_NAME_MAP[screen.route]?.[screen.role] || screen.route}
         withArrow={route.subpaths}
-      on:click={() => changeScreen(screenId)}>
+        on:click={() => changeScreen(screen.id)}>
-      <ScreenDropdownMenu {screenId} />
+        <ScreenDropdownMenu screenId={screen.id} />
       </NavItem>
-    {#if selectedScreen?._id === screenId}
+      {#if selectedScreen?._id === screen.id}
         <ComponentTree
           level={1}
           components={selectedScreen.props._children}
@@ -55,4 +92,5 @@
           {dragDropStore} />
       {/if}
     {/each}
-{/each}
+  {/if}
+{/if}

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte

@@ -56,7 +56,7 @@
 </script>
 
 <div class="root">
-  {#each paths as path, idx}
+  {#each paths as path, idx (path)}
     <PathTree border={idx > 0} {path} route={routes[path]} />
   {/each}
 

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

@@ -1,19 +1,19 @@
 <script>
   import { onMount } from "svelte"
-  import { goto, params, url } from "@sveltech/routify"
+  import { goto, params } from "@sveltech/routify"
   import {
     store,
     allScreens,
-    currentAsset,
     backendUiStore,
     selectedAccessRole,
+    screenSearchString,
   } from "builderStore"
   import { FrontendTypes } from "constants"
   import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
   import Layout from "components/design/NavigationPanel/Layout.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
-  import { Modal, Switcher, Select } from "@budibase/bbui"
+  import { Modal, Switcher, Select, Input } from "@budibase/bbui"
 
   const tabs = [
     {
@@ -85,6 +85,16 @@
             <option value={role._id}>{role.name}</option>
           {/each}
         </Select>
+        <div class="search-screens">
+          <Input
+            extraThin
+            placeholder="Enter a route to search"
+            label="Search Screens"
+            bind:value={$screenSearchString} />
+          <i
+            class="ri-close-line"
+            on:click={() => ($screenSearchString = null)} />
+        </div>
       </div>
       <div class="nav-items-container">
         <ComponentNavigationTree />
@@ -127,6 +137,30 @@
   }
 
   .role-select {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
     margin-bottom: var(--spacing-m);
+    gap: var(--spacing-m);
+  }
+
+  .search-screens {
+    position: relative;
+  }
+  .search-screens i {
+    right: 2px;
+    bottom: 2px;
+    position: absolute;
+    box-sizing: border-box;
+    padding: var(--spacing-s);
+    border-left: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
+    color: var(--grey-7);
+    font-size: 14px;
+    line-height: 15px;
+    top: auto;
   }
 </style>