@drax/crud-vue 0.46.0 → 0.49.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.46.0",
+  "version": "0.49.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.46.0",
-    "@drax/crud-front": "^0.46.0",
-    "@drax/crud-share": "^0.46.0",
-    "@drax/media-vue": "^0.46.0"
+    "@drax/common-front": "^0.49.0",
+    "@drax/crud-front": "^0.49.0",
+    "@drax/crud-share": "^0.49.0",
+    "@drax/media-vue": "^0.49.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.8.2"
   },
-  "gitHead": "9625999c86d538dc3bee7c501acba6c51592ebca"
+  "gitHead": "ea99f6fd79d282e6efe02fca660d5733c13bb86d"
 }

package/src/components/CrudActiveFilters.vue

@@ -8,7 +8,7 @@ import CrudRefDisplay from "./CrudRefDisplay.vue";
 import {formatDate} from "@drax/common-front"
 
 const { t} = useI18n()
-const store = useCrudStore()
+
 const { filterIcon } = useFilterIcon()
 
 const props = defineProps({
@@ -18,6 +18,8 @@ const props = defineProps({
   }
 })
 
+const store = useCrudStore(props.entity?.name)
+
 const activeFilters = computed<any[]>(() => {
   return store.filters
     .map((filter:any, index: any) => {

package/src/components/CrudAutocomplete.vue

@@ -4,12 +4,16 @@ import { type PropType, type Ref} from "vue";
 import {ref, onBeforeMount} from "vue";
 import {getItemId} from "../helpers/getItemId"
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
+import CrudCreateOnTheFlyButton from "./buttons/CrudCreateOnTheFlyButton.vue";
 
 const valueModel = defineModel<string | string[]>({type: [String, Array], required: false})
 
 const {entity, multiple} = defineProps({
   entity: {type: Object as PropType<IEntityCrud|undefined>, required: true},
   field: {type: Object as PropType<IEntityCrudField>, required: true},
+  label: {type: String},
+  itemTitle: {type: [String], default: 'name'},
+  itemValue: {type: [String], default: '_id'},
   prependIcon: {type: String},
   prependInnerIcon: {type: String},
   appendIcon: {type: String},
@@ -19,15 +23,14 @@ const {entity, multiple} = defineProps({
   closableChips: {type: Boolean, default: true},
   readonly: {type: Boolean, default: false},
   clearable: {type: Boolean, default: true},
-  label: {type: String},
+  noFilter: {type: Boolean, default: false},
   hint: {type: String},
   persistentHint: {type: Boolean, default: false},
-  itemValue: {type: [String], default: '_id'},
-  itemTitle: {type: [String], default: 'name'},
   rules: {type: Array as PropType<any>, default: () => []},
   errorMessages: {type: Array as PropType<string[]>, default: () => []},
   hideDetails: {type: Boolean, default: false},
   singleLine: {type: Boolean, default: false},
+  addOnTheFly: {type: Boolean, default: false},
   density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
   variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
 })
@@ -59,10 +62,7 @@ async function search(value: any) {
 
 }
 
-onBeforeMount(async () => {
-  await search('')
-  await checkIds()
-})
+
 
 async function checkIds(ids: Array<string> = []) {
   try{
@@ -90,6 +90,16 @@ async function checkIds(ids: Array<string> = []) {
   }
 }
 
+onBeforeMount(async () => {
+  await search('')
+  await checkIds()
+})
+
+function onCreated(item: any) {
+  items.value.push(item)
+  valueModel.value = item._id
+}
+
 defineEmits(['updateValue'])
 
 </script>
@@ -97,12 +107,12 @@ defineEmits(['updateValue'])
 <template>
 
   <v-select
-      v-if="field.noFilter === true"
+      v-if="noFilter"
       v-model="valueModel"
       :label="label ? label : field.label"
-      :hint="field.hint"
-      :persistent-hint="field.persistentHint"
-      :placeholder="field.label"
+      :placeholder="label ? label : field.label"
+      :hint="hint"
+      :persistent-hint="persistentHint"
       :items="items"
       :multiple="multiple"
       :chips="chips"
@@ -124,6 +134,11 @@ defineEmits(['updateValue'])
       :prepend-inner-icon="prependInnerIcon"
       :append-inner-icon="appendInnerIcon"
   >
+
+    <template v-if="addOnTheFly" v-slot:append>
+      <crud-create-on-the-fly-button :entity="entity" @created="onCreated"></crud-create-on-the-fly-button>
+    </template>
+
     <template v-slot:item="{ props: itemProps, item }">
       <v-list-item
           v-bind="itemProps"
@@ -151,9 +166,9 @@ defineEmits(['updateValue'])
       v-else
       v-model="valueModel"
       :label="label ? label : field.label"
-      :hint="field.hint"
-      :persistent-hint="field.persistentHint"
-      :placeholder="field.label"
+      :placeholder="label ? label : field.label"
+      :hint="hint"
+      :persistent-hint="persistentHint"
       :items="items"
       :multiple="multiple"
       :chips="chips"
@@ -176,6 +191,11 @@ defineEmits(['updateValue'])
       :prepend-inner-icon="prependInnerIcon"
       :append-inner-icon="appendInnerIcon"
   >
+
+    <template v-if="addOnTheFly" v-slot:append>
+      <crud-create-on-the-fly-button :entity="entity" @created="onCreated"></crud-create-on-the-fly-button>
+    </template>
+
     <template v-slot:item="{ props: itemProps, item }">
       <v-list-item
           v-bind="itemProps"

package/src/components/CrudDialog.vue

@@ -8,7 +8,9 @@ const {t,te} = useI18n()
 
 const {operation,entity } = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  operation: {type: String as PropType<IEntityCrudOperation>}
+  operation: {type: String as PropType<IEntityCrudOperation>},
+  fullscreen: {type: Boolean, default: undefined},
+  maxWidth: {type: String, default: undefined},
 })
 
 defineEmits(
@@ -32,8 +34,8 @@ const title = computed(() => {
 <template>
   <v-dialog v-model="dialog"
             :z-index="entity.dialogZindex"
-            :fullscreen="entity.dialogFullscreen"
-            :max-width="entity.dialogMaxWidth"
+            :fullscreen="fullscreen === undefined ?  entity.dialogFullscreen : fullscreen"
+            :max-width="maxWidth === undefined ? entity.dialogMaxWidth : maxWidth"
   >
     <v-card>
       <v-toolbar>

package/src/components/CrudForm.vue

@@ -21,7 +21,7 @@ const {onSubmit, onCancel, operation, error, form} = useCrud(entity)
 
 const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
 
-const store = useCrudStore()
+const store = useCrudStore(entity?.name)
 
 const formRef = ref()
 

package/src/components/CrudFormField.vue

@@ -14,7 +14,7 @@ const {t, te} = useI18n()
 
 const {hasPermission} = useAuth()
 
-const store = useCrudStore()
+
 
 const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Array], default: false})
 
@@ -40,6 +40,8 @@ const {index, entity, field, disableRules, parentField} = defineProps({
   },
 })
 
+const store = useCrudStore(entity?.name)
+
 
 if (!field) {
   throw new Error("CrudFormField must be provided with a field object")
@@ -364,11 +366,13 @@ defineEmits(['updateValue'])
         v-if="field.type === 'ref'"
         :entity="entity.getRef(field.ref)"
         :field="field"
-        :item-title="field?.refDisplay"
         v-model="valueModel"
+        @updateValue="$emit('updateValue')"
+        :item-title="field?.refDisplay"
         :label="label"
         :hint="field.hint"
         :persistent-hint="field.persistentHint"
+        :no-filter="field.noFilter"
         :error-messages="inputErrors"
         :rules="rules"
         :density="density"
@@ -377,11 +381,11 @@ defineEmits(['updateValue'])
         :clearable="clearable"
         :hide-details="hideDetails"
         :single-line="singleLine"
-        @updateValue="$emit('updateValue')"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        :add-on-the-fly="field?.addOnTheFly"
     />
 
     <v-card v-if="field.type === 'object'" class="mt-3" variant="flat" border>
@@ -476,6 +480,7 @@ defineEmits(['updateValue'])
         :label="label"
         :hint="field.hint"
         :persistent-hint="field.persistentHint"
+        :no-filter="field.noFilter"
         :rules="rules"
         :error-messages="inputErrors"
         :density="density"
@@ -488,6 +493,7 @@ defineEmits(['updateValue'])
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        :add-on-the-fly="field?.addOnTheFly"
     />
 
 

package/src/components/CrudFormList.vue

@@ -6,7 +6,7 @@ import {useI18n} from "vue-i18n";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {useDisplay} from "vuetify"
 
-const store = useCrudStore()
+
 const {t, te} = useI18n()
 const valueModel = defineModel({type: Array, default: () => []});
 
@@ -24,6 +24,8 @@ const {field, entity} = defineProps({
   },
 })
 
+const store = useCrudStore(entity?.name)
+
 function newItem() {
   return field.objectFields ? field.objectFields.reduce((acc, field) => ({
     ...acc,

package/src/components/buttons/CrudCreateOnTheFlyButton.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+import {defineProps, type PropType, ref} from "vue";
+import type {IEntityCrud} from "@drax/crud-share";
+import CrudForm from "../CrudForm.vue";
+import CrudDialog from "../CrudDialog.vue";
+import {useCrudStore} from "../../stores/UseCrudStore";
+import {useCrud} from "../../composables/UseCrud";
+
+const {t} = useI18n()
+
+const dialog = ref(false)
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+const store = useCrudStore(entity?.name)
+store.$reset()
+const {onCreate} = useCrud(entity)
+
+function openDialog() {
+  onCreate()
+  dialog.value = true
+}
+
+function onCreated(item: any) {
+  dialog.value = false
+  emit('created', item)
+}
+
+function onCanceled() {
+  dialog.value = false
+}
+
+const emit = defineEmits(['created'])
+
+</script>
+
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props }">
+      <v-btn
+          v-bind="{ ...$attrs, ...props }"
+             icon="mdi-plus"
+             class="mr-1"
+             variant="text"
+             @click="openDialog"
+      >
+      </v-btn>
+    </template>
+    {{ t('action.create')}}
+  </v-tooltip>
+
+  <crud-dialog
+      v-model="dialog"
+      :entity="entity"
+      operation="create"
+      :fullscreen="false"
+  >
+    <crud-form
+        :entity="entity"
+        @created="onCreated"
+        @canceled="onCanceled"
+
+    >
+    </crud-form>
+
+  </crud-dialog>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/UseCrud.ts

@@ -6,7 +6,7 @@ import {useI18n} from "vue-i18n";
 
 export function useCrud(entity: IEntityCrud) {
 
-    const store = useCrudStore()
+    const store = useCrudStore(entity?.name)
 
     const {t: $t} = useI18n()
 

package/src/composables/UseCrudColumns.ts

@@ -8,7 +8,7 @@ import { useCrudStore } from '../stores/UseCrudStore'
 export function useCrudColumns(entity: IEntityCrud) {
   const { hasPermission } = useAuth()
   const { t, te } = useI18n()
-  const crudStore = useCrudStore()
+  const crudStore = useCrudStore(entity?.name)
 
   // Clave única para localStorage basada en el nombre de la entidad
   const storageKey = `crud_visible_columns_${entity.name.toLowerCase()}`
@@ -42,22 +42,22 @@ export function useCrudColumns(entity: IEntityCrud) {
 
       // Intentar cargar desde localStorage primero
       const storedColumns = loadColumnsFromStorage()
-      
+
       let initialColumns: string[]
-      
+
       if (storedColumns) {
         // Filtrar columnas almacenadas para asegurar que aún existen y tienen permisos
         initialColumns = storedColumns.filter(key => availableHeaders.includes(key))
-        
+
         // Si no quedaron columnas válidas, usar las predeterminadas
         if (initialColumns.length === 0) {
-          initialColumns = entity.selectedHeaders?.filter(key => 
+          initialColumns = entity.selectedHeaders?.filter(key =>
             availableHeaders.includes(key)
           ) || availableHeaders
         }
       } else {
         // Si no hay columnas guardadas, usar selectedHeaders o todas las disponibles
-        initialColumns = entity.selectedHeaders?.filter(key => 
+        initialColumns = entity.selectedHeaders?.filter(key =>
           availableHeaders.includes(key)
         ) || availableHeaders
       }
@@ -80,15 +80,15 @@ export function useCrudColumns(entity: IEntityCrud) {
       .filter(header => !header.permission || hasPermission(header.permission))
       .map(header => ({
         ...header,
-        title: te(`${entity.name.toLowerCase()}.field.${header.title}`) 
-          ? t(`${entity.name.toLowerCase()}.field.${header.title}`) 
+        title: te(`${entity.name.toLowerCase()}.field.${header.title}`)
+          ? t(`${entity.name.toLowerCase()}.field.${header.title}`)
           : header.title
       }))
   })
 
   // Headers filtrados por columnas visibles
   const filteredHeaders = computed<IEntityCrudHeader[]>(() => {
-    const filtered = translatedHeaders.value.filter(header => 
+    const filtered = translatedHeaders.value.filter(header =>
       visibleColumns.value.includes(header.key)
     )
     const actions = entity.actionHeaders.map(header => ({
@@ -111,19 +111,19 @@ export function useCrudColumns(entity: IEntityCrud) {
   const toggleColumn = (columnKey: string) => {
     const currentColumns = [...visibleColumns.value]
     const index = currentColumns.indexOf(columnKey)
-    
+
     if (index > -1) {
       currentColumns.splice(index, 1)
     } else {
       currentColumns.push(columnKey)
     }
-    
+
     crudStore.setVisibleColumns(currentColumns)
     // Guardar cambios en localStorage
     saveColumnsToStorage(currentColumns)
   }
 
-  const allSelected = computed(() => 
+  const allSelected = computed(() =>
     availableColumns.value.every(col => col.visible)
   )
 
@@ -150,7 +150,7 @@ export function useCrudColumns(entity: IEntityCrud) {
       .filter(header => !header.permission || hasPermission(header.permission))
       .map(header => header.key)
 
-    const defaultColumns = entity.selectedHeaders?.filter(key => 
+    const defaultColumns = entity.selectedHeaders?.filter(key =>
       availableHeaders.includes(key)
     ) || availableHeaders
 

package/src/composables/UseCrudGroupBy.ts

@@ -8,7 +8,7 @@ import {useCrudStore} from '../stores/UseCrudStore'
 export const useCrudGroupBy = (entity: IEntityCrud) => {
   const { t, te } = useI18n()
   const groupBystore = useGroupByStore()
-  const crudStore = useCrudStore()
+  const crudStore = useCrudStore(entity?.name)
   const entityName = entity.name.toLowerCase()
 
   const availableFields = computed<IEntityCrudField[]>(() => {

package/src/composables/UseInputErrorI18n.ts

@@ -1,10 +1,11 @@
 import {useCrudStore} from "../stores/UseCrudStore";
 import {useI18n} from "vue-i18n";
 import {computed} from "vue";
+import type {IEntityCrud} from "@drax/crud-share";
 
-export function useInputErrorI18n() {
+export function useInputErrorI18n(entity: IEntityCrud) {
 
-    const store = useCrudStore()
+    const store = useCrudStore(entity?.name)
 
     const {t, te} = useI18n()
 

package/src/stores/UseCrudStore.ts

@@ -1,7 +1,7 @@
 import {defineStore} from "pinia";
 import type {IEntityCrudOperation, IDraxFieldFilter} from "@drax/crud-share";
 
-export const useCrudStore = defineStore('CrudStore', {
+export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+id, {
     state: () => (
         {
             operation: null as IEntityCrudOperation,
@@ -142,4 +142,4 @@ export const useCrudStore = defineStore('CrudStore', {
         }
     }
 
-})
+})()