@drax/crud-vue 3.30.0 → 3.31.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.30.0",
+  "version": "3.31.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -27,7 +27,7 @@
     "@drax/common-front": "^3.29.0",
     "@drax/crud-front": "^3.21.0",
     "@drax/crud-share": "^3.29.0",
-    "@drax/media-vue": "^3.30.0"
+    "@drax/media-vue": "^3.31.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "4b41867751444a91332910fd154fa7510b09f02e"
+  "gitHead": "90e6f71d45f95f14df6b8334920f9af82a1c99a2"
 }

package/src/components/Crud.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import {computed, onBeforeMount, ref, watch, type PropType} from "vue";
+import {useRoute, useRouter} from "vue-router";
 import type {IEntityCrud} from "@drax/crud-share";
 import CrudListTable from "./CrudListTable.vue";
 import CrudListGallery from "./CrudListGallery.vue";
 import CrudForm from "./CrudForm.vue";
+import CrudRouteForm from "./CrudRouteForm.vue";
 import CrudNotify from "./CrudNotify.vue";
 import CrudDialog from "./CrudDialog.vue";
 import CrudAiButton from "./buttons/CrudAiButton.vue";
@@ -12,6 +14,7 @@ import {useCrud} from "../composables/UseCrud";
 import {useDisplay} from 'vuetify'
 import {useAuth} from "@drax/identity-vue";
 import CrudRowValue from "./CrudRowValue.vue";
+import getItemId from "../helpers/getItemId";
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
@@ -25,6 +28,8 @@ const {
 } = useCrud(entity);
 
 const {hasPermission} = useAuth()
