From ffc7e14bb28b5a433a4436ced18472ae00fcfd3e Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 2 Dec 2020 13:41:00 +0000
Subject: [PATCH] fix preview save

---
 .../builder/src/builderStore/store/frontend.js | 12 +++++++-----
 .../userInterface/FrontendNavigatePane.svelte  | 18 ++++++++++++------
 .../design/layouts/[layout]/_fallback.svelte   |  4 ++++
 .../design/layouts/{[layout] => }/index.svelte |  0
 .../design/screens/[screen]/_layout.svelte     |  8 +-------
 5 files changed, 24 insertions(+), 18 deletions(-)
 create mode 100644 packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte
 rename packages/builder/src/pages/[application]/design/layouts/{[layout] => }/index.svelte (100%)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 3932b04ce2..ce1aebf7d9 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -198,10 +198,11 @@ export const getFrontendStore = () => {
     preview: {
       saveSelected: async () => {
         const state = get(store)
+        const selectedAsset = get(currentAsset)
         if (state.currentFrontEndType !== FrontendTypes.LAYOUT) {
-          await store.actions.screens.save(currentAsset)
+          await store.actions.screens.save(selectedAsset)
         }
-        await store.actions.layouts.save(currentAsset)
+        await store.actions.layouts.save(selectedAsset)
       },
     },
     layouts: {
@@ -236,9 +237,10 @@ export const getFrontendStore = () => {
         await Promise.all(cssPromises)
       },
       save: async layout => {
-        const response = await api.post(`/api/layouts`, {
-          ...layout,
-        })
+        const layoutToSave = cloneDeep(layout)
+        delete layoutToSave._css
+
+        const response = await api.post(`/api/layouts`, layoutToSave)
 
         const json = await response.json()
 
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 6fd5bb8bb6..19abbea1af 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte"
+  import { goto } from "@sveltech/routify"
   import { store, currentAsset } from "builderStore"
   import { FrontendTypes } from "constants"
   import api from "builderStore/api"
@@ -12,17 +13,22 @@
   const tabs = [
     {
       title: "Screens",
-      key: "SCREENS",
+      key: "screens",
     },
     {
       title: "Layouts",
-      key: "LAYOUTS",
+      key: "layouts",
     },
   ]
 
   let modal
   let routes = {}
-  let tab = "SCREENS"
+  let tab = "screens"
+
+  function reroute({ detail }) {
+    if (!detail) return
+    $goto(`./${detail.heading.key}`)
+  }
 
   onMount(() => {
     store.actions.routing.fetch()
@@ -30,8 +36,8 @@
 </script>
 
 <div class="title">
-  <Switcher headings={tabs} bind:value={tab}>
-    {#if tab === 'SCREENS'}
+  <Switcher headings={tabs} bind:value={tab} on:change={reroute}>
+    {#if tab === 'screens'}
       <i
         on:click={modal.show}
         data-cy="new-screen"
@@ -46,7 +52,7 @@
       <Modal bind:this={modal}>
         <NewScreenModal />
       </Modal>
-    {:else if tab === 'LAYOUTS'}
+    {:else if tab === 'layouts'}
       <Layout />
     {/if}
 
diff --git a/packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte b/packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte
new file mode 100644
index 0000000000..7d853a5eef
--- /dev/null
+++ b/packages/builder/src/pages/[application]/design/layouts/[layout]/_fallback.svelte
@@ -0,0 +1,4 @@
+<script>
+  // import { goto } from "@sveltech/routify"
+  // $goto("../layout/main")
+</script>
diff --git a/packages/builder/src/pages/[application]/design/layouts/[layout]/index.svelte b/packages/builder/src/pages/[application]/design/layouts/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/design/layouts/[layout]/index.svelte
rename to packages/builder/src/pages/[application]/design/layouts/index.svelte
diff --git a/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte
index e3456c2dd8..7cd5a4b86d 100644
--- a/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/screens/[screen]/_layout.svelte
@@ -8,12 +8,6 @@
   const currentScreenId = decodeURI($params.screen)
   const validScreen = $allScreens.some(screen => screen._id === currentScreenId)
 
-  console.log({ 
-    validScreen, 
-    currentScreenId,
-    componentIds
-  })
-
   if (!validScreen) {
     // Go to main layout if URL set to invalid screen
     console.error("Invalid screen", $params.screen)
@@ -28,7 +22,7 @@
     if ($leftover) {
       console.log("leftover", $params.screen)
       // Get the correct screen children.
-      const screenChildren = allScreens.find(
+      const screenChildren = $allScreens.find(
         screen =>
           screen._id === $params.screen ||
           screen._id === decodeURIComponent($params.screen)