From a3bd28d99fb3849160853f26bf9541b57f936703 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 8 Oct 2020 15:46:29 +0100
Subject: [PATCH] screen templates - backup before merge from master

---
 .../builder/src/builderStore/store/index.js   |  30 +----
 .../screenTemplates/emptyContainerScreen.js   |  22 ++++
 .../screenTemplates/emptyNewRecordScreen.js   |  22 ++++
 .../emptyRecordDetailScreen.js                |  22 ++++
 .../store/screenTemplates/index.js            |   6 +
 .../store/screenTemplates/newRecordScreen.js  |   8 +-
 .../screenTemplates/recordDetailScreen.js     |   8 +-
 .../CreateScreen/ChooseTemplate.svelte        |  62 ---------
 .../CreateScreen/CreateScreen.svelte          |  50 --------
 .../CreateScreen/NewScreen.svelte             |  58 +++++----
 .../CreateScreen/NoTemplate.svelte            | 118 ------------------
 .../userInterface/FrontendNavigatePane.svelte |   4 +-
 12 files changed, 120 insertions(+), 290 deletions(-)
 create mode 100644 packages/builder/src/builderStore/store/screenTemplates/emptyContainerScreen.js
 create mode 100644 packages/builder/src/builderStore/store/screenTemplates/emptyNewRecordScreen.js
 create mode 100644 packages/builder/src/builderStore/store/screenTemplates/emptyRecordDetailScreen.js
 delete mode 100644 packages/builder/src/components/userInterface/CreateScreen/ChooseTemplate.svelte
 delete mode 100644 packages/builder/src/components/userInterface/CreateScreen/CreateScreen.svelte
 delete mode 100644 packages/builder/src/components/userInterface/CreateScreen/NoTemplate.svelte

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index dadba69e44..87a2cb3118 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -153,35 +153,13 @@ const _saveScreen = async (store, s, screen) => {
   return s
 }
 
