@drax/crud-vue 0.14.3 → 0.15.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.14.3",
+  "version": "0.15.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.14.0",
-    "@drax/crud-front": "^0.14.0",
-    "@drax/crud-share": "^0.14.0",
-    "@drax/media-vue": "^0.14.2"
+    "@drax/common-front": "^0.15.0",
+    "@drax/crud-front": "^0.15.0",
+    "@drax/crud-share": "^0.15.0",
+    "@drax/media-vue": "^0.15.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "6638957752a86713df6545de62664b083393cc45"
+  "gitHead": "191e5ab07c75de5ffd3b3c02aa2127b8d3871262"
 }

package/src/EntityCrud.ts

@@ -185,6 +185,20 @@ class EntityCrud implements IEntityCrud {
         return ''
     }
 
+
+    get tabs():string[]{
+        return []
+    }
+
+
+    get menus():string[]{
+        return []
+    }
+
+    get menuMaxHeight(){
+        return '300px'
+    }
+
 }
 
 export default EntityCrud;

package/src/components/Crud.vue

@@ -13,7 +13,7 @@ const {entity} = defineProps({
 
 const {
   onView, onCreate, onEdit, onDelete, resetCrudStore,
-  operation, dialog, form, notify, error, message, doExport,
+  operation, dialog, notify, error, message, doExport,
   prepareFilters
 } = useCrud(entity);
 
@@ -71,10 +71,7 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed','canceled'])
 
       <slot name="form">
         <crud-form
-            v-model="form"
             :entity="entity"
-            :error="error"
-            :readonly="operation === 'delete'"
             @created="item => emit('created', item)"
             @updated="item => emit('updated', item)"
             @deleted="emit('deleted')"

package/src/components/CrudForm.vue

@@ -4,7 +4,7 @@ import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 import {useFormUtils} from "../composables/UseFormUtils";
 import {getItemId} from "../helpers/getItemId";
 import CrudFormField from "./CrudFormField.vue";
-import {computed, defineEmits, defineModel, defineProps, ref} from "vue";
+import {computed, defineEmits, defineProps, ref} from "vue";
 import type {PropType} from "vue";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {useCrud} from "../composables/UseCrud";
@@ -13,14 +13,12 @@ import {useAuth} from '@drax/identity-vue'
 const {hasPermission} = useAuth()
 const {t, te} = useI18n()
 
-const valueModel = defineModel({type: [Object]})
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  readonly: {type: Boolean, default: false}
 })
 
-const {onSubmit, onCancel, operation, error} = useCrud(entity)
+const {onSubmit, onCancel, operation, error, form} = useCrud(entity)
 
 const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
 
@@ -28,6 +26,9 @@ const store = useCrudStore()
 
 const formRef = ref()
 
