- ${definition.props?.length ? Form({
+ ${block.props?.length ? Form({
name: 'module-settings',
cancelAction: 'close-module-settings',
handler: 'module.saveSettings',
@@ -120,7 +120,7 @@ function sidebarModuleSettings(definition, module, collection, collections, func
fields: [
`
`,
`
`,
- (definition.props ?? []).map(prop => DynamicFieldInput(prop, fields, module.links?.[prop.slug], module, collections, functions)).join('')
+ (block.props ?? []).filter(x => !x.hidden).map(prop => DynamicFieldInput(prop, fields, module.links?.[prop.slug], module, collections, functions)).join('')
],
cancelAction: 'close-module-settings'
}): `
@@ -146,7 +146,7 @@ export default {
async create(body) {
await db('modules').insert({
moduleId: body.moduleId,
- definitionId: body.definitionId,
+ blockId: body.blockId,
order: body.order,
cols: 12,
props: {},
@@ -160,11 +160,11 @@ export default {
await db('modules').remove(body.id)
},
async createSection(body) {
- const definitions = await db('definitions').query().all();
+ const blocks = await db('blocks').query().all();
const mod = await db('modules').insert({
pageId: body.pageId,
- definitionId: definitions.find(x => x.name === 'Section').id,
+ blockId: blocks.find(x => x.name === 'Section').id,
order: body.order,
props: {
fullWidth: false,
@@ -174,7 +174,7 @@ export default {
const mod2 = await db('modules').insert({
moduleId: mod.id,
- definitionId: definitions.find(x => x.name === 'Columns').id,
+ blockId: blocks.find(x => x.name === 'Columns').id,
order: 0,
props: {
cols: [],
@@ -187,7 +187,7 @@ export default {
const moduleId = body.id
const module = await db('modules').query().filter('id', '=', moduleId).first();
const page = await getPageFromModule(module);
- const definition = await db('definitions').query().filter('id', '=', module.definitionId).first();
+ const block = await db('blocks').query().filter('id', '=', module.blockId).first();
const collections = await db('collections').query().all()
if(page?.collectionId) {
@@ -200,7 +200,7 @@ export default {
}
- const res = sidebarModuleSettings(definition, module, collection, collections, functions)
+ const res = sidebarModuleSettings(block, module, collection, collections, functions)
return res;
}
@@ -208,7 +208,7 @@ export default {
}
- const res = sidebarModuleSettings(definition, module, null, collections, functions)
+ const res = sidebarModuleSettings(block, module, null, collections, functions)
return res
},
async loadSettings(body) {
@@ -351,7 +351,7 @@ export default {
await db('settings').update(settings)
}
- await db('modules').update({...original, props})
+ await db('modules').update({...original, props: {...original.props, ...props}})
},
async updateOrders(body) {
diff --git a/src/handlers/setup.js b/src/handlers/setup.js
deleted file mode 100644
index ec6990e..0000000
--- a/src/handlers/setup.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { db } from "#services"
-
-export default {
- async setup(body) {
-
- }
-}
\ No newline at end of file
diff --git a/src/middlewares/context.js b/src/middlewares/context.js
index 27d1685..af5c575 100644
--- a/src/middlewares/context.js
+++ b/src/middlewares/context.js
@@ -5,7 +5,7 @@ import path from 'node:path'
import { fileURLToPath } from 'node:url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
+
export function contextMiddleware({functions}) {
return async (req, res, next) => {
console.log(`[${req.method}] ${req.url}`)
@@ -14,7 +14,7 @@ export function contextMiddleware({functions}) {
if(!user) {
res.cookie('userId', '', {httpOnly: true})
- if(req.query.mode == 'edit' || req.query.mode == 'preview') {
+ if(req.url.startsWith('/admin')) {
return res.redirect('/login')
}
}
@@ -49,7 +49,7 @@ export function contextMiddleware({functions}) {
req.url = req.url.slice(0, -1)
}
- const blocks = await db('definitions').query().all()
+ const blocks = await db('blocks').query().all()
// Check if initialized
if(blocks.length == 0) {
diff --git a/src/page.js b/src/page.js
index a866c11..4d41058 100644
--- a/src/page.js
+++ b/src/page.js
@@ -18,44 +18,6 @@ import { RoleCreatePage, RoleListPage, RoleUpdatePage } from './pages/roles.js';
import { constants } from 'http2';
import { FunctionListPage } from './pages/functions.js';
-let definitions = {}
-
-async function loadModuleDefinitions() {
- const defs = await db('definitions').query().all()
- definitions = {}
- for (let definition of defs) {
- if (definition.file) {
- try {
- const module = await import(join('..', definition.file)).then(res => {
- return res.default
- })
-
- definitions[definition.id].load = module.load
- definitions[definition.id].actions = module.actions
- } catch (err) {
- definitions[definition.id] = definition
- }
- } else {
- definitions[definition.id] = definition
- }
-
- if (typeof definitions[definition.id].template === 'string') {
- definitions[definition.id].template = hbs.compile(definitions[definition.id].template)
- }
- }
-}
-
-export async function handleModuleAction({ module, method, body }) {
- const definition = definitions[module.definitionId]
- let res;
-
- if (definition.actions && definition.actions[method]) {
- res = await definition.actions[method](body)
- }
-
- return res;
-}
-
function DashboardPage() {
return Page({
title: 'Dashboard',
@@ -141,10 +103,6 @@ export async function renderBody(body, { props, mode, url, view, context, params
},
].filter(Boolean)
- await loadModuleDefinitions()
-
- // let {page} = await getPage(url.split('?')[0])
- // if (!page && view === 'iframe') view = 'pages.create'
if(mode === 'edit' && !view) view = 'dashboard'
let pageContent;
@@ -231,9 +189,15 @@ export async function renderBody(body, { props, mode, url, view, context, params
params
}
+ const renderedModules = (await Promise.all(body.map(x => renderModule(x, { props, mode, permissions, request })))).join('')
+
+ if(mode === 'view') {
+ return renderedModules
+ }
+
return `
- ${(await Promise.all(body.map(x => renderModule(x, { props, mode, definitions, permissions, request })))).join('')}
+ ${renderedModules}
${previewContent}
`
diff --git a/src/pages/blocks.js b/src/pages/blocks.js
index 61437df..b01599b 100644
--- a/src/pages/blocks.js
+++ b/src/pages/blocks.js
@@ -12,7 +12,7 @@ export async function BlockCreatePage({permissions}) {
title: `Create New Block`,
body: [
Form({
- handler: 'definition.create',
+ handler: 'block.create',
fields: [
Input({label: 'Name', placeholder: 'Enter Block name', name: 'name'}),
Textarea({label: 'Template', rows: 15, placeholder: 'Enter Block template (Handlebars)', name: 'template'}),
@@ -26,7 +26,7 @@ export async function BlockCreatePage({permissions}) {
}
export async function BlockUpdatePage({query, permissions}) {
- const block = await db('definitions').query().filter('id', '=', query.id).first()
+ const block = await db('blocks').query().filter('id', '=', query.id).first()
return [
Page({
@@ -39,9 +39,9 @@ export async function BlockUpdatePage({query, permissions}) {
title: `Update Block (${block.name})`,
body: Stack({vertical: true, gap: 'lg'}, [
Form({
- load: 'definition.load',
+ load: 'block.load',
id: block.id,
- handler: 'definition.update',
+ handler: 'block.update',
fields: [
`
`,
Input({label: 'Name', placeholder: 'Enter Module name', name: 'name'}),
diff --git a/src/pages/collections.js b/src/pages/collections.js
index 977cc6f..2c8bec8 100644
--- a/src/pages/collections.js
+++ b/src/pages/collections.js
@@ -3,6 +3,7 @@ import { Button, Card, CardBody, Checkbox, EmptyTable, File, Form, Input, Label,
import { CollectionDataTable, DataTable } from "./dataTable.js";
import { FieldModal, FieldsList } from "./fields.js";
import { getText, getValue, isSelected } from "#helpers";
+import { FieldInput } from "./field-input.js";
export function CollectionForm({id, fields, handler, cancelAction, onSubmit}) {
let load;
@@ -35,111 +36,6 @@ export function CollectionForm({id, fields, handler, cancelAction, onSubmit}) {
])
}
-function Relation(field) {
- return Label({
- symbolic: true,
- text: field.label,
- inline: false,
- body: Stack({ vertical: true, align: 'start'}, [
- Button({
- text: 'Choose',
- color: 'primary',
- action: 'open-relation-modal',
- dataset: {
- 'collection-id': field.collectionId,
- 'modal-name': 'relation-field-modal',
- 'field-name': field.name,
- 'field-multiple': field.multiple ? true : false
- }
- }),
- `
`,
- '
',
- ]),
- })
-}
-
-function RichText(field) {
- return Label({
- symbolic: true,
- text: field.label,
- body: `
`
- })
-}
-
-export function FieldInput(field, collections = [], functions = {}) {
- let options = {
- name: field.slug,
- label: field.label,
- placeholder: field.placeholder ?? 'Enter ' + field.label
- }
- if(field.type === 'select') {
- options.items = field.items ?? []
- options.placeholder = field.placeholder ?? 'Choose ' + field.label
- options.multiple = field.multiple
- }
-
- if(field.type === 'relation') {
- options.collectionId = field.collectionId
- options.multiple = field.multiple
- }
-
- if(field.type === 'file') {
- options.type = field.file_type
- options.multiple = field.multiple
- options.size = field.size
- }
-
- if(field.type === 'input') {
- options.type = field.input_type
- }
-
- function CollectionField({name, label, placeholder}) {
- return Select({
- name,
- placeholder: 'Choose Collection',
- label,
- items: collections.map(x => ({text: x.name, value: x.id}))
- })
- }
-
- function SelectFieldType({name, label, placeholder, items, multiple}) {
- if(multiple) {
- return Label({
- text: label,
- body: items.map(item => Checkbox({multiple: true, name, checked: isSelected(item), multiple: true, label: getText(item), value: getValue(item)}))
- })
- }
-
- return Select({name, placeholder, label, items})
- }
-
- function FunctionField({name, label, placeholder}) {
- return Select({
- name,
- placeholder: 'Choose a Function',
- label,
- items: Object.keys(functions).map(x => ({value: x, text: functions[x].name}))
- })
- }
-
- const inputs = {
- input: Input,
- select: SelectFieldType,
- textarea: Textarea,
- checkbox: Checkbox,
- file: File,
- relation: Relation,
- 'rich-text': RichText,
- collection: CollectionField,
- function: FunctionField,
- hidden: (options) => Label({text: options.label})
- }
-
- if(inputs[field.type]) {
- return inputs[field.type](options)
- }
-}
-
export function RelationFieldModal() {
return Modal({
name: 'relation-field-modal',
diff --git a/src/pages/field-input.js b/src/pages/field-input.js
new file mode 100644
index 0000000..6ef7f3c
--- /dev/null
+++ b/src/pages/field-input.js
@@ -0,0 +1,113 @@
+import { Button, Checkbox, File, Input, Label, Select, Stack, Textarea } from "#components"
+import { getText, getValue, isSelected } from "#helpers"
+
+function Relation(field) {
+ return Label({
+ symbolic: true,
+ text: field.label,
+ inline: false,
+ body: Stack({ vertical: true, align: 'start'}, [
+ Button({
+ text: 'Choose',
+ color: 'primary',
+ action: 'open-relation-modal',
+ dataset: {
+ 'collection-id': field.collectionId,
+ 'modal-name': 'relation-field-modal',
+ 'field-name': field.name,
+ 'field-multiple': field.multiple ? true : false
+ }
+ }),
+ `
`,
+ '
',
+ ]),
+ })
+}
+
+function RichText(field) {
+ return Label({
+ symbolic: true,
+ text: field.label,
+ body: `
`
+ })
+}
+
+export function FieldInput(field, collections = [], functions = {}) {
+ let options = {
+ name: field.slug,
+ label: field.label,
+ placeholder: field.placeholder ?? 'Enter ' + field.label
+ }
+ if(field.type === 'select') {
+ options.items = field.items ?? []
+ options.placeholder = field.placeholder ?? 'Choose ' + field.label
+ options.multiple = field.multiple
+ }
+
+ if(field.type === 'relation') {
+ options.collectionId = field.collectionId
+ options.multiple = field.multiple
+ }
+
+ if(field.type === 'file') {
+ options.type = field.file_type
+ options.multiple = field.multiple
+ options.size = field.size
+ }
+
+ if(field.type === 'input') {
+ options.type = field.input_type
+ }
+
+ function CollectionField({name, label, placeholder}) {
+ return Select({
+ name,
+ placeholder: 'Choose Collection',
+ label,
+ items: collections.map(x => ({text: x.name, value: x.id}))
+ })
+ }
+
+ function SelectFieldType({name, label, placeholder, items, multiple}) {
+ if(multiple) {
+ return Label({
+ text: label,
+ body: items.map(item => Checkbox({multiple: true, name, checked: isSelected(item), multiple: true, label: getText(item), value: getValue(item)}))
+ })
+ }
+
+ return Select({name, placeholder, label, items})
+ }
+
+ function FunctionField({name, label, placeholder}) {
+ return Select({
+ name,
+ placeholder: 'Choose a Function',
+ label,
+ items: Object.keys(functions).map(x => ({value: x, text: functions[x].name}))
+ })
+ }
+
+ function DateInput(options) {
+ return Input({...options, type: 'datetime'})
+ }
+
+ const inputs = {
+ input: Input,
+ select: SelectFieldType,
+ textarea: Textarea,
+ checkbox: Checkbox,
+ file: File,
+ relation: Relation,
+ 'rich-text': RichText,
+ collection: CollectionField,
+ function: FunctionField,
+ color: Input,
+ date: DateInput,
+ hidden: (options) => Label({text: options.label})
+ }
+
+ if(inputs[field.type]) {
+ return inputs[field.type](options)
+ }
+}
\ No newline at end of file
diff --git a/src/pages/fields.js b/src/pages/fields.js
index 3f07dbb..31ba84f 100644
--- a/src/pages/fields.js
+++ b/src/pages/fields.js
@@ -11,6 +11,8 @@ const fieldTypes = [
{ text: 'Relation', value: 'relation' },
{ text: 'Collection', value: 'collection', hidden: true },
{ text: 'Function', value: 'function' },
+ { text: 'Color', value: 'color' },
+ { text: 'Date Time', value: 'date' },
]
function fieldTypeText(key) {
diff --git a/src/pages/roles.js b/src/pages/roles.js
index d4a561f..1e55af3 100644
--- a/src/pages/roles.js
+++ b/src/pages/roles.js
@@ -1,7 +1,7 @@
import { Button, Form, Page } from "#components";
import { roleFields, RolesDataTable } from "../handlers/role.js";
import { getUrl } from "#helpers";
-import { FieldInput } from "./collections.js";
+import { FieldInput } from "./field-input.js";
export async function RoleListPage() {
return Page({
diff --git a/src/pages/settings.js b/src/pages/settings.js
index 9dad949..312f784 100644
--- a/src/pages/settings.js
+++ b/src/pages/settings.js
@@ -1,6 +1,6 @@
import { Button, Card, CardBody, File, Form, Input, Label, Page, Textarea } from "#components";
import { db } from "#services";
-import { FieldInput } from "./collections.js";
+import { FieldInput } from "./field-input.js";
export async function SettingsGeneralPage() {
return Page({
diff --git a/src/pages/setup.js b/src/pages/setup.js
index 58033fd..0b31636 100644
--- a/src/pages/setup.js
+++ b/src/pages/setup.js
@@ -12,21 +12,22 @@ export function SetupPage({templates}) {
${Form({
handler: 'setup.setup',
fields: [
+ `
Setup CMS
`,
Input({
name: 'password',
placeholder: 'Enter Admin Password',
label: 'Admin Password'
}),
- Select({
- items: templates,
- name: 'template',
- placeholder: 'Choose a template',
- label: 'Template'
- }),
- File({
- name: 'file',
- label: 'Import zip'
- })
+ // Select({
+ // items: templates,
+ // name: 'template',
+ // placeholder: 'Choose a template',
+ // label: 'Template'
+ // }),
+ // File({
+ // name: 'file',
+ // label: 'Import zip'
+ // })
]
})}