-const createScreen = store => ({
-  screenName,
-  route,
-  baseComponent,
-  screen,
-}) => {
+const createScreen = store => screen => {
   store.update(state => {
-    const rootComponent =
-      state.components[
-        baseComponent || "@budibase/standard-components/container"
-      ]
-
-    const newScreen = screen || {
-      description: "",
-      url: "",
-      _css: "",
-      props: createProps(rootComponent).props,
-      route,
-    }
-    newScreen.name = newScreen.props._id
-    if (screenName) {
-      newScreen.props._instanceName = screenName
-    }
-
-    state.currentPreviewItem = newScreen
-    state.currentComponentInfo = newScreen.props
+    state.currentPreviewItem = screen
+    state.currentComponentInfo = screen.props
     state.currentFrontEndType = "screen"
 
-    _saveScreen(store, state, newScreen)
+    _saveScreen(store, state, screen)
 
     return state
   })
diff --git a/packages/builder/src/builderStore/store/screenTemplates/emptyContainerScreen.js b/packages/builder/src/builderStore/store/screenTemplates/emptyContainerScreen.js
new file mode 100644
index 0000000000..c567c31026
--- /dev/null
+++ b/packages/builder/src/builderStore/store/screenTemplates/emptyContainerScreen.js
@@ -0,0 +1,22 @@
+export default {
+  name: `Create from Scratch`,
+  create: () => createScreen(),
+}
+
+const createScreen = () => ({
+  props: {
+    _id: "",
+    _component: "@budibase/standard-components/container",
+    _styles: {
+      normal: {},
+      hover: {},
+      active: {},
+      selected: {},
+    },
+    type: "div",
+    _children: [],
+    _instanceName: "",
+  },
+  route: "",
+  name: "screen-id",
+})
diff --git a/packages/builder/src/builderStore/store/screenTemplates/emptyNewRecordScreen.js b/packages/builder/src/builderStore/store/screenTemplates/emptyNewRecordScreen.js
new file mode 100644
index 0000000000..7dfca668a4
--- /dev/null
+++ b/packages/builder/src/builderStore/store/screenTemplates/emptyNewRecordScreen.js
@@ -0,0 +1,22 @@
+export default {
+  name: `New Record (Empty)`,
+  create: () => createScreen(),
+}
+
+const createScreen = () => ({
+  props: {
+    _id: "",
+    _component: "@budibase/standard-components/recorddetail",
+    _styles: {
+      normal: {},
+      hover: {},
+      active: {},
+      selected: {},
+    },
+    _children: [],
+    _instanceName: "",
+    model: "",
+  },
+  route: "",
+  name: "screen-id",
+})
diff --git a/packages/builder/src/builderStore/store/screenTemplates/emptyRecordDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/emptyRecordDetailScreen.js
new file mode 100644
index 0000000000..412d8692bb
--- /dev/null
+++ b/packages/builder/src/builderStore/store/screenTemplates/emptyRecordDetailScreen.js
@@ -0,0 +1,22 @@
+export default {
+  name: `Record Detail (Empty)`,
+  create: () => createScreen(),
+}
+
+const createScreen = () => ({
+  props: {
+    _id: "",
+    _component: "@budibase/standard-components/recorddetail",
+    _styles: {
+      normal: {},
+      hover: {},
+      active: {},
+      selected: {},
+    },
+    _children: [],
+    _instanceName: "",
+    model: "",
+  },
+  route: "",
+  name: "screen-id",
+})
diff --git a/packages/builder/src/builderStore/store/screenTemplates/index.js b/packages/builder/src/builderStore/store/screenTemplates/index.js
index 6825b8b973..a6896ab1cd 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/index.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/index.js
@@ -1,11 +1,17 @@
 import newRecordScreen from "./newRecordScreen"
 import recordDetailScreen from "./recordDetailScreen"
+import emptyNewRecordScreen from "./emptyNewRecordScreen"
+import emptyContainerScreen from "./emptyContainerScreen"
+import emptyRecordDetailScreen from "./emptyRecordDetailScreen"
 import { generateNewIdsForComponent } from "../../storeUtils"
 import { uuid } from "builderStore/uuid"
 
 const allTemplates = models => [
+  emptyContainerScreen,
   ...newRecordScreen(models),
+  emptyNewRecordScreen,
   ...recordDetailScreen(models),
+  emptyRecordDetailScreen,
 ]
 
 // allows us to apply common behaviour to all create() functions
diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRecordScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRecordScreen.js
index 4c3466ca1c..b4ceeeeff6 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRecordScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRecordScreen.js
@@ -1,6 +1,6 @@
 export default function(models) {
   return models.map(model => ({
-    name: `New ${model.name}`,
+    name: `New Record - ${model.name}`,
     create: () => createScreen(model),
   }))
 }
@@ -8,16 +8,14 @@ export default function(models) {
 const createScreen = model => ({
   props: {
     _id: "f684460e-1f79-42b4-8ffd-1f708bca93ed",
-    _component: "@budibase/standard-components/container",
+    _component: "@budibase/standard-components/newrecord",
     _styles: {
       normal: {},
       hover: {},
       active: {},
       selected: {},
     },
-    className: "",
-    onLoad: [],
-    type: "div",
+    model: model._id,
     _children: [
       {
         _id: "7d1d6b43-b444-46a5-a75c-267fd6b5baf6",
diff --git a/packages/builder/src/builderStore/store/screenTemplates/recordDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/recordDetailScreen.js
index 252e0f5e20..afda29f6cc 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/recordDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/recordDetailScreen.js
@@ -1,6 +1,6 @@
 export default function(models) {
   return models.map(model => ({
-    name: `New ${model.name}`,
+    name: `Record Detail - ${model.name}`,
     create: () => createScreen(model),
   }))
 }
@@ -15,9 +15,7 @@ const createScreen = model => ({
       active: {},
       selected: {},
     },
-    className: "",
-    onLoad: [],
-    type: "div",
+    model: model._id,
     _children: [
       {
         _id: "7d1d6b43-b444-46a5-a75c-267fd6b5baf6",
@@ -39,6 +37,6 @@ const createScreen = model => ({
     ],
     _instanceName: `${model.name} Detail`,
   },
-  route: `/${model.name}/new`,
+  route: `/${model.name}/:id`,
   name: "screen-id",
 })
diff --git a/packages/builder/src/components/userInterface/CreateScreen/ChooseTemplate.svelte b/packages/builder/src/components/userInterface/CreateScreen/ChooseTemplate.svelte
deleted file mode 100644
index a0b1e88ac8..0000000000
--- a/packages/builder/src/components/userInterface/CreateScreen/ChooseTemplate.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import { store, backendUiStore } from "builderStore"
-  import { Input, Select, Button, Spacer } from "@budibase/bbui"
-  import getTemplates from "builderStore/store/screenTemplates"
-  import { createEventDispatcher } from "svelte"
-  const dispatch = createEventDispatcher()
-
-  let screens
-  let template
-
-  $: templates = getTemplates($store, $backendUiStore.models)
-
-  const save = () => {
-    if (!template) return
-    if (template === "none") {
-      dispatch("next")
-      return
-    }
-
-    store.createScreen({
-      screen: template.create(),
-    })
-
-    dispatch("finished")
-  }
-
-  const cancel = () => {
-    dispatch("finished")
-  }
-</script>
-
-<div data-cy="new-screen-dialog">
-
-  <div class="bb-margin-xl">
-    <label>Choose a Template</label>
-    <Select bind:value={template} secondary>
-      <option value="">Choose an Option</option>
-      <option value="none">No Template</option>
-      {#if templates}
-        {#each templates as template}
-          <option value={template}>{template.name}</option>
-        {/each}
-      {/if}
-    </Select>
-  </div>
-</div>
-
-<Spacer extraLarge />
-
-<div data-cy="create-screen-footer" class="modal-footer">
-  <Button secondary medium on:click={cancel}>Cancel</Button>
-  <Button blue medium on:click={save} disabled={!template}>
-    {template === 'none' ? 'Next' : 'Create Screen'}
-  </Button>
-</div>
-
-<style>
-  .modal-footer {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/CreateScreen/CreateScreen.svelte b/packages/builder/src/components/userInterface/CreateScreen/CreateScreen.svelte
deleted file mode 100644
index 4a5ec9f69d..0000000000
--- a/packages/builder/src/components/userInterface/CreateScreen/CreateScreen.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { Modal, Spacer } from "@budibase/bbui"
-  import ChooseTemplate from "./ChooseTemplate.svelte"
-  import NoTemplate from "./NoTemplate.svelte"
-  import { slide, fade } from "svelte/transition"
-
-  export const show = () => {
-    dialog.show()
-  }
-
-  const finished = () => {
-    dialog.hide()
-    template = undefined
-  }
-
-  let dialog
-  let template
-</script>
-
-<Modal bind:this={dialog} minWidth="500px">
-  <h2>New Screen</h2>
-  <Spacer extraLarge />
-
-  {#if template === 'none'}
-    <div transition:slide={{ delay: 0, duration: 300 }}>
-      <NoTemplate on:finished={finished} />
-    </div>
-  {:else}
-    <div transition:fade={{ delay: 0, duration: 100 }}>
-      <ChooseTemplate
-        on:finished={finished}
-        on:next={() => (template = 'none')} />
-    </div>
-  {/if}
-</Modal>
-
-<style>
-  h2 {
-    font-size: var(--font-size-xl);
-    margin: 0;
-    font-family: var(--font-sans);
-    font-weight: 600;
-  }
-
-  .modal-footer {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/CreateScreen/NewScreen.svelte b/packages/builder/src/components/userInterface/CreateScreen/NewScreen.svelte
index 50aa935146..9a48ffe530 100644
--- a/packages/builder/src/components/userInterface/CreateScreen/NewScreen.svelte
+++ b/packages/builder/src/components/userInterface/CreateScreen/NewScreen.svelte
@@ -1,6 +1,7 @@
 <script>
   import { store, backendUiStore } from "builderStore"
   import { Input, Button, Spacer, Select, Modal } from "@budibase/bbui"
+  import getTemplates from "builderStore/store/screenTemplates"
   import { createEventDispatcher } from "svelte"
   import { some } from "lodash/fp"
 
@@ -11,17 +12,13 @@
     dialog.show()
   }
 
-  const finished = () => {
-    dialog.hide()
-    template = undefined
-  }
-
   let screens
   let name = ""
   let routeError
   let baseComponent = CONTAINER
   let dialog
-  let template
+  let templateIndex = 0
+  let draftScreen
 
   $: templates = getTemplates($store, $backendUiStore.models)
 
@@ -31,6 +28,24 @@
     .filter(componentDefinition => componentDefinition.baseComponent)
     .map(c => c._component)
 
+  const templateChanged = ev => {
+    const newTemplateIndex = ev.target.value
+    if (!newTemplateIndex) return
+
+    draftScreen = templates[newTemplateIndex].create()
+    if (draftScreen.props._instanceName) {
+      name = draftScreen.props._instanceName
+    }
+
+    if (draftScreen.props._component) {
+      baseComponent = draftScreen.props._component
+    }
+
+    if (draftScreen.route) {
+      route = draftScreen.route
+    }
+  }
+
   const save = () => {
     if (!route) {
       routeError = "Url is required"
@@ -44,20 +59,21 @@
 
     if (routeError) return false
 
-    store.createScreen({
-      screenName: name,
-      route,
-      baseComponent,
-    })
+    draftScreen.props._instanceName = name
+    draftScreen.props._component = baseComponent
+    draftScreen.route = route
 
+    store.createScreen(draftScreen)
+
+    finished()
+  }
+
+  const finished = () => {
+    templateIndex = 0
     name = ""
     route = ""
     baseComponent = CONTAINER
-    dispatch("finished")
-  }
-
-  const cancel = () => {
-    dispatch("finished")
+    dialog.hide()
   }
 
   const routeNameExists = route => {
@@ -90,12 +106,10 @@
 
   <div class="bb-margin-xl">
     <label>Choose a Template</label>
-    <Select bind:value={template} secondary>
-      <option value="">Choose an Option</option>
-      <option value="none">No Template</option>
+    <Select bind:value={templateIndex} secondary on:change={templateChanged}>
       {#if templates}
-        {#each templates as template}
-          <option value={template}>{template.name}</option>
+        {#each templates as template, index}
+          <option value={index}>{template.name}</option>
         {/each}
       {/if}
     </Select>
@@ -127,7 +141,7 @@
   <Spacer extraLarge />
 
   <div data-cy="create-screen-footer" class="modal-footer">
-    <Button secondary medium on:click={cancel}>Cancel</Button>
+    <Button secondary medium on:click={finished}>Cancel</Button>
     <Button blue medium on:click={save}>Create Screen</Button>
   </div>
 
diff --git a/packages/builder/src/components/userInterface/CreateScreen/NoTemplate.svelte b/packages/builder/src/components/userInterface/CreateScreen/NoTemplate.svelte
deleted file mode 100644
index 6ddb0ae951..0000000000
--- a/packages/builder/src/components/userInterface/CreateScreen/NoTemplate.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { Input, Button, Spacer, Select } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { some } from "lodash/fp"
-
-  const dispatch = createEventDispatcher()
-  const CONTAINER = "@budibase/standard-components/container"
-
-  let screens
-  let name = ""
-  let routeError
-  let baseComponent = CONTAINER
-
-  $: route = !route && $store.screens.length === 0 ? "*" : route
-
-  $: baseComponents = Object.values($store.components)
-    .filter(componentDefinition => componentDefinition.baseComponent)
-    .map(c => c._component)
-
-  const save = () => {
-    if (!route) {
-      routeError = "Url is required"
-    } else {
-      if (routeNameExists(route)) {
-        routeError = "This url is already taken"
-      } else {
-        routeError = ""
-      }
-    }
-
-    if (routeError) return false
-
-    store.createScreen({
-      screenName: name,
-      route,
-      baseComponent,
-    })
-
-    name = ""
-    route = ""
-    baseComponent = CONTAINER
-    dispatch("finished")
-  }
-
-  const cancel = () => {
-    dispatch("finished")
-  }
-
-  const routeNameExists = route => {
-    return $store.screens.some(
-      screen => screen.route.toLowerCase() === route.toLowerCase()
-    )
-  }
-
-  const routeChanged = event => {
-    if (!event.target.value.startsWith("/")) {
-      route = "/" + event.target.value
-    }
-  }
-
-  const componentShortName = fullname => {
-    const parts = fullname.split("/")
-    const shortName = parts[parts.length - 1]
-    // make known ones a bit prettier
-    if (shortName === "container") return "Container"
-    if (shortName === "recorddetail") return "Record Detail"
-    if (shortName === "newrecord") return "New Record"
-    return shortName
-  }
-</script>
-
-<Spacer extraLarge />
-
-<div data-cy="new-screen-dialog">
-  <div class="bb-margin-xl">
-    <Input label="Name" bind:value={name} />
-  </div>
-
-  <div class="bb-margin-xl">
-    <Input
-      label="Url"
-      error={routeError}
-      bind:value={route}
-      on:change={routeChanged} />
-  </div>
-
-  <div class="bb-margin-xl">
-    <label>Screen Type</label>
-    <Select bind:value={baseComponent} secondary>
-      {#each baseComponents as component}
-        <option value={component}>{componentShortName(component)}</option>
-      {/each}
-    </Select>
-  </div>
-
-</div>
-
-<Spacer extraLarge />
-
-<div data-cy="create-screen-footer" class="modal-footer">
-  <Button secondary medium on:click={cancel}>Cancel</Button>
-  <Button blue medium on:click={save}>Create Screen</Button>
-</div>
-
-<style>
-  h2 {
-    font-size: var(--font-size-xl);
-    margin: 0;
-    font-family: var(--font-sans);
-    font-weight: 600;
-  }
-
-  .modal-footer {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 265630b88b..41e077ecd6 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -3,7 +3,7 @@
   import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
-  import CreateScreen from "components/userInterface/CreateScreen/CreateScreen.svelte"
+  import NewScreen from "components/userInterface/CreateScreen/NewScreen.svelte"
 
   const newScreen = () => {
     newScreenPicker.show()
@@ -22,7 +22,7 @@
   <ComponentsHierarchy screens={$store.screens} />
 </div>
 
-<CreateScreen bind:this={newScreenPicker} />
+<NewScreen bind:this={newScreenPicker} />
 
 <style>
   .newscreen {