adminforth 2.7.18 → 2.8.0

package/dist/spa/src/components/ResourceForm.vue

@@ -65,12 +65,12 @@
 
 import { applyRegexValidation, callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers} from '@/utils';
 import { computedAsync } from '@vueuse/core';
-import { computed, onMounted, reactive, ref, watch, provide } from 'vue';
+import { computed, onMounted, reactive, ref, watch, provide, type Ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useCoreStore } from "@/stores/core";
 import GroupsTable from '@/components/GroupsTable.vue';
 import { useI18n } from 'vue-i18n';
-import { type AdminForthResourceCommon } from '@/types/Common';
+import { type AdminForthResourceColumnCommon, type AdminForthResourceCommon } from '@/types/Common';
 
 const { t } = useI18n();
 
@@ -91,16 +91,16 @@ const mode = computed(() => route.name === 'resource-create' ? 'create' : 'edit'
 
 const emit = defineEmits(['update:record', 'update:isValid']);
 
-const currentValues = ref(null);
-const customComponentsInValidity = ref({});
-const customComponentsEmptiness = ref({});
+const currentValues = ref<any | any[] | null>(null);
+const customComponentsInValidity: Ref<Record<string, AdminForthResourceColumnCommon>> = ref({});
+const customComponentsEmptiness: Ref<Record<string, AdminForthResourceColumnCommon>> = ref({});
 
 const columnOptions = ref<Record<string, any[]>>({});
 const columnLoadingState = reactive<Record<string, { loading: boolean; hasMore: boolean }>>({});
 const columnOffsets = reactive<Record<string, number>>({});
 const columnEmptyResultsCount = reactive<Record<string, number>>({});
 
-const columnError = (column) => {
+const columnError = (column: AdminForthResourceColumnCommon) => {
   const val = computed(() => {
     if (!currentValues.value) {
       return null;
@@ -109,7 +109,7 @@ const columnError = (column) => {
       return customComponentsInValidity.value?.[column.name];
     }
     
-    if ( column.required[mode.value] ) {
+    if ( column.required?.[mode.value] ) {
       const naturalEmptiness = currentValues.value[column.name] === undefined ||
         currentValues.value[column.name] === null ||
         currentValues.value[column.name] === '' || 
@@ -136,17 +136,23 @@ const columnError = (column) => {
       }
     } else if (column.isArray?.enabled) {
       if (!column.isArray.allowDuplicateItems) {
-        if (currentValues.value[column.name].filter((value, index, self) => self.indexOf(value) !== index).length > 0) {
+        if (currentValues.value[column.name].filter((value: any, index: any, self: any) => self.indexOf(value) !== index).length > 0) {
           return t('Array cannot contain duplicate items');
         }
       }
 
-      return currentValues.value[column.name] && currentValues.value[column.name].reduce((error, item) => {
-        return error || validateValue(column.isArray.itemType, item, column) ||
-          (item === null || !item.toString() ? t('Array cannot contain empty items') : null);
+      return currentValues.value[column.name] && currentValues.value[column.name].reduce((error: any, item: any) => {
+        if (column.isArray) {
+          return error || validateValue(column.isArray.itemType, item, column) ||
+            (item === null || !item.toString() ? t('Array cannot contain empty items') : null);
+        } else {
+          return error; 
+        }
       }, null);
     } else {
-      return validateValue(column.type, currentValues.value[column.name], column);
+      if (column.type) {
+        return validateValue(column.type, currentValues.value[column.name], column);
+      }
     }
     
     return null;
@@ -154,7 +160,7 @@ const columnError = (column) => {
   return val.value;
 };
 
-const validateValue = (type, value, column) => {
+const validateValue = (type: string, value: any, column: AdminForthResourceColumnCommon) => {
   if (type === 'string' || type === 'text') {
     if (column.maxLength && value?.length > column.maxLength) {
       return t('This field must be shorter than {maxLength} characters', { maxLength: column.maxLength });
@@ -162,7 +168,7 @@ const validateValue = (type, value, column) => {
     
     if (column.minLength && value?.length < column.minLength) {
       // if column.required[mode.value] is false, then we check if the field is empty
-      let needToCheckEmpty = column.required[mode.value] || value?.length > 0;
+      let needToCheckEmpty = column.required?.[mode.value] || value?.length > 0;
       if (!needToCheckEmpty) {
         return null;
       }
@@ -191,10 +197,10 @@ const validateValue = (type, value, column) => {
 };
 
 
-const setCurrentValue = (key, value, index = null) => {
+const setCurrentValue = (key: any, value: any, index = null) => {
   const col = props.resource.columns.find((column) => column.name === key);
   // if field is an array, we need to update the array or individual element
-  if (col.type === 'json' && col.isArray?.enabled) {
+  if (((col?.type && col.type === 'json') && (col?.type && col.isArray?.enabled))) {
     if (index === null) {
       currentValues.value[key] = value;
     } else if (index === currentValues.value[key].length) {
@@ -209,12 +215,12 @@ const setCurrentValue = (key, value, index = null) => {
       } else {
         currentValues.value[key][index] = value;
       }
-      if (['text', 'richtext', 'string'].includes(col.isArray.itemType) && col.enforceLowerCase) {
+      if (col?.isArray && ['text', 'richtext', 'string'].includes(col.isArray.itemType) && col.enforceLowerCase) {
         currentValues.value[key][index] = currentValues.value[key][index].toLowerCase();
       }
     }
   } else {
-    if (['integer', 'float', 'decimal'].includes(col.type)) {
+    if (col?.type && ['integer', 'float', 'decimal'].includes(col.type)) {
       if (value || value === 0) {
         currentValues.value[key] = +value;
       } else {
@@ -223,7 +229,7 @@ const setCurrentValue = (key, value, index = null) => {
     } else {
       currentValues.value[key] = value;
     }
-    if (['text', 'richtext', 'string'].includes(col.type) && col.enforceLowerCase) {
+    if (col?.type && ['text', 'richtext', 'string'].includes(col?.type) && col.enforceLowerCase) {
       currentValues.value[key] = currentValues.value[key].toLowerCase();
     }
   }
@@ -265,7 +271,7 @@ onMounted(() => {
   currentValues.value = Object.assign({}, props.record);
   // json values should transform to string
   props.resource.columns.forEach((column) => {
-    if (column.type === 'json') {
+    if (column.type === 'json' && currentValues.value) {
       if (column.isArray?.enabled) {
         // if value is null or undefined, we should set it to empty array
         if (!currentValues.value[column.name]) {
@@ -316,7 +322,7 @@ async function searchOptions(columnName: string, searchTerm: string) {
 
 
 const editableColumns = computed(() => {
-  return props.resource?.columns?.filter(column => column.showIn[mode.value]);
+  return props.resource?.columns?.filter(column => column.showIn?.[mode.value]);
 });
 
 const isValid = computed(() => {
@@ -326,12 +332,14 @@ const isValid = computed(() => {
 
 const groups = computed(() => {
   let fieldGroupType;
-  if (mode.value === 'edit' && coreStore.resource.options?.editFieldGroups !== undefined) {
-    fieldGroupType = coreStore.resource.options.editFieldGroups;
-  } else if (mode.value === 'create' && coreStore.resource.options?.createFieldGroups !== undefined) {
-    fieldGroupType = coreStore.resource.options.createFieldGroups;
-  } else {
-    fieldGroupType = coreStore.resource.options?.fieldGroups;
+  if(coreStore.resource){
+    if (mode.value === 'edit' && coreStore.resource.options?.editFieldGroups !== undefined) {
+      fieldGroupType = coreStore.resource.options.editFieldGroups;
+    } else if (mode.value === 'create' && coreStore.resource.options?.createFieldGroups !== undefined) {
+      fieldGroupType = coreStore.resource.options.createFieldGroups;
+    } else {
+      fieldGroupType = coreStore.resource.options?.fieldGroups;
+    }
   }
   return fieldGroupType ?? [];
 });

package/dist/spa/src/components/ResourceListTable.vue

@@ -47,8 +47,8 @@
               </div>
               <span
                 class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-                v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
-                {{ sort.findIndex((s) => s.field === c.name) + 1 }}
+                v-if="sort.findIndex((s: any) => s.field === c.name) !== -1 && sort?.length > 1">
+                {{ sort.findIndex((s: any) => s.field === c.name) + 1 }}
               </span>
 
             </div>
@@ -64,7 +64,7 @@
         <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
-          :columns="resource?.columns.filter(c => c.showIn.list).length + 2"
+          :columns="resource?.columns.filter((c: AdminForthResourceColumnInputCommon) => c.showIn?.list).length + 2"
           :rows="rowHeights.length || 3"
           :row-heights="rowHeights"
           :column-widths="columnWidths"
@@ -93,8 +93,8 @@
         <td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
           <Checkbox
             :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
-            @change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
-            @click="(e)=>e.stopPropagation()"
+            @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
+            @click="(e: any)=>e.stopPropagation()"
           >
             <span class="sr-only">{{ $t('checkbox') }}</span>
           </Checkbox>
@@ -103,8 +103,8 @@
           <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
             <component
-              :is="c?.components?.list ? getCustomComponent(c.components.list) : ValueRenderer"
-              :meta="c?.components?.list?.meta"
+              :is="c?.components?.list ? getCustomComponent(typeof c.components.list === 'string' ? { file: c.components.list } : c.components.list) : ValueRenderer"
+              :meta="typeof c?.components?.list === 'object' ? c.components.list.meta : undefined"
               :column="c"
               :record="row"
               :adminUser="coreStore.adminUser"
@@ -115,7 +115,7 @@
             <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
               <Tooltip>
                 <RouterLink
-                  v-if="resource.options?.allowedActions.show"
+                  v-if="resource.options?.allowedActions?.show"
                   :to="{ 
                     name: 'resource-show', 
                     params: { 
@@ -135,7 +135,7 @@
 
               <Tooltip>
                 <RouterLink
-                  v-if="resource.options?.allowedActions.edit"
+                  v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
                     name: 'resource-edit', 
                     params: { 
@@ -153,7 +153,7 @@
 
               <Tooltip>
                 <button
-                  v-if="resource.options?.allowedActions.delete"
+                  v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
                 >
                   <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
@@ -308,7 +308,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 
@@ -339,7 +339,7 @@ const emits = defineEmits([
 const checkboxesInternal: Ref<any[]> = ref([]);
 const pageInput = ref('1');
 const page = ref(1);
-const sort = ref([]);
+const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
@@ -348,11 +348,11 @@ const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.tot
 watch(() => page.value, (newPage) => {
   emits('update:page', newPage);
 });
-async function onPageKeydown(event) {
+async function onPageKeydown(event: any) {
   // page input should accept only numbers, arrow keys and backspace
   if (['Enter', 'Space'].includes(event.code) ||
     (!['Backspace', 'ArrowRight', 'ArrowLeft'].includes(event.code)
-    && isNaN(String.fromCharCode(event.keyCode)))) {
+    && isNaN(Number(String.fromCharCode(event.keyCode || 0))))) {
     event.preventDefault();
     if (event.code === 'Enter') {
       validatePageInput();
@@ -373,7 +373,7 @@ watch(() => props.checkboxes, (newCheckboxes) => {
   checkboxesInternal.value = newCheckboxes;
 });
 
-watch(() => props.sort, (newSort) => {
+watch(() => props.sort, (newSort: any) => {
   sort.value = newSort;
 });
 
@@ -384,17 +384,17 @@ watch(() => props.page, (newPage) => {
   page.value = newPage;
 });
 
-const rowRefs = useTemplateRef('rowRefs');
-const headerRefs = useTemplateRef('headerRefs');
-const rowHeights = ref([]);
-const columnWidths = ref([]);
+const rowRefs = useTemplateRef<HTMLElement[]>('rowRefs');
+const headerRefs = useTemplateRef<HTMLElement[]>('headerRefs');
+const rowHeights = ref<number[]>([]);
+const columnWidths = ref<number[]>([]);
 watch(() => props.rows, (newRows) => {
   // rows are set to null when new records are loading
-  rowHeights.value = newRows || !rowRefs.value ? [] : rowRefs.value.map((el) => el.offsetHeight);
-  columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el) => el.offsetWidth)];
+  rowHeights.value = newRows || !rowRefs.value ? [] : rowRefs.value.map((el: HTMLElement) => el.offsetHeight);
+  columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el: HTMLElement) => el.offsetWidth)];
 });
 
-function addToCheckedValues(id) {
+function addToCheckedValues(id: string) {
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -403,17 +403,17 @@ function addToCheckedValues(id) {
   checkboxesInternal.value = [ ...checkboxesInternal.value ]
 }
 
-const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.list));
+const columnsListed = computed(() => props.resource?.columns?.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list));
 
-async function selectAll(value) {
+async function selectAll() {
   if (!allFromThisPageChecked.value) {
-    props.rows.forEach((r) => {
+    props.rows?.forEach((r) => {
       if (!checkboxesInternal.value.includes(r._primaryKeyValue)) {
         checkboxesInternal.value.push(r._primaryKeyValue)
       } 
     });
   } else {
-    props.rows.forEach((r) => {
+    props.rows?.forEach((r) => {
       checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r._primaryKeyValue);
     });
   }
@@ -426,15 +426,15 @@ const allFromThisPageChecked = computed(() => {
   if (!props.rows || !props.rows.length) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r._primaryKeyValue));
 });
-const ascArr = computed(() => sort.value.filter((s) => s.direction === 'asc').map((s) => s.field));
-const descArr = computed(() => sort.value.filter((s) => s.direction === 'desc').map((s) => s.field));
+const ascArr = computed(() => sort.value.filter((s:any) => s.direction === 'asc').map((s: any) => s.field));
+const descArr = computed(() => sort.value.filter((s: any) => s.direction === 'desc').map((s: any) => s.field));
 
 
-function onSortButtonClick(event, field) {
+function onSortButtonClick(event: any, field: string) {
   // if ctrl key is pressed, add to sort otherwise sort by this field
   // in any case if field is already in sort, toggle direction
   
-  const sortIndex = sort.value.findIndex((s) => s.field === field);
+  const sortIndex = sort.value.findIndex((s: any) => s.field === field);
   if (sortIndex === -1) {
     // field is not in sort, add it
     if (event.ctrlKey) {
@@ -445,9 +445,9 @@ function onSortButtonClick(event, field) {
   } else {
     const sortField = sort.value[sortIndex];
     if (sortField.direction === 'asc') {
-      sort.value = sort.value.map((s) => s.field === field ? {field, direction: 'desc'} : s);
+      sort.value = sort.value.map((s: any) => s.field === field ? {field, direction: 'desc'} : s);
     } else {
-      sort.value = sort.value.filter((s) => s.field !== field);
+      sort.value = sort.value.filter((s: any) => s.field !== field);
     }
   }
 }
@@ -455,11 +455,11 @@ function onSortButtonClick(event, field) {
 
 const clickTarget = ref(null);
 
-async function onClick(e,row) {
+async function onClick(e: any, row: any) {
   if(clickTarget.value === e.target) return;
   clickTarget.value = e.target;
   await new Promise((resolve) => setTimeout(resolve, 100));
-  if (window.getSelection().toString()) return;
+  if (window.getSelection()?.toString()) return;
   else {
     if (row._clickUrl === null) {
       // user asked to nothing on click
@@ -474,7 +474,7 @@ async function onClick(e,row) {
           router.resolve({
             name: 'resource-show',
             params: {
-              resourceId: props.resource.resourceId,
+              resourceId: props.resource?.resourceId,
               primaryKey: row._primaryKeyValue,
             },
           }).href,
@@ -492,7 +492,7 @@ async function onClick(e,row) {
         router.push({
           name: 'resource-show',
           params: {
-            resourceId: props.resource.resourceId,
+            resourceId: props.resource?.resourceId,
             primaryKey: row._primaryKeyValue,
           },
         });
@@ -501,7 +501,7 @@ async function onClick(e,row) {
   }
 }
 
-async function deleteRecord(row) {
+async function deleteRecord(row: any) {
   const data = await adminforth.confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
@@ -513,7 +513,7 @@ async function deleteRecord(row) {
         path: '/delete_record',
         method: 'POST',
         body: {
-          resourceId: props.resource.resourceId,
+          resourceId: props.resource?.resourceId,
           primaryKey: row._primaryKeyValue,
         }
       });
@@ -531,16 +531,16 @@ async function deleteRecord(row) {
   }
 }
 
-const actionLoadingStates = ref({});
+const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
-async function startCustomAction(actionId, row) {
+async function startCustomAction(actionId: string, row: any) {
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({
     path: '/start_custom_action',
     method: 'POST',
     body: {
-      resourceId: props.resource.resourceId,
+      resourceId: props.resource?.resourceId,
       actionId: actionId,
       recordId: row._primaryKeyValue
     }
@@ -578,7 +578,7 @@ async function startCustomAction(actionId, row) {
   }
 }
 
-function onPageInput(event) {
+function onPageInput(event: any) {
   pageInput.value = event.target.innerText;
 }