adminforth 1.0.25 → 1.0.27

package/dist/spa/src/views/ShowView.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="relative">
+    <BreadcrumbsWithButtons>
+      <RouterLink :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
+        class="flex items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      >
+        <IconPenSolid class="w-4 h-4" />
+        Edit
+      </RouterLink>
+
+      <button  @click="deleteRecord"
+        class="flex items-center py-1 px-3 mb-2 text-sm font-medium text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      >
+        <IconTrashBinSolid class="w-4 h-4" />
+        Delete
+      </button>
+    </BreadcrumbsWithButtons>
+
+    <div v-if="loading" role="status" class="max-w-sm animate-pulse">
+        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
+        <span class="sr-only">Loading...</span>
+    </div>
+    <div 
+      v-else
+      class="relative overflow-x-auto shadow-md sm:rounded-lg"
+    >
+     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+                <th scope="col" class="px-6 py-3">
+                    Field
+                </th>
+                <th scope="col" class="px-6 py-3 w-4/6">
+                    Value
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
+                class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
+            >
+                <td class="px-6 py-4 whitespace-nowrap">
+                    {{ column.label }}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
+                    <ValueRenderer :column="column" :row="coreStore.record" />
+                </td>
+            </tr>
+            
+        </tbody>
+    </table>
+</div>
+
+
+  </div>
+</template>
+
+
+<script setup>
+
+import { ref, computed, onMounted } from 'vue';  
+import { useRoute } from 'vue-router';
+import { callAdminForthApi } from '@/utils';
+import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
+import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
+import { useCoreStore } from '@/stores/core';
+import ValueRenderer from '@/components/ValueRenderer.vue';
+
+
+const item = ref(null);
+const route = useRoute();
+const loading = ref(false);
+
+const coreStore = useCoreStore();
+
+onMounted(async () => {
+  loading.value = true;
+  await coreStore.fetchColumns({
+    resourceId: route.params.resourceId
+  });
+  await coreStore.fetchRecord({
+    resourceId: route.params.resourceId, 
+    primaryKey: route.params.primaryKey,
+  });
+  loading.value = false;
+});
+
+</script>

package/dist/spa/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content:  ["./src/**/*.{vue, js}", "./node_modules/flowbite/**/*.js"],
+  theme: {
+    extend: {},
+  },
+  darkMode: 'class',
+  plugins: [
+    require('flowbite/plugin'),
+  ],
+}
+

package/dist/spa/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/dist/spa/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/dist/spa/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/dist/spa/vite.config.ts

@@ -0,0 +1,43 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+
+const customLogger = {
+  info(msg: string) {
+    // Filter out the lines containing '➜ Local:' or '➜ Network:'
+    if (!msg.includes('➜')) {
+      console.log(msg);
+    }
+  },
+  warn(msg: string) {
+    console.warn(msg);
+  },
+  error(msg: string) {
+    console.error(msg);
+  },
+  clear() {
+    console.clear();
+  },
+  hasWarned: false,
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: process.env.VITE_ADMINFORTH_PUBLIC_PATH || '/',
+  server: {
+    port: 5173,
+    strictPort: true, // better predictability
+  },
+  customLogger,
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@@': fileURLToPath(new URL('./src/custom', import.meta.url)),
+    }
+  }
+})

package/index.ts

@@ -13,6 +13,7 @@ import fs from 'fs';
 import { AdminForthFilterOperators, AdminForthTypes, AdminForthTypesValues } from './types.js';
 
 const AVAILABLE_SHOW_IN = ['list', 'edit', 'create', 'filter', 'show'];
