screen templates - convert spaces to "-" in urls

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -1,3 +1,6 @@
+import urlSanitize from "./urlSanitize"
+import { rowListUrl } from "./rowListScreen"
+
 export default function(tables) {
   return tables.map(table => {
     const fields = Object.keys(table.schema)
@@ -11,6 +14,7 @@ export default function(tables) {
 }
 
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
+export const newRowUrl = table => urlSanitize(`/${table.name}/new`)
 
 const createScreen = (table, heading) => ({
   props: {
@@ -91,7 +95,7 @@ const createScreen = (table, heading) => ({
             onClick: [
               {
                 parameters: {
-                  url: `/${table.name.toLowerCase()}`,
+                  url: rowListUrl(table),
                 },
                 "##eventHandlerType": "Navigate To",
               },
@@ -120,6 +124,12 @@ const createScreen = (table, heading) => ({
                 },
                 "##eventHandlerType": "Save Row",
               },
+              {
+                parameters: {
+                  url: rowListUrl(table),
+                },
+                "##eventHandlerType": "Navigate To",
+              },
             ],
             _instanceName: "Save Button",
             _children: [],
@@ -130,6 +140,6 @@ const createScreen = (table, heading) => ({
     _instanceName: `${table.name} - New`,
     _code: "",
   },
-  route: `/${table.name.toLowerCase()}/new`,
+  route: newRowUrl(table),
   name: "",
 })

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -1,3 +1,6 @@
+import urlSanitize from "./urlSanitize"
+import { rowListUrl } from "./rowListScreen"
+
 export default function(tables) {
   return tables.map(table => {
     const fields = Object.keys(table.schema)
@@ -11,6 +14,7 @@ export default function(tables) {
 }
 
 export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
+export const editRowUrl = table => urlSanitize(`/${table.name}/:id`)
 
 const createScreen = (table, heading) => ({
   props: {
@@ -91,7 +95,7 @@ const createScreen = (table, heading) => ({
             onClick: [
               {
                 parameters: {
-                  url: `/${table.name.toLowerCase()}`,
+                  url: rowListUrl(table),
                 },
                 "##eventHandlerType": "Navigate To",
               },
@@ -130,6 +134,6 @@ const createScreen = (table, heading) => ({
     _instanceName: `${table.name} - Detail`,
     _code: "",
   },
-  route: `/${table.name.toLowerCase()}/:id`,
+  route: editRowUrl(table),
   name: "",
 })

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -1,3 +1,6 @@
+import urlSanitize from "./urlSanitize"
+import { newRowUrl } from "./newRowScreen"
+
 export default function(tables) {
   return tables.map(table => {
     return {
@@ -9,6 +12,7 @@ export default function(tables) {
 }
 
 export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
+export const rowListUrl = table => urlSanitize(`/${table.name}`)
 
 const createScreen = table => ({
   props: {
@@ -74,7 +78,7 @@ const createScreen = table => ({
             onClick: [
               {
                 parameters: {
-                  url: `/${table.name}/new`,
+                  url: newRowUrl(table),
                 },
                 "##eventHandlerType": "Navigate To",
               },
@@ -95,7 +99,7 @@ const createScreen = table => ({
         },
         _code: "",
         datasource: {
-          label: "Deals",
+          label: table.name,
           name: `all_${table._id}`,
           tableId: table._id,
           type: "table",
@@ -109,6 +113,6 @@ const createScreen = table => ({
     className: "",
     onLoad: [],
   },
-  route: `/${table.name.toLowerCase()}`,
+  route: rowListUrl(table),
   name: "",
 })

packages/builder/src/builderStore/store/screenTemplates/urlSanitize.js

@@ -0,0 +1,11 @@
+export default function(url) {
+  return url
+    .split("/")
+    .map(part => {
+      // if parameter, then use as is
+      if (part.startsWith(":")) return part
+      return encodeURIComponent(part.replace(" ", "-"))
+    })
+    .join("/")
+    .toLowerCase()
+}