adminforth 1.1.59 → 1.1.60

package/modules/utils.ts

@@ -1,6 +1,11 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs';
+var csscolors = require('css-color-names');
+
+
+
+
 
 
 export function guessLabelFromName(name) {
@@ -84,4 +89,92 @@ export function transformObject(obj, parentKey = '', result = {}) {
   }
 
   return result;
-}
+}
+
+
+function hexToRGBA(hex,opacity){
+  var c;
+  if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
+      c= hex.substring(1).split('');
+      if(c.length== 3){
+          c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+      }
+      c= '0x'+c.join('');
+      return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
+  }
+  throw new Error('Bad Hex');
+}
+
+ export function createRGBA(color:string, opacity:number) {
+  if(!color) return
+  else if (color.startsWith("rgba")) {
+    //add opacity to existing rgba color
+    const rgb = color.match(/[\d.]+/g);
+    console.log('rgb',rgb)
+    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${Number(rgb[3]) * opacity})`;
+  }
+  else if (color.startsWith("rgb")) {
+    const rgb = color.match(/\d+/g);
+    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;
+  }
+  else if (color.startsWith("#")) {
+    return hexToRGBA(color, opacity);
+  }
+  else if (csscolors[color]) {
+    return hexToRGBA(csscolors[color], opacity);
+  }
+  else {
+    return color;
+  }
+}
+
+export function parseColorForAliases(str){
+  const aliasRegex = /alias:([^ ]+)/;
+  const opacityRegex = /opacity:([0-9.]+)/;
+  const darkenRegex = /darken/;
+  const lightenRegex = /lighten/;
+
+  // Extract alias and properties
+  const aliasMatch = str.match(aliasRegex);
+  const opacityMatch = str.match(opacityRegex)
+  const darkenMatch = str.match(darkenRegex)
+  const lightenMatch = str.match(lightenRegex)
+  return {aliasMatch,opacityMatch,darkenMatch,lightenMatch}
+}
+
+export function darkenRGBA(rgba) {
+  let amount = 0.2
+  // Extract the RGBA components
+  let [r, g, b, a] = rgba.match(/\d+/g).map(Number);
+
+  // Ensure amount is between 0 and 1
+  amount = Math.max(0, Math.min(1, amount));
+
+  // Calculate the new RGB values
+  r = Math.max(0, r * (1 - amount));
+  g = Math.max(0, g * (1 - amount));
+  b = Math.max(0, b * (1 - amount));
+
+  // Return the new RGBA color
+  return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${a})`;
+}
+
+export function lightenRGBA(rgba) {
+  let amount = 0.2
+  // Extract the RGBA components
+  let [r, g, b, a] = rgba.match(/\d+/g).map(Number);
+
+  // Ensure amount is between 0 and 1
+  amount = Math.max(0, Math.min(1, amount));
+
+  // Calculate the new RGB values
+  r = Math.min(255, r * (1 + amount));
+  g = Math.min(255, g * (1 + amount));
+  b = Math.min(255, b * (1 + amount));
+
+  // Return the new RGBA color
+  return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${a})`;
+}
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.1.59",
+  "version": "1.1.60",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,6 +17,7 @@
   "dependencies": {
     "better-sqlite3": "^10.0.0",
     "crypto": "^1.0.1",
+    "css-color-names": "^1.0.1",
     "dayjs": "^1.11.11",
     "express": "^4.19.2",
     "filewatcher": "^3.0.1",

package/plugins/AuditLogPlugin/custom/AuditLogView.vue

@@ -0,0 +1,20 @@
+<script setup>
+import VueDiff from 'vue-diff';
+import { ref } from 'vue';
+import 'vue-diff/dist/index.css';
+
+const props = defineProps(['prev', 'current', 'meta']);
+
+app.use(VueDiff);
+</script>
+
+<template>
+    <Diff
+      :mode="'split'"
+      :theme="'light'"
+      :language="'plaintext'"
+      :prev="props.prev"
+      :current="props.current"
+    />
+  </template>
+  

package/plugins/AuditLogPlugin/index.ts

@@ -0,0 +1,99 @@
+import AdminForth from "../../index.js";
+import { 
+  AdminForthResource, AdminForthClass, BeforeDataSourceRequestFunction,
+  AllowedActionsEnum,
+  BeforeSaveFunction,
+  AdminUser,
+  AdminForthDataTypes
+} from "../../types/AdminForthConfig.js";
+import AdminForthPlugin from "../base.js";
+import { PluginOptions } from "./types.js";
+
+
+
+export default class AuditLogPlugin extends AdminForthPlugin {
+ 
+  options: PluginOptions;
+  adminforth: AdminForthClass;
+  auditLogResource: string;
+
+  constructor(options: PluginOptions) {
+    super(options, import.meta.url);
+    this.options = options;
+  }
+
+  static defaultError = 'Sorry, you do not have access to this resource.'
+
+  createLogRecord = async (resource: AdminForthResource, action: AllowedActionsEnum, data: Object, user: AdminUser) => {
+    const recordIdFieldName = resource.columns.find((c) => c.primaryKey === true)?.name;
+    const recordId = data[recordIdFieldName];
+    const record = {
+      [this.options.resourceColumns.resourceIdColumnName]: resource.resourceId,
+      [this.options.resourceColumns.resourceActionColumnName]: action,
+      [this.options.resourceColumns.resourceDataColumnName]: data,
+      [this.options.resourceColumns.resourceUserIdColumnName]: user.pk,
+      [this.options.resourceColumns.resourceRecordIdColumnName]: recordId,
+      [this.options.resourceColumns.resourceCreatedColumnName]: new Date()
+    }
+    const auditLogResource = this.adminforth.config.resources.find((r) => r.resourceId === this.auditLogResource);
+    console.log('rec', record);
+    await this.adminforth.createResourceRecord({ resource: auditLogResource, record, adminUser: user});
+    return {ok: true};
+  }
+
+  modifyResourceConfig(adminforth: AdminForthClass, resourceConfig: AdminForthResource) {
+    super.modifyResourceConfig(adminforth, resourceConfig);
+    this.adminforth = adminforth;
+    this.auditLogResource = resourceConfig.resourceId;
+
+    this.adminforth.config.resources.forEach((resource) => {
+      if (this.options.excludeResourceIds?.includes(resource.resourceId)) {
+        return;
+      }
+
+      if (this.auditLogResource === resource.resourceId) {
+        let diffColumn = resource.columns.find((c) => c.name === this.options.resourceColumns.resourceDataColumnName); 
+        if (!diffColumn) {
+          diffColumn = {
+            name: this.options.resourceColumns.resourceDataColumnName,
+            components: {},
+            // type: AdminForthDataTypes.STRING
+          }
+        }
+      
+        diffColumn.components = {
+          showRow: { 
+            file: this.componentPath('AuditLogView.vue'),
+            meta: {
+              ...this.options, 
+              pluginInstanceId: this.pluginInstanceId
+            }
+          }
+        }
+        resource.columns.push(diffColumn);
+        return;
+      }
+
+      const defaultHooks = {
+        create: { beforeSave: [] },
+        edit: { beforeSave: [] },
+        delete: { beforeSave: [] }
+      }
+
+      if ( !resource.hooks ) {
+        resource.hooks = defaultHooks; 
+      } else {
+         resource.hooks = {...defaultHooks, ...resource.hooks}
+      }
+
+      Object.keys(resource.hooks).forEach((hook) => {
+        if(!Array.isArray(resource.hooks[hook].beforeSave)){
+          resource.hooks[hook].beforeSave = [resource.hooks[hook].beforeSave]
+        }
+        resource.hooks[hook].beforeSave.push(async ({resource, record, adminUser}) => {
+          return await this.createLogRecord(resource, hook as AllowedActionsEnum, record, adminUser)
+        })
+      })
+    })
+  }
+}

package/plugins/AuditLogPlugin/types.ts

@@ -0,0 +1,40 @@
+export type PluginOptions = {
+    /**
+     * Id of the resource to be ignored from audit log.
+    */
+    excludeResourceIds?: string[];
+    /**
+     * Mappping of columns for audit log table.
+    */
+    resourceColumns: {
+        /** 
+         * Should be name of column were plugin will store resourceId.
+         * Column should be of type string.
+        */
+        resourceIdColumnName: string
+
+        /** 
+         * Should be name of column were plugin will store action.
+         * Column should be of type string.
+        */
+        resourceActionColumnName: string
+
+        /** 
+         * Should be name of column were plugin will store data.
+         * Column should be of type string.
+        */
+        resourceDataColumnName: string
+
+        /** 
+         * Should be name of column were plugin will store user id.
+         * Column should be same type as type of column where user id is stored.
+         * E.g. is user id is stored as UUID, then this column should be of type UUID.
+        */
+        resourceUserIdColumnName: string
+
+        resourceRecordIdColumnName: string
+
+        resourceCreatedColumnName: string
+    }
+
+}

package/spa/package-lock.json

@@ -19,6 +19,7 @@
         "unhead": "^1.9.12",
         "uuid": "^10.0.0",
         "vue": "^3.4.21",
+        "vue-diff": "^1.2.4",
         "vue-router": "^4.3.0",
         "vue-slider-component": "^4.1.0-beta.7"
       },
@@ -1902,6 +1903,11 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
+    "node_modules/diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2526,6 +2532,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -4120,6 +4134,103 @@
         }
       }
     },
+    "node_modules/vue-diff": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/vue-diff/-/vue-diff-1.2.4.tgz",
+      "integrity": "sha512-9z+0uPHigi/DdE3Zhdg1zR3VkiBaDN4czjWa/Zznvizn4znckVqz20p1KytaWq5NJtJ7UnkqRbuWsaCuC1ZHaA==",
+      "dependencies": {
+        "@vueuse/core": "^8.3.1",
+        "diff-match-patch": "^1.0.5",
+        "highlight.js": "^11.5.1"
+      }
+    },
+    "node_modules/vue-diff/node_modules/@types/web-bluetooth": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
+      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+    },
+    "node_modules/vue-diff/node_modules/@vueuse/core": {
+      "version": "8.9.4",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
+      "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.14",
+        "@vueuse/metadata": "8.9.4",
+        "@vueuse/shared": "8.9.4",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-diff/node_modules/@vueuse/metadata": {
+      "version": "8.9.4",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
+      "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/vue-diff/node_modules/@vueuse/shared": {
+      "version": "8.9.4",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
+      "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-diff/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.2",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",

package/spa/package.json

@@ -23,6 +23,7 @@
     "unhead": "^1.9.12",
     "uuid": "^10.0.0",
     "vue": "^3.4.21",
+    "vue-diff": "^1.2.4",
     "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7"
   },

package/spa/src/App.vue

@@ -19,7 +19,7 @@
             <div>
               <button type="button" class="flex text-sm bg- rounded-full focus:ring-4 focus:ring-lightSidebarDevider dark:focus:ring-darkSidebarDevider dark:bg-" aria-expanded="false" data-dropdown-toggle="dropdown-user">
                 <span class="sr-only">Open user menu</span>
-                <svg class="w-8 h-8 text-lightSidebarIcons dark:text-darkSidebarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                <svg class="w-8 h-8 text-lightNavbarIcons dark:text-darkNavbarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                   <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
                 </svg>
               </button>
@@ -63,10 +63,10 @@
     :class="{ '-translate-x-full': !sideBarOpen, 'transform-none': sideBarOpen }"
     aria-label="Sidebar"
   >
-    <div class="h-full px-3 pb-4 overflow-y-auto bg-lightSidebar dark:bg-darkSidebar border-r dark:border-darkSidebarBorder">
+    <div class="h-full px-3 pb-4 overflow-y-auto bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder">
       <div class="flex ms-2 md:me-24  m-4  ">
         <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />
-        <span class="self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkNavbarText text-lightNavbarLogo">
+        <span class="self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText">
           {{ coreStore.config?.brandName }}
         </span>
       </div>
@@ -75,7 +75,7 @@
           <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
             <div v-if="item.type === 'divider'" class="border-t border-lightSidebarDevider dark:border-darkSidebarDevider"></div>
             <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
-            <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-gray-400 dark:text-gray-400
+            <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-lightSidebarHeading dark:text-darkSidebarHeading
             ">{{ item.label }}</div>
             <li v-else-if="item.children" class="  ">
               <button @click="clickOnMenuItem(i)" type="button" class="flex items-center w-full p-2 text-base text-lightSidebarText rounded-default transition duration-75  group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover" 

package/spa/src/components/MenuLink.vue

@@ -1,7 +1,7 @@
 <template>
   <RouterLink 
       :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
-      class="flex group items-center py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default  hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover" role="menuitem"
+      class="flex group items-center py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default  hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover" role="menuitem"
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,

package/spa/src/components/ResourceForm.vue

@@ -21,7 +21,7 @@
                   class="bg-ligftForm dark:bg-gray-800 border-b dark:border-gray-700"
               >
                 <!-- if column is in customComponentsPerColumn, use this component. If not, use this code -->
-                <template v-if="column?.components?.[props.source].file">
+                <template v-if="column?.components?.[props.source]?.file">
                     <component
                         :is="getCustomComponent(column.components[props.source])"
                         :column="column"

package/types/AdminForthConfig.ts

@@ -83,6 +83,11 @@ export interface AdminForthClass {
   codeInjector: CodeInjectorType;
   express: GenericHttpServer;
 
+  connectors: {
+    [key: string]: AdminForthDataSource
+  };
+
+  createResourceRecord(params: { resource: AdminForthResource, record: any, adminUser: AdminUser }): Promise<any>;
 
   auth: {
 
@@ -461,7 +466,7 @@ export type AdminForthResource = {
      * If you wish you can explicitly set it to any string.
      * We added to support cases when 2 datasources have tables with the same name.
      */
-    resourceId: string,
+    resourceId?: string,
 
     /**
      * Label for resource which will be displayed in the admin panel.