+const DEFAULT_ALLOWED_ACTIONS = {create: true, edit: true, show: true, delete: true};
 
 type AdminForthConfigMenuItem = {
   label: string,
@@ -24,6 +25,7 @@ type AdminForthConfigMenuItem = {
   children?: Array<AdminForthConfigMenuItem>,
 }
 
+
 type AdminForthResourceColumn = {
   name: string,
   label?: string,
@@ -67,7 +69,8 @@ type AdminForthResource = {
       icon: string,
       action: Function,
     }>,
-    allowDelete?: boolean,
+    allowedActions?: AllowedActions,
+    
   },
 }
 
@@ -102,6 +105,13 @@ type AdminForthConfig = {
   deleteConfirmation?: boolean,
 }
 
+type AllowedActions = {
+  create: boolean,
+  edit: boolean,
+  show: boolean,
+  delete: boolean,
+}
+
 class AdminForth {
   static Types = AdminForthTypes;
 
@@ -248,6 +258,10 @@ class AdminForth {
           col.showIn = col.showIn?.map(c => c.toLowerCase()) || AVAILABLE_SHOW_IN;
         })
 
+        if (!res.options) {
+          res.options = {bulkActions: [], allowedActions: {}};
+        }
+
 
         //check if resource has bulkActions
         if(res.options?.bulkActions){
@@ -276,7 +290,22 @@ class AdminForth {
           });
           bulkActions = newBulkActions;
         }
-      });
+
+          //add default allowedActions to resources
+          if(res.options.allowedActions){
+            //check if allowedActions is an object
+            if(typeof res.options.allowedActions !== 'object'){
+              errors.push(`Resource "${res.resourceId}" allowedActions must be an object`);
+            }
+            const userAllowedActions = res.options.allowedActions 
+            res.options.allowedActions = Object.assign({}, DEFAULT_ALLOWED_ACTIONS, userAllowedActions);         
+          } else {
+            res.options.allowedActions = DEFAULT_ALLOWED_ACTIONS;
+          }
+        })
+
+    
+
 
       if (!this.config.menu) {
         errors.push('No config.menu defined');

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "adminforth",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
-    "rollout": "tsc && npm version patch  && npm publish"
+    "rollout": "tsc && cp -r spa dist/spa && npm version patch  && npm publish"
   },
   "author": "devforth.io",
   "license": "ISC",

package/spa/src/views/ListView.vue

@@ -42,7 +42,7 @@
         {{ `${action.label} (${checkboxes.length})` }}
       </button>
 
-      <RouterLink
+      <RouterLink v-if="allowedActions.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
         class="flex items-center py-1 px-3  mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
@@ -217,7 +217,7 @@
               <div class="tooltip-arrow" data-popper-arrow></div>
             </div>
 
-            <RouterLink
+            <RouterLink v-if="allowedActions.edit"
               :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: row._primaryKeyValue } }"
               class="font-medium text-blue-600 dark:text-blue-500 hover:underline ms-3"
               :data-tooltip-target="`tooltip-edit-${rowI}`"
@@ -232,7 +232,7 @@
               <div class="tooltip-arrow" data-popper-arrow></div>
             </div>
 
-            <button v-if="allowDelete"
+            <button v-if="allowedActions.delete"
                     class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3"
                     :data-tooltip-target="`tooltip-delete-${rowI}`"
                     @click="showDeleteModal(row)"
@@ -355,7 +355,8 @@ const fetchStatus = ref({pending: false, error: null, success: false});
 const rows = ref(null);
 const totalRows = ref(0);
 const allCheckedActions = ref([]);
-const allowDelete = ref(false);
+const allowedActions = ref({});
+
 
 const DEFAULT_PAGE_SIZE = 10;
 
@@ -432,8 +433,8 @@ async function getList() {
   });
   totalRows.value = data.total;
   allCheckedActions.value = data.options?.bulkActions || [];
