@drax/crud-vue 0.31.0 → 0.34.0

package/package.json

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

package/src/EntityCrud.ts

@@ -1,256 +1,296 @@
 import type {
-    IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
-    IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
-    IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFormFilter
+  IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
+  IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
+  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFormFilter, IEntityCrudFieldVariant
 } from "@drax/crud-share";
 
 
 class EntityCrud implements IEntityCrud {
 
-    name: string = ''
-
-    constructor() {
-    }
-
-    static get instance(): IEntityCrud {
-        throw new Error('EntityCrud instance not found')
-    }
-
-
-    get headers(): IEntityCrudHeader[] {
-        return [
-            {title: 'ID', key: '_id'},
-        ]
-    }
+  name: string = ''
+
+  constructor() {
+  }
+
+  static get instance(): IEntityCrud {
+    throw new Error('EntityCrud instance not found')
+  }
+
+
+  get headers(): IEntityCrudHeader[] {
+    return [
+      {title: 'ID', key: '_id'},
+    ]
+  }
+
+  get actionHeaders(): IEntityCrudHeader[] {
+    return [
+      {
+        title: 'action.actions',
+        key: 'actions',
+        sortable: false,
+        align: 'center',
+        minWidth: '190px',
+        fixed: 'end'
+      },
+    ]
+  }
+
+
+  get permissions(): IEntityCrudPermissions {
+    return {
+      manage: 'manage', view: 'view', create: 'create', update: 'update', delete: 'delete'
+    }
+  }
+
+  get provider(): IDraxCrudProvider<any, any, any> {
+    throw new Error('provider not implemented')
+  }
+
+  get fields(): IEntityCrudField[] {
+    return [
+      {name: '_id', type: 'string', label: 'ID', default: ''},
+    ]
+  }
+
+  get createFields() {
+    return this.fields
+  }
+
+  get updateFields() {
+    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'},
+    ]
+  }
+
+  objectFields(field: IEntityCrudField) {
+    let value: any = {}
+    if (field.objectFields) {
+      field.objectFields.forEach(subField => {
+
+        if (subField.default != undefined) {
+          value[subField.name] = field.default
+        } else if (subField.type === 'object') {
+          value[subField.name] = this.objectFields(field)
+        } else if (/array/.test(field.type)) {
+          value[subField.name] = []
+        } else {
+          value = null
+        }
 
-    get actionHeaders(): IEntityCrudHeader[] {
-        return [
-            {
-                title: 'action.actions',
-                key: 'actions',
-                sortable: false,
-                align: 'center',
-                minWidth: '190px',
-                fixed:  'end'
-            },
-        ]
+      })
     }
+    return value
+  }
 
+  get form(): IEntityCrudForm {
 
-    get permissions(): IEntityCrudPermissions {
-        return {
-            manage: 'manage', view: 'view', create: 'create', update: 'update', delete: 'delete'
-        }
-    }
+    return this.fields.reduce((acc, field) => {
+      let value = null
+      if (field.default != undefined) {
+        value = field.default
+      } else if (field.type === 'object') {
+        value = this.objectFields(field)
+      } else if (/array/.test(field.type)) {
+        value = []
+      } else {
+        value = null
+      }
 
-    get provider(): IDraxCrudProvider<any, any, any> {
-        throw new Error('provider not implemented')
-    }
+      return {...acc, [field.name]: value}
+    }, {})
 
-    get fields(): IEntityCrudField[] {
-        return [
-            {name: '_id', type: 'string', label: 'ID', default: ''},
-        ]
-    }
+  }
 
-    get createFields() {
-        return this.fields
-    }
 
-    get updateFields() {
-        return this.fields
-    }
+  get formFilters(): IEntityCrudFormFilter[] {
+    return this.filters.map(
+      (filter: IEntityCrudFilter) =>
+        ({field: filter.name, value: null, operator: (filter.operator ? filter.operator : 'eq')})
+    ) as IEntityCrudFormFilter[]
+  }
 
-    get deleteFields() {
-        return this.fields
-    }
+  get refs(): IEntityCrudRefs {
+    return {}
+  }
 
-    get viewFields() {
-        return this.fields
+  getRef(ref: string): IEntityCrud {
+    if (!this.refs.hasOwnProperty(ref)) {
+      throw new Error("Ref not found: " + ref)
     }
 
-    get filters(): IEntityCrudFilter[] {
-        return [
-            {name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq'},
-        ]
-    }
+    return this.refs[ref]
+  }
 
-    objectFields(field: IEntityCrudField) {
-        let value: any = {}
-        if (field.objectFields) {
-            field.objectFields.forEach(subField => {
-
-                if (subField.default != undefined) {
-                    value[subField.name] = field.default
-                } else if (subField.type === 'object') {
-                    value[subField.name] = this.objectFields(field)
-                } else if (/array/.test(field.type)) {
-                    value[subField.name] = []
-                } else {
-                    value = null
-                }
-
-            })
-        }
-        return value
-    }
+  get rules(): IEntityCrudRules {
+    return {}
+  }
 
-    get form(): IEntityCrudForm {
+  getRule(field: string | undefined): Array<Function> | undefined {
+    return field && this.rules[field] && this.rules[field].length > 0 ? this.rules[field] : undefined
+  }
 
-        return this.fields.reduce((acc, field) => {
-            let value = null
-            if (field.default != undefined) {
-                value = field.default
-            } else if (field.type === 'object') {
-                value = this.objectFields(field)
-            } else if (/array/.test(field.type)) {
-                value = []
-            } else {
-                value = null
-            }
+  get isViewable() {
+    return true
+  }
 
-            return {...acc, [field.name]: value}
-        }, {})
+  get isEditable() {
+    return true
+  }
 
-    }
+  isItemEditable():boolean {
+    return true
+  }
 
+  get isCreatable() {
+    return true
+  }
 
-    get formFilters(): IEntityCrudFormFilter[] {
-        return this.filters.map(
-            (filter: IEntityCrudFilter) =>
-                ({field: filter.name, value: null, operator: (filter.operator ? filter.operator : 'eq' )})
-        ) as IEntityCrudFormFilter[]
-    }
+  isItemDeletable():boolean{
+    return true
+  }
 
-    get refs(): IEntityCrudRefs {
-        return {}
-    }
+  get isDeletable() {
+    return true
+  }
 
-    getRef(ref: string): IEntityCrud {
-        if (!this.refs.hasOwnProperty(ref)) {
-            throw new Error("Ref not found: " + ref)
-        }
+  get isExportable() {
+    return true
+  }
 
-        return this.refs[ref]
-    }
+  get exportFormats() {
+    return ['CSV', 'JSON']
+  }
 
-    get rules(): IEntityCrudRules {
-        return {}
-    }
+  get exportHeaders() {
+    return ['_id']
+  }
 
-    getRule(field: string | undefined): Array<Function> | undefined {
-        return field && this.rules[field] && this.rules[field].length > 0 ? this.rules[field] : undefined
-    }
+  get exportFileName() {
+    return 'export'
+  }
 
-    get isViewable() {
-        return true
-    }
+  get isImportable() {
+    return true
+  }
 
-    get isEditable() {
-        return true
-    }
+  get importFormats() {
+    return ['CSV', 'JSON']
+  }
 
-    get isCreatable() {
-        return true
-    }
+  get dialogFullscreen() {
+    return false
+  }
 
-    get isDeletable() {
-        return true
-    }
+  get dialogMaxWidth() {
+    return ''
+  }
 
-    get isExportable() {
-        return true
-    }
 
-    get exportFormats() {
-        return ['CSV', 'JSON']
-    }
+  get tabs(): string[] {
+    return []
+  }
 
-    get exportHeaders() {
-        return ['_id']
-    }
 
-    get exportFileName(){
-        return 'export'
-    }
+  get menus(): string[] {
+    return []
+  }
 
-    get isImportable() {
-        return true
-    }
+  get menuMaxHeight() {
+    return '300px'
+  }
 
-    get importFormats() {
-        return ['CSV', 'JSON']
-    }
+  get dialogZindex() {
+    return 1999
+  }
 
-    get dialogFullscreen() {
-        return false
-    }
+  get searchEnable() {
+    return true
+  }
 
-    get dialogMaxWidth() {
-        return ''
-    }
+  get filterButtons() {
+    return true
+  }
 
+  get containerFluid() {
+    return false
+  }
 
-    get tabs():string[]{
-        return []
-    }
+  get cardDensity(): 'default' | 'comfortable' | 'compact' {
+    return 'default'
+  }
 
+  get cardClass(): string {
+    return 'rounded-xl'
+  }
 
-    get menus():string[]{
-        return []
-    }
+  get toolbarDensity(): 'default' | 'comfortable' | 'compact' {
+    return 'default'
+  }
 
-    get menuMaxHeight(){
-        return '300px'
-    }
+  get toolbarClass(): string {
+    return 'bg-primary'
+  }
 
-    get dialogZindex() {
-        return 1999
-    }
+  get tableDensity(): 'default' | 'comfortable' | 'compact' {
+    return 'default'
+  }
 
-    get searchEnable(){
-        return true
-    }
+  get headerProps() {
+    return {class: 'bg-primary'}
+  }
 
-    get filterButtons(){
-        return true
-    }
+  get tableStriped(): null | 'odd' | 'even' {
+    return 'even'
+  }
 
-    get containerFluid(){
-        return false
-    }
+  get footerClass() {
+    return 'bg-primary'
+  }
 
-    get cardDensity() : 'default' | 'comfortable' | 'compact' {
-        return 'default'
-    }
+  get applyFilterClass() {
+    return 'bg-primary'
+  }
 
-    get cardClass() : string {
-        return 'rounded-xl'
-    }
+  get cleanFilterClass() {
+    return 'text-grey'
+  }
 
-    get toolbarDensity() : 'default' | 'comfortable' | 'compact' {
-        return 'default'
-    }
+  get submitBtnFormClass() {
+    return 'bg-primary'
+  }
 
-    get toolbarClass() : string {
-        return 'bg-primary'
-    }
+  get cancelBtnFormClass() {
+    return 'text-grey'
+  }
 
-    get tableDensity() : 'default' | 'comfortable' | 'compact' {
-        return 'default'
-    }
+  get inputVariantCreate(): IEntityCrudFieldVariant {
+    return 'outlined'
+  }
 
-    get headerProps(){
-        return { class: 'bg-primary' }
-    }
+  get inputVariantEdit(): IEntityCrudFieldVariant {
+    return 'outlined'
+  }
 
-    get tableStriped() : null | 'odd' | 'even' {
-        return 'even'
-    }
+  get inputVariantView(): IEntityCrudFieldVariant {
+    return 'filled'
+  }
 
-    get footerClass(){
-        return 'bg-primary'
-    }
+  get inputVariantDelete() : IEntityCrudFieldVariant{
+    return 'underlined'
+  }
 
 
 }

package/src/components/CrudAutocomplete.vue

@@ -95,7 +95,39 @@ defineEmits(['updateValue'])
 </script>
 
 <template>
+
+  <v-select
+      v-if="field.noFilter === true"
+      v-model="valueModel"
+      :label="label ? label : field.label"
+      :hint="field.hint"
+      :persistent-hint="field.persistentHint"
+      :placeholder="field.label"
+      :items="items"
+      :multiple="multiple"
+      :chips="chips"
+      :closable-chips="closableChips"
+      :item-value="itemValue"
+      :item-title="itemTitle"
+      :loading="loading"
+      :rules="rules"
+      :readonly="readonly"
+      :density="density"
+      :variant="variant"
+      :hide-details="hideDetails"
+      :single-line="singleLine"
+      :clearable="clearable"
+      :error-messages="errorMessages"
+      @update:modelValue="$emit('updateValue')"
+      :prepend-icon="prependIcon"
+      :append-icon="appendIcon"
+      :prepend-inner-icon="prependInnerIcon"
+      :append-inner-icon="appendInnerIcon"
+  ></v-select>
+
+
   <v-autocomplete
+      v-else
       v-model="valueModel"
       :label="label ? label : field.label"
       :hint="field.hint"
@@ -123,6 +155,8 @@ defineEmits(['updateValue'])
       :prepend-inner-icon="prependInnerIcon"
       :append-inner-icon="appendInnerIcon"
   ></v-autocomplete>
+
+
 </template>
 
 <style scoped>

package/src/components/CrudFilters.vue

@@ -97,8 +97,8 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
 
     <v-card-actions v-if="actionButtons" class="pb-0">
       <v-spacer />
-      <v-btn variant="text" density="compact" color="grey" @click="clear">{{ t('action.clear') }}</v-btn>
-      <v-btn variant="flat" density="compact" color="primary" @click="filter">
+      <v-btn  variant="text" density="compact" :class="entity.cleanFilterClass" @click="clear">{{ t('action.clear') }}</v-btn>
+      <v-btn variant="flat" density="compact" :class="entity.applyFilterClass"  @click="filter">
         {{ t('action.filter') }}
       </v-btn>
     </v-card-actions>

package/src/components/CrudForm.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
 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, defineProps, ref} from "vue";
@@ -98,9 +97,19 @@ function cancel() {
   emit('canceled')
 }
 
-const {
-  variant, submitColor
-} = useFormUtils(operation.value)
+
+const variant = computed(() => {
+  if (operation.value === 'create') {
+    return entity.inputVariantCreate
+  } else if (operation.value === 'edit') {
+    return entity.inputVariantEdit
+  } else if (operation.value === 'delete') {
+    return entity.inputVariantDelete
+  } else if (operation.value === 'view') {
+    return entity.inputVariantView
+  }
+  return 'outlined'
+})
 
 const tabInputErrors = computed(() => {
       return (tab:string) => {
@@ -262,10 +271,10 @@ const menuInputErrors = computed(() => {
 
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn variant="text" color="grey" @click="cancel">
+        <v-btn variant="text" :class="entity.cancelBtnFormClass" @click="cancel">
           {{ operation == 'view' ? t('action.close') : t('action.cancel') }}
         </v-btn>
-        <v-btn variant="flat" v-if="operation != 'view'" :color="submitColor" @click="submit" :loading="store.loading">
+        <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-card-actions>

package/src/components/CrudFormField.vue

@@ -8,9 +8,12 @@ import {useCrudStore} from "../stores/UseCrudStore";
 import {VDateInput} from 'vuetify/labs/VDateInput'
 import type {IEntityCrud, IEntityCrudField, IEntityCrudFilter} from "@drax/crud-share";
 import {MediaField, MediaFullField} from "@drax/media-vue";
+import {useAuth} from "@drax/identity-vue";
 
 const {t, te} = useI18n()
 
+const {hasPermission} = useAuth()
+
 const store = useCrudStore()
 
 const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Array], default: false})
@@ -69,7 +72,7 @@ defineEmits(['updateValue'])
 
 <template>
 
-  <div v-if="field && field.type">
+  <div v-if="field && field.type && (!field.permission || hasPermission(field.permission) )">
     <v-text-field
         v-if="field.type === 'string'"
         type="text"
@@ -163,6 +166,7 @@ defineEmits(['updateValue'])
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+
     >
     </v-combobox>
 

package/src/components/CrudList.vue

@@ -165,9 +165,10 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
       />
 
       <crud-update-button
-          v-if="entity.isEditable && hasPermission(entity.permissions.update)"
+          v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions.update)"
           @click="$emit('edit', item)"
       />
+
       <crud-delete-button
           v-if="entity.isDeletable && hasPermission(entity.permissions.delete)"
           @click="$emit('delete', item)"

package/src/composables/UseCrud.ts

@@ -2,11 +2,14 @@ import type {IDraxPaginateResult, IEntityCrud} from "@drax/crud-share";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {computed, nextTick, toRaw} from "vue";
 import getItemId from "../helpers/getItemId";
+import { useI18n } from "vue-i18n";
 
 export function useCrud(entity: IEntityCrud) {
 
     const store = useCrudStore()
 
+    const { t: $t } = useI18n()
+
     const exportError = computed({
         get() {
             return store.exportError
@@ -174,11 +177,13 @@ export function useCrud(entity: IEntityCrud) {
             }
 
             const headers: string = entity.exportHeaders.join(',')
+            const headersTranslate: string | undefined = entity.exportHeadersTranslate?.map(t => $t(t)).join(',')
             const fileName: string = entity.exportFileName
 
             const r: any = await entity?.provider.export({
                 format: format,
                 headers: headers,
+                headersTranslate: headersTranslate,
                 separator: ";",
                 fileName: fileName,
                 orderBy: store.sortBy[0]?.key,