adminforth 2.18.2 → 2.19.0-next.2

package/dist/spa/src/utils.ts

@@ -1,516 +1,2 @@
-import { onMounted, ref, resolveComponent } from 'vue';
-import type { CoreConfig } from './spa_types/core';
-import type { ValidationObject } from './types/Common.js';
-import router from "./router";
-import { useCoreStore } from './stores/core';
-import { useUserStore } from './stores/user';
-import { Dropdown } from 'flowbite';
-import adminforth from './adminforth';
-import sanitizeHtml  from 'sanitize-html'
-import debounce from 'debounce';
-import type { AdminForthResourceColumnInputCommon, Predicate } from '@/types/Common';
-import { i18nInstance } from './i18n'
-
-const LS_LANG_KEY = `afLanguage`;
-const MAX_CONSECUTIVE_EMPTY_RESULTS = 2;
-const ITEMS_PER_PAGE_LIMIT = 100;
-
-export async function callApi({path, method, body, headers, silentError = false}: {
-  path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
-  body?: any
-  headers?: Record<string, string>
-  silentError?: boolean
-}): Promise<any> {
-  const t = i18nInstance?.global.t || ((s: string) => s)
-  const options = {
-    method,
-    headers: {
-      'Content-Type': 'application/json',
-      'accept-language': localStorage.getItem(LS_LANG_KEY) || 'en',
-      ...headers
-    },
-    body: JSON.stringify(body),
-  };
-  const fullPath = `${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}${path}`;
-  try {
-    const r = await fetch(fullPath, options);
-    if (r.status == 401 ) {
-      useUserStore().unauthorize();
-      useCoreStore().resetAdminUser();
-      const currentPath = router.currentRoute.value.path;
-      const homeRoute = router.getRoutes().find(route => route.name === 'home');
-      const homePagePath = (homeRoute?.redirect as string) || '/';
-      let next = '';
-      if (currentPath !== '/login' && currentPath !== homePagePath) {
-        if (Object.keys(router.currentRoute.value.query).length > 0) {
-          next = currentPath + '?' + Object.entries(router.currentRoute.value.query).map(([key, value]) => `${key}=${value}`).join('&');
-        } else {
-          next = currentPath;
-        }
-        await router.push({ name: 'login', query: { next: next } });
-      } else {
-        await router.push({ name: 'login' });
-      }
-      return null;
-    } 
-    return await r.json();
-  } catch(e) {
-    // if it is internal error, say to user
-    if (e instanceof TypeError && e.message === 'Failed to fetch') {
-      // this is a network error
-      if (!silentError) {
-        adminforth.alert({variant:'danger', message: t('Network error, please check your Internet connection and try again'),})
-      }
-      return null;
-    }
-
-    if (!silentError) {
-      adminforth.alert({variant:'danger', message: t('Something went wrong, please try again later'),})
-    }
-    console.error(`error in callApi ${path}`, e);
-  }
-}
-
-export async function callAdminForthApi({ path, method, body=undefined, headers=undefined, silentError = false }: {
-  path: string,
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH',
-  body?: any,
-  headers?: Record<string, string>,
-  silentError?: boolean
-}): Promise<any> {
-  try {
-    return callApi({path: `/adminapi/v1${path}`, method, body, headers, silentError} );
-  } catch (e) {
-    console.error('error', e);
-    return { error: `Unexpected error: ${e}` };
-  }
-}
-
-export function getCustomComponent({ file, meta }: { file: string, meta?: any }) {
-  const name = file.replace(/@/g, '').replace(/\./g, '').replace(/\//g, '');
-  return resolveComponent(name);
-}
-
-export function getIcon(icon: string) {
-  // icon format is "feather:icon-name". We need to get IconName in pascal case
-  if (!icon.includes(':')) {
-    throw new Error('Icon name should be in format "icon-set:icon-name"');
-  }
-  const [iconSet, iconName] = icon.split(':');
-  const compName = 'Icon' + iconName.split('-').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-  return resolveComponent(compName);
-}
-
-export const loadFile = (file: string) => {
-  if (file.startsWith('http')) {
-    return file;
-  }
-  let path;
-  let baseUrl = '';
-  if (file.startsWith('@/')) {
-    path = file.replace('@/', '');
-    baseUrl = new URL(`./${path}`, import.meta.url).href;
-  } else if (file.startsWith('@@/')) {
-    path = file.replace('@@/', '');
-    baseUrl = new URL(`./custom/${path}`, import.meta.url).href;
-  } else {
-    baseUrl = new URL(`./${file}`, import.meta.url).href;
-  }
-  return baseUrl;
-}
-
-
-export function checkEmptyValues(value: any, viewType: 'show' | 'list' ) {
-  const config: CoreConfig | {} | null = useCoreStore().config;
-  let emptyFieldPlaceholder = '';
-  if (config && 'emptyFieldPlaceholder' in config) {
-    const efp = (config as CoreConfig).emptyFieldPlaceholder;
-    if(typeof efp === 'string') {
-      emptyFieldPlaceholder = efp;
-    } else {
-       emptyFieldPlaceholder = efp?.[viewType] || '';
-    }
-    if (value === null || value === undefined || value === '') {
-      return emptyFieldPlaceholder;
-    }
-  }
-  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();
-  }
-}
-
-export function initThreeDotsDropdown() {
-  const threeDotsDropdown: HTMLElement | null = document.querySelector('#listThreeDotsDropdown');
-  if (threeDotsDropdown) {
-    // this resource has three dots dropdown
-    const dd = new Dropdown(
-      threeDotsDropdown, 
-      document.querySelector('[data-dropdown-toggle="listThreeDotsDropdown"]') as HTMLElement,
-      { placement: 'bottom-end' }
-    );
-    adminforth.list.closeThreeDotsDropdown = () => {
-      dd.hide();
-    }
-  }
-}
-
-export function applyRegexValidation(value: any, validation: ValidationObject[] | undefined) {
-
-  if ( validation?.length ) {
-    const validationArray = validation;
-    for (let i = 0; i < validationArray.length; i++) {
-      if (validationArray[i].regExp) {
-        let flags = '';
-        if (validationArray[i].caseSensitive) {
-          flags += 'i';
-        }
-        if (validationArray[i].multiline) {
-          flags += 'm';
-        }
-        if (validationArray[i].global) {
-          flags += 'g';
-        }
-
-        const regExp = new RegExp(validationArray[i].regExp, flags);
-        if (value === undefined || value === null) {
-          value = '';
-        }
-        let valueS = `${value}`;
-
-        if (!regExp.test(valueS)) {
-          return validationArray[i].message;
-        }
-      }
-    }
-  }
-}
-
-export function currentQuery() {
-  return router.currentRoute.value.query;
-}
-
-export function setQuery(query: any) {
-  const currentQuery = { ...router.currentRoute.value.query, ...query };
-  router.replace({
-    query: currentQuery,
-  });
-}
-
-export function verySimpleHash(str: string): string {
-  return `${str.split('').reduce((a, b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)}`;
-}
-
-export function humanifySize(size: number) {
-  if (!size) {
-    return '';
-  }
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let i = 0
-  while (size >= 1024 && i < units.length - 1) {
-    size /= 1024
-    i++
-  }
-  return `${size.toFixed(1)} ${units[i]}`
-}
-
-export function protectAgainstXSS(value: string) {
-  return sanitizeHtml(value, {
-    allowedTags: [
-      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
-      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
-      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
-      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
-      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
-      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
-      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
-    ],
-    allowedAttributes: {
-      'li': [ 'data-list' ],
-      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
-    } 
-  });
-}
-
-export function isPolymorphicColumn(column: any): boolean {
-  return !!(column.foreignResource?.polymorphicResources && column.foreignResource.polymorphicResources.length > 0);
-}
-
-export function handleForeignResourcePagination(
-  column: any,
-  items: any[],
-  emptyResultsCount: number = 0,
-  isSearching: boolean = false
-): { hasMore: boolean; emptyResultsCount: number } {
-  const isPolymorphic = isPolymorphicColumn(column);
-  
-  if (isPolymorphic) {
-    if (isSearching) {
-      return {
-        hasMore: items.length > 0,
-        emptyResultsCount: 0
-      };
-    } else {
-      if (items.length === 0) {
-        const newEmptyCount = emptyResultsCount + 1;
-        return {
-          hasMore: newEmptyCount < MAX_CONSECUTIVE_EMPTY_RESULTS, // Stop loading after 2 consecutive empty results
-          emptyResultsCount: newEmptyCount
-        };
-      } else {
-        return {
-          hasMore: true,
-          emptyResultsCount: 0
-        };
-      }
-    }
-  } else {
-    return {
-      hasMore: items.length === ITEMS_PER_PAGE_LIMIT,
-      emptyResultsCount: 0
-    };
-  }
-}
-
-export async function loadMoreForeignOptions({
-  columnName,
-  searchTerm = '',
-  columns,
-  resourceId,
-  columnOptions,
-  columnLoadingState,
-  columnOffsets,
-  columnEmptyResultsCount
-}: {
-  columnName: string;
-  searchTerm?: string;
-  columns: any[];
-  resourceId: string;
-  columnOptions: any;
-  columnLoadingState: any;
-  columnOffsets: any;
-  columnEmptyResultsCount: any;
-}) {
-  const column = columns?.find(c => c.name === columnName);
-  if (!column || !column.foreignResource) return;
-  
-  const state = columnLoadingState[columnName];
-  if (state.loading || !state.hasMore) return;
-  
-  state.loading = true;
-  
-  try {
-    const list = await callAdminForthApi({
-      method: 'POST',
-      path: `/get_resource_foreign_data`,
-      body: {
-        resourceId,
-        column: columnName,
-        limit: 100,
-        offset: columnOffsets[columnName],
-        search: searchTerm,
-      },
-    });
-    
-    if (!list || !Array.isArray(list.items)) {
-      console.warn(`Unexpected API response for column ${columnName}:`, list);
-      state.hasMore = false;
-      return;
-    }
-    
-    if (!columnOptions.value) {
-      columnOptions.value = {};
-    }
-    if (!columnOptions.value[columnName]) {
-      columnOptions.value[columnName] = [];
-    }
-    columnOptions.value[columnName].push(...list.items);
-    
-    columnOffsets[columnName] += 100;
-    
-    const paginationResult = handleForeignResourcePagination(
-      column,
-      list.items,
-      columnEmptyResultsCount[columnName] || 0,
-      false // not searching
-    );
-    
-    columnEmptyResultsCount[columnName] = paginationResult.emptyResultsCount;
-    state.hasMore = paginationResult.hasMore;
-    
-  } catch (error) {
-    console.error('Error loading more options:', error);
-  } finally {
-    state.loading = false;
-  }
-}
-
-export async function searchForeignOptions({
-  columnName,
-  searchTerm,
-  columns,
-  resourceId,
-  columnOptions,
-  columnLoadingState,
-  columnOffsets,
-  columnEmptyResultsCount
-}: {
-  columnName: string;
-  searchTerm: string;
-  columns: any[];
-  resourceId: string;
-  columnOptions: any;
-  columnLoadingState: any;
-  columnOffsets: any;
-  columnEmptyResultsCount: any;
-}) {
-  const column = columns?.find(c => c.name === columnName);
-
-  if (!column || !column.foreignResource || !column.foreignResource.searchableFields) {
-    return;
-  }
-  
-  const state = columnLoadingState[columnName];
-  if (state.loading) return;
-  
-  state.loading = true;
-  
-  try {
-    const list = await callAdminForthApi({
-      method: 'POST',
-      path: `/get_resource_foreign_data`,
-      body: {
-        resourceId,
-        column: columnName,
-        limit: 100,
-        offset: 0,
-        search: searchTerm,
-      },
-    });
-    
-    if (!list || !Array.isArray(list.items)) {
-      console.warn(`Unexpected API response for column ${columnName}:`, list);
-      state.hasMore = false;
-      return;
-    }
-    
-    if (!columnOptions.value) {
-      columnOptions.value = {};
-    }
-    columnOptions.value[columnName] = list.items;
-    columnOffsets[columnName] = 100;
-    
-    const paginationResult = handleForeignResourcePagination(
-      column,
-      list.items,
-      columnEmptyResultsCount[columnName] || 0,
-      true // is searching
-    );
-    
-    columnEmptyResultsCount[columnName] = paginationResult.emptyResultsCount;
-    state.hasMore = paginationResult.hasMore;
-
-  } catch (error) {
-    console.error('Error searching options:', error);
-  } finally {
-    state.loading = false;
-  }
-}
-
-export function createSearchInputHandlers(
-  columns: any[],
-  searchFunction: (columnName: string, searchTerm: string) => void,
-  getDebounceMs?: (column: any) => number
-) {
-  if (!columns) return {};
-
-  return columns.reduce((acc, c) => {
-    if (c.foreignResource && c.foreignResource.searchableFields) {
-      const debounceMs = getDebounceMs ? getDebounceMs(c) : 300;
-      return {
-        ...acc,
-        [c.name]: debounce((searchTerm: string) => {
-          searchFunction(c.name, searchTerm);
-        }, debounceMs),
-      };
-    }
-    return acc;
-  }, {} as Record<string, (searchTerm: string) => void>);
-}
-
-export function checkShowIf(c: AdminForthResourceColumnInputCommon, record: Record<string, any>, allColumns: AdminForthResourceColumnInputCommon[]) {
-  if (!c.showIf) return true;
-  const recordCopy = { ...record };
-  for (const col of allColumns) {
-    if (!recordCopy[col.name]) {
-      recordCopy[col.name] = null;
-    }
-  }
-  const evaluatePredicate = (predicate: Predicate): boolean => {
-    const results: boolean[] = [];
-
-    if ("$and" in predicate) {
-      results.push(predicate.$and.every(evaluatePredicate));
-    }
-
-    if ("$or" in predicate) {
-      results.push(predicate.$or.some(evaluatePredicate));
-    }
-
-    const fieldEntries = Object.entries(predicate).filter(([key]) => !key.startsWith('$'));
-    if (fieldEntries.length > 0) {
-      const fieldResult = fieldEntries.every(([field, condition]) => {
-        const recordValue = recordCopy[field];
-
-        if (condition === undefined) {
-          return true;
-        }
-        if (typeof condition !== "object" || condition === null) {
-          return recordValue === condition;
-        }
-
-        if ("$eq" in condition) return recordValue === condition.$eq;
-        if ("$not" in condition) return recordValue !== condition.$not;
-        if ("$gt" in condition) return recordValue > condition.$gt;
-        if ("$gte" in condition) return recordValue >= condition.$gte;
-        if ("$lt" in condition) return recordValue < condition.$lt;
-        if ("$lte" in condition) return recordValue <= condition.$lte;
-        if ("$in" in condition) return (Array.isArray(condition.$in) && condition.$in.includes(recordValue));
-        if ("$nin" in condition) return (Array.isArray(condition.$nin) && !condition.$nin.includes(recordValue));
-        if ("$includes" in condition)
-          return (
-            Array.isArray(recordValue) &&
-            recordValue.includes(condition.$includes)
-          );
-        if ("$nincludes" in condition)
-          return (
-            Array.isArray(recordValue) &&
-            !recordValue.includes(condition.$nicludes)
-          );
-
-        return true;
-      });
-      results.push(fieldResult);
-    }
-
-    return results.every(result => result);
-  };
-
-  return evaluatePredicate(c.showIf);
-}
-
-export function btoa_function(source: string): string {
-  return btoa(source);
-}
-
-export function atob_function(source: string): string {
-  return atob(source);
-}
+export * from './utils/utils';
+export * from './utils/listUtils';

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

