adminforth 1.2.56 → 1.2.58

package/dist/spa/src/types/FrontendAPI.ts

@@ -0,0 +1,121 @@
+ 
+export interface FrontendAPIInterface {
+
+    /**
+     * Show a confirmation dialog
+     * 
+     * The dialog will be displayed to the user
+     * 
+     * Example: 
+     * 
+     * ```ts
+     * const isConfirmed = await window.adminforth.confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
+     * if (isConfirmed) {
+     *  your code...
+     * }
+     * ```
+     * 
+     * @param params - The parameters of the dialog
+     * @returns A promise that resolves when the user confirms the dialog
+     */   
+    confirm(params:ConfirmParams ): Promise<void>;
+    /**
+     * Show an alert
+     * 
+     * The alert will be displayed to the user
+     * 
+     * Example:
+     * 
+     * ```ts
+     *  window.adminforth.alert({message: 'Hello', variant: 'success'})
+     * ```
+     * 
+     * @param params - The parameters of the alert
+     */
+    alert(params:AlertParams): void;
+    /**
+     * Add a filter to the list of filters.
+     * Works only when user located on the list page.
+     * Can be used to set filter from charts or other components in pageInjections.
+     * 
+     * Example:
+     * 
+     * ```ts
+     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
+     * ```
+     * 
+     * @param filter - The filter to add
+     */
+    setListFilter(filter: any): void;
+    /**
+     * Update a filter in the list of filters
+     * 
+     * Example:
+     * 
+     * ```ts
+     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
+     * ```
+     * 
+     * @param filter - The filter to update
+     */
+    updateListFilter(filter: any): void;
+    /**
+     * Clear all filters from the list
+     */
+    clearListFilters(): void;
+
+}
+
+export type ConfirmParams = {
+    /**
+     * The message to display in the dialog
+     */
+    message?: string;
+    /**
+     * The text to display in the "accept" button
+     */
+    yes?: string;
+    /**
+     * The text to display in the "cancel" button
+     */
+    no?: string;
+   
+}
+
+export type AlertParams = {
+    /**
+     * The message to display in the alert
+     */
+    message?: string;
+
+    /**
+     * The message to display in the alert as HTML (can be used instead of message)
+     */
+    messageHtml?: string;
+    
+    /**
+     * The variant of the alert
+     */
+    variant?: AlertVariant | keyof typeof AlertVariant;
+
+    /**
+     * The timeout of the alert in seconds or 'unlimited' to keep the alert open until the user closes it.
+     * Default is 10 seconds;
+     */
+    timeout?: number | 'unlimited';
+    
+}
+
+
+
+export enum AlertVariant {
+    danger = 'danger',
+    success = 'success',
+    warning = 'warning',
+    info = 'info'
+  }
+
+  
+  
+
+

package/dist/spa/src/utils.ts

@@ -6,7 +6,10 @@ import { useRouter } from 'vue-router';
 import { useCoreStore } from './stores/core';
 import { useUserStore } from './stores/user';
 