-  allowDelete.value = data.options?.allowDelete;
-
+  allowedActions.value = data.options?.allowedActions;
+  
 
   setTimeout(() => {
     initFlowbite();

package/dist/spa/src/main.js

@@ -1,16 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const vue_1 = require("vue");
-const pinia_1 = require("pinia");
-/* IMPORTANT:ADMINFORTH IMPORTS */
-const App_vue_1 = __importDefault(require("./App.vue"));
-const router_1 = __importDefault(require("./router"));
-const app = (0, vue_1.createApp)(App_vue_1.default);
-/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */
-app.use((0, pinia_1.createPinia)());
-app.use(router_1.default);
-/* IMPORTANT:ADMINFORTH CUSTOM USES */
-app.mount('#app');

package/dist/spa/src/router/index.js

@@ -1,79 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const vue_router_1 = require("vue-router");
-const HomeView_vue_1 = __importDefault(require("../views/HomeView.vue"));
-const ResourceParent_vue_1 = __importDefault(require("@/views/ResourceParent.vue"));
-const ListView_vue_1 = __importDefault(require("@/views/ListView.vue"));
-const ShowView_vue_1 = __importDefault(require("@/views/ShowView.vue"));
-const EditView_vue_1 = __importDefault(require("@/views/EditView.vue"));
-const CreateView_vue_1 = __importDefault(require("@/views/CreateView.vue"));
-const router = (0, vue_router_1.createRouter)({
-    history: (0, vue_router_1.createWebHistory)(import.meta.env.BASE_URL),
-    routes: [
-        {
-            path: '/',
-            name: 'home',
-            component: HomeView_vue_1.default
-        },
-        {
-            path: '/login',
-            name: 'login',
-            component: () => Promise.resolve().then(() => __importStar(require('@/views/LoginView.vue')))
-        },
-        {
-            path: '/resource/:resourceId',
-            component: ResourceParent_vue_1.default,
-            name: 'resource',
-            children: [
-                {
-                    path: '',
-                    component: ListView_vue_1.default,
-                    name: 'resource-list'
-                },
-                {
-                    path: 'show/:primaryKey',
-                    component: ShowView_vue_1.default,
-                    name: 'resource-show'
-                },
-                {
-                    path: 'edit/:primaryKey',
-                    component: EditView_vue_1.default,
-                    name: 'resource-edit'
-                },
-                {
-                    path: 'create',
-                    component: CreateView_vue_1.default,
-                    name: 'resource-create'
-                },
-            ]
-        },
-        /* IMPORTANT:ADMINFORTH ROUTES */
-    ]
-});
-exports.default = router;

package/dist/spa/src/stores/core.js

@@ -1,154 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCoreStore = void 0;
-const vue_1 = require("vue");
-const pinia_1 = require("pinia");
-const utils_1 = require("@/utils");
-const router_1 = __importDefault(require("@/router"));
-function findHomepage(menu) {
-    return __awaiter(this, void 0, void 0, function* () {
-        for (const item of menu) {
-            if (item.homepage) {
-                return item;
-            }
-            if (item.children) {
-                const res = findHomepage(item.children);
-                if (res) {
-                    return res;
-                }
-            }
-        }
-        return null;
-    });
-}
-exports.useCoreStore = (0, pinia_1.defineStore)('core', () => {
-    const resourceById = (0, vue_1.ref)([]);
-    const menu = (0, vue_1.ref)([]);
-    const config = (0, vue_1.ref)({});
-    const record = (0, vue_1.ref)({});
-    const resourceColumns = (0, vue_1.ref)(null);
-    const resourceColumnsError = (0, vue_1.ref)('');
-    const resourceColumnsId = (0, vue_1.ref)(null);
-    const user = (0, vue_1.ref)(null);
-    function fetchMenuAndResource() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const resp = yield (0, utils_1.callAdminForthApi)({
-                path: '/get_base_config',
-                method: 'GET',
-            });
-            menu.value = resp.menu;
-            resourceById.value = resp.resources.reduce((acc, resource) => {
-                acc[resource.resourceId] = resource;
-                return acc;
-            }, {});
-            config.value = resp.config;
-            user.value = resp.user;
-            // find homepage:true in menu recuresively
-            if (import.meta.env.DEV) {
-                return;
-            }
-            else {
-                const homepage = yield findHomepage(menu.value);
-                if (homepage) {
-                    if (homepage.resourceId) {
-                        // redirect to homepage
-                        router_1.default.push({ name: 'resource-list', params: { resourceId: homepage.resourceId } });
-                    }
-                    else {
-                        // redirect to path
-                        router_1.default.push(homepage.path);
-                    }
-                }
-            }
-        });
-    }
-    function fetchRecord(_a) {
-        return __awaiter(this, arguments, void 0, function* ({ resourceId, primaryKey }) {
-            record.value = null;
-            record.value = yield (0, utils_1.callAdminForthApi)({
-                path: '/get_record',
-                method: 'POST',
-                body: {
-                    resourceId: resourceId,
-                    primaryKey: primaryKey,
-                }
-            });
-        });
-    }
-    function fetchColumns(_a) {
-        return __awaiter(this, arguments, void 0, function* ({ resourceId }) {
-            if (resourceColumnsId.value === resourceId && resourceColumns.value) {
-                // already fetched
-                return;
-            }
-            resourceColumnsId.value = resourceId;
-            resourceColumns.value = null;
-            resourceColumnsError.value = '';
-            const res = yield (0, utils_1.callAdminForthApi)({
-                path: '/get_resource_columns',
-                method: 'POST',
-                body: {
-                    resourceId,
-                }
-            });
-            if (res.error) {
-                resourceColumnsError.value = res.error;
-            }
-            else {
-                resourceColumns.value = res.resource.columns;
-            }
-        });
-    }
-    function getPublicConfig() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const res = yield (0, utils_1.callAdminForthApi)({
-                path: '/get_public_config',
-                method: 'GET',
-            });
-            config.value = Object.assign(Object.assign({}, config.value), res);
-        });
-    }
-    function logout() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield (0, utils_1.callAdminForthApi)({
-                path: '/logout',
-                method: 'POST',
-            });
-        });
-    }
-    const username = (0, vue_1.computed)(() => {
-        const usernameField = config.value.usernameField;
-        return user.value && user.value[usernameField];
-    });
-    const userFullname = (0, vue_1.computed)(() => {
-        const userFullnameField = config.value.userFullnameField;
-        return user.value && user.value[userFullnameField];
-    });
-    return {
-        config,
-        resourceById,
-        menu,
-        username,
-        userFullname,
-        getPublicConfig,
-        fetchMenuAndResource,
-        fetchRecord,
-        record,
-        resourceColumns,
-        fetchColumns,
-        resourceColumnsError,
-        logout
-    };
-});

package/dist/spa/src/stores/modal.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useModalStore = void 0;
-const vue_1 = require("vue");
-const pinia_1 = require("pinia");
-exports.useModalStore = (0, pinia_1.defineStore)('modal', () => {
-    const modalContent = (0, vue_1.ref)({
-        title: 'title',
-        content: 'content',
-        acceptText: 'acceptText',
-        cancelText: 'cancelText',
-    });
-    const isOpened = (0, vue_1.ref)(false);
-    const onAcceptFunction = (0, vue_1.ref)(() => { });
-    function togleModal() {
-        isOpened.value = !isOpened.value;
-    }
-    function setOnAcceptFunction(func) {
-        onAcceptFunction.value = func;
-    }
-    function setModalContent(content) {
-        modalContent.value = content;
-    }
-    function resetmodalState() {
-        isOpened.value = false;
-        modalContent.value = {
-            title: 'title',
-            content: 'content',
-            acceptText: 'acceptText',
-            cancelText: 'cancelText',
-        };
-        setOnAcceptFunction(() => { });
-    }
-    return { isOpened, setModalContent, togleModal, modalContent, setOnAcceptFunction, onAcceptFunction, resetmodalState };
-});