@drax/crud-vue 2.8.0 → 3.0.0

package/package.json

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

package/src/components/CrudFiltersDynamic.vue

@@ -7,8 +7,9 @@ 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";
 
-const {t, te} = useI18n()
+const {t} = useI18n()
 const valueModel = defineModel({type: [Object]})
 const {hasPermission} = useAuth()
 const {filterIcon} = useFilterIcon()
@@ -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,83 +65,32 @@ 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 numericIndex(index: string | number) {
+  return typeof index === 'number' ? index : Number(index)
 }
 
-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)
+function getDynamicFilter(index: string | number) {
+  return dynamicFilter.value(numericIndex(index))
+}
 
-    if(field.type === 'boolean'){
-      dynamicFilter.value(index).value = false
-    }
+function updateDynamicField(index: string | number, resetOperator = false) {
+  onUpdateField(numericIndex(index), resetOperator)
+}
 
-  }
+function getDynamicOperations(index: string | number) {
+  return getOperations.value(numericIndex(index))
 }
 
-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 dynamicValueRequired(index: string | number) {
+  return isValueRequired.value(numericIndex(index))
 }
 
-function addFilter() {
-  const filter: IEntityCrudFilter = {
-    default: undefined,
-    label: "",
-    name: '',
-    operator: 'eq',
-    type: 'string',
-    permission: '',
-    value: ''
-  }
-  store.addDynamicFilter(filter)
+function deleteFilter(index: string | number) {
+  removeFilter(numericIndex(index))
 }
 
 
+
 const emit = defineEmits(['applyFilter', 'clearFilter'])
 
 </script>
@@ -141,29 +105,31 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
         <v-col cols="12" sm="4">
           <v-select
               :items="selectableFields"
-              v-model="dynamicFilter(index).name"
+              v-model="getDynamicFilter(index)!.name"
               :label="t('crud.field')"
               density="compact"
               variant="outlined"
               hide-details
-              @update:modelValue="(v:string) => onUpdateField(index, v)"
+              @update:modelValue="(_v:string) => updateDynamicField(index, true)"
           />
         </v-col>
         <v-col cols="12" sm="3">
           <v-select
-              :items="operations"
-              v-model="dynamicFilter(index).operator"
+              :items="getDynamicOperations(index)"
+              v-model="getDynamicFilter(index)!.operator"
               :label="t('crud.operator')"
               density="compact"
               variant="outlined"
               hide-details
+              @update:modelValue="(_v:string) => updateDynamicField(index)"
           />
         </v-col>
         <v-col cols="10" sm="4">
           <crud-form-field
+              v-if="dynamicValueRequired(index)"
               :field="filter"
               :entity="entity"
-              v-model="dynamicFilter(index).value"
+              v-model="getDynamicFilter(index)!.value"
               :clearable="true"
               density="compact"
               variant="outlined"
@@ -173,7 +139,7 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
           />
         </v-col>
         <v-col cols="2" sm="1">
-          <v-btn @click="removeFilter(index)"
+          <v-btn @click="deleteFilter(index)"
                  icon="mdi-delete"
                  class="mr-1"
                  variant="text"

package/src/components/CrudFormField.vue

@@ -9,9 +9,14 @@ import {useI18n} from "vue-i18n";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {VDateInput} from 'vuetify/labs/VDateInput'
 import type {IEntityCrud, IEntityCrudField, IEntityCrudFilter} from "@drax/crud-share";
-import {MediaField, MediaFullField} from "@drax/media-vue";
 import {useAuth} from "@drax/identity-vue";
 
+//TODO: Ver si esto no puede traer problemas...
+import MediaField from "@drax/media-vue/src/components/MediaField.vue";
+import MediaFullField from "@drax/media-vue/src/components/MediaFullField.vue";
+
+
+
 const {t, te} = useI18n()
 
 const {hasPermission} = useAuth()

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
+    }
+}