@drax/dashboard-vue 2.9.0 → 3.0.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.9.0",
+  "version": "3.0.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -22,9 +22,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/crud-front": "^2.0.0",
-    "@drax/crud-share": "^2.8.0",
-    "@drax/dashboard-front": "^2.8.0"
+    "@drax/crud-front": "^3.0.0",
+    "@drax/crud-share": "^3.0.0",
+    "@drax/dashboard-front": "^3.0.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -46,5 +46,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "2bc9b59a45c762bd32403dce14db2693be34dcc7"
+  "gitHead": "63ae718b24ea25ae80b1a9a5dfb84a3abbb95199"
 }

package/src/components/DashboardConfig/DashboardCardEditor.vue

@@ -5,19 +5,19 @@ import {useEntityStore} from "@drax/crud-vue";
 import type {
   IDraxFieldFilter,
   IEntityCrud,
-  IEntityCrudFieldTypes,
   IEntityCrudFilter,
   IEntityCrudFilterOperators
 } from "@drax/crud-share";
 import {useI18n} from "vue-i18n"
 import CrudFormField from "@drax/crud-vue/src/components/CrudFormField.vue";
 import {useFilterIcon} from "@drax/crud-vue";
+import {useDynamicFilters} from "@drax/crud-vue/src/composables/UseDynamicFilters";
 
 const props = defineProps({
   modelValue: {type: Object as PropType<IDashboardCard>, required: true}
 });
 const {filterIcon} = useFilterIcon()
-const {t, te} = useI18n()
+const {t} = useI18n()
 
 const emit = defineEmits(['update:modelValue', 'save', 'cancel']);
 
@@ -122,92 +122,19 @@ function onEntityChange() {
   }
 }
 
-const fieldI18n = computed(() => {
-  return (field: IEntityCrudFilter) => {
-    return te(entitySelected.value?.name?.toLowerCase() + ".field." + field.name) ? t(entitySelected.value?.name?.toLowerCase() + ".field." + field.name) : field.label
-  }
-})
-
-const selectableFields = computed(() => {
-  return entitySelected.value ?
-      entitySelected.value.fields
-          .filter((f: any) => !['fullFile', 'object', 'array.object'].includes(f.type))
-          .map((f: any) => ({title: fieldI18n.value(f), value: f.name}))
-      : []
-})
-
-const dynamicFilter = computed(() => {
-  return (index: number) => {
-    return filters.value[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'},
-]
-
-function removeFilter(index: number) {
-  if (filters.value) {
-    filters.value.splice(index, 1)
-  }
-}
-
-function addFilter() {
-  const filter: IEntityCrudFilter = {
-    default: undefined,
-    label: "",
-    name: '',
-    operator: 'eq',
-    type: 'string',
-    permission: '',
-    value: ''
-  }
-  if (filters.value) {
-    filters.value.push(filter)
-  }
-}
-
-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, val: string) {
-  const field = entitySelected.value.fields.find((e: any) => e.name === val)
-  let filter = dynamicFilter.value(index)
-  if (!filter) {
-    return
-  }
-  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)
-    if(field.type === 'boolean'){
-      filter.value = false
-    }
-  }
-}
-
+const {
+  dynamicFilter,
+  selectableFields,
+  getOperations,
+  isValueRequired,
+  onUpdateField,
+  addFilter,
+  removeFilter
+} = useDynamicFilters(
+    computed(() => form.value.entity),
+    computed(() => entitySelected.value.fields || []),
+    filters
+)
 
 </script>
 
@@ -273,22 +200,23 @@ function onUpdateField(index: number, val: string) {
                       density="compact"
                       variant="outlined"
                       hide-details
-                      @update:modelValue="(v:string) => onUpdateField(index, v)"
+                      @update:modelValue="() => onUpdateField(index, true)"
                   />
                 </v-col>
                 <v-col cols="12" sm="3">
                   <v-select
-                      :items="operations"
+                      :items="getOperations(index)"
                       v-model="dynamicFilter(index)!.operator"
                       :label="t('crud.operator')"
                       density="compact"
                       variant="outlined"
                       hide-details
+                      @update:modelValue="() => onUpdateField(index)"
                   />
                 </v-col>
                 <v-col cols="12" sm="4">
                   <crud-form-field
-                      v-if="entitySelected"
+                      v-if="entitySelected && isValueRequired(index)"
                       :field="filter"
                       :entity="entitySelected"
                       v-model="dynamicFilter(index)!.value"
@@ -314,7 +242,7 @@ function onUpdateField(index: number, val: string) {
             </v-col>
 
             <v-col cols="12">
-              <v-btn small variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
+              <v-btn size="small" variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
             </v-col>
 
           </v-row>

package/src/components/DashboardConfig/DashboardConfig.vue

@@ -59,8 +59,8 @@ const deleteCard = (index: number) => {
     valueModel.value.cards?.splice(index, 1);
     if (editingCardIndex.value === index) {
       editingCardIndex.value = null;
-      emit("dashboardUpdated")
     }
+    emit("dashboardUpdated")
   }
 };