+const route = useRoute()
+const router = useRouter()
 
 onBeforeMount(() => {
   resetCrudStore()
@@ -51,10 +56,75 @@ const listComponent = computed(() => {
 
 const {xs} = useDisplay()
 
+const routeCrudMode = computed(() => {
+  const mode = getQueryParam('mode')
+  return ['create', 'edit', 'view'].includes(mode || '') ? mode : null
+})
+
+const routeCrudId = computed(() => getQueryParam('id'))
+
+const isRouteCrudForm = computed(() => {
+  if (routeCrudMode.value === 'create') {
+    return true
+  }
+
+  return ['edit', 'view'].includes(routeCrudMode.value || '') && !!routeCrudId.value
+})
+
+const canOpenRouteCrudForm = computed(() => {
+  if (operation.value === 'create') {
+    return true
+  }
+
+  return ['edit', 'view'].includes(operation.value || '') && !!getFormId()
+})
+
+function getQueryParam(name: string): string | null {
+  const value = route.query[name]
+
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+
+  return value ?? null
+}
+
 function applyAiSuggestions(values: Record<string, any>) {
   form.value = values
 }
 
+function getFormId() {
+  return entity.identifier ? form.value?.[entity.identifier] : getItemId(form.value)
+}
+
+function openRouteCrudForm() {
+  if (!operation.value || !['create', 'edit', 'view'].includes(operation.value)) {
+    return
+  }
+
+  const query: Record<string, string> = {
+    mode: operation.value,
+  }
+
+  if (operation.value !== 'create') {
+    const id = getFormId()
+
+    if (!id) {
+      return
+    }
+
+    query.id = String(id)
+  }
+
+  router.push({
+    name: route.name ?? undefined,
+    path: route.name ? undefined : route.path,
+    params: route.params,
+    hash: route.hash,
+    query,
+  })
+}
+
 watch(dialog, (value) => {
   if (!value) {
     aiExpanded.value = false
@@ -65,7 +135,22 @@ watch(dialog, (value) => {
 </script>
 
 <template>
-  <v-container :fluid="entity.containerFluid" class="mt-5">
+  <crud-route-form
+      v-if="isRouteCrudForm"
+      :entity="entity"
+      @created="item => emit('created', item)"
+      @updated="item => emit('updated', item)"
+      @deleted="emit('deleted')"
+      @viewed="emit('viewed')"
+      @canceled="emit('canceled')"
+  >
+    <template v-for="ifield in entity.fields" :key="ifield.name" v-slot:[`field.${ifield.name}`]="{field, form, modelValue, setValue}">
+      <slot :name="`field.${ifield.name}`" v-bind="{field, form, modelValue, setValue}">
+      </slot>
+    </template>
+  </crud-route-form>
+
+  <v-container v-else :fluid="entity.containerFluid" class="mt-5">
     <v-card :class="entity.cardClass" :density="entity.cardDensity">
 
       <component
@@ -149,6 +234,13 @@ watch(dialog, (value) => {
         :operation="operation"
     >
       <template #toolbar-actions>
+        <v-btn
+            v-if="canOpenRouteCrudForm"
+            icon="mdi-open-in-new"
+            variant="text"
+            @click="openRouteCrudForm"
+        />
+
         <v-btn
             v-if="canNavigateItems"
             icon="mdi-chevron-left"

package/src/components/CrudForm.vue

@@ -14,13 +14,14 @@ const {hasPermission} = useAuth()
 const {t, te} = useI18n()
 
 
-const {entity} = defineProps({
+const {entity, showSubmitAndReturn} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
+  showSubmitAndReturn: {type: Boolean, default: false},
 })
 
 const {onSubmit, onCancel, operation, error, form} = useCrud(entity)
 
-const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
+const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled', 'saved-and-return'])
 
 const store = useCrudStore(entity?.name)
 
@@ -71,7 +72,7 @@ function setFieldModelValue(fieldName: string, value: any) {
   form.value[fieldName] = value
 }
 
-async function submit() {
+async function submitForm(returnAfterSubmit = false) {
   store.resetErrors()
 
   if (['create', 'edit'].includes(operation.value)) {
@@ -87,9 +88,15 @@ async function submit() {
   switch (result.status) {
     case "created":
       emit("created", result.item)
+      if (returnAfterSubmit) {
+        emit("saved-and-return", result.item)
+      }
       break
     case "updated":
       emit("updated", result.item)
+      if (returnAfterSubmit) {
+        emit("saved-and-return", result.item)
+      }
       break
     case "deleted":
       emit("deleted")
@@ -101,6 +108,14 @@ async function submit() {
 
 }
 
+async function submit() {
+  await submitForm()
+}
+
+async function submitAndReturn() {
+  await submitForm(true)
+}
+
 function cancel() {
   onCancel()
   emit('canceled')
@@ -349,6 +364,15 @@ const onlyView = computed(()=> {
         <v-btn variant="flat" v-if="operation != 'view'" :class="entity.submitBtnFormClass" @click="submit" :loading="store.loading">
           {{ operation ? t('action.'+operation) : t('action.sent') }}
         </v-btn>
+        <v-btn
+            variant="flat"
+            v-if="showSubmitAndReturn && ['create', 'edit'].includes(operation || '')"
+            :class="entity.submitBtnFormClass"
+            @click="submitAndReturn"
+            :loading="store.loading"
+        >
+          {{ te('action.saveAndReturn') ? t('action.saveAndReturn') : 'Guardar y volver' }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-form>

package/src/components/CrudRouteForm.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import {computed, onBeforeMount, watch, type PropType} from "vue";
+import {useRoute, useRouter} from "vue-router";
+import type {IEntityCrud} from "@drax/crud-share";
+import CrudForm from "./CrudForm.vue";
+import CrudNotify from "./CrudNotify.vue";
+import {useCrud} from "../composables/UseCrud";
+import {useCrudStore} from "../stores/UseCrudStore";
+import getItemId from "../helpers/getItemId";
+
+type RouteCrudMode = 'create' | 'edit' | 'view'
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
+
+const route = useRoute()
+const router = useRouter()
+const store = useCrudStore(entity?.name)
+
+const {
+  resetCrudStore,
+  prepareFilters,
+  prepareSort,
+  operation,
+  form,
+  notify,
+  message,
+  setForm,
+  setOperation,
+  cast,
+  cloneItem,
+} = useCrud(entity)
+
+const routeMode = computed<RouteCrudMode | null>(() => {
+  const mode = getQueryParam('mode')
+  return isRouteCrudMode(mode) ? mode : null
+})
+
+const routeId = computed(() => getQueryParam('id'))
+
+const formReady = computed(() => {
+  return operation.value === 'create' || Boolean(form.value && Object.keys(form.value).length > 0)
+})
+
+onBeforeMount(() => {
+  resetCrudStore()
+  prepareFilters()
+  prepareSort()
+  prepareRouteForm()
+})
+
+watch(
+    () => [route.query.mode, route.query.id],
+    () => prepareRouteForm()
+)
+
+function getQueryParam(name: string): string | null {
+  const value = route.query[name]
+
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+
+  return value ?? null
+}
+
+function isRouteCrudMode(mode: string | null): mode is RouteCrudMode {
+  return mode === 'create' || mode === 'edit' || mode === 'view'
+}
+
+function cancel() {
+  emit('canceled')
+  goToList()
+}
+
+function goToList() {
+  router.push({
+    name: route.name ?? undefined,
+    path: route.name ? undefined : route.path,
+    params: route.params,
+    hash: route.hash,
+    query: {},
+  })
+}
+
+function getCreatedItemId(item: any) {
+  return entity.identifier ? item?.[entity.identifier] : getItemId(item)
+}
+
+function goToEdit(item: any) {
+  const id = getCreatedItemId(item)
+
+  if (!id) {
+    return
+  }
+
+  router.push({
+    name: route.name ?? undefined,
+    path: route.name ? undefined : route.path,
+    params: route.params,
+    hash: route.hash,
+    query: {
+      mode: 'edit',
+      id: String(id),
+    },
+  })
+}
+
+function created(item: any) {
+  emit('created', item)
+  goToEdit(item)
+}
+
+async function prepareRouteForm() {
+  const mode = routeMode.value
+
+  if (!mode) {
+    return
+  }
+
+  store.resetErrors()
+
+  if (mode === 'create') {
+    setOperation('create')
+    setForm(entity.form)
+    return
+  }
+
+  if (!routeId.value) {
+    store.setError('Missing id query param')
+    return
+  }
+
+  try {
+    store.setLoading(true)
+
+    if (!entity.provider.findById) {
+      throw new Error('provider.findById not implemented')
+    }
+
+    const item = await entity.provider.findById(routeId.value)
+
+    if (!item) {
+      throw new Error('Item not found')
+    }
+
+    setOperation(mode)
+    setForm(cast(cloneItem(item)))
+  } catch (e: any) {
+    setOperation(mode)
+    setForm({})
+    store.setError(e.message || 'An error occurred while loading the entity')
+    console.error('Error loading entity by id', e)
+  } finally {
+    store.setLoading(false)
+  }
+}
+</script>
+
+<template>
+  <v-container :fluid="entity.containerFluid" class="mt-5">
+    <v-card :class="entity.cardClass" :density="entity.cardDensity">
+      <v-progress-linear v-if="store.loading" indeterminate/>
+
+      <crud-form
+          v-if="formReady || store.error"
+          :entity="entity"
+          show-submit-and-return
+          @created="created"
+          @updated="item => emit('updated', item)"
+          @deleted="emit('deleted')"
+          @viewed="emit('viewed')"
+          @canceled="cancel"
+          @saved-and-return="goToList"
+      >
+        <template v-for="ifield in entity.fields" :key="ifield.name" v-slot:[`field.${ifield.name}`]="{field, form, modelValue, setValue}">
+          <slot :name="`field.${ifield.name}`" v-bind="{field, form, modelValue, setValue}">
+          </slot>
+        </template>
+      </crud-form>
+    </v-card>
+
+    <crud-notify v-model="notify" :message="message"></crud-notify>
+  </v-container>
+</template>

package/src/index.ts

@@ -1,6 +1,7 @@
 import Crud from "./components/Crud.vue";
 import CrudDialog from "./components/CrudDialog.vue";
 import CrudForm from "./components/CrudForm.vue";
+import CrudRouteForm from "./components/CrudRouteForm.vue";
 import CrudFormField from "./components/CrudFormField.vue";
 import CrudFieldRange from "./components/CrudFieldRange.vue";
 import CrudFormList from "./components/CrudFormList.vue";
@@ -20,10 +21,7 @@ import EntityCombobox from "./components/combobox/EntityCombobox.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
 import {useEntityStore} from "./stores/UseEntityStore";
 import {useCrud} from "./composables/UseCrud";
-import {useCrudColumns} from "./composables/UseCrudColumns";
-import {useCrudGroupBy} from "./composables/UseCrudGroupBy";
 import {useDynamicFilters} from "./composables/UseDynamicFilters";
-import {useCrudRefDisplay} from "./composables/useCrudRefDisplay";
 import {useFilterIcon} from "./composables/UseFilterIcon";
 import {useFormUtils} from "./composables/UseFormUtils";
 import {useInputErrorI18n} from "./composables/UseInputErrorI18n";
@@ -34,6 +32,7 @@ export {
     Crud,
     CrudDialog,
     CrudForm,
+    CrudRouteForm,
     CrudFormField,
     CrudFieldRange,
     CrudFormList,
@@ -50,10 +49,7 @@ export {
     CrudFiltersAction,
     CrudFiltersDynamic,
     useCrud,
-    useCrudColumns,
-    useCrudGroupBy,
     useDynamicFilters,
-    useCrudRefDisplay,
     useFormUtils,
     useCrudStore,
     useInputErrorI18n,