@drax/crud-vue 0.5.2 → 0.5.3

package/package.json

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

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,13 @@ class EntityCrud implements IEntityCrud{
 
   get fields():IEntityCrudField[]{
     return [
-      {name: 'id', type: 'string', label: 'ID', default: '' },
+      {name: '_id', type: 'string', label: 'ID', default: '' },
+    ]
+  }
+
+  get filters():IEntityCrudFilter[]{
+    return [
+      {name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq' },
     ]
   }
 
@@ -57,7 +63,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 +74,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,7 +101,6 @@ 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
   }
 

package/src/components/Crud.vue

@@ -13,11 +13,13 @@ const {entity} = defineProps({
 
 const {
   onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
-  operation, dialog, form, notify, error, message, doExport
+  operation, dialog, form, notify, error, message, doExport,
+  prepareFilters
 } = useCrud(entity);
 
 onBeforeMount(() => {
   resetCrudStore()
+  prepareFilters()
 })
 
 </script>

package/src/components/CrudAutocomplete.vue

@@ -3,6 +3,7 @@ import {debounce} from "@drax/common-front"
 import { type PropType, type Ref} from "vue";
 import {ref, onBeforeMount} from "vue";
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
+import {VDateInput} from "vuetify/lib/labs/VDateInput";
 
 const valueModel = defineModel<string | string[]>({type: [String, Array], required: false})
 
@@ -18,6 +19,10 @@ const {entity, multiple} = defineProps({
   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){
@@ -86,6 +91,8 @@ async function search(value: any) {
 
 }
 
+defineEmits(['updateValue'])
+
 </script>
 
 <template>
@@ -97,13 +104,18 @@ async function search(value: any) {
       :multiple="multiple"
       :chips="chips"
       :closable-chips="closableChips"
-      :clearable="clearable"
       :item-value="itemValue"
       :item-title="itemTitle"
       :loading="loading"
       :rules="rules"
+      :density="density"
+      :variant="variant"
+      :hide-details="hideDetails"
+      :single-line="singleLine"
+      :clearable="clearable"
       :error-messages="errorMessages"
       @update:search="debouncedSearch"
+      @update:modelValue="$emit('updateValue')"
   ></v-autocomplete>
 </template>
 

package/src/components/CrudFilters.vue

@@ -0,0 +1,64 @@
+<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"
+                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/CrudFormField.vue

@@ -6,20 +6,28 @@ 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},
   readonly: {type: Boolean, default: false},
+  hideDetails: {type: Boolean, default: false},
+  singleLine: {type: Boolean, default: false},
+  clearable: {type: Boolean, default: true},
+  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 +40,7 @@ const label = computed(() => {
 })
 
 const rules = computed(() => {
+  if(disableRules) return undefined
   return entity.getRule(field.name) as any
 })
 
@@ -39,6 +48,8 @@ const inputErrors = computed(() =>
     store.getInputErrors(field.name).map((error: string) => t(te(error) ? t(error) : error))
 )
 
+defineEmits(['updateValue'])
+
 </script>
 
 <template>
@@ -53,6 +64,12 @@ const inputErrors = computed(() =>
         :readonly="readonly"
         :error-messages="inputErrors"
         :rules="rules"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @update:modelValue="$emit('updateValue')"
     >
     </v-text-field>
 
@@ -65,6 +82,12 @@ const inputErrors = computed(() =>
         :readonly="readonly"
         :error-messages="inputErrors"
         :rules="rules"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @update:modelValue="$emit('updateValue')"
     >
     </v-text-field>
 
@@ -76,6 +99,12 @@ const inputErrors = computed(() =>
         :readonly="readonly"
         :error-messages="inputErrors"
         :rules="rules"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @update:modelValue="$emit('updateValue')"
     >
     </v-checkbox>
 
@@ -91,6 +120,12 @@ const inputErrors = computed(() =>
         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')"
     />
 
     <crud-autocomplete
@@ -101,6 +136,12 @@ const inputErrors = computed(() =>
         :label="label"
         :error-messages="inputErrors"
         :rules="rules"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        @updateValue="$emit('updateValue')"
     />
 
     <v-card v-if="field.type === 'object'" class="mt-3" variant="flat" border>
@@ -112,6 +153,12 @@ 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')"
         ></crud-form-field>
       </v-card-text>
 
@@ -126,9 +173,15 @@ 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')"
     >
     </v-combobox>
 
@@ -140,9 +193,15 @@ 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')"
     />
 
 
@@ -154,9 +213,15 @@ 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')"
     >
     </v-combobox>
 
@@ -167,6 +232,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

@@ -2,6 +2,7 @@
 import type {PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
+import {VDateInput} from "vuetify/lib/labs/VDateInput";
 
 const valueModel = defineModel({type: Array, default: () => []});
 
@@ -9,6 +10,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 +37,8 @@ function removeItem(index: number) {
   valueModel.value.splice(index, 1);
 }
 
+defineEmits(['updateValue'])
+
 </script>
 
 <template>
@@ -50,6 +58,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

@@ -12,20 +12,28 @@ 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: 'end',
+  minWidth: '140px'
+}]
 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,7 +43,7 @@ const headers: IEntityCrudHeader[] = [...tHeaders, ...actions]
 
 
 defineExpose({
-  loadItems
+  doPaginate
 });
 
 </script>
@@ -55,7 +63,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 +88,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>

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/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)
@@ -170,28 +192,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, 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/stores/UseCrudStore.ts

@@ -11,6 +11,7 @@ export const useCrudStore = defineStore('CrudStore', {
             notify: false as boolean,
             message: '' as string,
             error: '' as string,
+            filters: [] as any[],
             items: [] as any[],
             totalItems: 0 as number,
             itemsPerPage: 5 as number,
@@ -99,6 +100,9 @@ export const useCrudStore = defineStore('CrudStore', {
         },
         setExportListVisible(exportListVisible: boolean) {
             this.exportListVisible = exportListVisible
+        },
+        setFilters(filters: any[]) {
+            this.filters = filters
         }
     }