+const tabSelected = ref()
+const menuSelected = ref(entity?.menus?.length ? entity?.menus[0] : null)
+
 const fields = computed(() => {
   if (operation.value === 'create') {
     return entity.createFields
@@ -46,6 +47,22 @@ const aFields = computed(() => {
   return fields.value.filter((field: IEntityCrudField) => !field.permission || hasPermission(field.permission))
 })
 
+const generalFields = computed(() => {
+  return aFields.value.filter((field: IEntityCrudField) => !field.tab && !field.menu)
+})
+
+const tabFields = computed(() => {
+  return (tab: string): IEntityCrudField[] => aFields.value.filter((field: IEntityCrudField) => field.tab === tab)
+})
+
+const menuFields = computed(() => {
+  return (menu: string | null): IEntityCrudField[] => aFields.value.filter((field: IEntityCrudField) => field.menu === menu)
+})
+
+const menuMaxHeight = computed(() => {
+  return entity.menuMaxHeight || '300px'
+})
+
 async function submit() {
   store.resetErrors()
 
@@ -57,7 +74,7 @@ async function submit() {
     }
   }
 
-  let result = await onSubmit(valueModel.value)
+  let result = await onSubmit(form.value)
 
   switch (result.status) {
     case "created":
@@ -92,30 +109,32 @@ const {
   <v-form ref="formRef" @submit.prevent>
     <v-card flat>
 
-      <v-card-subtitle v-if="getItemId(valueModel)">ID: {{ getItemId(valueModel) }}</v-card-subtitle>
+      <v-card-subtitle v-if="getItemId(form)">ID: {{ getItemId(form) }}</v-card-subtitle>
 
       <v-card-text v-if="error">
         <v-alert color="error">{{ te(error) ? t(error) : error }}</v-alert>
       </v-card-text>
 
       <v-card-text>
+
+        <!--GENERAL-->
         <v-row>
           <v-col
-              v-for="field in aFields"
+              v-for="field in generalFields"
               :key="field.name"
               :cols="field.cols ? field.cols : 12"
-              :sm="field.sm ? field.sm : 12"
-              :md="field.md ? field.md : 12"
-              :lg="field.lg ? field.lg : 12"
-              :xl="field.xl ? field.xl : 12"
+              :sm="field.sm ? field.sm : undefined"
+              :md="field.md ? field.md : undefined"
+              :lg="field.lg ? field.lg : undefined"
+              :xl="field.xl ? field.xl : undefined"
           >
             <slot :name="`field.${field.name}`" v-bind="{field}">
               <crud-form-field
                   :field="field"
                   :entity="entity"
-                  v-model="valueModel[field.name]"
+                  v-model="form[field.name]"
                   :clearable="false"
-                  :readonly="readonly || field.readonly"
+                  :readonly="['delete','view'].includes(operation) || field.readonly"
                   :variant="variant"
                   :prepend-inner-icon="field?.prependInnerIcon"
                   :prepend-icon="field?.prependIcon"
@@ -126,6 +145,100 @@ const {
 
           </v-col>
         </v-row>
+
+        <!--TAB-->
+        <v-card class="mt-4" variant="outlined" v-if="entity.tabs && entity.tabs.length > 0">
+
+            <v-tabs v-model="tabSelected">
+              <v-tab v-for="tab in entity.tabs" :value="tab" :key="tab">
+                {{ te(tab) ? t(tab) : tab }}
+              </v-tab>
+            </v-tabs>
+          <v-card-text>
+            <v-tabs-window v-model="tabSelected">
+              <v-tabs-window-item v-for="tab in entity.tabs" :value="tab">
+                <v-row>
+                  <v-col
+                      v-for="field in tabFields(tab)"
+                      :key="field.name"
+                      :cols="field.cols ? field.cols : 12"
+                      :sm="field.sm ? field.sm : undefined"
+                      :md="field.md ? field.md : undefined"
+                      :lg="field.lg ? field.lg : undefined"
+                      :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"
+                          :variant="variant"
+                          :prepend-inner-icon="field?.prependInnerIcon"
+                          :prepend-icon="field?.prependIcon"
+                          :append-icon="field?.appendIcon"
+                          :append-inner-icon="field?.appendInnerIcon"
+                      />
+                    </slot>
+
+                  </v-col>
+                </v-row>
+              </v-tabs-window-item>
+            </v-tabs-window>
+          </v-card-text>
+        </v-card>
+
+        <!--MENU-->
+        <v-row v-if="entity.menus && entity.menus.length > 0">
+          <v-col cols="12" sm="4" md="3">
+            <v-card variant="outlined">
+              <v-card-text :style="{ maxHeight: menuMaxHeight, overflowY: 'auto' }">
+                <v-list v-model="menuSelected">
+                  <v-list-item v-for="menu in entity.menus" rounded="shaped" :value="menu" @click="menuSelected = menu">
+                    <v-list-item-title>
+                      {{ te(menu) ? t(menu) : menu }}
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-card-text>
+            </v-card>
+          </v-col>
+          <v-col cols="12" sm="8" md="9">
+            <v-card variant="outlined">
+              <v-card-text>
+                <v-row>
+                  <v-col
+                      v-for="field in menuFields(menuSelected)"
+                      :key="field.name"
+                      :cols="field.cols ? field.cols : 12"
+                      :sm="field.sm ? field.sm : undefined"
+                      :md="field.md ? field.md : undefined"
+                      :lg="field.lg ? field.lg : undefined"
+                      :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"
+                          :variant="variant"
+                          :prepend-inner-icon="field?.prependInnerIcon"
+                          :prepend-icon="field?.prependIcon"
+                          :append-icon="field?.appendIcon"
+                          :append-inner-icon="field?.appendInnerIcon"
+                      />
+                    </slot>
+
+                  </v-col>
+                </v-row>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+
       </v-card-text>
 
       <v-card-actions>

package/src/composables/UseCrud.ts

@@ -224,20 +224,20 @@ export function useCrud(entity: IEntityCrud) {
 
 
     function onCreate() {
-        store.setOperation("create")
         store.setForm(entity.form)
+        store.setOperation("create")
         openDialog()
     }
 
     function onEdit(item: object) {
-        store.setOperation("edit")
         store.setForm(cast({...item}))
+        store.setOperation("edit")
         openDialog()
     }
 
     function onDelete(item: object) {
-        store.setOperation("delete")
         store.setForm(cast({...item}))
+        store.setOperation("delete")
         openDialog()
     }