@drax/crud-vue 0.5.21 → 0.6.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.21",
+  "version": "0.6.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.5.11",
-    "@drax/crud-front": "^0.5.20",
-    "@drax/crud-share": "^0.5.17"
+    "@drax/common-front": "^0.6.0",
+    "@drax/crud-front": "^0.6.0",
+    "@drax/crud-share": "^0.6.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -63,5 +63,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "186c0acf3ffab30708571e26b90a0057f6138989"
+  "gitHead": "66fb4189c54d3c3f12efa89ad1476ecb96b63d38"
 }

package/src/EntityCrud.ts

@@ -24,6 +24,19 @@ class EntityCrud implements IEntityCrud{
     ]
   }
 
+  get actionHeaders():IEntityCrudHeader[]{
+    return [
+      {
+        title: 'action.actions',
+        key: 'actions',
+        sortable: false,
+        align: 'center',
+        minWidth: '190px'
+      },
+    ]
+  }
+
+
   get permissions(): IEntityCrudPermissions {
     return {
       manage: 'manage', view: 'view', create: 'create',  update: 'update', delete: 'delete'
@@ -48,6 +61,14 @@ class EntityCrud implements IEntityCrud{
     return this.fields
   }
 
+  get deleteFields(){
+    return this.fields
+  }
+
+  get viewFields(){
+    return this.fields
+  }
+
   get filters():IEntityCrudFilter[]{
     return [
       {name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq' },

package/src/components/CrudForm.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
-import type {IEntityCrud, IEntityCrudOperation} from "@drax/crud-share";
+import type {IEntityCrud, IEntityCrudField, IEntityCrudOperation} from "@drax/crud-share";
 import {useFormUtils} from "../composables/UseFormUtils";
 import CrudFormField from "./CrudFormField.vue";
 import {computed, defineEmits, defineModel, defineProps, ref} from "vue";
 import type { PropType} from "vue";
 import {useCrudStore} from "../stores/UseCrudStore";
+import {useAuth} from '@drax/identity-vue'
 
-
+const {hasPermission} = useAuth()
 const {t, te} = useI18n()
 
 const valueModel = defineModel({type: [Object]})
@@ -32,14 +33,26 @@ const fields = computed(() => {
   }else if(operation === 'edit') {
     return entity.updateFields
   }else if(operation === 'delete') {
-    return entity.updateFields
+    return entity.deleteFields
   }else if(operation === 'view') {
-    return entity.updateFields
+    return entity.viewFields
   }
+  return []
+})
+
+
+const aFields = computed(() => {
+  return fields.value.filter((field:IEntityCrudField) => !field.permission || hasPermission(field.permission))
 })
 
 async function submit() {
   store.resetErrors()
+
+  if(operation === 'delete') {
+    emit('submit',valueModel.value)
+    return
+  }
+
   await formRef.value.validate()
   if(valid.value) {
     emit('submit',valueModel.value)
@@ -70,7 +83,7 @@ const  {
       </v-card-text>
 
       <v-card-text>
-        <template v-for="field in fields" :key="field.name">
+        <template v-for="field in aFields" :key="field.name">
           <crud-form-field
               :field="field"
               :entity="entity"

package/src/components/CrudFormField.vue

@@ -57,7 +57,7 @@ const rules = computed(() => {
 const inputErrors = computed(() => {
       let sIndex = (index != null && index >= 0) ? `${index}.` : ''
       let name = parentField ? `${parentField}.${sIndex}${field.name}` : field.name
-      console.log("inputErrors name",name, index, sIndex)
+      //console.log("inputErrors name",name, index, sIndex)
       return store.getInputErrors(name).map((error: string) => t(te(error) ? t(error) : error))
     }
 )

package/src/components/CrudList.vue

@@ -28,18 +28,18 @@ const {
   doPaginate, filters
 } = useCrud(entity)
 
-const actions: IEntityCrudHeader[] = [{
-  title: t('action.actions'),
-  key: 'actions',
-  sortable: false,
-  align: 'center',
-  minWidth: '190px'
-}]
-const tHeaders: IEntityCrudHeader[] = entity.headers.map(header => ({
+const actions: IEntityCrudHeader[] = entity.actionHeaders.map(header => ({
   ...header,
-  title: te(`${entity.name.toLowerCase()}.field.${header.title}`) ? t(`${entity.name.toLowerCase()}.field.${header.title}`) : header.title
+  title: te(header.title) ? t(header.title) : header.title,
 }))
 
+const tHeaders: IEntityCrudHeader[] = entity.headers
+    .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}`) : header.title
+    }))
+
 const headers: IEntityCrudHeader[] = [...tHeaders, ...actions]
 
 
@@ -70,7 +70,9 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
   >
     <template v-slot:top>
       <v-toolbar density="compact">
-        <v-toolbar-title>{{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}</v-toolbar-title>
+        <v-toolbar-title>
+          {{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}
+        </v-toolbar-title>
         <v-spacer></v-spacer>
 
         <crud-import-button

package/src/composables/UseCrud.ts

@@ -291,7 +291,7 @@ export function useCrud(entity: IEntityCrud) {
             closeDialog()
             store.showMessage("Entity updated successfully!")
         } catch (e: any) {
-            console.log("inputErrors", e.inputErrors)
+            //console.log("inputErrors", e.inputErrors)
             if (e.inputErrors) {
                 store.setInputErrors(e.inputErrors)
             }