adminforth 1.0.80 → 1.0.82

package/spa/src/components/ResourceForm.vue

@@ -121,9 +121,6 @@
                         <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked[column.name]" />
                         <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
                     </button>
-
-
-
                     <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
 
                     <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
@@ -197,7 +194,11 @@ const columnError = (column) => {
       for (let i = 0; i < validationArray.length; i++) {
         if (validationArray[i].regExp) {
           const regExp = new RegExp(validationArray[i].regExp);
-          if (!regExp.test(currentValues.value[column.name])) {
+          let value = currentValues.value[column.name];
+          if (value === undefined || value === null) {
+            value = '';
+          }
+          if (!regExp.test(value)) {
             return validationArray[i].message;
           }
         }

package/spa/src/stores/core.ts

@@ -85,6 +85,7 @@ export const useCoreStore = defineStore('core', () => {
     } else {
       resourceColumns.value = res.resource.columns;
       resourceById.value[resourceId] = res.resource;
+      resourceOptions.value = res.resource.options;
     }
   }
 

package/spa/src/utils.ts

@@ -2,6 +2,7 @@ import { onMounted, ref, resolveComponent } from 'vue';
 import type {  CoreConfig } from './spa_types/core';
 
 import router from "./router";
+import { useRouter } from 'vue-router';
 import { useCoreStore } from './stores/core';
 
 export async function callApi({path, method, body=undefined} ) {
@@ -80,3 +81,14 @@ export function checkEmptyValues(value: any, viewType:'show' | 'list' ) {
   }
   return value;
 }
+
+export function checkAcessByAllowedActions(allowedActions:any, action:any ) {
+  if (!allowedActions) {
+    console.warn('allowedActions not set');
+    return;
+  }
+  if(allowedActions[action] === false) {
+    console.warn(`Action ${action} is not allowed`);
+    router.back();
+  }
+}

package/spa/src/views/CreateView.vue

@@ -23,6 +23,7 @@
     </BreadcrumbsWithButtons>
 
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
+
     
     <ResourceForm 
       v-else
@@ -35,6 +36,7 @@
     >
     </ResourceForm>
 
+
   </div>
 </template>
 
@@ -45,11 +47,12 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+
 const isValid = ref(false);
 const validating = ref(false);
 
@@ -81,6 +84,7 @@ onMounted(async () => {
       return acc;
     }, {});
   loading.value = false;
+  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
 });
 
 async function saveRecord() {

package/spa/src/views/EditView.vue

@@ -41,7 +41,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -79,6 +79,7 @@ const editableRecord = computed(() => {
 })
 
 onMounted(async () => {
+
   loading.value = true;
 
   await coreStore.fetchResourceFull({
@@ -88,6 +89,7 @@ onMounted(async () => {
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
+  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
 
   editComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
       if (column.component?.edit) {

package/spa/src/views/ListView.vue

@@ -65,7 +65,7 @@
     </BreadcrumbsWithButtons>
 
     <!-- table -->
-    <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	  rounded-default">
+    <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	overflow-y-hidden  rounded-default">
 
 
       <!-- skelet loader -->
@@ -208,6 +208,7 @@
           <td class=" items-center px-6 py-4">
             <div class="flex">
             <RouterLink
+              v-if="allowedActions.show"
               :to="{ name: 'resource-show', params: { resourceId: $route.params.resourceId, primaryKey: row._primaryKeyValue } }"
               class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
               :data-tooltip-target="`tooltip-show-${rowI}`"

package/spa/src/views/ShowView.vue

@@ -8,7 +8,7 @@
         Edit
       </RouterLink>
 
-      <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
+      <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="showDeleteModal"
         class="flex items-center py-1 px-3 mb-2 text-sm font-medium rounded-default 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" />
@@ -83,20 +83,26 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
-import { getCustomComponent } from '@/utils';
+import { useModalStore } from '@/stores/modal';
+import { getCustomComponent,checkAcessByAllowedActions } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute,useRouter } from 'vue-router';
+import {callAdminForthApi} from '@/utils';
 
 
 const item = ref(null);
 const route = useRoute();
+const router = useRouter();
 const loading = ref(false);
 let showComponentsPerColumn = {};
 let showRowComponentsPerColumn = {};
 
+console.log(route.params,'showWiev');
+
 
 const coreStore = useCoreStore();
+const modalStore = useModalStore();
 
 onMounted(async () => {
   loading.value = true;
@@ -107,6 +113,8 @@ onMounted(async () => {
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
+  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
+
   showComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
       if (column.component?.show) {
           acc[column.name] = getCustomComponent(column.component.show);
@@ -123,4 +131,40 @@ onMounted(async () => {
   loading.value = false;
 });
 
+function showDeleteModal(row) {
+  if (!coreStore.config?.deleteConfirmation) {
+    return deleteRecord(row);
+  }
+  modalStore.setModalContent({
+    content: 'Are you sure you want to delete this item?',
+    acceptText: 'Delete',
+    cancelText: 'Cancel',
+  });
+  modalStore.setOnAcceptFunction(() => {
+    return deleteRecord(row)
+  })
+  modalStore.togleModal();
+  
+
+}
+
+async function deleteRecord(row) {
+  try{
+    await callAdminForthApi({
+      path: '/delete_record',
+      method: 'POST',
+      body: {
+        resourceId: route.params.resourceId,
+        primaryKey: route.params.primaryKey,
+        recordId: route.params.primaryKey
+      }
+    });
+    router.push({ name: 'resource-list', params: { resourceId: route.params.resourceId } });
+  } catch (error) {
+    console.log(error);
+  }
+
+  modalStore.resetmodalState()
+}
+
 </script>

package/styles.js

@@ -0,0 +1,52 @@
+export const styles = () => `
+
+  "colors": {
+    "html-bg": "#FFFFFF", // Changed to white
+    "header-bg": "#EDEDED", // Light grey
+    "header-bg-hover": "#D3D3D3", // Light grey hover
+    "header-text": "#333333", // Dark grey text
+    "header-text-hover": "#333333", // Dark grey text hover
+    "header-icons": "#333333", // Dark grey icons
+    "header-icons-hover": "#333333", // Dark grey icons hover
+    "header-logo-color": "#333333", // Dark grey logo
+    "header-border-color": "#CCCCCC", // Light grey border
+
+    "nav-menu-bg": "#F5F5F5", // Very light grey
+    "nav-menu-bg-hover": "#E0E0E0", // Light grey hover
+    "nav-menu-bg-active": "#CCCCCC", // Light grey active
+    "nav-menu-hover": "#E0E0E0", // Light grey hover
+    "nav-menu-active": "#CCCCCC", // Light grey active
+    "nav-menu-active-text": "#333333", // Dark grey active text
+    "nav-menu-text": "#333333", // Dark grey text
+    "nav-menu-text-hover": "#333333", // Dark grey text hover
+    "nav-menu-text-active": "#333333", // Dark grey text active
+    "nav-menu-devider": "#E0E0E0", // Light grey divider
+    "nav-menu-icons": "#333333", // Dark grey icons
+    "nav-menu-heading": "#333333", // Dark grey heading
+
+    "list-view-bg": "#FFFFFF", // White background
+    "list-view-table-bg": "#FFFFFF", // White table background
+    "list-view-table-heading": "#F5F5F5", // Very light grey heading
+    "list-view-table-heading-text": "#333333", // Dark grey heading text
+    "list-view-table-text": "#333333", // Dark grey text
+    "list-view-table-row-hover": "#F0F0F0", // Very light grey row hover
+    "list-view-bread-crumbs-text": "#666666", // Medium grey bread crumbs
+    "list-view-border-color": "#DDDDDD", // Light grey border
+
+    "form-view-bg": "#FFFFFF", // White form background
+    "form-view-border-color": "#F5F5F5", // Very light grey border
+    "form-view-heading": "#EDEDED" // Dark grey heading
+  },
+  "boxShadow": {
+    "custom-light": "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
+    "header-shadow": "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
+    "list-table-shadow": "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
+    "resourse-form-shadow": "0 4px 8px rgba(0, 0, 0, 0.1)" // Lighter shadow
+  },
+  "fontSize": {
+    "header-text-size": "1rem"
+  },
+  "borderRadius": {
+    "default": "2px"
+  }
+`;

package/types/AdminForthConfig.ts

@@ -46,6 +46,7 @@ export type AdminForthResourceColumn = {
     showIn?: Array<string>,
     fillOnCreate?: Function,
     isUnique?: boolean,
+    validation?: Array<ValidationObject>,
     virtual?: boolean,
     allowMinMaxQuery?: boolean,
     component?: AdminForthResourceColumnComponent
@@ -62,13 +63,59 @@ export type AdminForthResourceColumn = {
   } 
   
 export type AdminForthResource = {
+    /**
+     * Unique identifier of resource. By default it equals to table name in database. 
+     * 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,
+
+    /**
+     * Label for resource which will be displayed in the admin panel.
+     * By default it equals to table name in database.
+     */
     label?: string,
+
+    /**
+     * Table name in database which will be used to fetch data from. Might be case sensitive.
+     */
     table: string,
+
+    /**
+     * ID of datasource which will be used to fetch data from.
+     */
     dataSource: string,
+
+    /**
+     * Array of columns which will be displayed in the admin panel.
+     * Each column has its own configuration.
+     */
     columns: Array<AdminForthResourceColumn>,
-    dataSourceColumns?: Array<AdminForthResourceColumn>,
+
+    dataSourceColumns?: Array<AdminForthResourceColumn>,  // TODO, mark as private
+
+    /**
+     * Hook which allow you to modify item label
+     * 
+     * Example:
+     * 
+     * ```ts
+     * itemLabel: (item) => `${item.name} - ${item.id}`,
+     * ```
+     * 
+     */
     itemLabel?: Function,
+
+    /**
+     * Hook which allow you to modify item title
+     * 
+     * Example:
+     * 
+     * ```ts
+     * itemTitle: (item) => `${item.name} - ${item.id}`,
+     * ```
+     * 
+     */
     plugins?: Array<AdminForthPluginType>,
     hooks?: {
       show?: {
@@ -109,37 +156,193 @@ export type AdminForthDataSource = {
     id: string,
     url: string,
 }
-  
-export  type AdminForthConfig = {
+
+/**
+ * Main configuration object for AdminForth
+ */
+export type AdminForthConfig = {
+
+    /**
+     * Root user should be used to login to the admin panel first time.
+     * Then you should create User for yourself using AdminForth (so it will be persisted in DB), 
+     * and then disable this option as it is less secure
+     */
     rootUser?: {
+      /**
+       * Username for root user
+       */
       username: string,
+
+      /**
+       * Password for root user
+       */
       password: string,
     },
+
+    /**
+     * Authorization module configuration
+     */
     auth?: {
+      /**
+       * Resource ID for user resource. 
+       * Resource is a table in database where users will be stored and fetched from. Resources and their ids are defined in resources section of the config.
+       * In other words this setting is a reference to a table in database where users will be fetched from on login. 
+       */
       resourceId: string,
+
+      /**
+       * Field name (column name) in user resource which will be used as username for searching user in database during login.
+       * Can be e.g. 'email' or 'username'
+       */
       usernameField: string,
+      
+      /**
+       * Field name (column name) in user resource which will be used to get hash of password.
+       * Can be e.g. 'passwordHash'
+       */
       passwordHashField: string,
+
+      /**
+       * File path to custom background image for login page
+       * Example:
+       * Place file `login-background.jpg` to `./custom` folder and set this option:
+       * 
+       * ```ts
+       * loginBackgroundImage: '@@/login-background.jpg',
+       * ```
+       */
       loginBackgroundImage?: string,
+
+      /**
+       * Optionally if your users table has a field(column) with full name, you can set it here.
+       * This field will be used to display user name in the top right corner of the admin panel.
+       */
       userFullNameField?: string,
     },
+     /**
+      * Array of resources which will be displayed in the admin panel.
+      * Resource represents one table or collection in database.
+      * Each resource has its own configuration.
+      */ 
     resources: Array<AdminForthResource>,
+
+    /**
+     * Array of left sidebar menu items which will be displayed in the admin panel.
+     * Menu items can be links to resources or custom pages.
+     * Menu items can be grouped.
+     * 
+     */
     menu: Array<AdminForthConfigMenuItem>,
-    databaseConnectors?: any,
+
+    /**
+     * If you want use custom DataSource which is not supported by AdminForth yet, you can define it's class here
+     * 
+     */
+    databaseConnectors?: any,  // TODO Define interface for database connector
+
+    /**
+     * List of data sources which will be used to fetch data for resources.
+     * Datasource is one database connection
+     * 
+     */
     dataSources: Array<DataSource>,
+
+    /**
+     * Settings which allow you to customize AdminForth
+     * 
+     */
     customization?: {
-      customComponentsDir?: string,
-      vueUsesFile?: string,
-      customPublicDir?: string,
+      /**
+       * Your app name
+       */
       brandName?: string,
+
+      /**
+       * Path to your app logo
+       * 
+       * Example:
+       * Place file `logo.svg` to `./custom` folder and set this option:
+       * 
+       * ```ts
+       * brandLogo: '@@/logo.svg',
+       * ```
+       * 
+       */
+      brandLogo?: string,
+
+      /**
+       * DayJS format string for all dates in the app
+       */
       datesFormat?: string,
+
+      /**
+       * HTML title tag value, defaults to brandName
+       */
       title?: string,
-      brandLogo?: string,
+
+      /**
+       * Placeholder for empty fields in lists and show views, by default empty string ''
+       */
       emptyFieldPlaceholder?: {
         show?: string,
         list?: string,
         
       } | string,
+
+      /**
+       * Relative or absolute path to custom components directory
+       * By default equals  `./custom`.
+       * 
+       * Custom .vue files, images, and any other assets placed in this directory can be accessed in AdminForth components and configs with `@@/`.
+       * 
+       * For example if file path is `./custom/comp/my.vue`, you can use it in AdminForth config like this:
+       * 
+       * ```ts
+       * component: {
+       *  show: '@@/comp/my.vue',
+       * }
+       * 
+       */
+      customComponentsDir?: string,
+
+      /**
+       * Path to custom .ts file which allows to inject custom Vue uses in SPA or add custom imports.
+       * 
+       * Example: Create file: `./custom/vue-uses.ts` with next content:
+       * 
+       * ```ts
+       * import HighchartsVue from 'highcharts-vue';
+       * // import '@@/custom.scss'; // here is how you can import custom styles
+       *
+       *  export default function (app) {
+       *    app.use(HighchartsVue);
+       * }
+       * ```
+       * 
+       * Install HighCharts:
+       * 
+       * ```bash
+       * npm install highcharts highcharts-vue
+       * ```
+       * 
+       * And specify vueUsesFile in AdminForth config:
+       * 
+       * ```ts
+       * vueUsesFile: '@@/vue-uses.ts',
+       * ```
+       * 
+       */
+      vueUsesFile?: string,
     },
+
+    /**
+     * If you want to Serve AdminForth from a subdirectory, e.g. on example.com/backoffice, you can specify it like:
+     * 
+     * ```ts
+     * baseUrl: '/backoffice',
+     * ```
+     * 
+     */
     baseUrl?: string,
    
     deleteConfirmation?: boolean,
@@ -152,15 +355,43 @@ export type AllowedActions = {
     edit?: boolean,
     show?: boolean,
     delete?: boolean,
-  }
+}
   
 export type ValidationObject = {
+    /**
+     * Should be pure string (not RegExp string)
+     * 
+     * Example:
+     * 
+     * ```ts
+     * // regex for email
+     * regExp: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
+     * ```
+     * 
+     */
     regExp: string,
+
+    /**
+     * Error message shown to user if validation fails
+     * 
+     * Example: "Invalid email format"
+     */
     message: string,
   }
 
 export type DataSource = {
+    /**
+     * ID of datasource which you will use in resources to specify from which database to fetch data from
+     */
     id: string,
+
+    /**
+     * URL to database. Examples:
+     * 
+     * - MongoDB: `mongodb://<user>:<password>@<host>:<port>/<database>`
+     * - PostgreSQL: `postgresql://<user>:<password>@<host>:<port>/<database>`
+     * - SQLite: `sqlite://<path>`
+     */
     url: string,
 }