@drax/crud-vue 2.6.0 → 2.8.0

package/package.json

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

package/src/EntityCrud.ts

@@ -1,10 +1,11 @@
 import type {
   IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
   IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
-  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFormFilter, IEntityCrudFieldVariant
+  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFieldVariant, IDraxFieldFilter
 } from "@drax/crud-share";
 
 
+
 class EntityCrud implements IEntityCrud {
 
   name: string = ''
@@ -125,11 +126,11 @@ class EntityCrud implements IEntityCrud {
   }
 
 
-  get formFilters(): IEntityCrudFormFilter[] {
+  get formFilters(): IDraxFieldFilter[] {
     return this.filters.map(
       (filter: IEntityCrudFilter) =>
         ({field: filter.name, value: filter.default ? filter.default : null, operator: (filter.operator ? filter.operator : 'eq')})
-    ) as IEntityCrudFormFilter[]
+    ) as IDraxFieldFilter[]
   }
 
   get refs(): IEntityCrudRefs {
@@ -138,7 +139,7 @@ class EntityCrud implements IEntityCrud {
 
   getRef(ref: string): IEntityCrud {
     if (!this.refs.hasOwnProperty(ref)) {
-      throw new Error("Ref not found: " + ref)
+      throw new Error("Ref not found: " + ref + " Refs Available: " + Object.getOwnPropertyNames(this.refs).join(", "))
     }
 
     return this.refs[ref] as IEntityCrud
@@ -238,6 +239,14 @@ class EntityCrud implements IEntityCrud {
     return true
   }
 
+   get filtersEnable(){
+    return true
+  }
+
+  get dynamicFiltersEnable(){
+    return true
+  }
+
   get filterButtons() {
     return true
   }
@@ -303,11 +312,11 @@ class EntityCrud implements IEntityCrud {
   }
 
   get inputVariantView(): IEntityCrudFieldVariant {
-    return 'filled'
+    return 'solo-filled'
   }
 
   get inputVariantDelete() : IEntityCrudFieldVariant{
-    return 'underlined'
+    return 'solo-filled'
   }
 
 

package/src/components/Crud.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import {onBeforeMount, type PropType} from "vue";
+import {computed, onBeforeMount, type PropType} from "vue";
 import type {IEntityCrud} from "@drax/crud-share";
-import CrudList from "./CrudList.vue";
+import CrudListTable from "./CrudListTable.vue";
+import CrudListGallery from "./CrudListGallery.vue";
 import CrudForm from "./CrudForm.vue";
 import CrudNotify from "./CrudNotify.vue";
 import CrudDialog from "./CrudDialog.vue";
 import {useCrud} from "../composables/UseCrud";
+import {useDisplay} from 'vuetify'
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
@@ -24,6 +26,22 @@ onBeforeMount(() => {
 
 const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
 
+const listComponent = computed(() => {
+  const listMode = entity?.listMode
+  switch (listMode){
+    case 'responsive':
+      return xs.value ? CrudListGallery : CrudListTable
+    case 'gallery':
+      return CrudListGallery
+    case 'table':
+      return CrudListTable
+    default:
+      return xs.value ? CrudListGallery : CrudListTable
+  }
+})
+
+const {xs} = useDisplay()
+
 
 </script>
 
@@ -31,7 +49,8 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled']
   <v-container :fluid="entity.containerFluid" class="mt-5">
     <v-card :class="entity.cardClass" :density="entity.cardDensity">
 
-      <crud-list
+      <component
+          :is="listComponent"
           :entity="entity"
           @create="onCreate"
           @edit="onEdit"
@@ -66,13 +85,18 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled']
           </slot>
         </template>
 
+        <template  v-slot:item="{item}">
+          <slot name="item" v-bind="{item}">
+          </slot>
+        </template>
+
 
         <template v-slot:item.actions="{item}">
           <slot name="item.actions" v-bind="{item}">
           </slot>
         </template>
 
-      </crud-list>
+      </component>
     </v-card>
 
     <crud-dialog

package/src/components/CrudActiveFilters.vue

@@ -3,7 +3,7 @@ import { computed,  type PropType } from 'vue'
 import type { IEntityCrud } from '@drax/crud-share'
 import { useCrudStore } from '../stores/UseCrudStore'
 import { useI18n } from 'vue-i18n'
-import { useFilterIcon } from '../composables/useFilterIcon'
+import { useFilterIcon } from '../composables/UseFilterIcon'
 import CrudRefDisplay from "./CrudRefDisplay.vue";
 import {formatDate} from "@drax/common-front"
 
@@ -92,7 +92,7 @@ const removeFilter = (index: number) => {
   const filterDef = props.entity.filters[index]
 
   // Resetear al valor por defecto
-  filter.value = filterDef.default
+  filter.value = filterDef?.default
 
   // Emitir evento para aplicar filtros
   emit('filterRemoved')

package/src/components/CrudAutocomplete.vue

@@ -146,14 +146,14 @@ defineEmits(['updateValue'])
           :title="item.raw[itemTitle]"
           :color="item.raw?.color"
           :base-color="item.raw?.color"
-          :prepend-icon="item.raw?.icon"
+          :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       />
     </template>
 
     <template v-slot:selection="{item}">
       <v-chip tile density="compact"
               :color="item.raw?.color"
-              :prepend-icon="item.raw?.icon"
+              :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       >
         {{ item.raw[itemTitle] }}
       </v-chip>
@@ -203,14 +203,14 @@ defineEmits(['updateValue'])
           :title="item.raw[itemTitle]"
           :color="item.raw?.color"
           :base-color="item.raw?.color"
-          :prepend-icon="item.raw?.icon"
+          :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       />
     </template>
 
     <template v-slot:selection="{item}">
       <v-chip tile density="compact"
               :color="item.raw?.color"
-              :prepend-icon="item.raw?.icon"
+              :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       >
         {{ item.raw[itemTitle] }}
       </v-chip>

package/src/components/CrudFilters.vue

@@ -2,18 +2,16 @@
 import {computed, type PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
 import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
-import {useI18n} from "vue-i18n";
 import {useAuth} from "@drax/identity-vue";
-import {useFilterIcon} from "../composables/useFilterIcon";
+import {useFilterIcon} from "../composables/UseFilterIcon";
 
-const {t} = useI18n()
 const valueModel = defineModel({type: [Object]})
 const {hasPermission} = useAuth()
 const {filterIcon} = useFilterIcon()
 
-const {entity, actionButtons} = defineProps({
+const {entity, autoFilter} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  actionButtons: {type: Boolean, default: false},
+  autoFilter: {type: Boolean, default: false}
 })
 
 const aFields = computed(() => {
@@ -24,13 +22,15 @@ function filter() {
   emit('applyFilter')
 }
 
+/*
 function clear() {
   emit('clearFilter')
 }
+*/
 
 function onUpdateValue(){
-  if(!actionButtons){
-    emit('applyFilter')
+  if(autoFilter){
+    filter()
   }
 }
 
@@ -69,14 +69,6 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
 
         </v-row>
 
-    <v-card-actions v-if="actionButtons" class="pb-0">
-      <v-spacer />
-      <v-btn  variant="text" density="compact" :class="entity.cleanFilterClass" @click="clear">{{ t('action.clear') }}</v-btn>
-      <v-btn variant="flat" density="compact" :class="entity.applyFilterClass"  @click="filter">
-        {{ t('action.filter') }}
-      </v-btn>
-    </v-card-actions>
-
   </v-card>
 </template>
 

package/src/components/CrudFiltersAction.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+import type {PropType} from "vue";
+import type {IEntityCrud} from "@drax/crud-share";
+const {t} = useI18n()
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+function filter() {
+  emit('applyFilter')
+}
+
+function clear() {
+  emit('clearFilter')
+}
+
+const emit = defineEmits(['applyFilter', 'clearFilter'])
+
+</script>
+
+<template>
+
+    <v-card-actions  class="pb-0">
+      <v-spacer />
+      <v-btn  variant="text" density="compact" :class="entity.cleanFilterClass" @click="clear">{{ t('action.clear') }}</v-btn>
+      <v-btn variant="flat" density="compact" :class="entity.applyFilterClass"  @click="filter">
+        {{ t('action.filter') }}
+      </v-btn>
+    </v-card-actions>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudFiltersDynamic.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import {computed, type PropType} from "vue";
+import CrudFormField from "./CrudFormField.vue";
+import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+import {useAuth} from "@drax/identity-vue";
+import {useFilterIcon} from "../composables/UseFilterIcon";
+import {useCrudStore} from "../stores/UseCrudStore";
+import {useEntityStore} from "../stores/UseEntityStore";
+
+const {t, te} = useI18n()
+const valueModel = defineModel({type: [Object]})
+const {hasPermission} = useAuth()
+const {filterIcon} = useFilterIcon()
+
+
+const {entity, autoFilter} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+  autoFilter: {type: Boolean, default: false}
+})
+
+const store = useCrudStore(entity?.name)
+const entityStore = useEntityStore();
+const storeEntity = entityStore.entities.find((e: any) => e.name === entity.name)
+
+const aFields = computed(() => {
+  return store.dynamicFilters
+      .filter((field: IEntityCrudFilter) => !field.permission || hasPermission(field.permission))
+})
+
+const dynamicFilter = computed(() => {
+  return (index: string | number) => {
+    return store.dynamicFilters[index]
+  }
+})
+
+function filter() {
+  emit('applyFilter')
+}
+
+/*
+function clear() {
+  emit('clearFilter')
+}
+*/
+
+function onUpdateValue() {
+  if (autoFilter) {
+    filter()
+  }
+}
+
+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'])
+
+</script>
+
+<template>
+  <v-row dense class="mt-4">
+    <v-col v-for="(filter,index) in aFields"
+           :key="filter.name"
+           cols="12" class="tdash"
+    >
+      <v-row >
+        <v-col cols="12" sm="4">
+          <v-select
+              :items="selectableFields"
+              v-model="dynamicFilter(index).name"
+              :label="t('crud.field')"
+              density="compact"
+              variant="outlined"
+              hide-details
+              @update:modelValue="(v:string) => onUpdateField(index, v)"
+          />
+        </v-col>
+        <v-col cols="12" sm="3">
+          <v-select
+              :items="operations"
+              v-model="dynamicFilter(index).operator"
+              :label="t('crud.operator')"
+              density="compact"
+              variant="outlined"
+              hide-details
+          />
+        </v-col>
+        <v-col cols="10" sm="4">
+          <crud-form-field
+              :field="filter"
+              :entity="entity"
+              v-model="dynamicFilter(index).value"
+              :clearable="true"
+              density="compact"
+              variant="outlined"
+              :prepend-inner-icon="filterIcon(filter)"
+              hide-details
+              @updateValue="onUpdateValue"
+          />
+        </v-col>
+        <v-col cols="2" sm="1">
+          <v-btn @click="removeFilter(index)"
+                 icon="mdi-delete"
+                 class="mr-1"
+                 variant="text"
+                 color="red"
+          >
+          </v-btn>
+        </v-col>
+      </v-row>
+
+
+    </v-col>
+
+    <v-col cols="12">
+      <v-btn size="small" variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
+    </v-col>
+
+  </v-row>
+
+</template>
+
+<style scoped>
+.tdash{
+  border-bottom-width: 0.5px;
+  border-bottom-color: lightgray;
+  border-bottom-style: dashed;
+  margin-bottom: 10px;
+}
+</style>

package/src/components/CrudForm.vue

@@ -3,7 +3,7 @@ import {useI18n} from "vue-i18n";
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 import {getItemId} from "../helpers/getItemId";
 import CrudFormField from "./CrudFormField.vue";
-import {computed, defineEmits, defineProps, ref} from "vue";
+import {computed, ref} from "vue";
 import type {PropType} from "vue";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {useCrud} from "../composables/UseCrud";
@@ -132,6 +132,10 @@ const rules = computed(() => {
   }
 })
 
+const onlyView = computed(()=> {
+  return ['delete','view'].includes(operation?.value)
+})
+
 </script>
 
 <template>
@@ -158,12 +162,13 @@ const rules = computed(() => {
               :xl="field.xl ? field.xl : undefined"
           >
             <slot :name="`field.${field.name}`" v-bind="{field}">
+
               <crud-form-field
                   :field="field"
                   :entity="entity"
                   v-model="form[field.name]"
                   :clearable="false"
-                  :readonly="['delete','view'].includes(operation) || field.readonly"
+                  :readonly="onlyView || field.readonly"
                   :variant="variant"
                   :prepend-inner-icon="field?.prependInnerIcon"
                   :prepend-icon="field?.prependIcon"
@@ -206,12 +211,15 @@ const rules = computed(() => {
                       :xl="field.xl ? field.xl : undefined"
                   >
                     <slot :name="`field.${field.name}`" v-bind="{field}">
+
+
+
                       <crud-form-field
                           :field="field"
                           :entity="entity"
                           v-model="form[field.name]"
                           :clearable="false"
-                          :readonly="['delete','view'].includes(operation) || field.readonly"
+                          :readonly="onlyView || field.readonly"
                           :variant="variant"
                           :prepend-inner-icon="field?.prependInnerIcon"
                           :prepend-icon="field?.prependIcon"