@@ -12,7 +12,7 @@
 
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
-      <button @click="$router.back()"
+      <button @click="() => {cancelButtonClicked = true; $router.back()}"
         class="af-cancel-button flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-lightCreateViewButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover"
       >
         {{ $t('Cancel') }}
@@ -81,8 +81,8 @@ import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
 import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { onMounted, onBeforeMount, ref, watch, nextTick } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { onMounted, onBeforeMount, onBeforeUnmount, ref, watch, nextTick } from 'vue';
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import { computed } from 'vue';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
@@ -103,7 +103,7 @@ const router = useRouter();
 const record = ref({});
 
 const coreStore = useCoreStore();
-const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
+const { clearSaveInterceptors, runSaveInterceptors, alert, confirm } = useAdminforth();
 
 const { t } = useI18n();
 
@@ -113,11 +113,38 @@ const initialValues = ref({});
 
 const readonlyColumns = ref([]);
 
+const cancelButtonClicked = ref(false);
+const wasSaveSuccessful = ref(false);
 
 async function onUpdateRecord(newRecord: any) {
   record.value = newRecord;
 }
 
+function checkIfWeCanLeavePage() {
+  return wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialValues.value);
+}
+
+function onBeforeUnload(event: BeforeUnloadEvent) {
+  if (!checkIfWeCanLeavePage()) {
+    event.preventDefault();
+    event.returnValue = '';
+  }
+}
+
+window.addEventListener('beforeunload', onBeforeUnload);
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', onBeforeUnload);
+});
+
+onBeforeRouteLeave(async (to, from, next) => {
+  if (!checkIfWeCanLeavePage()) {
+      const answer = await confirm({message: t('There are unsaved changes. Are you sure you want to leave this page?'), yes: 'Yes', no: 'No'});
+      if (!answer) return next(false);
+  }
+  next();
+});
+
 onBeforeMount(() => {
   clearSaveInterceptors(route.params.resourceId as string);
 });
@@ -200,23 +227,26 @@ async function saveRecord() {
   });
   if (response?.error && response?.error !== 'Operation aborted by hook') {
     showErrorTost(response.error);
-  }
-  saving.value = false;
-  if (route.query.returnTo) {
-    router.push(<string>route.query.returnTo);
   } else {
-    router.push({ 
-      name: 'resource-show', 
-      params: { 
-        resourceId: route.params.resourceId, 
-        primaryKey: response.newRecordId
-      } 
-    });
-    alert({
-      message: t('Record created successfully!'),
-      variant: 'success'
-    });
+    saving.value = false;
+    wasSaveSuccessful.value = true;
+    if (route.query.returnTo) {
+      router.push(<string>route.query.returnTo);
+    } else {
+      router.push({ 
+        name: 'resource-show', 
+        params: { 
+          resourceId: route.params.resourceId, 
+          primaryKey: response.newRecordId
+        } 
+      });
+      alert({
+        message: t('Record created successfully!'),
+        variant: 'success'
+      });
+    }
   }
+  saving.value = false;
 }
 
 function scrollToInvalidField() {