NewScreen - use bbui input

- use input error message
- screen name no longer needs to be unique

packages/builder/src/components/common/ConfirmDialog.svelte

@@ -29,8 +29,9 @@
   }
 
   const ok = () => {
+    const result = onOk()
+    if (result === false) return
     hide()
-    onOk()
   }
 </script>
 

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

@@ -22,11 +22,8 @@
   let layoutComponent
   let screens
   let name = ""
-  let nameError = ""
   let routeError
 
-  let saveAttempted = false
-
   $: layoutComponents = Object.values($store.components).filter(
     componentDefinition => componentDefinition.container
   )
@@ -40,33 +37,21 @@
   $: route = !route && $store.screens.length === 0 ? "*" : route
 
   const save = () => {
-    saveAttempted = true
-
-    if (name.length === 0) {
-      nameError = "Name is required"
-    } else {
-      if (screenNameExists(name)) {
-        nameError = "This name is already taken"
-      } else {
-        nameError = ""
-      }
-    }
-
-    if (route.length === 0) {
+    if (!route) {
       routeError = "Url is required"
     } else {
-      if (routeNameExists(name)) {
+      if (routeNameExists(route)) {
         routeError = "This url is already taken"
       } else {
         routeError = ""
       }
     }
 
-    const isValid = !routeError && !nameError
-
-    if (!isValid) return
+    if (routeError) return false
 
     store.createScreen(name, route, layoutComponent._component)
+    name = ""
+    route = ""
     dialog.hide()
   }
 
@@ -74,12 +59,6 @@
     dialog.hide()
   }
 
-  const screenNameExists = name => {
-    return $store.screens.some(
-      screen => screen.name.toLowerCase() === name.toLowerCase()
-    )
-  }
-
   const routeNameExists = route => {
     return $store.screens.some(
       screen => screen.route.toLowerCase() === route.toLowerCase()
@@ -102,7 +81,7 @@
 
   <div>
     <div class="uk-margin">
-      <Input label="Name" error={nameError} bind:value={name} />
+      <Input label="Name" bind:value={name} />
     </div>
 
     <div class="uk-margin">
@@ -115,7 +94,7 @@
 
     <div class="uk-margin">
       <label>Layout Component</label>
-      <Select bind:value={layoutComponent}>
+      <Select bind:value={layoutComponent} secondary>
         {#each layoutComponents as { _component, name }}
           <option value={_component}>{name}</option>
         {/each}