@drax/crud-vue 3.17.0 → 3.18.1

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.17.0",
+  "version": "3.18.1",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -27,7 +27,7 @@
     "@drax/common-front": "^3.11.0",
     "@drax/crud-front": "^3.11.0",
     "@drax/crud-share": "^3.17.0",
-    "@drax/media-vue": "^3.17.0"
+    "@drax/media-vue": "^3.18.1"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "d8a056b087d67157bc8c2e684b7e6696399d06a4"
+  "gitHead": "241f90094f420bdbe8c998d0ccb89aff433db022"
 }

package/src/components/buttons/CrudFilterButton.vue

@@ -20,7 +20,7 @@ const {t} = useI18n()
 </script>
 
 <template>
-  <div v-if="entity.isFilterable">
+  <div v-if="entity.dynamicFiltersEnable">
     <v-tooltip location="top">
       <template v-slot:activator="{ props }">
         <v-btn

package/src/composables/UseDynamicFilters.ts

@@ -2,6 +2,7 @@ import {computed} from "vue"
 import type {Ref} from "vue"
 import {useI18n} from "vue-i18n"
 import type {
+    IEntityCrudField,
     IEntityCrudFilter,
     IEntityCrudFieldTypes
 } from "@drax/crud-share"
@@ -19,21 +20,60 @@ export function useDynamicFilters(
     })
 
     const fieldI18n = computed(() => {
-        return (field: any) => {
-            const key = entityName.value?.toLowerCase() + ".field." + field.name
+        return (field: Pick<IEntityCrudField, 'name' | 'label'>, fieldName = field.name) => {
+            const key = entityName.value?.toLowerCase() + ".field." + fieldName
             return te(key) ? t(key) : field.label
         }
     })
 
+    function flattenFilterableFields(
+        fields: IEntityCrudField[],
+        parentPath = '',
+        parentLabels: string[] = []
+    ): IEntityCrudField[] {
+        return fields.flatMap((field) => {
+            if (field.type === 'fullFile' || field.type === 'array.object') {
+                return []
+            }
+
+            const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name
+            const fieldLabel = fieldI18n.value(field, fieldPath)
+            const pathLabels = [...parentLabels, fieldLabel]
+
+            if (field.type === 'object') {
+                if (!field.objectFields?.length) {
+                    return []
+                }
+
+                return flattenFilterableFields(field.objectFields, fieldPath, pathLabels)
+            }
+
+            return [{
+                ...field,
+                name: fieldPath,
+                label: pathLabels.join(' / ')
+            }]
+        })
+    }
+
+    const filterableFields = computed(() => {
+        return flattenFilterableFields(entityFields.value || [])
+    })
+
     const selectableFields = computed(() => {
-        return entityFields.value
-            ?.filter((f: any) => !['fullFile', 'object', 'array.object'].includes(f.type))
-            .map((f: any) => ({
+        return filterableFields.value
+            .map((f: IEntityCrudField) => ({
                 title: fieldI18n.value(f),
                 value: f.name
             })) || []
     })
 
+    const fieldByName = computed(() => {
+        return new Map(
+            filterableFields.value.map((field) => [field.name, field] as const)
+        )
+    })
+
     function normalizeFieldType(type: string): IEntityCrudFieldTypes {
         if (type === 'array.ref') return 'ref'
         if (type === 'array.string') return 'string'
@@ -52,9 +92,7 @@ export function useDynamicFilters(
             filter.operator = 'eq'
         }
 
-        let filterName = filter.name
-
-        const field = entityFields.value?.find((e: any) => e.name === filterName)
+        const field = fieldByName.value.get(filter.name)
 
         filter.value = null
         if (!field) return