diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 488158586b..ffd0dcfdca 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -45,6 +45,10 @@ export const getFrontendStore = () => { store.actions = { // TODO: REFACTOR initialise: async pkg => { + store.update(state => { + state.appId = pkg.application._id + return state + }) const screens = await api.get("/api/screens").then(r => r.json()) const mainScreens = screens.filter(screen => diff --git a/packages/builder/src/builderStore/store/frontend/index.js b/packages/builder/src/builderStore/store/frontend/index.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/builderStore/store/frontend/pages/index.js b/packages/builder/src/builderStore/store/frontend/pages/index.js new file mode 100644 index 0000000000..4ce8105e7d --- /dev/null +++ b/packages/builder/src/builderStore/store/frontend/pages/index.js @@ -0,0 +1,70 @@ +import {makePropsSafe} from "../../../../components/userInterface/pagesParsing/createProps" +import {generate_screen_css} from "../../../generate_css" +import {get} from "svelte/store" +import api from "../../../api" +import { store } from "builderStore" + +class Page { + constructor(page) { + this.pageName = page.name + this.pageObj = page + } + + select() { + store.update(state => { + const pageName = this.pageName + const current_screens = state.pages[pageName]._screens + + const currentPage = state.pages[pageName] + + state.currentFrontEndType = "page" + state.currentView = "detail" + state.currentPageName = pageName + state.screens = Array.isArray(current_screens) + ? current_screens + : Object.values(current_screens) + + // This is the root of many problems. + // Uncaught (in promise) TypeError: Cannot read property '_component' of undefined + // it appears that the currentPage sometimes has _props instead of props + // why + const safeProps = makePropsSafe( + state.components[currentPage.props._component], + currentPage.props + ) + state.currentComponentInfo = safeProps + currentPage.props = safeProps + state.currentPreviewItem = state.pages[pageName] + store.actions.screens.regenerateCssForCurrentScreen() + + for (let screen of state.screens) { + screen._css = generate_screen_css([screen.props]) + } + + return state + }) + } + + async save() { + const page = this.pageObj + const storeContents = get(store) + const pageName = storeContents.currentPageName || "main" + const pageToSave = page || storeContents.pages[pageName] + + // TODO: revisit. This sends down a very weird payload + const response = await api + .post(`/api/pages/${pageToSave._id}`, { + page: { + componentLibraries: storeContents.pages.componentLibraries, + ...pageToSave, + }, + screens: pageToSave._screens, + }) + .then(response => response.json()) + + store.update(state => { + state.pages[pageName]._rev = response.rev + return state + }) + } +} \ No newline at end of file diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js index 5a494d4734..cf26dfa766 100644 --- a/packages/server/src/api/controllers/application.js +++ b/packages/server/src/api/controllers/application.js @@ -1,14 +1,11 @@ const CouchDB = require("../../db") const { compileStaticAssetsForPage } = require("../../utilities/builder") const env = require("../../environment") -const { copy, existsSync, readFile, writeFile } = require("fs-extra") +const { copy, existsSync } = require("fs-extra") const { budibaseAppsDir } = require("../../utilities/budibaseDir") -const sqrl = require("squirrelly") const setBuilderToken = require("../../utilities/builder/setBuilderToken") const fs = require("fs-extra") const { join, resolve } = require("../../utilities/centralPath") -const { promisify } = require("util") -const chmodr = require("chmodr") const packageJson = require("../../../package.json") const { createLinkView } = require("../../db/linkedRows") const { downloadTemplate } = require("../../utilities/templates") @@ -153,14 +150,6 @@ exports.delete = async function(ctx) { } const createEmptyAppPackage = async (ctx, app) => { - const templateFolder = resolve( - __dirname, - "..", - "..", - "utilities", - "appDirectoryTemplate" - ) - const appsFolder = budibaseAppsDir() const newAppFolder = resolve(appsFolder, app._id) @@ -170,24 +159,7 @@ 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", "unauthenticated", "screens"), - // 0o777 - // ) - - await copy(templateFolder, newAppFolder) - - // this line allows full permission on copied files - // we have an unknown problem without this, whereby the - // files get weird permissions and cant be written to :( - const chmodrPromise = promisify(chmodr) - await chmodrPromise(newAppFolder, 0o777) - - await updateJsonFile(join(appsFolder, app._id, "package.json"), { - name: npmFriendlyAppName(app.name), - }) - + fs.mkdirpSync(newAppFolder) // if this app is being created from a template, // copy the frontend page definition files from // the template directory. @@ -203,23 +175,6 @@ const createEmptyAppPackage = async (ctx, app) => { await copy(templatePageDefinitions, join(appsFolder, app._id, "pages")) } - // const mainJson = await updateJsonFile( - // join(appsFolder, app._id, "pages", "main", "page.json"), - // app - // ) - // - // mainJson._id = generatePageID() - // await db.put(mainJson) - - // const unauthenticatedJson = await updateJsonFile( - // join(appsFolder, app._id, "pages", "unauthenticated", "page.json"), - // app - // ) - - // Write to couch - // unauthenticatedJson._id = generatePageID() - // await db.put(unauthenticatedJson) - const mainPage = cloneDeep(MAIN) mainPage._id = generatePageID() mainPage.title = app.name @@ -227,7 +182,7 @@ const createEmptyAppPackage = async (ctx, app) => { unauthPage._id = generatePageID() // TODO: fix - handlebars etc unauthPage.title = app.name - unauthPage.props._children[0]._children.title = `Log in to ${app.name}` + unauthPage.props._children[0].title = `Log in to ${app.name}` const homeScreen = cloneDeep(HOME_SCREEN) homeScreen._id = generateScreenID(mainPage._id) await db.bulkDocs([mainPage, unauthPage, homeScreen]) @@ -243,31 +198,3 @@ const createEmptyAppPackage = async (ctx, app) => { return newAppFolder } - -// const loadScreens = async (appFolder, page) => { -// const screensFolder = join(appFolder, "pages", page, "screens") -// -// const screenFiles = (await fs.readdir(screensFolder)).filter(s => -// s.endsWith(".json") -// ) -// -// let screens = [] -// for (let file of screenFiles) { -// screens.push(await fs.readJSON(join(screensFolder, file))) -// } -// return screens -// } - -const updateJsonFile = async (filePath, app) => { - const json = await readFile(filePath, "utf8") - const newJson = sqrl.Render(json, app) - await writeFile(filePath, newJson, "utf8") - return JSON.parse(newJson) -} - -const npmFriendlyAppName = name => - name - .replace(/_/g, "") - .replace(/./g, "") - .replace(/ /g, "") - .toLowerCase() diff --git a/packages/server/src/api/controllers/page.js b/packages/server/src/api/controllers/page.js index 0455a4cf45..009d167856 100644 --- a/packages/server/src/api/controllers/page.js +++ b/packages/server/src/api/controllers/page.js @@ -7,9 +7,10 @@ exports.save = async function(ctx) { const appPackage = ctx.request.body + const page = await db.get(ctx.params.pageId) await compileStaticAssetsForPage( ctx.user.appId, - ctx.params.pageId, + page.name, ctx.request.body ) diff --git a/packages/server/src/utilities/builder/buildPage.js b/packages/server/src/utilities/builder/compileStaticAssetsForPage.js similarity index 100% rename from packages/server/src/utilities/builder/buildPage.js rename to packages/server/src/utilities/builder/compileStaticAssetsForPage.js diff --git a/packages/server/src/utilities/builder/setBuilderToken.js b/packages/server/src/utilities/builder/setBuilderToken.js index 2986a805a9..8cf6c44379 100644 --- a/packages/server/src/utilities/builder/setBuilderToken.js +++ b/packages/server/src/utilities/builder/setBuilderToken.js @@ -21,6 +21,7 @@ module.exports = async (ctx, appId, version) => { // set the builder token setCookie(ctx, "builder", token) + setCookie(ctx, "currentapp", appId) // need to clear all app tokens or else unable to use the app in the builder let allDbNames = await CouchDB.allDbs() allDbNames.map(dbName => {