deletion and error handling of layouts

packages/builder/src/builderStore/store/frontend.js

@@ -257,6 +257,23 @@ export const getFrontendStore = () => {
         const storeContents = get(store)
         return storeContents.layouts.find(layout => layout._id === layoutId)
       },
+      delete: async layoutToDelete => {
+        const response = await api.delete(
+          `/api/layouts/${layoutToDelete._id}/${layoutToDelete._rev}`
+        )
+
+        if (response.status !== 200) {
+          const json = await response.json()
+          throw new Error(json.message)
+        }
+
+        store.update(state => {
+          state.layouts = state.layouts.filter(
+            layout => layout._id !== layoutToDelete._id
+          )
+          return state
+        })
+      },
     },
     components: {
       select: component => {

packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte

@@ -1,15 +0,0 @@
-<script>
-  import { store, currentAsset } from "builderStore"
-  import { Select } from "@budibase/bbui"
-
-  export let layout
-</script>
-
-<div>
-  <Select bind:value={layout} extraThin secondary>
-    <option value="">Choose an option</option>
-    {#each $store.layouts as layout}
-      <option value={layout._id}>{layout.name}</option>
-    {/each}
-  </Select>
-</div>

packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  import { store } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+
+  export let layoutId
+
+  let confirmDeleteDialog
+  let dropdown
+  let anchor
+
+  $: layout = $store.layouts.find(layout => layout._id === layoutId)
+
+  const deleteLayout = async () => {
+    try {
+      await store.actions.layouts.delete(layout)
+      notifier.success(`Layout ${layout.name} deleted successfully.`)
+    } catch (err) {
+      notifier.danger(`Error deleting layout: ${err.message}`)
+    }
+  }
+</script>
+
+<div bind:this={anchor} on:click|stopPropagation>
+  <div class="icon" on:click={() => dropdown.show()}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu bind:this={dropdown} {anchor} align="left">
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={() => confirmDeleteDialog.show()} />
+    </DropdownContainer>
+  </DropdownMenu>
+</div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Deletion"
+  body={'Are you sure you wish to delete this layout?'}
+  okText="Delete Layout"
+  onOk={deleteLayout} />
+
+<style>
+  .icon i {
+    font-size: 16px;
+  }
+</style>

packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -3,7 +3,6 @@
   import { store, allScreens } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import EditScreenLayoutModal from "./EditScreenLayoutModal.svelte"
   import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -19,14 +18,6 @@
     store.actions.screens.delete(screen)
     store.actions.routing.fetch()
   }
-
-  async function saveScreen() {
-    try {
-      await store.actions.screens.save(screen)
-    } catch (err) {
-      notifier.danger("Error saving page.")
-    }
-  }
 </script>
 
 <div bind:this={anchor} on:click|stopPropagation>

packages/builder/src/components/userInterface/Layout.svelte

@@ -2,6 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { FrontendTypes } from "constants"
   import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
+  import LayoutDropdownMenu from "./ComponentNavigationTree/LayoutDropdownMenu.svelte"
   import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
   import NavItem from "components/common/NavItem.svelte"
   import { last } from "lodash/fp"
@@ -28,7 +29,9 @@
   withArrow
   selected={$store.currentComponentInfo?._id === layout.props._id}
   opened={$store.currentAssetId === layout._id}
-  on:click={selectLayout} />
+  on:click={selectLayout}>
+  <LayoutDropdownMenu layoutId={layout._id} />
+</NavItem>
 
 {#if $store.currentAssetId === layout._id && layout.props._children}
   <ComponentTree

packages/builder/src/pages/[application]/design/layouts/index.svelte

@@ -2,6 +2,8 @@
   import { store } from "builderStore"
   import { goto } from "@sveltech/routify"
 
-  // TODO: refactor
+  // Go to first layout
   $goto(`../${$store.layouts[0]?._id}`)
 </script>
+
+<!-- routify:options index=false -->