@drax/crud-vue 0.15.6 → 0.15.7

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.15.6",
+  "version": "0.15.7",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@drax/common-front": "^0.15.0",
     "@drax/crud-front": "^0.15.0",
-    "@drax/crud-share": "^0.15.6",
+    "@drax/crud-share": "^0.15.7",
     "@drax/media-vue": "^0.15.0"
   },
   "peerDependencies": {
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.8.2"
   },
-  "gitHead": "7a0fdbbb24b1d66f06786eeb6725a80fd28dac92"
+  "gitHead": "a028ac1c1aa875880e6b7de4f9fbacdc9f0e54ea"
 }

package/src/components/CrudForm.vue

@@ -27,7 +27,7 @@ const store = useCrudStore()
 const formRef = ref()
 
 const tabSelected = ref()
-const menuSelected = ref(entity?.menus?.length ? entity?.menus[0] : null)
+const menuSelected = ref<string>()
 
 const fields = computed(() => {
   if (operation.value === 'create') {
@@ -48,15 +48,15 @@ const aFields = computed(() => {
 })
 
 const generalFields = computed(() => {
-  return aFields.value.filter((field: IEntityCrudField) => !field.tab && !field.menu)
+  return aFields.value.filter((field: IEntityCrudField) => !field.groupTab && !field.groupMenu)
 })
 
 const tabFields = computed(() => {
-  return (tab: string): IEntityCrudField[] => aFields.value.filter((field: IEntityCrudField) => field.tab === tab)
+  return (tab: string): IEntityCrudField[] => aFields.value.filter((field: IEntityCrudField) => field.groupTab === tab)
 })
 
 const menuFields = computed(() => {
-  return (menu: string | null): IEntityCrudField[] => aFields.value.filter((field: IEntityCrudField) => field.menu === menu)
+  return (menu: string | null): IEntityCrudField[] => aFields.value.filter((field: IEntityCrudField) => field.groupMenu === menu)
 })
 
 const menuMaxHeight = computed(() => {
@@ -102,6 +102,20 @@ const {
   variant, submitColor
 } = useFormUtils(operation.value)
 
+const tabInputErrors = computed(() => {
+      return (tab:string) => {
+        return tabFields.value(tab).some((field: IEntityCrudField) => store.getFieldInputErrors(field.name).length > 0)
+      }
+    }
+)
+
+const menuInputErrors = computed(() => {
+      return (tab:string) => {
+        return menuFields.value(tab).some((field: IEntityCrudField) => store.getFieldInputErrors(field.name).length > 0)
+      }
+    }
+)
+
 
 </script>
 
@@ -151,7 +165,9 @@ const {
 
             <v-tabs v-model="tabSelected">
               <v-tab v-for="tab in entity.tabs" :value="tab" :key="tab">
+                <span  :class="tabInputErrors(tab) ? 'text-red' : ''">
                 {{ te(tab) ? t(tab) : tab }}
+                </span>
               </v-tab>
             </v-tabs>
           <v-card-text>
@@ -197,7 +213,10 @@ const {
                 <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 }}
+                    <span :class="menuInputErrors(menu) ? 'text-red' : ''">
+                        {{ te(menu) ? t(menu) : menu }}
+                      </span>
+
                     </v-list-item-title>
                   </v-list-item>
                 </v-list>
@@ -205,7 +224,7 @@ const {
             </v-card>
           </v-col>
           <v-col cols="12" sm="8" md="9">
-            <v-card variant="outlined">
+            <v-card v-if="menuSelected" variant="outlined">
               <v-card-text>
                 <v-row>
                   <v-col

package/src/components/CrudFormList.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import {computed, type PropType} from "vue";
+import {computed, type PropType, ref} from "vue";
 import CrudFormField from "./CrudFormField.vue";
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
 import {useCrudStore} from "../stores/UseCrudStore";
+import {useDisplay} from "vuetify"
 
 const store = useCrudStore()
 const {t, te} = useI18n()
@@ -59,15 +60,30 @@ const hasError = computed(() => {
 
 })
 
+const itemSelected = ref()
+const indexSelected = ref()
+
+function menuSelect(item: any, index: number) {
+  itemSelected.value = item
+  indexSelected.value = index
+}
+
+const menuMaxHeight = computed(() => {
+  return field.menuMaxHeight || '300px'
+})
+
 defineEmits(['updateValue'])
 
+const {xs} = useDisplay()
+
 </script>
 
 <template>
   <v-card class="mt-3" variant="flat" border>
 
     <v-card-title class="text-h5">{{ label }}</v-card-title>
-    <v-card-text>
+
+    <v-card-text v-if="field.arrayObjectUI === 'accordion' || xs">
       <v-expansion-panels>
         <v-expansion-panel v-for="(item,index) in valueModel" :key="index">
 
@@ -115,6 +131,62 @@ defineEmits(['updateValue'])
       </v-expansion-panels>
     </v-card-text>
 
+    <v-card-text v-else>
+      <v-row>
+        <v-col cols="12" sm="4" md="3">
+          <v-card variant="outlined">
+            <v-card-text >
+              <v-list v-model="itemSelected" :style="{ maxHeight: menuMaxHeight, overflowY: 'auto' }">
+                <v-list-item v-for="(item,index) in valueModel" :key="index" rounded="shaped"
+                             :value="item" @click="menuSelect(item, index)"
+                >
+                  <template v-slot:append>
+                    <v-btn size="x-small" variant="text" color="red" icon="mdi-delete"
+                           @click="removeItem(index)"
+
+                    />
+                  </template>
+                  <v-list-item-title>
+                    <v-chip class="mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip>
+                    {{//@ts-ignore
+                  valueModel[index][Object.keys(valueModel[index] as any)[0]]
+                    }}
+                  </v-list-item-title>
+                </v-list-item>
+
+              </v-list>
+
+              <v-btn variant="text" @click="addItem" class="text-blue text--darken-3 float-right my-2">
+                <v-icon>mdi-plus</v-icon>
+              </v-btn>
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col cols="12" sm="8" md="9">
+          <v-card v-if="itemSelected" variant="outlined">
+            <v-card-text >
+              <template v-for="key in Object.keys(itemSelected as Record<string, any>)" :key="key">
+                <crud-form-field
+                    v-if="hasField(key)"
+                    :entity="entity"
+                    :field="getField(key)"
+                    v-model="(itemSelected as any)[key]"
+                    :readonly="readonly"
+                    :parentField="field.name"
+                    :index="indexSelected"
+                    :density="density"
+                    :variant="variant"
+                    :clearable="clearable"
+                    :hide-details="hideDetails"
+                    :single-line="singleLine"
+                    @updateValue="$emit('updateValue')"
+                />
+              </template>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card-text>
 
   </v-card>