@drax/crud-vue 2.8.0 → 2.11.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.8.0",
+  "version": "2.11.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^2.8.0",
-    "@drax/crud-front": "^2.0.0",
-    "@drax/crud-share": "^2.8.0",
+    "@drax/common-front": "^2.11.0",
+    "@drax/crud-front": "^2.11.0",
+    "@drax/crud-share": "^2.11.0",
     "@drax/media-vue": "^2.2.1"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "3adeb31ee60eb83c92137dc28162f9226cab06c1"
+  "gitHead": "8919d31d4d9512e48ac461b0876dc85a5849daea"
 }

package/src/components/CrudFiltersDynamic.vue

@@ -7,6 +7,7 @@ import {useAuth} from "@drax/identity-vue";
 import {useFilterIcon} from "../composables/UseFilterIcon";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {useEntityStore} from "../stores/UseEntityStore";
+import {useDynamicFilters} from "../composables/UseDynamicFilters.ts";
 
 const {t, te} = useI18n()
 const valueModel = defineModel({type: [Object]})
@@ -28,12 +29,26 @@ const aFields = computed(() => {
       .filter((field: IEntityCrudFilter) => !field.permission || hasPermission(field.permission))
 })
 
-const dynamicFilter = computed(() => {
-  return (index: string | number) => {
-    return store.dynamicFilters[index]
-  }
+
+const filtersRef = computed({
+  get: () => store.dynamicFilters,
+  set: v => store.dynamicFilters = v
 })
 
+const {
+  dynamicFilter,
+  selectableFields,
+  getOperations,
+  isValueRequired,
+  onUpdateField,
+  addFilter,
+  removeFilter
+} = useDynamicFilters(
+    computed(() => entity.name),
+    computed(() => storeEntity?.fields || []),
+    filtersRef
+)
+
 function filter() {
   emit('applyFilter')
 }
@@ -50,81 +65,6 @@ function onUpdateValue() {
   }
 }
 
-const fieldI18n = computed(() => {
-  return (field: IEntityCrudFilter) => {
-    return te(entity.name.toLowerCase() + ".field." + field.name) ? t(entity.name.toLowerCase() + ".field." + field.name) : field.label
-  }
-})
-
-const selectableFields = computed(() => {
-  return storeEntity ? storeEntity.fields
-      .filter((f: any) => !['fullFile', 'object', 'array.object'].includes(f.type))
-      .map((f: any) => ({title: fieldI18n.value(f), value: f.name})) : []
-})
-
-function normalizeFieldType(type: string) :string{
-  if (type === 'array.ref') return 'ref';
-  if (type === 'array.string') return 'string';
-  if (type === 'longString') return 'string';
-  if (type === 'array.number') return 'number';
-  if (type === 'array.enum') return 'enum';
-  return type;
-}
-
-function onUpdateField(index: string | number, val: string){
-
-  const field = storeEntity.fields.find((e: any) => e.name === val)
-  dynamicFilter.value(index).value = null
-
-  if (!field) return
-
-  if(field.ref){
-    dynamicFilter.value(index).ref = field.ref
-  }
-  if(field.refDisplay){
-    dynamicFilter.value(index).refDisplay = field.refDisplay
-  }
-  if(field.enum){
-    dynamicFilter.value(index).enum = field.enum
-  }
-  if(field.type){
-    dynamicFilter.value(index).type = normalizeFieldType(field.type)
-
-    if(field.type === 'boolean'){
-      dynamicFilter.value(index).value = false
-    }
-
-  }
-}
-
-const operations = [
-  {title: t('operation.equals'), value: 'eq'},
-  {title: t('operation.notEquals'), value: 'ne'},
-  {title: t('operation.contains'), value: 'like'},
-  {title: t('operation.greaterThan'), value: 'gt'},
-  {title: t('operation.lessThan'), value: 'lt'},
-  {title: t('operation.greaterThanOrEqual'), value: 'gte'},
-  {title: t('operation.lessThanOrEqual'), value: 'lte'},
- // {title: t('operation.in'), value: 'in'},
- // {title: t('operation.notIn'), value: 'nin'},
-]
-
-function removeFilter(index: string | number){
-  store.removeDynamicFilter(index)
-}
-
-function addFilter() {
-  const filter: IEntityCrudFilter = {
-    default: undefined,
-    label: "",
-    name: '',
-    operator: 'eq',
-    type: 'string',
-    permission: '',
-    value: ''
-  }
-  store.addDynamicFilter(filter)
-}
 
 
 const emit = defineEmits(['applyFilter', 'clearFilter'])
@@ -141,29 +81,31 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
         <v-col cols="12" sm="4">
           <v-select
               :items="selectableFields"
-              v-model="dynamicFilter(index).name"
+              v-model="dynamicFilter(index)!.name"
               :label="t('crud.field')"
               density="compact"
               variant="outlined"
               hide-details
-              @update:modelValue="(v:string) => onUpdateField(index, v)"
+              @update:modelValue="(v:string) => onUpdateField(index, true)"
           />
         </v-col>
         <v-col cols="12" sm="3">
           <v-select
-              :items="operations"
-              v-model="dynamicFilter(index).operator"
+              :items="getOperations(index)"
+              v-model="dynamicFilter(index)!.operator"
               :label="t('crud.operator')"
               density="compact"
               variant="outlined"
               hide-details
+              @update:modelValue="(v:string) => onUpdateField(index)"
           />
         </v-col>
         <v-col cols="10" sm="4">
           <crud-form-field
+              v-if="isValueRequired(index)"
               :field="filter"
               :entity="entity"
-              v-model="dynamicFilter(index).value"
+              v-model="dynamicFilter(index)!.value"
               :clearable="true"
               density="compact"
               variant="outlined"

package/src/composables/UseDynamicFilters.ts

@@ -0,0 +1,167 @@
+import {computed} from "vue"
+import type {Ref} from "vue"
+import {useI18n} from "vue-i18n"
+import type {
+    IEntityCrudFilter,
+    IEntityCrudFieldTypes
+} from "@drax/crud-share"
+
+export function useDynamicFilters(
+    entityName: Ref<string | undefined>,
+    entityFields: Ref<any[]>,
+    filters: Ref<IEntityCrudFilter[]>
+) {
+
+    const {t, te} = useI18n()
+
+    const dynamicFilter = computed(() => {
+        return (index: number) => filters.value[index]
+    })
+
+    const fieldI18n = computed(() => {
+        return (field: any) => {
+            const key = entityName.value?.toLowerCase() + ".field." + field.name
+            return te(key) ? t(key) : field.label
+        }
+    })
+
+    const selectableFields = computed(() => {
+        return entityFields.value
+            ?.filter((f: any) => !['fullFile', 'object', 'array.object'].includes(f.type))
+            .map((f: any) => ({
+                title: fieldI18n.value(f),
+                value: f.name
+            })) || []
+    })
+
+    function normalizeFieldType(type: string): IEntityCrudFieldTypes {
+        if (type === 'array.ref') return 'ref'
+        if (type === 'array.string') return 'string'
+        if (type === 'longString') return 'string'
+        if (type === 'array.number') return 'number'
+        if (type === 'array.enum') return 'enum'
+        return type as IEntityCrudFieldTypes
+    }
+
+    function onUpdateField(index: number, resetOperator = false) {
+
+        const filter = filters.value[index]
+        if (!filter) return
+
+        if(resetOperator){
+            filter.operator = 'eq'
+        }
+
+        let filterName = filter.name
+
+        const field = entityFields.value?.find((e: any) => e.name === filterName)
+
+        filter.value = null
+        if (!field) return
+
+        if (field.ref) filter.ref = field.ref
+        if (field.refDisplay) filter.refDisplay = field.refDisplay
+        if (field.enum) filter.enum = field.enum
+
+        if (field.type) {
+
+            filter.type = normalizeFieldType(field.type)
+
+            //aplico default false si type es boolean
+            if (field.type === "boolean") {
+                filter.value = false
+            }
+
+        }
+
+        //Convierto a multiple si operadores son in o nin
+        if (filter.operator && ['in','nin'].includes(filter.operator)) {
+
+            if (['ref', 'array.ref'].includes(field.type)) {
+                filter.type = 'array.ref'
+            }
+
+            if (['string', 'longString', 'array.string'].includes(field.type)) {
+                filter.type = 'array.string'
+            }
+
+            if (['enum', 'array.enum'].includes(field.type)) {
+                filter.type = 'array.enum'
+            }
+
+        }
+    }
+
+    function addFilter() {
+        const filter: IEntityCrudFilter = {
+            default: undefined,
+            label: "",
+            name: "",
+            operator: "eq",
+            type: "string",
+            permission: "",
+            value: ""
+        }
+
+        filters.value.push(filter)
+    }
+
+    function removeFilter(index: number) {
+        filters.value.splice(index, 1)
+    }
+
+    const operations = [
+        {title: t('operation.equals'), value: 'eq'},
+        {title: t('operation.contains'), value: 'like'},
+        {title: t('operation.empty'), value: 'empty'},
+        {title: t('operation.notEquals'), value: 'ne'},
+        {title: t('operation.greaterThan'), value: 'gt'},
+        {title: t('operation.lessThan'), value: 'lt'},
+        {title: t('operation.greaterThanOrEqual'), value: 'gte'},
+        {title: t('operation.lessThanOrEqual'), value: 'lte'},
+        {title: t('operation.in'), value: 'in'},
+        {title: t('operation.notIn'), value: 'nin'},
+    ]
+
+    const getOperations = computed(() => {
+        return (index: number) => {
+
+            const filter = filters.value[index]
+            if (!filter || !filter.type) return []
+
+            return operations.filter(op => {
+                if (['ref','array.ref'].includes(filter.type) && ['gt', 'gte', 'lt', 'lte', 'like'].includes(op.value)) {
+                    return false
+                }
+                return true
+            })
+        }
+    })
+
+    const isValueRequired = computed(() => {
+        return (index: number) => {
+            const filter = filters.value[index]
+            if (!filter || !filter.operator){
+                return false
+            }
+            if (['empty'].includes(filter.operator)) {
+                return false
+            }
+            return true
+        }
+    })
+
+
+    return {
+        dynamicFilter,
+        selectableFields,
+        fieldI18n,
+        operations,
+        getOperations,
+        isValueRequired,
+        addFilter,
+        removeFilter,
+        onUpdateField,
+        normalizeFieldType
+    }
+}