add functions page

package.json

@@ -3,12 +3,12 @@
   "version": "1.0.1-next.7",
   "type": "module",
   "bin": "bin/tailcms.js",
+  "main": "./services/index.js",
   "imports": {
     "#services": "./services/index.js",
     "#components": "./src/components/index.js",
     "#helpers": "./src/helpers.js"
   },
-  "main": "index.js",
   "scripts": {
     "dev": "node bin/tailcms.js dev",
     "test": "echo \"Error: no test specified\" && exit 1"

public/js/actions.js

@@ -149,6 +149,18 @@ const actions = {
             submitButton.addEventListener('click', onButtonClick)
         }
     },
+    'open-update-function-modal'(el) {
+        const modal = document.querySelector('[data-modal="update-function"]')
+
+        modal.modalOpen = true
+
+        setFormValue(modal, {
+            id: el.dataset.id, 
+            name: el.dataset.name, 
+            status: el.dataset.status
+        })
+
+    },
     async 'collection-data-create-submit'(el, ev) {
         const value = getFormValue(el);
         el.dataset.load = ''

services/index.js

@@ -1 +1 @@
-export { db, setDb} from './db.js'
+export { db } from './db.js'

src/app.js

@@ -1,5 +1,4 @@
 import express from 'express'
-import { setDb } from '#services'
 import { renderPageController } from './controllers/page.js'
 import cookieParser from 'cookie-parser'
 import { LoginPage } from './pages/login.js'
@@ -13,6 +12,7 @@ import { queryController } from './controllers/query.js'
 import { fileUploadController } from './controllers/file.js'
 import { publishController } from './controllers/publish.js'
 import { contextMiddleware } from './middlewares/context.js'
+import { setDb } from '../services/db.js'
 
 // Get the directory of the current file
 const __dirname = path.dirname(fileURLToPath(import.meta.url));

src/handlers/role.js

@@ -65,6 +65,10 @@ export const roleFields = [
                 value: 'page_delete'
             },
             {
+                text: 'Functions',
+                value: 'functions'
+            },
+                {
                 text: 'Blocks',
                 value: 'blocks'
             },

src/page.js

@@ -16,6 +16,7 @@ import { BlockCreatePage, BlockUpdatePage, CreateBlockAiModal, UpdateBlockAiModa
 import { Sidebar } from './pages/sidebar.js';
 import { RoleCreatePage, RoleListPage, RoleUpdatePage } from './pages/roles.js';
 import { constants } from 'http2';
+import { FunctionListPage } from './pages/functions.js';
 
 let definitions = {}
 
@@ -61,7 +62,7 @@ function DashboardPage() {
         body: '<div data-alert>Welcome!</div>'
     })
 }
