screens in DB

packages/server/src/api/controllers/application.js

@@ -22,6 +22,8 @@ const {
 const {
   downloadExtractComponentLibraries,
 } = require("../../utilities/createAppPackage")
+const PAGES = require("../../constants/pages")
+const { HOME_SCREEN } = require("../../constants/screens")
 
 const APP_PREFIX = DocumentTypes.APP + SEPARATOR
 
@@ -157,11 +159,20 @@ const createEmptyAppPackage = async (ctx, app) => {
     ctx.throw(400, "App folder already exists for this application")
   }
 
-  await fs.ensureDir(join(newAppFolder, "pages", "main", "screens"), 0o777)
+  // await fs.ensureDir(join(newAppFolder, "pages", "main", "screens"), 0o777)
-  await fs.ensureDir(
+  // await fs.ensureDir(
-    join(newAppFolder, "pages", "unauthenticated", "screens"),
+  //   join(newAppFolder, "pages", "unauthenticated", "screens"),
-    0o777
+  //   0o777
-  )
+  // )
+
+  // TODO: write the main and unauthenticated JSON to couch
+  // const writes = []
+  // for (let pageName in PAGES) {
+  //   PAGES[pageName]._id = generatePageID()
+  //   writes.push({
+
+  //   })
+  // }
 
   await copy(templateFolder, newAppFolder)
 

packages/server/src/api/controllers/page.js

@@ -11,7 +11,7 @@ exports.save = async function(ctx) {
   await buildPage(
     ctx.config,
     ctx.user.appId,
-    ctx.params.pageName,
+    ctx.params.pageId,
     ctx.request.body
   )
 
@@ -29,5 +29,6 @@ exports.save = async function(ctx) {
   // }
   appPackage.page._id = appPackage.page._id || generatePageID()
   await db.put(appPackage.page)
-  ctx.response.status = 200
+  ctx.message = "Page saved successfully."
+  ctx.status = 200
 }

packages/server/src/api/controllers/screen.js

@@ -4,9 +4,18 @@
  * for routes and controllers.
  */
 const CouchDB = require("../../db")
+const { getScreenParams, generateScreenID } = require("../../db/utils")
 
 exports.fetch = async ctx => {
-  ctx.throw(501)
+  const db = new CouchDB(ctx.user.appId)
+
+  const screens = await db.allDocs(
+    getScreenParams(ctx.params.pageId, null, {
+      include_docs: true,
+    })
+  )
+
+  ctx.body = screens.response.rows
 }
 
 exports.create = async ctx => {
@@ -28,9 +37,22 @@ exports.create = async ctx => {
 }
 
 exports.save = async ctx => {
-  ctx.throw(501)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
+  const screen = ctx.request.body
+
+  if (!screen._id) {
+    screen._id = generateScreenID()
+  }
+
+  const response = await db.put(screen)
+
+  ctx.message = `Screen ${screen.name} saved.`
+  ctx.body = response
 }
 
 exports.destroy = async ctx => {
-  ctx.throw(501)
+  const db = new CouchDB(ctx.user.appId)
+  await db.remove(ctx.params.screenId, ctx.params.revId)
+  ctx.message = "Screen deleted successfully"
 }

packages/server/src/api/routes/pages.new.js

@@ -26,7 +26,7 @@ function generateSaveValidation() {
 }
 
 router.post(
-  "/api/pages/:pageName",
+  "/api/pages/:pageId",
   authorized(BUILDER),
   generateSaveValidation(),
   controller.save

packages/server/src/api/routes/screen.js

@@ -6,8 +6,8 @@ const { BUILDER } = require("../../utilities/accessLevels")
 const router = Router()
 
 router
-  .get("/api/screens", authorized(BUILDER), controller.fetch)
+  .get("/api/:pageId/screens", authorized(BUILDER), controller.fetch)
-  .post("/api/screens", authorized(BUILDER), controller.save)
+  .post("/api/:pageId/screens", authorized(BUILDER), controller.save)
   .delete("/api/:screenId/:revId", authorized(BUILDER), controller.destroy)
 
 module.exports = router

packages/server/src/constants/pages.js

@@ -0,0 +1,216 @@
+const MAIN = {
+  componentLibraries: ["@budibase/standard-components"],
+  title: "{{ name }}",
+  favicon: "./_shared/favicon.png",
+  stylesheets: [],
+  props: {
+    _id: "private-master-root",
+    _component: "@budibase/standard-components/container",
+    _children: [
+      {
+        _id: "c74f07266980c4b6eafc33e2a6caa783d",
+        _component: "@budibase/standard-components/container",
+        _styles: {
+          normal: {
+            display: "flex",
+            "flex-direction": "row",
+            "justify-content": "flex-start",
+            "align-items": "flex-start",
+            background: "#fff",
+            width: "100%",
+            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+          },
+          hover: {},
+          active: {},
+          selected: {},
+        },
+        _code: "",
+        className: "",
+        onLoad: [],
+        type: "div",
+        _appId: "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
+        _instanceName: "Header",
+        _children: [
+          {
+            _id: "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
+            _component: "@budibase/standard-components/Navigation",
+            _styles: {
+              normal: {
+                "max-width": "1400px",
+                "margin-left": "auto",
+                "margin-right": "auto",
+                padding: "20px",
+                color: "#757575",
+                "font-weight": "400",
+                "font-size": "16px",
+                flex: "1 1 auto",
+              },
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            logoUrl:
+              "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
+            title: "",
+            backgroundColor: "",
+            color: "",
+            borderWidth: "",
+            borderColor: "",
+            borderStyle: "",
+            _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
+            _instanceName: "Navigation",
+            _children: [
+              {
+                _id: "48b35328-4c91-4343-a6a3-1a1fd77b3386",
+                _component: "@budibase/standard-components/link",
+                _styles: {
+                  normal: {
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    color: "#000000",
+                    "text-decoration-line": "none",
+                    "font-size": "16px",
+                  },
+                  hover: {
+                    color: "#4285f4",
+                  },
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                url: "/",
+                openInNewTab: false,
+                text: "Home",
+                color: "",
+                hoverColor: "",
+                underline: false,
+                fontSize: "",
+                fontFamily: "initial",
+                _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
+                _instanceName: "Home Link",
+                _children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
+        _component: "##builtin/screenslot",
+        _styles: {
+          normal: {
+            flex: "1 1 auto",
+            display: "flex",
+            "flex-direction": "column",
+            "justify-content": "flex-start",
+            "align-items": "stretch",
+            "max-width": "100%",
+            "margin-left": "20px",
+            "margin-right": "20px",
+            width: "1400px",
+            padding: "20px",
+          },
+          hover: {},
+          active: {},
+          selected: {},
+        },
+        _code: "",
+        _children: [],
+      },
+    ],
+    type: "div",
+    _styles: {
+      active: {},
+      hover: {},
+      normal: {
+        display: "flex",
+        "flex-direction": "column",
+        "align-items": "center",
+        "justify-content": "flex-start",
+        "margin-right": "auto",
+        "margin-left": "auto",
+        "min-height": "100%",
+        "background-image":
+          "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
+      },
+      selected: {},
+    },
+    _code: "",
+    className: "",
+    onLoad: [],
+  },
+  uiFunctions: "",
+}
+
+const UNAUTHENTICATED = {
+  componentLibraries: ["@budibase/standard-components"],
+  title: "{{ name }}",
+  favicon: "./_shared/favicon.png",
+  stylesheets: [],
+  props: {
+    _id: "public-master-root",
+    _component: "@budibase/standard-components/container",
+    _children: [
+      {
+        _id: "686c252d-dbf2-4e28-9078-414ba4719759",
+        _component: "@budibase/standard-components/login",
+        _styles: {
+          normal: {
+            padding: "64px",
+            background: "rgba(255, 255, 255, 0.4)",
+            "border-radius": "0.5rem",
+            "margin-top": "0px",
+            margin: "0px",
+            "line-height": "1",
+            "box-shadow":
+              "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+            "font-size": "16px",
+            "font-family": "Inter",
+            flex: "0 1 auto",
+            transform: "0",
+          },
+          hover: {},
+          active: {},
+          selected: {},
+        },
+        _code: "",
+        loginRedirect: "",
+        usernameLabel: "Username",
+        passwordLabel: "Password",
+        loginButtonLabel: "Login",
+        buttonClass: "",
+        _instanceName: "Login",
+        inputClass: "",
+        _children: [],
+        title: "Log in to {{ name }}",
+        buttonText: "Log In",
+        logo:
+          "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
+      },
+    ],
+    type: "div",
+    _styles: {
+      active: {},
+      hover: {},
+      normal: {
+        display: "flex",
+        "flex-direction": "column",
+        "align-items": "center",
+        "justify-content": "center",
+        "margin-right": "auto",
+        "margin-left": "auto",
+        "min-height": "100%",
+        "background-image":
+          "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
+      },
+      selected: {},
+    },
+    _code: "",
+    className: "",
+    onLoad: [],
+  },
+  uiFunctions: "",
+}
+
+module.exports = { MAIN, UNAUTHENTICATED }

packages/server/src/constants/screens.js

@@ -0,0 +1,103 @@
+exports.HOME_SCREEN = {
+  description: "",
+  url: "",
+  props: {
+    _id: "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
+    _component: "@budibase/standard-components/container",
+    _styles: {
+      normal: {
+        flex: "1 1 auto",
+        display: "flex",
+        "flex-direction": "column",
+        "justify-content": "flex-start",
+        "align-items": "stretch",
+      },
+      hover: {},
+      active: {},
+      selected: {},
+    },
+    _code: "",
+    className: "",
+    onLoad: [],
+    type: "div",
+    _children: [
+      {
+        _id: "ef60083f-4a02-4df3-80f3-a0d3d16847e7",
+        _component: "@budibase/standard-components/heading",
+        _styles: {
+          normal: {
+            "text-align": "left",
+          },
+          hover: {},
+          active: {},
+          selected: {},
+        },
+        _code: "",
+        className: "",
+        text: "Welcome to your Budibase App 👋",
+        type: "h2",
+        _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
+        _instanceName: "Heading",
+        _children: [],
+      },
+      {
+        _id: "cbbf41b27c2b44d1abba38bb694880c6a",
+        _component: "@budibase/standard-components/container",
+        _styles: {
+          normal: {
+            display: "flex",
+            "flex-direction": "column",
+            "justify-content": "center",
+            "align-items": "stretch",
+            flex: "1 1 auto",
+            "border-width": "4px",
+            "border-style": "Dashed",
+            "margin-bottom": "32px",
+          },
+          hover: {},
+          active: {},
+          selected: {},
+        },
+        _code: "",
+        className: "",
+        onLoad: [],
+        type: "div",
+        _appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
+        _instanceName: "Video Container",
+        _children: [
+          {
+            _id: "c07d752cb3e544b418088fa9be84ba2e4",
+            _component: "@budibase/standard-components/embed",
+            _styles: {
+              normal: {
+                width: "100%",
+                flex: "1 1 auto",
+                opacity: "0",
+                "transition-property": "Opacity",
+                "transition-duration": "1s",
+                "transition-timing-function:": "ease-in",
+              },
+              hover: {
+                "transition-property": "Opacity",
+                "transition-duration": "1s",
+                "transition-timing-function:": "ease-out",
+                opacity: "1",
+              },
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            embed:
+              '<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+            _appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
+            _instanceName: "Rick Astley Video",
+            _children: [],
+          },
+        ],
+      },
+    ],
+    _instanceName: "Home",
+  },
+  route: "/",
+  name: "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
+}

packages/server/src/db/utils.js

@@ -200,6 +200,13 @@ exports.getPageParams = (pageId = null, otherProps = {}) => {
   return getDocParams(DocumentTypes.PAGE, pageId, otherProps)
 }
 
+/**
+ * Gets parameters for retrieving screens for a particular page, this is a utility function for the getDocParams function.
+ */
+exports.getScreenParams = (pageId = null, otherProps = {}) => {
+  return getDocParams(DocumentType.SCREEN, pageId, otherProps)
+}
+
 /**
  * Gets parameters for retrieving a webhook, this is a utility function for the getDocParams function.
  */

packages/server/src/utilities/appDirectoryTemplate/plugins.js

@@ -1 +0,0 @@
-module.exports = () => ({})