-export async function callApi({path, method, body=undefined} ) {
+export async function callApi({path, method, body=undefined}: {
+  path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
+  body?: any
+}): Promise<any> {
   const options = {
     method,
     headers: {
@@ -16,7 +19,7 @@ export async function callApi({path, method, body=undefined} ) {
   };
   const fullPath = `${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}${path}`;
   const r = await fetch(fullPath, options);
-  if (r.status == 401) {
+  if (r.status == 401 ) {
     useUserStore().unauthorize();
     router.push({ name: 'login' });
     return null;
@@ -39,7 +42,6 @@ export async function callAdminForthApi({ path, method, body=undefined }: {
 
 export function getCustomComponent({ file, meta }: { file: string, meta: any }) {
   const name = file.replace(/@/g, '').replace(/\./g, '').replace(/\//g, '');
-  console.log('resolving name', name);
   return resolveComponent(name);
 }
 
@@ -71,7 +73,7 @@ export const loadFile = (file: string) => {
   return baseUrl;
 }
 
-export function checkEmptyValues(value: any, viewType:'show' | 'list' ) {
+export function checkEmptyValues(value: any, viewType: 'show' | 'list' ) {
   const config: CoreConfig | {} = useCoreStore().config;
   let emptyFieldPlaceholder = '';
   if (config.emptyFieldPlaceholder) {

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

@@ -50,7 +50,7 @@
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :customComponentsPerColumn="createComponentsPerColumn"
+      :source="'create'"
     >
     </ResourceForm>
 
@@ -91,7 +91,6 @@ const route = useRoute();
 const router = useRouter();
 
 const record = ref({});
-let createComponentsPerColumn = {};
 
 const coreStore = useCoreStore();
 
@@ -115,17 +114,12 @@ onMounted(async () => {
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
-  createComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.create) {
-          acc[column.name] = getCustomComponent(column.components.create);
-      }
-      return acc;
-    }, {});
   loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
 });
 
 async function saveRecord() {
+  console.log('saveRecord isValid', isValid.value);
   if (!isValid.value) {
     validating.value = true;
     return;
@@ -143,7 +137,6 @@ async function saveRecord() {
   });
   if (response.error) {
     showErrorTost(response.error);
-    
   }
   saving.value = false;
   if (route.query.returnTo) {

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

@@ -46,7 +46,7 @@
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :customComponentsPerColumn="editComponentsPerColumn"
+      :source="'edit'"
     >
     </ResourceForm>
 
@@ -88,7 +88,6 @@ const loading = ref(false);
 const saving = ref(false);
 
 const record = ref({});
-let editComponentsPerColumn = {};
 
 async function onUpdateRecord(newRecord) {
   record.value = newRecord;
@@ -119,13 +118,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
-
-  editComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.edit) {
-          acc[column.name] = getCustomComponent(column.components.edit);
-      }
-      return acc;
-    }, {});
   loading.value = false;
 });
 

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

@@ -22,7 +22,7 @@
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
         data-tooltip-placement="bottom"
-        class="flex gap-1  items-center py-1 px-3 me-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 rounded-default"
+        class="flex gap-1  items-center py-1 px-3 me-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-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <IconBanOutline class="w-5 h-5 "/>
 
@@ -70,7 +70,7 @@
           class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
           v-if="filtersStore.filters.length">
             {{ filtersStore.filters.length }}
-          </span>
+        </span>
       </button>
     </BreadcrumbsWithButtons>
 
@@ -89,6 +89,7 @@
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
       @update:records="getList"
+      :sort="sort"
       :pageSize="pageSize"
       :totalRows="totalRows"
       :checkboxes="checkboxes"
@@ -123,11 +124,7 @@ import { getCustomComponent } from '@/utils';
 
 import {
   IconBanOutline,
-  IconEyeSolid,
   IconFilterOutline,
-  IconPenSolid,
-  IconTrashBinSolid,
-  IconInboxOutline,
   IconPlusOutline
 } from '@iconify-prerendered/vue-flowbite';
 
@@ -136,13 +133,11 @@ import Filters from '@/components/Filters.vue';
 const filtersShow = ref(false);
 
 const coreStore = useCoreStore();
-const modalStore = useModalStore();
 const filtersStore = useFiltersStore();
 
 const route = useRoute();
 
 const page = ref(1);
-const filters = filtersStore.filters;
 const columnsMinMax = ref({});
 const sort = ref([]);
 
@@ -199,11 +194,6 @@ async function getList() {
   totalRows.value = data.total;
 }
 
-
-
-
-
-
 async function startBulkAction(actionId) {
   const data = await callAdminForthApi({
     path: '/start_bulk_action',
@@ -215,10 +205,13 @@ async function startBulkAction(actionId) {
 
     }
   });
-  if (data?.status === 'success') {
+  if (data?.ok) {
     checkboxes.value = [];
+    await getList();
+  }
+  if (data?.error) {
+    showErrorTost(data.error);
   }
-  await getList();
 }
 
 
@@ -229,6 +222,15 @@ async function init() {
     resourceId: route.params.resourceId
   });
 
+  if (coreStore.resource.options?.defaultSort) {
+    sort.value = [{
+        field: coreStore.resource.options.defaultSort.columnName,
+        direction: coreStore.resource.options.defaultSort.direction
+    }];
+  } else {
+    sort.value = [];
+  }
+
   await getList();
   columnsMinMax.value = await callAdminForthApi({
     path: '/get_min_max_for_columns',
@@ -250,7 +252,6 @@ onMounted(async () => {
 watch(() => route.params.resourceId, async () => {
   filtersStore.setFilters([]);
   checkboxes.value = [];
-  sort.value = [];
   await init();
 });
 

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

@@ -22,17 +22,23 @@
                 </div>
                 <!-- Modal body -->
                 <div class="p-4 md:p-5">
-                    <form class="space-y-4"  @submit.prevent>
+                    <form class="space-y-4" @submit.prevent>
                         <div>
                             <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
-                            <input type="username" name="username" id="username" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
+                            <input type="username" name="username" id="username" 
+                              ref="usernameInput"
+                              @keydown.enter="passwordInput.focus()"
+                              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
                         </div>
                         <div class="relative">
                             <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
-                            <input :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
+                            <input 
+                              ref="passwordInput"
+                              @keydown.enter="login"
+                              :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
                             <button type="button" @click="showPw = !showPw" class="absolute top-12 right-3 -translate-y-1/2 text-gray-400 dark:text-gray-300">
-                                <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
-                                <IconEyeSlashSolid class="w-5 h-5" v-else />
+                              <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
+                              <IconEyeSlashSolid class="w-5 h-5" v-else />
                             </button>
                         </div>
                         <!-- <div class="flex justify-between">
@@ -55,6 +61,17 @@
                           </div>
                         </div>
                         
+
+                        <div v-if="coreStore.config?.loginPromptHTML"
+                          class="flex items-center p-4 mb-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400" role="alert"
+                        >
+                          <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+                          </svg>
+                          <span class="sr-only">Info</span>
+                          <div v-html="coreStore.config?.loginPromptHTML"></div>
+                        </div>
+
                         <button 
                           @click="login"
                           type="submit" class="flex items-center justify-center gap-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
@@ -85,8 +102,9 @@ import { useUserStore } from '@/stores/user';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
-import { initFlowbite } from 'flowbite'
 
+const passwordInput = ref(null);
+const usernameInput = ref(null);
 
 const router = useRouter();
 const inProgress = ref(false);
@@ -99,35 +117,43 @@ const showPw = ref(false);
 
 const error = ref(null);
 
-onMounted(() => {
-    coreStore.getPublicConfig()
+onMounted(async () => {
+    await coreStore.getPublicConfig();
+    if (coreStore.config?.demoCredentials) {
+      console.log('Setting demo credentials');
+      const [username, password] = coreStore.config.demoCredentials.split(':');
+      usernameInput.value.value = username;
+      passwordInput.value.value = password;
+    }
+    usernameInput.value.focus();
 });
 
-async function login() {
-    inProgress.value = true;
-    const resp = await callAdminForthApi({
-      path: '/login',
-      method: 'POST',
-      body: {
-        username: document.getElementById('username').value,
-        password: document.getElementById('password').value,
-      }
-    });
-    inProgress.value = false;
-    if (resp.error) {
-      error.value = resp.error;
-    } else {
-      error.value = null;
-      user.authorize()
-      router.push('/');
-      await router.isReady();
-      await coreStore.fetchMenuAndResource();
-      setTimeout(() => {
-        initFlowbite();
-      }); 
 
+async function login() {
+  const username = usernameInput.value.value;
+  const password = passwordInput.value.value;
+
+  if (!username || !password) {
+    return;
+  }
+  inProgress.value = true;
+  const resp = await callAdminForthApi({
+    path: '/login',
+    method: 'POST',
+    body: {
+      username,
+      password,
     }
-
+  });
+  inProgress.value = false;
+  if (resp.error) {
+    error.value = resp.error;
+  } else if (resp.redirectTo) {
+    router.push(resp.redirectTo);
+  } else {
+    error.value = null;
+    await user.finishLogin();
+  }
 }
 
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`">
+  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4">
     <RouterView/>
   </div>
 </template>
@@ -11,7 +11,6 @@
 
 
 import { useCoreStore } from '@/stores/core';
-import { onMounted } from 'vue';
 
 const coreStore = useCoreStore()
 

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

@@ -43,23 +43,23 @@
         <span class="sr-only">Loading...</span>
     </div>
     <div 
-      v-else
-      class="relative overflow-x-auto shadow-resourse-form-shadow "
+      v-else-if="coreStore.record"
+      class="relative overflow-x-auto rounded-default shadow-resourseFormShadow "
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-        <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading 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">
+                <th scope="col" class="px-6 py-3 w-5/6">
                     Value
                 </th>
             </tr>
         </thead>
         <tbody>
             <tr v-for="column in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
-                class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
+                class="bg-lightForm bg-darkForm odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
               <component
                 v-if="column.components?.showRow"
@@ -75,8 +75,8 @@
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
                   <component
-                    v-if="showComponentsPerColumn[column.name]"
-                    :is="showComponentsPerColumn[column.name]"
+                    v-if="column?.components?.show"
+                    :is="getCustomComponent(column?.components?.show)"
                     :resource="coreStore.resource"
                     :meta="column.components.show.meta"
                     :column="column"
@@ -90,7 +90,12 @@
               </template>
             </tr>
         </tbody>
-    </table>
+     </table>
+    </div>
+
+    <div v-else class="text-center text-gray-500 dark:text-gray-400 mt-10">
+      Ooops. Record not found
+    </div>
 
     <component 
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.bottom || []"
@@ -101,7 +106,6 @@
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
     />
-</div>
 
 
   </div>
@@ -120,14 +124,13 @@ import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbi
 import { onMounted, ref } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 import {callAdminForthApi} from '@/utils';
-import {showSuccesTost} from '@/composables/useFrontendApi';
+import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 
 
 const item = ref(null);
 const route = useRoute();
 const router = useRouter();
-const loading = ref(false);
-let showComponentsPerColumn = {};
+const loading = ref(true);
 
 console.log(route.params,'showWiev');
 
@@ -145,13 +148,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
-
-  showComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.show) {
-          acc[column.name] = getCustomComponent(column.components.show);
-      }
-      return acc;
-  }, {});
   loading.value = false;
 });
 
@@ -174,7 +170,7 @@ async function deleteRecord(row) {
         router.push({ name: 'resource-list', params: { resourceId: route.params.resourceId } });
         showSuccesTost('Record deleted successfully')
       } else {
-        console.error(res.error)
+        showErrorTost(res.error)
       }
 
     } catch (e) {
@@ -185,4 +181,4 @@ async function deleteRecord(row) {
     
 }
 
-</script>
+</script>

package/dist/spa/tailwind.config.js

@@ -9,7 +9,9 @@ export default {
 
   darkMode: 'class',
   plugins: [
-    require('flowbite/plugin'),
+    require('flowbite/plugin')({
+      charts: true,
+    }),
   ],
 }
 

package/dist/spa/vite.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { clear, error } from 'node:console';
 
 
 const customLogger = {
@@ -26,7 +27,13 @@ const customLogger = {
   clear() {
     console.clear();
   },
+  clearScreen() {
+    console.clear();
+  },
   hasWarned: false,
+  hasErrorLogged: (error: any): boolean => {
+    return false;
+  }
 };
 
 // https://vitejs.dev/config/

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "adminforth",
-  "version": "1.2.56",
+  "version": "1.2.58",
   "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",
-    "prepareDist": "cp -r spa dist/spa",
+    "prepareDist": "cp -rL spa dist/spa",
     "rollout": "tsc && npm run prepareDist && npm version patch && npm publish && npm run rollout-doc",
     "rollout-doc": "cd documentation && npm run build && npm run deploy",
-    "docs": "typedoc",
-    "postinstall": "ln -s types spa/src/types"
+    "docs": "typedoc"
   },
   "author": "devforth.io",
   "license": "ISC",