@drax/crud-vue 0.5.2 → 0.5.4

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.2",
+  "version": "0.5.4",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.5.1",
-    "@drax/crud-front": "^0.5.1",
-    "@drax/crud-share": "^0.5.2"
+    "@drax/common-front": "^0.5.4",
+    "@drax/crud-front": "^0.5.3",
+    "@drax/crud-share": "^0.5.4"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -63,5 +63,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "6f854dbeb2af7bca32ed35bcec2f8e48790a73b9"
+  "gitHead": "6db0bebb2df9edecd2c3caa7288fb5c7001c4243"
 }

package/src/EntityCrud.ts

@@ -1,7 +1,7 @@
 import type {
   IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
   IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
-  IDraxCrudProvider
+  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFormFilter
 } from "@drax/crud-share";
 
 
@@ -36,7 +36,21 @@ class EntityCrud implements IEntityCrud{
 
   get fields():IEntityCrudField[]{
     return [
-      {name: 'id', type: 'string', label: 'ID', default: '' },
+      {name: '_id', type: 'string', label: 'ID', default: '' },
+    ]
+  }
+
+  get createFields(){
+    return this.fields
+  }
+
+  get updateFields(){
+    return this.fields
+  }
+
+  get filters():IEntityCrudFilter[]{
+    return [
+      {name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq' },
     ]
   }
 
@@ -57,7 +71,7 @@ class EntityCrud implements IEntityCrud{
 
   get form():IEntityCrudForm{
 
-    const form = this.fields.reduce((acc, field) => {
+    return this.fields.reduce((acc, field) => {
       let value = null
       if(field.type === 'object'){
         value = this.objectFields(field)
@@ -68,10 +82,14 @@ class EntityCrud implements IEntityCrud{
       return {...acc, [field.name]: value }
     }, {})
 
-    //console.log("Form: ", form)
+  }
 
-    return form
 
+  get formFilters():IEntityCrudFormFilter[]{
+    return this.filters.map(
+        (filter:IEntityCrudFilter) =>
+            ({field:filter.name, value: null, operator: filter.operator  })
+    )
   }
 
   get refs():IEntityCrudRefs{
@@ -91,10 +109,13 @@ class EntityCrud implements IEntityCrud{
   }
 
   getRule(field:string|undefined):Array<Function>|undefined  {
-      console.log("Getting rule for field: ", field, this.rules)
       return field && this.rules[field] && this.rules[field].length > 0 ? this.rules[field] : undefined
   }
 
+  get isViewable(){
+    return true
+  }
+
   get isEditable(){
     return true
   }

package/src/components/Crud.vue

@@ -12,12 +12,14 @@ const {entity} = defineProps({
 })
 
 const {
-  onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
-  operation, dialog, form, notify, error, message, doExport
+  onView, onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
+  operation, dialog, form, notify, error, message, doExport,
+  prepareFilters
 } = useCrud(entity);
 
 onBeforeMount(() => {
   resetCrudStore()
+  prepareFilters()
 })
 
 </script>
@@ -32,6 +34,7 @@ onBeforeMount(() => {
           @edit="onEdit"
           @delete="onDelete"
           @export="doExport"
+          @view="onView"
       >
         <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
           <slot :name="`item.${header.key}`" v-bind="{item, value}">

package/src/components/CrudAutocomplete.vue

@@ -9,15 +9,24 @@ const valueModel = defineModel<string | string[]>({type: [String, Array], requir
 const {entity, multiple} = defineProps({
   entity: {type: Object as PropType<IEntityCrud|undefined>, required: true},
   field: {type: Object as PropType<IEntityCrudField>, required: true},
+  prependIcon: {type: String},
+  prependInnerIcon: {type: String},
+  appendIcon: {type: String},
+  appendInnerIcon: {type: String},
   multiple: {type: Boolean, default: false},
   chips: {type: Boolean, default: false},
   closableChips: {type: Boolean, default: true},
+  readonly: {type: Boolean, default: false},
   clearable: {type: Boolean, default: true},
   label: {type: String},
   itemValue: {type: [String], default: '_id'},
   itemTitle: {type: [String], default: 'name'},
   rules: {type: Array as PropType<any>, default: []},
   errorMessages: {type: Array as PropType<string[]>, default: []},
+  hideDetails: {type: Boolean, default: false},
+  singleLine: {type: Boolean, default: false},
+  density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
+  variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
 })
 
 if(!entity){
@@ -29,63 +38,61 @@ const items: Ref<Array<any>> = ref([])
 
 const debouncedSearch = debounce(search, 300)
 
-onBeforeMount(async () => {
-  if(valueModel.value && valueModel.value.length > 0){
-
-    if(multiple && Array.isArray(valueModel.value) ){
-      items.value = valueModel.value
-
-      // valueModel.value = valueModel.value.map((item:any) => item._id)
-      await findByIds(valueModel.value)
-    }else if(!Array.isArray(valueModel.value)){
-      // items.value = [valueModel.value]
-      await findByIds([valueModel.value])
-    }
-
-
-
-  }
-})
-
-async function findByIds(ids: Array<string> = []) {
+async function search(value: any) {
   try{
+    loading.value = true
     if(!entity){
       throw new Error('Entity is required')
     }
-    if(!entity.provider){
-      throw new Error('Provider is not defined')
-    }
-    if (typeof entity.provider.findByIds !== 'function') {
-      throw new Error('Provider does not have a findByIds method');
+    if(!entity.provider.search){
+      throw new Error('Provider does not have a search method')
     }
-    loading.value = true
-    items.value = await entity.provider.findByIds(ids)
+    items.value = await entity.provider.search(value)
   }catch (e){
     console.error(e)
   }finally{
     loading.value = false
   }
+
 }
 
+onBeforeMount(async () => {
 
-async function search(value: any) {
+  await search('')
+  await checkIds()
+})
+
+async function checkIds(ids: Array<string> = []) {
   try{
-    loading.value = true
-    if(!entity){
-      throw new Error('Entity is required')
-    }
-    if(!entity.provider.search){
-      throw new Error('Provider does not have a search method')
+
+    if(valueModel.value) {
+      let ids = Array.isArray(valueModel.value) ? valueModel.value : [valueModel.value]
+      for (let id of ids) {
+        if (!items.value.some((item: any) => item._id === id)) {
+          if (!entity) {
+            throw new Error('CrudAutocomplete Entity is required')
+          }
+          if (!entity.provider) {
+            throw new Error('CrudAutocomplete Provider is not defined')
+          }
+          if (typeof entity.provider.findById !== 'function') {
+            throw new Error('CrudAutocomplete Provider does not have a findById method');
+          }
+          let item = await entity.provider.findById(id)
+          items.value.push(item)
+        }
+      }
     }
-    items.value = await entity.provider.search(value)
   }catch (e){
     console.error(e)
-  }finally{
-    loading.value = false
   }
-
 }
 
+
+
+
+defineEmits(['updateValue'])
+
 </script>
 
 <template>
@@ -97,13 +104,23 @@ async function search(value: any) {
       :multiple="multiple"
       :chips="chips"
       :closable-chips="closableChips"
-      :clearable="clearable"
       :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:search="debouncedSearch"
+      @update:modelValue="$emit('updateValue')"
+      :prepend-icon="prependIcon"
+      :append-icon="appendIcon"
+      :prepend-inner-icon="prependInnerIcon"
+      :append-inner-icon="appendInnerIcon"
   ></v-autocomplete>
 </template>
 

package/src/components/CrudDialog.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type {TOperation} from "../interfaces/TOperation";
 import type {PropType} from "vue";
-import type {IEntityCrud} from "@drax/crud-share";
+import type {IEntityCrud, IEntityCrudOperation} from "@drax/crud-share";
 const dialog = defineModel({type: Boolean, default: false})
 import {useI18n} from "vue-i18n";
 const {t,te} = useI18n()
 
 defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  operation: {type: String as PropType<TOperation>}
+  operation: {type: String as PropType<IEntityCrudOperation>}
 })
 
 defineEmits(

package/src/components/CrudFilters.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import {ref} from "vue";
+import CrudFormField from "./CrudFormField.vue";
+import type {IEntityCrud} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+const valueModel = defineModel({type: [Object]})
+
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+  actions: {type: Boolean, default: false},
+})
+
+const formRef = ref()
+
+async function filter() {
+  emit('filter')
+}
+
+async function clear() {
+  emit('filter')
+}
+
+
+const emit = defineEmits(['filter', 'clear','updateValue'])
+
+</script>
+
+<template>
+  <v-card flat >
+        <v-row dense class="mt-1" justify="space-between">
+          <v-col v-for="(filter,index) in entity.filters" :key="filter.name"
+                 cols="12" sm="6" md="4"
+          >
+            <crud-form-field
+                :field="filter"
+                :entity="entity"
+                v-model="valueModel[index].value"
+                :clearable="true"
+                density="compact"
+                variant="outlined"
+                hide-details single-line disable-rules
+                @updateValue="$emit('updateValue')"
+            />
+          </v-col>
+
+        </v-row>
+
+    <v-card-actions v-if="actions" 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">
+        {{ t('action.filter') }}
+      </v-btn>
+    </v-card-actions>
+
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudForm.vue

@@ -1,26 +1,43 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
-import  {ref} from "vue";
-import CrudFormField from "./CrudFormField.vue";
-import type {TOperation} from "../interfaces/TOperation";
-import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
+import type {IEntityCrud, 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";
-const {t,te} = useI18n()
-const store = useCrudStore()
-const valueModel = defineModel({type: [Object]})
 
 
-const {entity} = defineProps({
+const {t, te} = useI18n()
+
+const valueModel = defineModel({type: [Object]})
+
+const {entity, operation} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  operation: {type: String as PropType<TOperation>, required: true},
+  operation: {type: String as PropType<IEntityCrudOperation>, required: true},
   readonly: {type: Boolean, default: false},
   error: {type: String, required: false},
 })
 
+const emit = defineEmits(['submit', 'cancel'])
+
+const store = useCrudStore()
+
 const valid = ref()
 const formRef = ref()
 
+const fields = computed(() => {
+  if(operation === 'create') {
+    return entity.createFields
+  }else if(operation === 'edit') {
+    return entity.updateFields
+  }else if(operation === 'delete') {
+    return entity.updateFields
+  }else if(operation === 'view') {
+    return entity.updateFields
+  }
+})
+
 async function submit() {
   store.resetErrors()
   await formRef.value.validate()
@@ -35,7 +52,10 @@ function cancel() {
   emit('cancel')
 }
 
-const emit = defineEmits(['submit', 'cancel'])
+const  {
+  variant, submitColor, readonly
+} = useFormUtils(operation)
+
 
 </script>
 
@@ -49,11 +69,18 @@ const emit = defineEmits(['submit', 'cancel'])
         <v-alert color="error">{{ te(error) ? t(error) : error }}</v-alert>
       </v-card-text>
       <v-card-text>
-        <template v-for="field in entity.fields" :key="field.name">
+        <template v-for="field in fields" :key="field.name">
           <crud-form-field
               :field="field"
               :entity="entity"
               v-model="valueModel[field.name]"
+              :clearable="false"
+              :readonly="readonly"
+              :variant="variant"
+              :prepend-inner-icon="field?.prependInnerIcon"
+              :prepend-icon="field?.prependIcon"
+              :append-icon="field?.appendIcon"
+              :append-inner-icon="field?.appendInnerIcon"
           />
         </template>
       </v-card-text>
@@ -61,7 +88,7 @@ const emit = defineEmits(['submit', 'cancel'])
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn variant="text" color="grey" @click="cancel">{{ t('action.cancel') }}</v-btn>
-        <v-btn variant="flat" color="primary" @click="submit">
+        <v-btn variant="flat" v-if="operation != 'view'" :color="submitColor" @click="submit">
           {{ operation ? t('action.' + operation) : t('action.sent') }}
         </v-btn>
       </v-card-actions>

package/src/components/CrudFormField.vue

@@ -6,20 +6,32 @@ import CrudAutocomplete from "./CrudAutocomplete.vue";
 import {useI18n} from "vue-i18n";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {VDateInput} from 'vuetify/labs/VDateInput'
-import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
+import type {IEntityCrud, IEntityCrudField, IEntityCrudFilter} from "@drax/crud-share";
 const {t, te} = useI18n()
 
 const store = useCrudStore()
 
 const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Array], default: false})
 
-const {index, entity, field} = defineProps({
+const {index, entity, field, disableRules} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  field: {type: Object as PropType<IEntityCrudField|undefined>, required: true},
+  field: {type: Object as PropType<IEntityCrudField|IEntityCrudFilter|undefined>, required: true},
+  prependIcon: {type: String, default: ''},
+  prependInnerIcon: {type: String, default: ''},
+  appendIcon: {type: String, default: ''},
+  appendInnerIcon: {type: String, default: ''},
   readonly: {type: Boolean, default: false},
+  hideDetails: {type: Boolean, default: false},
+  singleLine: {type: Boolean, default: false},
+  clearable: {type: Boolean, default: false},
+  disableRules: {type: Boolean, default: false},
   index: {type: Number, default: 0},
+  density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
+  variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
 })
 
+
+
 if(!field){
   throw new Error("CrudFormField must be provided with a field object")
 }
@@ -32,6 +44,7 @@ const label = computed(() => {
 })
 
 const rules = computed(() => {
+  if(disableRules) return undefined
   return entity.getRule(field.name) as any
 })
 
@@ -39,6 +52,8 @@ const inputErrors = computed(() =>
     store.getInputErrors(field.name).map((error: string) => t(te(error) ? t(error) : error))
 )
 
+defineEmits(['updateValue'])
+
 </script>
 
 <template>
@@ -53,8 +68,17 @@ const inputErrors = computed(() =>
         :readonly="readonly"
         :error-messages="inputErrors"
         :rules="rules"
-    >
-    </v-text-field>
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
+        @update:modelValue="$emit('updateValue')"
+    />
 
     <v-text-field
         v-if="field.type === 'number'"
@@ -65,10 +89,19 @@ const inputErrors = computed(() =>
         :readonly="readonly"
         :error-messages="inputErrors"
         :rules="rules"
-    >
-    </v-text-field>
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @update:modelValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
+    />
 
-    <v-checkbox
+    <v-switch
         v-if="field.type === 'boolean'"
         :name="name"
         :label="label"
@@ -76,8 +109,18 @@ const inputErrors = computed(() =>
         :readonly="readonly"
         :error-messages="inputErrors"
         :rules="rules"
-    >
-    </v-checkbox>
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @update:modelValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
+        color="primary"
+    />
 
 
     <v-date-input
@@ -88,9 +131,17 @@ const inputErrors = computed(() =>
         v-model="valueModel"
         :readonly="readonly"
         :error-messages="inputErrors"
-        prepend-inner-icon="mdi-calendar"
-        prepend-icon=""
         :rules="rules"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @update:modelValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     />
 
     <crud-autocomplete
@@ -101,6 +152,17 @@ const inputErrors = computed(() =>
         :label="label"
         :error-messages="inputErrors"
         :rules="rules"
+        :density="density"
+        :variant="variant"
+        :readonly="readonly"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @updateValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     />
 
     <v-card v-if="field.type === 'object'" class="mt-3" variant="flat" border>
@@ -112,6 +174,16 @@ const inputErrors = computed(() =>
             :entity="entity"
             :field="oField"
             v-model="valueModel[oField.name]"
+            :density="density"
+            :variant="variant"
+            :clearable="clearable"
+            :hide-details="hideDetails"
+            :single-line="singleLine"
+            @updateValue="$emit('updateValue')"
+            :prepend-icon="prependIcon"
+            :append-icon="appendIcon"
+            :prepend-inner-icon="prependInnerIcon"
+            :append-inner-icon="appendInnerIcon"
         ></crud-form-field>
       </v-card-text>
 
@@ -126,9 +198,19 @@ const inputErrors = computed(() =>
         :multiple="true"
         :chips="true"
         :closable-chips="true"
-        :clearable="true"
         :readonly="readonly"
         :error-messages="inputErrors"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        :rules="rules"
+        @update:modelValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     >
     </v-combobox>
 
@@ -140,9 +222,19 @@ const inputErrors = computed(() =>
         v-model="valueModel"
         :multiple="true"
         :chips="true"
-        :clearable="true"
         :label="label"
+        :rules="rules"
         :error-messages="inputErrors"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @updateValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     />
 
 
@@ -154,9 +246,19 @@ const inputErrors = computed(() =>
         v-model="valueModel"
         :multiple="true"
         :chips="true"
-        :clearable="true"
         :readonly="readonly"
         :error-messages="inputErrors"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        :rules="rules"
+        @update:modelValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     >
     </v-combobox>
 
@@ -167,6 +269,12 @@ const inputErrors = computed(() =>
         :field="field"
         v-model="valueModel"
         :readonly="readonly"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @updateValue="$emit('updateValue')"
     />
 
   </div>

package/src/components/CrudFormList.vue

@@ -9,6 +9,11 @@ const {field} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
   field: {type: Object as PropType<IEntityCrudField>, required: true},
   readonly: {type: Boolean, default: false},
+  hideDetails: {type: Boolean, default: false},
+  singleLine: {type: Boolean, default: false},
+  clearable: {type: Boolean, default: true},
+  density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
+  variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
 })
 
 function newItem() {
@@ -31,6 +36,8 @@ function removeItem(index: number) {
   valueModel.value.splice(index, 1);
 }
 
+defineEmits(['updateValue'])
+
 </script>
 
 <template>
@@ -50,6 +57,12 @@ function removeItem(index: number) {
                     v-model="(valueModel[index] as any)[key]"
                     :readonly="readonly"
                     :index="index"
+                    :density="density"
+                    :variant="variant"
+                    :clearable="clearable"
+                    :hide-details="hideDetails"
+                    :single-line="singleLine"
+                    @updateValue="$emit('updateValue')"
                 />
               </template>
 

package/src/components/CrudList.vue

@@ -8,24 +8,33 @@ import CrudImportButton from "./buttons/CrudImportButton.vue";
 import CrudCreateButton from "./buttons/CrudCreateButton.vue";
 import CrudUpdateButton from "./buttons/CrudUpdateButton.vue";
 import CrudDeleteButton from "./buttons/CrudDeleteButton.vue";
+import CrudViewButton from "./buttons/CrudViewButton.vue";
 import CrudExportList from "./CrudExportList.vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
 import type {IEntityCrudHeader} from "@drax/crud-share";
+import CrudFilters from "./CrudFilters.vue";
 
-const {t,te} = useI18n()
+const {t, te} = useI18n()
 const {hasPermission} = useAuth()
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
+
 })
 
 const {
   loading, itemsPerPage, page, sortBy, search, totalItems, items,
-  loadItems
+  doPaginate, filters
 } = useCrud(entity)
 
-const actions: IEntityCrudHeader[] = [{title: t('action.actions'), key: 'actions', sortable: false, align: 'end', minWidth: '140px'}]
+const actions: IEntityCrudHeader[] = [{
+  title: t('action.actions'),
+  key: 'actions',
+  sortable: false,
+  align: 'center',
+  minWidth: '190px'
+}]
 const tHeaders: IEntityCrudHeader[] = entity.headers.map(header => ({
   ...header,
   title: te(`${entity.name.toLowerCase()}.fields.${header.title}`) ? t(`${entity.name.toLowerCase()}.fields.${header.title}`) : header.title
@@ -35,9 +44,11 @@ const headers: IEntityCrudHeader[] = [...tHeaders, ...actions]
 
 
 defineExpose({
-  loadItems
+  doPaginate
 });
 
+defineEmits(['import', 'export', 'create', 'update', 'delete', 'view'])
+
 </script>
 
 <template>
@@ -55,7 +66,7 @@ defineExpose({
       :search="search"
       :multi-sort="false"
       item-value="name"
-      @update:options="loadItems"
+      @update:options="doPaginate"
   >
     <template v-slot:top>
       <v-toolbar density="compact">
@@ -80,12 +91,25 @@ defineExpose({
 
       </v-toolbar>
 
-      <crud-export-list :entity="entity"></crud-export-list>
+      <crud-export-list
+          :entity="entity"
+      />
 
       <v-card>
         <v-card-text>
-          <crud-search v-model="search"></crud-search>
+          <crud-search
+              v-model="search"
+          />
+        </v-card-text>
+
+        <v-card-text class="pt-0">
+          <crud-filters
+              :entity="entity"
+              v-model="filters"
+              @updateValue="doPaginate()"
+          />
         </v-card-text>
+
       </v-card>
 
     </template>
@@ -99,6 +123,11 @@ defineExpose({
 
 
     <template v-slot:item.actions="{item}">
+      <crud-view-button
+          v-if="entity.isViewable && hasPermission(entity.permissions.view)"
+          @click="$emit('view', item)"
+      />
+
       <crud-update-button
           v-if="entity.isEditable && hasPermission(entity.permissions.update)"
           @click="$emit('edit', item)"

package/src/components/CrudSearch.vue

@@ -5,12 +5,14 @@ const model = defineModel<any>()
 </script>
 
 <template>
-  <v-text-field v-model="model" hide-details
-                density="compact" class="mr-2"
+  <v-text-field v-model="model"
+                density="compact"
+                class="mr-2"
                 variant="outlined"
                 append-inner-icon="mdi-magnify"
                 :label="t('action.search')"
-                single-line clearable @click:clear="() => model = ''"
+                single-line hide-details
+                clearable @click:clear="() => model = ''"
   />
 </template>
 

package/src/components/buttons/CrudViewButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
+</script>
+
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props}">
+      <v-btn
+          v-bind="{ ...$attrs, ...props }"
+          icon="mdi-magnify"
+          class="mr-1"
+          variant="text"
+          color="secondary"
+          slim
+      >
+      </v-btn>
+    </template>
+      {{ t('action.view')}}
+  </v-tooltip>
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/UseCrud.ts

@@ -6,15 +6,37 @@ export function useCrud(entity: IEntityCrud) {
 
   const store = useCrudStore()
 
+  const dialog = computed({get(){return store.dialog} , set(value){store.setDialog(value)}})
+  const operation = computed({get(){return store.operation} , set(value){store.setOperation(value)}})
+  const form = computed({get(){return store.form} , set(value){store.setForm(value)}})
+  const formValid = computed({get(){return store.formValid} , set(value){store.setFormValid(value)}})
+  const notify = computed({get(){return store.notify} , set(value){store.setNotify(value)}})
+  const error = computed({get(){return store.error} , set(value){store.setError(value)}})
+  const message = computed({get(){return store.message} , set(value){store.setMessage(value)}})
+  const loading = computed({get(){return store.loading} , set(value){store.setLoading(value)}})
+  const itemsPerPage = computed({get(){return store.itemsPerPage} , set(value){store.setItemsPerPage(value)}})
+  const page = computed({get(){return store.page} , set(value){store.setPage(value)}})
+  const sortBy = computed({get(){return store.sortBy} , set(value){store.setSortBy(value)}})
+  const search = computed({get(){return store.search} , set(value){store.setSearch(value)}})
+  const totalItems = computed({get(){return store.totalItems} , set(value){store.setTotalItems(value)}})
+  const items = computed({get(){return store.items} , set(value){store.setItems(value)}})
+  const exportFiles = computed({get(){return store.exportFiles} , set(value){store.setExportFiles(value)}})
+  const exportLoading = computed({get(){return store.exportLoading} , set(value){store.setExportLoading(value)}})
+  const exportListVisible = computed({get(){return store.exportListVisible} , set(value){store.setExportListVisible(value)}})
+  const filters = computed({get(){return store.filters} , set(value){store.setFilters(value)}})
+
+
   async function doPaginate() {
     store.setLoading(true)
     try {
+
       const r: IDraxPaginateResult<any> = await entity?.provider.paginate({
         page: store.page,
         limit: store.itemsPerPage,
         orderBy: store.sortBy[0]?.key,
         order: store.sortBy[0]?.order,
-        search: store.search
+        search: store.search,
+        filters: store.filters
       })
       store.setItems(r.items)
       store.setTotalItems(r.total)
@@ -61,13 +83,6 @@ export function useCrud(entity: IEntityCrud) {
 
 
 
-
-  function onCreate() {
-    store.setOperation("create")
-    store.setForm(entity.form)
-    store.setDialog(true)
-  }
-
   function cast(item: any){
     entity.fields.filter(field => field.type === 'date')
         .forEach(field => {
@@ -76,31 +91,44 @@ export function useCrud(entity: IEntityCrud) {
 
     entity.fields.filter(field => field.type === 'ref')
         .forEach(field => {
-          item[field.name] = item[field.name]._id
+          item[field.name] = item[field.name]?._id ? item[field.name]._id : item[field.name]
         })
 
     entity.fields.filter(field => field.type === 'array.ref')
         .forEach(field => {
-          item[field.name] = item[field.name].map(((i:any) => i._id))
+          item[field.name] = item[field.name].map(((i:any) => i?._id ? i._id : i))
         })
 
     return item
   }
 
+  function onView(item: object) {
+    store.setOperation("view")
+    store.setForm(cast({...item}))
+    openDialog()
+  }
+
+
+  function onCreate() {
+    store.setOperation("create")
+    store.setForm(entity.form)
+    openDialog()
+  }
+
   function onEdit(item: object) {
     store.setOperation("edit")
     store.setForm(cast({...item}))
-    store.setDialog(true)
+    openDialog()
   }
 
   function onDelete(item: object) {
     store.setOperation("delete")
     store.setForm(cast({...item}))
-    store.setDialog(true)
+    openDialog()
   }
 
   function onCancel() {
-    store.setDialog(false)
+    closeDialog()
     store.setError("")
     store.setInputErrors(null)
   }
@@ -108,6 +136,9 @@ export function useCrud(entity: IEntityCrud) {
   function onSubmit(formData: any) {
     store.setInputErrors(null)
     switch (store.operation) {
+      case "view":
+        closeDialog()
+        break
       case "create":
         doCreate(formData)
         break
@@ -120,11 +151,19 @@ export function useCrud(entity: IEntityCrud) {
     }
   }
 
+  function openDialog() {
+    store.setDialog(true)
+  }
+
+  function closeDialog() {
+    store.setDialog(false)
+  }
+
   async function doCreate(formData: any) {
     try {
       await entity?.provider.create(formData)
       await doPaginate()
-      store.setDialog(false)
+      closeDialog()
       store.showMessage("Entity created successfully!")
     } catch (e: any) {
       if(e.inputErrors){
@@ -140,7 +179,7 @@ export function useCrud(entity: IEntityCrud) {
     try {
       await entity?.provider.update(formData._id, formData)
       await doPaginate()
-      store.setDialog(false)
+      closeDialog()
       store.showMessage("Entity updated successfully!")
     } catch (e: any) {
       console.log("inputErrors", e.inputErrors)
@@ -157,7 +196,7 @@ export function useCrud(entity: IEntityCrud) {
     try {
       await entity?.provider.delete(formData._id)
       await doPaginate()
-      store.setDialog(false)
+      closeDialog()
       store.showMessage("Entity deleted successfully!")
     } catch (e: any) {
       store.setError(e.message || "An error occurred while deleting the entity")
@@ -170,28 +209,16 @@ export function useCrud(entity: IEntityCrud) {
     store.$reset()
   }
 
-  const dialog = computed({get(){return store.dialog} , set(value){store.setDialog(value)}})
-  const operation = computed({get(){return store.operation} , set(value){store.setOperation(value)}})
-  const form = computed({get(){return store.form} , set(value){store.setForm(value)}})
-  const formValid = computed({get(){return store.formValid} , set(value){store.setFormValid(value)}})
-  const notify = computed({get(){return store.notify} , set(value){store.setNotify(value)}})
-  const error = computed({get(){return store.error} , set(value){store.setError(value)}})
-  const message = computed({get(){return store.message} , set(value){store.setMessage(value)}})
-  const loading = computed({get(){return store.loading} , set(value){store.setLoading(value)}})
-  const itemsPerPage = computed({get(){return store.itemsPerPage} , set(value){store.setItemsPerPage(value)}})
-  const page = computed({get(){return store.page} , set(value){store.setPage(value)}})
-  const sortBy = computed({get(){return store.sortBy} , set(value){store.setSortBy(value)}})
-  const search = computed({get(){return store.search} , set(value){store.setSearch(value)}})
-  const totalItems = computed({get(){return store.totalItems} , set(value){store.setTotalItems(value)}})
-  const items = computed({get(){return store.items} , set(value){store.setItems(value)}})
-  const exportFiles = computed({get(){return store.exportFiles} , set(value){store.setExportFiles(value)}})
-  const exportLoading = computed({get(){return store.exportLoading} , set(value){store.setExportLoading(value)}})
-  const exportListVisible = computed({get(){return store.exportListVisible} , set(value){store.setExportListVisible(value)}})
+  function prepareFilters(){
+    store.setFilters(entity.formFilters)
+  }
+
 
   return {
-    loadItems: doPaginate, doExport, onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
+    doPaginate, doExport, onView, onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
     operation, dialog, form, notify, error, message, formValid,
     loading, itemsPerPage, page, sortBy, search, totalItems, items,
+    prepareFilters,filters,
     exportFiles,exportLoading,exportListVisible
   }
 

package/src/composables/UseFormUtils.ts

@@ -0,0 +1,42 @@
+import type {IEntityCrudOperation} from "@drax/crud-share";
+import {computed} from "vue";
+
+
+export function useFormUtils(operation:IEntityCrudOperation) {
+
+    const readonly = computed(() => {
+        return operation === 'delete' || operation === 'view';
+    })
+
+    const submitColor = computed(() => {
+        if(operation === 'create') {
+            return 'primary'
+        }else if(operation === 'edit') {
+            return 'primary'
+        }else if(operation === 'delete') {
+            return 'red'
+        }else if(operation === 'view') {
+            return 'secondary'
+        }
+    })
+
+    const variant = computed(() => {
+        if(operation === 'create') {
+            return 'filled'
+        }else if(operation === 'edit') {
+            return 'filled'
+        }else if(operation === 'delete') {
+            return 'underlined'
+        }else if(operation === 'view') {
+            return 'underlined'
+        }
+    })
+
+
+
+    return {
+        readonly,
+        variant,
+        submitColor,
+    }
+}

package/src/index.ts

@@ -8,6 +8,7 @@ import CrudNotify from "./components/CrudNotify.vue";
 import CrudSearch from "./components/CrudSearch.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
 import {useCrud} from "./composables/UseCrud";
+import {useFormUtils} from "./composables/UseFormUtils";
 import {EntityCrud} from "./EntityCrud";
 
 
@@ -21,6 +22,7 @@ export {
     CrudNotify,
     CrudSearch,
     useCrud,
+    useFormUtils,
     useCrudStore,
     EntityCrud
 

package/src/stores/UseCrudStore.ts

@@ -1,16 +1,17 @@
 import {defineStore} from "pinia";
-import type {TOperation} from "../interfaces/TOperation";
+import type {IEntityCrudOperation} from "@drax/crud-share";
 
 export const useCrudStore = defineStore('CrudStore', {
     state: () => (
         {
-            operation: null as TOperation,
+            operation: null as IEntityCrudOperation,
             dialog: false as boolean,
             form: {} as any,
             formValid: {} as any,
             notify: false as boolean,
             message: '' as string,
             error: '' as string,
+            filters: [] as any[],
             items: [] as any[],
             totalItems: 0 as number,
             itemsPerPage: 5 as number,
@@ -35,7 +36,7 @@ export const useCrudStore = defineStore('CrudStore', {
       }
     },
     actions: {
-        setOperation(operation: TOperation) {
+        setOperation(operation: IEntityCrudOperation) {
             this.operation = operation
         },
         setDialog(dialog: boolean) {
@@ -99,6 +100,9 @@ export const useCrudStore = defineStore('CrudStore', {
         },
         setExportListVisible(exportListVisible: boolean) {
             this.exportListVisible = exportListVisible
+        },
+        setFilters(filters: any[]) {
+            this.filters = filters
         }
     }
 

package/src/interfaces/TOperation.ts

@@ -1,6 +0,0 @@
-type TOperation = "create" | "edit" | "delete" | null
-
-
-export type {
-  TOperation
-}