-const pageMap = {
+const pages = {
     'dashboard': [DashboardPage, []],
     'pages.edit' : [PageEditorPage, ['pages']],
     'iframe': [PageEditorPage, ['page_content', 'page_update']],
@@ -70,6 +71,7 @@ const pageMap = {
     'blocks.create': [BlockCreatePage, ['block_create']],
     'blocks.update': [BlockUpdatePage, ['block_update', 'block_delete']],
     'collections.create': [CollectionCreatePage, ['collection_create']],
+    'functions.list': [FunctionListPage, ['functions']],
     'collections.update': [CollectionUpdatePage, ['collection_update']],
     'collections.data.list': [CollectionDataListPage, ['collections', 'collections_sidebar']],
     'collections.data.create': [CollectionDataCreatePage, ['content_create']],
@@ -87,6 +89,7 @@ const pageMap = {
 //#region Render body
 export async function renderBody(body, { props, mode, url, view, context, params, ...query }) {
     let permissions = context.permissions 
+    let functions = context.functions 
 
     const collections = await db('collections').query().all().then(res => res.filter(x => x.sidebar))
 
@@ -105,6 +108,12 @@ export async function renderBody(body, { props, mode, url, view, context, params
             viewPrefix: 'blocks.',
             items: 'blocks'
         },
+        permissions.functions && {
+            title: 'Functions', 
+            icon: '<svg data-sidebar-toggler-icon xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m10.55 18.2l5.175-6.2h-4l.725-5.675L7.825 13H11.3zM8 22l1-7H4l9-13h2l-1 8h6L10 22zm3.775-9.75"/></svg>',
+            href: getUrl({view: 'functions.list'}),
+            viewPrefix: 'functions.',
+        },
         permissions.collections && {
             title: 'Collections', 
             icon: '<svg data-sidebar-toggler-icon xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3C7.58 3 4 4.79 4 7v10c0 2.21 3.59 4 8 4s8-1.79 8-4V7c0-2.21-3.58-4-8-4m6 14c0 .5-2.13 2-6 2s-6-1.5-6-2v-2.23c1.61.78 3.72 1.23 6 1.23s4.39-.45 6-1.23zm0-4.55c-1.3.95-3.58 1.55-6 1.55s-4.7-.6-6-1.55V9.64c1.47.83 3.61 1.36 6 1.36s4.53-.53 6-1.36zM12 9C8.13 9 6 7.5 6 7s2.13-2 6-2s6 1.5 6 2s-2.13 2-6 2"/></svg>',
@@ -141,14 +150,14 @@ export async function renderBody(body, { props, mode, url, view, context, params
     let pageContent;
 
     try {
-        if(!pageMap[view]) {
+        if(!pages[view]) {
             pageContent = Page({
                 body: EmptyTable({title: "Page Not found!", description: "This page doesn't exists", body: [
                     Button({href: '/admin', text: "Go Home", color: 'primary'})
                 ]})
             })
         } else {
-            const [page, pagePermissions] = pageMap[view] 
+            const [page, pagePermissions] = pages[view] 
             let access = false
             if(pagePermissions.length == 0) access = true
             for(let permission of pagePermissions) {
@@ -157,7 +166,7 @@ export async function renderBody(body, { props, mode, url, view, context, params
                 }
             }
             if(access) {
-                pageContent = await page({query, view, url, permissions, context})
+                pageContent = await page({query, view, url, permissions, context, functions})
             } else {
                 pageContent = Page({
                     body: EmptyTable({title: "No Access!", description: "You don't have access to this page!", body: [

src/pages/functions.js

@@ -0,0 +1,89 @@
+import { Form, Input, Modal, Page, Select } from "#components";
+import { DataTable } from "./dataTable.js";
+
+
+const functionFields = [
+    {
+        slug: 'name',
+        label: 'Name',
+        type: 'input',
+        default: true,
+    },
+    {
+        slug: 'slug',
+        label: 'Slug',
+        type: 'input',
+        default: true,
+    },
+    {
+        slug: 'status',
+        label: 'Status',
+        type: 'select',
+        items: [
+            "Enabled",
+            "Disabled"
+        ]
+    }
+]
+
+function FunctionsDataTable({functions}) {
+    const items = {
+        perPage: Object.keys(functions).length,
+        page: 1,
+        data: Object.keys(functions).map(x => functions[x])
+    }
+
+    const actions = [
+        {
+            text: "Change Status",
+            action: 'open-update-function-modal',
+            dataset: {
+                'modal-name': 'update-function'
+            }
+        },
+        {
+            text: "Call"
+        },
+
+    ]
+
+    return DataTable({filters: [], selectable: false, items, fields: functionFields, actions, relationFilters: false})
+}
+
+export function FunctionListPage({functions}) {
+    return Page({
+        title: 'Functions',
+        body: [
+            FunctionsDataTable({functions}),
+            ChangeFunctionStatusModal()
+        ]
+    })
+}
+
+function ChangeFunctionStatusModal() {
+    return Modal({
+        name: 'update-function',
+        title: "Change function status",
+        body: Form({
+            handler: 'function.changeStatus',
+            cancelAction: 'modal.close',
+            card: false,
+            fields: [
+                `<input name="id" type="hidden" value="">`,
+                Input({
+                    name: 'name',
+                    label: 'Function Name',
+                    type: 'text'
+                }),
+                Select({
+                    name: 'status',
+                    label: 'New Status',
+                    items: [
+                        'Enabled',
+                        "Disabled"
+                    ]
+                })
+            ]
+        })
+    })
+}