Merge branch 'next' of github.com:devforth/adminforth into next

Author: SerVitasik

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -31,15 +31,8 @@ const admin = new AdminForth({
     title: "myadmin",
 //diff-add
     title: 'My App Admin',  // used to set HTML title tag
-//diff-remove
-    brandLogo: '@@/assets/logo.svg',
-//diff-add
-    brandLogo: '@@/logo.svg',
-//diff-remove
+    brandLogo: '@@/assets/logo.svg', // replace with your images in custom/assets  directory
     favicon: '@@/assets/favicon.png',
-//diff-add
-    favicon: '@@/favicon.png',
-//diff-add
   },
   ...
 });
@@ -97,7 +90,7 @@ const admin = new AdminForth({
 //diff-remove
           sidebar: { main: '#f9fafb', text: '#213045' },
 //diff-add
-          sidebar: {main:'#571e58', text:'white'},
+          sidebar: { main:'#571e58', text: 'white'},
         },
       }
     } 

adminforth/modules/configValidator.ts

@@ -330,23 +330,38 @@ export default class ConfigValidator implements IConfigValidator {
     return showInTransformedToObject as ShowIn;
   }
 
-  validateFieldGroups(fieldGroups: {
-    groupName: string;
-    columns: string[];
-  }[], resourceColumns: string[]): void {
-    if (!fieldGroups) return;
+  validateFieldGroups(fieldGroups: { groupName: string; columns: string[] }[], allColumnsList: string[]): string[] {
+    if (!fieldGroups) return allColumnsList;
+
+    const columnPositions = new Map<string, number>();
+    let position = 0;
 
     fieldGroups.forEach((group) => {
       group.columns.forEach((col) => {
-        if (!resourceColumns.includes(col)) {
-          const similar = suggestIfTypo(resourceColumns, col);
+        if (!allColumnsList.includes(col)) {
+          const similar = suggestIfTypo(allColumnsList, col);
           throw new Error(
-            `Group '${group.groupName}' has an unknown column '${col}'. ${similar ? `Did you mean '${similar}'?` : ''
+            `Group '${group.groupName}' has an unknown column '${col}'. ${
+              similar ? `Did you mean '${similar}'?` : ''
             }`
           );
         }
+        if (!columnPositions.has(col)) {
+          columnPositions.set(col, position++);
+        }
       });
     });
+
+    allColumnsList.forEach((col) => {
+      if (!columnPositions.has(col)) {
+        columnPositions.set(col, position++);
+      }
+    });
+    return allColumnsList.sort((a, b) => {
+      const posA = columnPositions.get(a);
+      const posB = columnPositions.get(b);
+      return posA - posB;
+    });
   }
 
   validateAndNormalizeCustomActions(resInput: AdminForthResourceInput, res: Partial<AdminForthResource>, errors: string[]): any[] {
@@ -422,7 +437,7 @@ export default class ConfigValidator implements IConfigValidator {
         res.columns = [];
       }
       res.columns = resInput.columns.map((inCol: AdminForthResourceColumnInput, inColIndex) => {
-        const col: Partial<AdminForthResourceColumn> = { ...inCol, showIn: undefined, required: undefined, editingNote: undefined };
+        const col: Partial<AdminForthResourceColumn> = { ...inCol, showIn: undefined, editingNote: undefined };
 
         // check for duplicate column names
         if (resInput.columns.findIndex((c) => c.name === col.name) !== inColIndex) {
@@ -476,9 +491,6 @@ export default class ConfigValidator implements IConfigValidator {
           }
         }
 
-        // force required to be object
-        col.required = typeof inCol.required === 'boolean' ? { create: inCol.required, edit: inCol.required } : inCol.required;
-
 
         // same for editingNote
         if (inCol.editingNote && !((typeof inCol.editingNote === 'string') || (typeof inCol.editingNote === 'object'))) {
@@ -706,10 +718,11 @@ export default class ConfigValidator implements IConfigValidator {
       options.actions = this.validateAndNormalizeCustomActions(resInput, res, errors);
 
       const allColumnsList = res.columns.map((col) => col.name);
-      this.validateFieldGroups(options.fieldGroups, allColumnsList);
-      this.validateFieldGroups(options.showFieldGroups, allColumnsList);
-      this.validateFieldGroups(options.createFieldGroups, allColumnsList);
-      this.validateFieldGroups(options.editFieldGroups, allColumnsList);
+      const sortedColumns = this.validateFieldGroups(options.fieldGroups, allColumnsList);
+
+      res.columns = res.columns.sort((a, b) => {
+        return sortedColumns.indexOf(a.name) - sortedColumns.indexOf(b.name);
+      });
 
       // if pageInjection is a string, make array with one element. Also check file exists
       const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons'];

adminforth/spa/src/components/ColumnValueInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="flex" :class="{ 'opacity-50' : column.editReadonly && source === 'edit' }">
     <component
       v-if="column?.components?.[props.source]?.file"
       :is="getCustomComponent(column.components[props.source])"
@@ -48,6 +48,8 @@
       step="1"
       class="w-40"
       placeholder="0"
+      :min="![undefined, null].includes(column.minValue) ? column.minValue : ''"
+      :max="![undefined, null].includes(column.maxValue) ? column.maxValue : ''"
       :prefix="column.inputPrefix"
       :suffix="column.inputSuffix"
       :readonly="column.editReadonly && source === 'edit'"
@@ -70,6 +72,8 @@
       step="0.1"
       class="w-40"
       placeholder="0.0"
+      :min="![undefined, null].includes(column.minValue) ? column.minValue : ''"
+      :max="![undefined, null].includes(column.maxValue) ? column.maxValue : ''"
       :prefix="column.inputPrefix"
       :suffix="column.inputSuffix"
       :modelValue="value"

adminforth/spa/src/components/ResourceForm.vue

@@ -245,7 +245,12 @@ onMounted(() => {
           currentValues.value[column.name] = [];
         } else {
           // else copy array to prevent mutation
-          currentValues.value[column.name] = [...currentValues.value[column.name]];
+          if (Array.isArray(currentValues.value[column.name])) {
+            currentValues.value[column.name] = [...currentValues.value[column.name]];
+          } else {
+            // fallback for old data
+            currentValues.value[column.name] = [`${currentValues.value[column.name]}`];
+          }
         }
       } else if (currentValues.value[column.name]) {
         currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);

dev-demo/resources/apartments.ts

@@ -190,6 +190,8 @@ export default {
       showIn: {create: true, edit: true, filter: true, show: true},
       allowMinMaxQuery: true, // use better experience for filtering e.g. date range, set it only if you have index on this column or if there will be low number of rows
       editingNote: "Price is in USD", // you can appear note on editing or creating page
+      editReadonly: true, // you can set field to be readonly on edit page
+      
     },
     {
       name: "square_meter",