@drax/crud-vue 3.18.1 → 3.20.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.18.1",
+  "version": "3.20.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^3.11.0",
-    "@drax/crud-front": "^3.11.0",
-    "@drax/crud-share": "^3.17.0",
-    "@drax/media-vue": "^3.18.1"
+    "@drax/common-front": "^3.19.0",
+    "@drax/crud-front": "^3.20.0",
+    "@drax/crud-share": "^3.20.0",
+    "@drax/media-vue": "^3.20.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "241f90094f420bdbe8c998d0ccb89aff433db022"
+  "gitHead": "6d4aea4d05133be679166e398ec6a3ae61503d9e"
 }

package/src/components/Crud.vue

@@ -17,9 +17,10 @@ const {entity} = defineProps({
 })
 
 const {
-  onView, onCreate, onEdit, onDelete, resetCrudStore,
+  onCreate, onEditAt, onDeleteAt, resetCrudStore,
   operation, dialog, notify, message, doExport, doImport,
-  prepareFilters, prepareSort, form
+  prepareFilters, prepareSort, form,
+  onViewAt, navigateView, canNavigateItems, canNavigatePrev, canNavigateNext
 } = useCrud(entity);
 
 const {hasPermission} = useAuth()
@@ -70,11 +71,11 @@ watch(dialog, (value) => {
           :is="listComponent"
           :entity="entity"
           @create="onCreate"
-          @edit="onEdit"
-          @delete="onDelete"
+          @edit="onEditAt"
+          @delete="onDeleteAt"
           @export="doExport"
           @import="doImport"
-          @view="onView"
+          @view="onViewAt"
       >
 
         <template v-slot:toolbar-left>
@@ -120,8 +121,8 @@ watch(dialog, (value) => {
         </template>
 
 
-        <template v-slot:item.actions="{item}">
-          <slot name="item.actions" v-bind="{item}">
+        <template v-slot:item.actions="{item, index}">
+          <slot name="item.actions" v-bind="{item, index}">
           </slot>
         </template>
 
@@ -144,6 +145,22 @@ watch(dialog, (value) => {
         :operation="operation"
     >
       <template #toolbar-actions>
+        <v-btn
+            v-if="canNavigateItems"
+            icon="mdi-chevron-left"
+            variant="text"
+            :disabled="!canNavigatePrev"
+            @click="navigateView(-1)"
+        />
+
+        <v-btn
+            v-if="canNavigateItems"
+            icon="mdi-chevron-right"
+            variant="text"
+            :disabled="!canNavigateNext"
+            @click="navigateView(1)"
+        />
+
         <crud-ai-button
             v-if="entity.isAiAssistable && ['create', 'edit'].includes(operation) && hasPermission('ai:promptCrud')"
             :entity="entity"

package/src/components/CrudActiveFilters.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
 import { useFilterIcon } from '../composables/UseFilterIcon'
 import CrudRefDisplay from "./CrudRefDisplay.vue";
 import {formatDate} from "@drax/common-front"
+import {isRangeOperator, normalizeDateRangeValue} from "../helpers/CrudRangeFilters";
 
 const { t} = useI18n()
 
@@ -36,6 +37,13 @@ const activeFilters = computed<any[]>(() => {
         return null
       }
 
+      if (isRangeOperator(filterDef)) {
+        const rangeValue = normalizeDateRangeValue(filter.value)
+        if (!rangeValue.from && !rangeValue.to) {
+          return null
+        }
+      }
+
       return {
         ...filterDef,
         value: filter.value,
@@ -50,9 +58,20 @@ const getFilterLabel = (filter: any) => {
   return label
 }
 
+const formatRangeDate = (value: string | Date) => {
+  return formatDate(value instanceof Date ? value.toISOString() : value)
+}
+
 
 
 const getFilterValue = (filter: any) => {
+  if (isRangeOperator(filter)) {
+    const rangeValue = normalizeDateRangeValue(filter.value)
+    const from = rangeValue.from ? formatRangeDate(rangeValue.from) : t('crud.from')
+    const to = rangeValue.to ? formatRangeDate(rangeValue.to) : t('crud.to')
+    return `${from} - ${to}`
+  }
+
   switch (filter.type) {
     case 'date':
       return formatDate(filter.value)

package/src/components/CrudFieldRange.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import {computed, type PropType} from "vue";
+import type {ValidationRule} from "vuetify";
+import {VDateInput} from "vuetify/labs/VDateInput";
+import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+import {normalizeDateRangeValue} from "../helpers/CrudRangeFilters";
+
+const {t} = useI18n()
+
+const valueModel = defineModel<any>({type: [Object], default: null})
+
+const {
+  name,
+  label,
+  field,
+  readonly,
+  errorMessages,
+  rules,
+  density,
+  variant,
+  clearable,
+  hideDetails,
+  singleLine,
+  hint,
+  persistentHint,
+  placeholder,
+  persistentPlaceholder,
+  prependIcon,
+  appendIcon,
+  prependInnerIcon,
+  appendInnerIcon,
+  onInput
+} = defineProps({
+  name: {type: String, required: true},
+  label: {type: String, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+  field: {type: Object as PropType<IEntityCrudFilter>, required: true},
+  readonly: {type: Boolean, default: false},
+  hideDetails: {type: Boolean, default: false},
+  hint: {type: String, required: false},
+  persistentHint: {type: Boolean, default: false},
+  placeholder: {type: String, required: false},
+  persistentPlaceholder: {type: Boolean, default: false},
+  errorMessages: {type: Array as PropType<string[]>, default: null, required: false},
+  onInput: {type: Function as PropType<Function>, required: false},
+  rules: {type: Array as PropType<ValidationRule[]>, required: 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'
+  },
+  singleLine: {type: Boolean, default: false},
+  clearable: {type: Boolean, default: false},
+  prependIcon: {type: String, default: ''},
+  prependInnerIcon: {type: String, default: ''},
+  appendIcon: {type: String, default: ''},
+  appendInnerIcon: {type: String, default: ''},
+})
+
+const emit = defineEmits(['updateValue'])
+
+const rangeValueModel = computed({
+  get() {
+    return normalizeDateRangeValue(valueModel.value)
+  },
+  set(value) {
+    valueModel.value = normalizeDateRangeValue(value)
+  }
+})
+
+function normalizeDateValue(value: any, endOfDay = false) {
+  if (!value) {
+    return null
+  }
+
+  const date = value instanceof Date ? new Date(value) : new Date(value)
+
+  if (Number.isNaN(date.getTime())) {
+    return null
+  }
+
+  if (endOfDay) {
+    date.setHours(23, 59, 59, 0)
+  }
+
+  return date
+}
+
+function updateRangeValue(bound: 'from' | 'to', rawValue: any) {
+  const nextValue = {
+    ...normalizeDateRangeValue(rangeValueModel.value),
+    [bound]: normalizeDateValue(rawValue, bound === 'to' && !!field.endOfDay)
+  }
+
+  const fromDate = normalizeDateValue(nextValue.from)
+  const toDate = normalizeDateValue(nextValue.to)
+
+  if (fromDate && toDate && fromDate > toDate) {
+    if (bound === 'from') {
+      nextValue.to = normalizeDateValue(nextValue.from, !!field.endOfDay)
+    } else {
+      nextValue.from = normalizeDateValue(nextValue.to)
+    }
+  }
+
+  rangeValueModel.value = nextValue
+
+  if(onInput && typeof onInput === 'function'){
+    onInput(nextValue)
+  }
+
+  emit('updateValue')
+}
+
+const rangeFromModel = computed({
+  get() {
+    return rangeValueModel.value.from
+  },
+  set(value) {
+    updateRangeValue('from', value)
+  }
+})
+
+const rangeToModel = computed({
+  get() {
+    return rangeValueModel.value.to
+  },
+  set(value) {
+    updateRangeValue('to', value)
+  }
+})
+
+const rangeFromMax = computed(() => {
+  return rangeValueModel.value.to ?? field.max
+})
+
+const rangeToMin = computed(() => {
+  return rangeValueModel.value.from ?? undefined
+})
+
+const fromInnerIcon = computed(() => {
+  return prependInnerIcon || 'mdi-calendar-start'
+})
+
+const toInnerIcon = computed(() => {
+  return appendInnerIcon || 'mdi-calendar-end'
+})
+</script>
+
+<template>
+  <v-row dense>
+    <v-col cols="12" sm="6">
+      <v-date-input
+          :name="`${name}_from`"
+          :label="`${label} ${t('crud.from')}`"
+          :hint="hint ?? field.hint"
+          :persistent-hint="persistentHint ?? field.persistentHint"
+          :placeholder="placeholder ?? field.placeholder"
+          :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
+          v-model="rangeFromModel"
+          :readonly="readonly"
+          :error-messages="errorMessages"
+          :rules="rules"
+          :density="density"
+          :variant="variant"
+          :clearable="clearable"
+          :hide-details="hideDetails"
+          :single-line="singleLine"
+          @click:clear="() => updateRangeValue('from', null)"
+          :prepend-icon="prependIcon"
+          :append-icon="appendIcon"
+          :prepend-inner-icon="fromInnerIcon"
+          :append-inner-icon="appendInnerIcon"
+          :max="rangeFromMax"
+          @input="onInput"
+      />
+    </v-col>
+
+    <v-col cols="12" sm="6">
+      <v-date-input
+          :name="`${name}_to`"
+          :label="`${label} ${t('crud.to')}`"
+          :hint="hint ?? field.hint"
+          :persistent-hint="persistentHint ?? field.persistentHint"
+          :placeholder="placeholder ?? field.placeholder"
+          :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
+          v-model="rangeToModel"
+          :readonly="readonly"
+          :error-messages="errorMessages"
+          :rules="rules"
+          :density="density"
+          :variant="variant"
+          :clearable="clearable"
+          :hide-details="hideDetails"
+          :single-line="singleLine"
+          @click:clear="() => updateRangeValue('to', null)"
+          :prepend-icon="prependIcon"
+          :append-icon="appendIcon"
+          :prepend-inner-icon="toInnerIcon"
+          :append-inner-icon="appendInnerIcon"
+          :min="rangeToMin"
+          :max="field.max"
+          @input="onInput"
+      >
+        <template v-if="field.endOfDay && field.showEndOfDayChip !== false" v-slot:append-inner>
+          <v-chip size="small">23:59</v-chip>
+        </template>
+      </v-date-input>
+    </v-col>
+  </v-row>
+</template>

package/src/components/CrudFilters.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {computed, type PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
+import CrudFieldRange from "./CrudFieldRange.vue";
 import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
 import {useAuth} from "@drax/identity-vue";
 import {useFilterIcon} from "../composables/UseFilterIcon";
@@ -18,6 +19,10 @@ const aFields = computed(() => {
   return entity.filters.filter((field:IEntityCrudFilter) => !field.permission || hasPermission(field.permission))
 })
 
+function isRangeFilter(filter: IEntityCrudFilter) {
+  return filter.type === 'date' && filter.operator === 'range'
+}
+
 function filter() {
   emit('applyFilter')
 }
@@ -51,8 +56,21 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
           >
 
             <slot :name="`filter.${filter.name}`" v-bind="{filter, filterIndex: index}">
+              <crud-field-range
+                  v-if="filter && valueModel[index] !== undefined && isRangeFilter(filter)"
+                  :name="filter.name"
+                  :label="filter.label"
+                  :entity="entity"
+                  :field="filter"
+                  v-model="valueModel[index].value"
+                  :clearable="true"
+                  density="compact"
+                  variant="outlined"
+                  hide-details
+                  @updateValue="onUpdateValue"
+              />
               <crud-form-field
-                  v-if="filter && valueModel[index] !== undefined"
+                  v-else-if="filter && valueModel[index] !== undefined"
                   :field="filter"
                   :entity="entity"
                   v-model="valueModel[index].value"

package/src/components/CrudFormField.vue

@@ -82,7 +82,6 @@ const inputErrors = computed(() => {
 
 defineEmits(['updateValue'])
 
-
 const hasHideDetails = computed(() => {
   if (readonly) {
     return true

package/src/components/CrudList.vue

@@ -206,24 +206,24 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
     </template>
 
 
-    <template v-slot:item.actions="{item}">
+    <template v-slot:item.actions="{item, index}">
 
-      <slot name="item.actions" v-bind="{item}">
+      <slot name="item.actions" v-bind="{item, index}">
       </slot>
 
       <crud-view-button
           v-if="entity.isViewable && hasPermission(entity.permissions.view)"
-          @click="$emit('view', item)"
+          @click="$emit('view', item, index)"
       />
 
       <crud-update-button
           v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
-          @click="$emit('edit', item)"
+          @click="$emit('edit', item, index)"
       />
 
       <crud-delete-button
           v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
-          @click="$emit('delete', item)"
+          @click="$emit('delete', item, index)"
       />
 
     </template>

package/src/components/CrudListGallery.vue

@@ -21,6 +21,7 @@ import {useCrudColumns} from "../composables/UseCrudColumns";
 import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
 import CrudFiltersAction from "./CrudFiltersAction.vue";
 import CrudFilterButton from "./buttons/CrudFilterButton.vue";
+import CrudSavedQueriesButton from "./buttons/CrudSavedQueriesButton.vue";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
@@ -89,6 +90,11 @@ onMounted(() => {
               :entity="entity"
           />
 
+          <crud-saved-queries-button
+              v-if="entity.isSavedQueriesEnabled"
+              :entity="entity"
+          />
+
           <slot name="toolbar">
           </slot>
 
@@ -199,7 +205,7 @@ onMounted(() => {
 
       <!-- GALLERY GRIDS -->
       <v-row v-if="items.length > 0">
-        <v-col v-for="item in items" :key="item.id || item.uuid || item.name || Math.random()" cols="12" sm="6" md="4"
+        <v-col v-for="(item, index) in items" :key="item.id || item.uuid || item.name || Math.random()" cols="12" sm="6" md="4"
                xl="3">
 
 
@@ -231,22 +237,22 @@ onMounted(() => {
               <v-divider></v-divider>
 
               <v-card-actions class="bg-grey-lighten-4 py-2 px-4 d-flex justify-end flex-wrap gap-2">
-                <slot name="item.actions" v-bind="{item}">
+                <slot name="item.actions" v-bind="{item, index}">
                 </slot>
 
                 <crud-view-button
                     v-if="entity.isViewable && hasPermission(entity.permissions.view)"
-                    @click="$emit('view', item)"
+                    @click="$emit('view', item, index)"
                 />
 
                 <crud-update-button
                     v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
-                    @click="$emit('edit', item)"
+                    @click="$emit('edit', item, index)"
                 />
 
                 <crud-delete-button
                     v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
-                    @click="$emit('delete', item)"
+                    @click="$emit('delete', item, index)"
                 />
               </v-card-actions>
             </v-card>

package/src/components/CrudListTable.vue

@@ -20,6 +20,7 @@ import { useCrudColumns } from "../composables/UseCrudColumns";
 import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
 import CrudFiltersAction from "./CrudFiltersAction.vue";
 import CrudFilterButton from "./buttons/CrudFilterButton.vue";
+import CrudSavedQueriesButton from "./buttons/CrudSavedQueriesButton.vue";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
@@ -96,6 +97,12 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
         </slot>
 
+        <crud-saved-queries-button
+            v-if="entity.isSavedQueriesEnabled"
+            :entity="entity"
+        />
+
+
         <crud-import-button
             :entity="entity"
             @import="(file:any, format:any) => $emit('import', file, format)"
@@ -119,6 +126,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
             :entity="entity"
         />
 
+
         <slot name="toolbar">
 
         </slot>
@@ -218,24 +226,24 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
     </template>
 
 
-    <template v-slot:item.actions="{item}">
+    <template v-slot:item.actions="{item, index}">
 
-      <slot name="item.actions" v-bind="{item}">
+      <slot name="item.actions" v-bind="{item, index}">
       </slot>
 
       <crud-view-button
           v-if="entity.isViewable && hasPermission(entity.permissions.view)"
-          @click="$emit('view', item)"
+          @click="$emit('view', item, index)"
       />
 
       <crud-update-button
           v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
-          @click="$emit('edit', item)"
+          @click="$emit('edit', item, index)"
       />
 
       <crud-delete-button
           v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
-          @click="$emit('delete', item)"
+          @click="$emit('delete', item, index)"
       />
 
     </template>

package/src/components/buttons/CrudSavedQueriesButton.vue

@@ -0,0 +1,346 @@
+<script setup lang="ts">
+import {computed, ref, type PropType} from "vue";
+import type {ICrudSavedQuery, IEntityCrud, IEntityCrudFilter, IDraxFieldFilter} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+import {useCrudStore} from "../../stores/UseCrudStore";
+import {useCrud} from "../../composables/UseCrud";
+import {useCrudColumns} from "../../composables/UseCrudColumns";
+import {CrudSavedQueryProvider} from "@drax/crud-front";
+import {useAuth, useAuthStore} from "@drax/identity-vue";
+import {createCrudFilterValue} from "../../helpers/CrudRangeFilters";
+
+const {t, te} = useI18n();
+const {hasPermission} = useAuth();
+const authStore = useAuthStore();
+
+const props = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+});
+
+const store = useCrudStore(props.entity.name);
+const {doPaginate} = useCrud(props.entity);
+const {setVisibleColumns} = useCrudColumns(props.entity);
+
+const menu = ref(false);
+const saveDialog = ref(false);
+const deleteDialog = ref(false);
+const loading = ref(false);
+const saving = ref(false);
+const deleting = ref(false);
+const savedQueries = ref<ICrudSavedQuery[]>([]);
+const queryToDelete = ref<ICrudSavedQuery | null>(null);
+const form = ref({
+  name: "",
+  shared: false,
+});
+
+type UserIdLike = {
+  id?: string;
+  _id?: string;
+};
+
+const title = computed(() => {
+  const key = "crud.savedQueries.title";
+  return te(key) ? t(key) : "Saved queries";
+});
+
+const saveTitle = computed(() => {
+  const key = "crud.savedQueries.save";
+  return te(key) ? t(key) : "Save query";
+});
+
+const noQueriesText = computed(() => {
+  const key = "crud.savedQueries.empty";
+  return te(key) ? t(key) : "No saved queries";
+});
+
+const deleteTitle = computed(() => {
+  const key = "crud.savedQueries.delete";
+  return te(key) ? t(key) : "Delete saved query";
+});
+
+const deleteConfirmText = computed(() => {
+  const key = "crud.savedQueries.deleteConfirm";
+  return te(key) ? t(key, {name: queryToDelete.value?.name || ""}) : `Delete "${queryToDelete.value?.name || ""}"?`;
+});
+
+const canViewSavedQueries = computed(() => hasPermission("crudSavedQuery:view"));
+const canCreateSavedQueries = computed(() => hasPermission("crudSavedQuery:create"));
+const canDeleteOwnSavedQueries = computed(() => hasPermission("crudSavedQuery:delete"));
+const canDeleteAllSavedQueries = computed(() => hasPermission("crudSavedQuery:all") || hasPermission("crudSavedQuery:deleteAll"));
+
+function clone<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value));
+}
+
+function entityFilter(): IDraxFieldFilter[] {
+  return [{field: "entity", operator: "eq", value: props.entity.name}];
+}
+
+function definedDynamicFilters(): IEntityCrudFilter[] {
+  return clone(store.dynamicFilters.filter((filter: IEntityCrudFilter) => filter.name));
+}
+
+function buildStaticFilters(savedFilters: IDraxFieldFilter[] = []): IDraxFieldFilter[] {
+  const savedByField = new Map(savedFilters.map(filter => [filter.field, filter]));
+
+  return props.entity.filters.map(filter => {
+    const savedFilter = savedByField.get(filter.name);
+    return {
+      field: filter.name,
+      operator: savedFilter?.operator || filter.operator || "eq",
+      value: savedFilter ? savedFilter.value : createCrudFilterValue(filter)
+    };
+  });
+}
+
+function queryUserId(query: ICrudSavedQuery): string | undefined {
+  const user = query.user;
+  if (!user) {
+    return undefined;
+  }
+  if (typeof user === "string") {
+    return user;
+  }
+  const id = user._id || user.id;
+  return id ? String(id) : undefined;
+}
+
+function currentUserId(): string | undefined {
+  const authUser = authStore.authUser as UserIdLike | null;
+  const id = authUser?.id || authUser?._id;
+  return id ? String(id) : undefined;
+}
+
+function canDeleteQuery(query: ICrudSavedQuery): boolean {
+  if (canDeleteAllSavedQueries.value) {
+    return true;
+  }
+  if (!canDeleteOwnSavedQueries.value) {
+    return false;
+  }
+
+  const ownerId = queryUserId(query);
+  return !ownerId || ownerId === currentUserId();
+}
+
+async function loadQueries() {
+  loading.value = true;
+  try {
+    savedQueries.value = await CrudSavedQueryProvider.instance.find({
+      limit: 100,
+      orderBy: "name",
+      order: "asc",
+      filters: entityFilter()
+    });
+  } catch (error) {
+    console.error("Error loading saved queries", error);
+    savedQueries.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openSaveDialog() {
+  form.value = {name: "", shared: false};
+  saveDialog.value = true;
+}
+
+async function saveQuery() {
+  if (!form.value.name.trim()) {
+    return;
+  }
+
+  saving.value = true;
+  try {
+    await CrudSavedQueryProvider.instance.create({
+      entity: props.entity.name,
+      name: form.value.name.trim(),
+      shared: form.value.shared,
+      columns: clone(store.visibleColumns),
+      staticFilters: clone(store.filters),
+      dynamicFilters: definedDynamicFilters(),
+    });
+    saveDialog.value = false;
+    await loadQueries();
+  } catch (error) {
+    console.error("Error saving query", error);
+  } finally {
+    saving.value = false;
+  }
+}
+
+function openDeleteDialog(query: ICrudSavedQuery) {
+  queryToDelete.value = query;
+  deleteDialog.value = true;
+  menu.value = false;
+}
+
+async function deleteQuery() {
+  if (!queryToDelete.value) {
+    return;
+  }
+
+  deleting.value = true;
+  try {
+    await CrudSavedQueryProvider.instance.delete(queryToDelete.value._id);
+    deleteDialog.value = false;
+    queryToDelete.value = null;
+    await loadQueries();
+  } catch (error) {
+    console.error("Error deleting saved query", error);
+  } finally {
+    deleting.value = false;
+  }
+}
+
+async function applyQuery(query: ICrudSavedQuery) {
+  setVisibleColumns(query.columns || []);
+  store.setFilters(buildStaticFilters(clone(query.staticFilters || [])));
+  const dynamicFilters = clone(query.dynamicFilters || []);
+  store.setDynamicFilters(dynamicFilters);
+  store.setDynamicFiltersEnable(dynamicFilters.length > 0);
+  store.setPage(1);
+  menu.value = false;
+  await doPaginate();
+}
+
+function onMenuUpdate(value: boolean) {
+  menu.value = value;
+  if (value) {
+    loadQueries();
+  }
+}
+</script>
+
+<template>
+  <v-menu
+      v-if="canViewSavedQueries"
+      :model-value="menu"
+      offset-y
+      :close-on-content-click="false"
+      @update:model-value="onMenuUpdate"
+  >
+    <template #activator="{ props: activatorProps }">
+      <v-btn
+          v-bind="activatorProps"
+          icon
+          variant="text"
+      >
+        <v-icon>mdi-content-save-cog</v-icon>
+        <v-tooltip activator="parent" location="bottom">
+          {{ title }}
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-list min-width="280">
+      <v-list-subheader>{{ title }}</v-list-subheader>
+
+      <v-list-item
+          v-if="canCreateSavedQueries"
+          @click="openSaveDialog"
+      >
+        <template #prepend>
+          <v-icon>mdi-content-save-outline</v-icon>
+        </template>
+        <v-list-item-title>{{ saveTitle }}</v-list-item-title>
+      </v-list-item>
+
+      <v-divider />
+
+      <v-list-item v-if="loading">
+        <v-progress-linear indeterminate />
+      </v-list-item>
+
+      <v-list-item v-else-if="savedQueries.length === 0">
+        <v-list-item-title class="text-medium-emphasis">{{ noQueriesText }}</v-list-item-title>
+      </v-list-item>
+
+      <v-list-item
+          v-for="query in savedQueries"
+          :key="query._id"
+          @click="applyQuery(query)"
+      >
+        <template #prepend>
+          <v-icon>{{ query.shared ? "mdi-account-group-outline" : "mdi-account-outline" }}</v-icon>
+        </template>
+        <v-list-item-title>{{ query.name }}</v-list-item-title>
+        <template #append>
+          <v-btn
+              v-if="canDeleteQuery(query)"
+              icon
+              variant="text"
+              color="red"
+              size="small"
+              @click.stop="openDeleteDialog(query)"
+          >
+            <v-icon>mdi-delete</v-icon>
+            <v-tooltip activator="parent" location="bottom">
+              {{ te('action.delete') ? t('action.delete') : 'Delete' }}
+            </v-tooltip>
+          </v-btn>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+
+  <v-dialog v-model="saveDialog" max-width="460">
+    <v-card>
+      <v-card-title>{{ saveTitle }}</v-card-title>
+      <v-card-text>
+        <v-text-field
+            v-model="form.name"
+            :label="te('crud.savedQueries.name') ? t('crud.savedQueries.name') : 'Name'"
+            density="compact"
+            variant="outlined"
+            autofocus
+        />
+        <v-switch
+            v-model="form.shared"
+            :label="te('crud.savedQueries.shared') ? t('crud.savedQueries.shared') : 'Shared'"
+            color="primary"
+            hide-details
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="saveDialog = false">
+          {{ te('action.cancel') ? t('action.cancel') : 'Cancel' }}
+        </v-btn>
+        <v-btn
+            color="primary"
+            variant="flat"
+            :loading="saving"
+            :disabled="!form.name.trim()"
+            @click="saveQuery"
+        >
+          {{ te('action.save') ? t('action.save') : 'Save' }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <v-dialog v-model="deleteDialog" max-width="460">
+    <v-card>
+      <v-card-title>{{ deleteTitle }}</v-card-title>
+      <v-card-text>
+        {{ deleteConfirmText }}
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="deleteDialog = false">
+          {{ te('action.cancel') ? t('action.cancel') : 'Cancel' }}
+        </v-btn>
+        <v-btn
+            color="red"
+            variant="flat"
+            :loading="deleting"
+            @click="deleteQuery"
+        >
+          {{ te('action.delete') ? t('action.delete') : 'Delete' }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

package/src/composables/UseCrud.ts

@@ -6,15 +6,19 @@ import type {
     IEntityCrudOperation
 } from "@drax/crud-share";
 import {useCrudStore} from "../stores/UseCrudStore";
-import {computed, nextTick, toRaw} from "vue";
+import {computed, nextTick, toRaw, watch} from "vue";
 import getItemId from "../helpers/getItemId";
 import {useI18n} from "vue-i18n";
 import {useRouter} from "vue-router";
+import {createCrudFilterValue, expandRangeFilters} from "../helpers/CrudRangeFilters";
 
 
 export function useCrud(entity: IEntityCrud) {
 
     const store = useCrudStore(entity?.name)
+    const navigationOperations = (entity as IEntityCrud & {
+        navigationOperations?: Exclude<IEntityCrudOperation, null>[]
+    }).navigationOperations ?? ['view']
 
     const router = useRouter();
 
@@ -48,6 +52,18 @@ export function useCrud(entity: IEntityCrud) {
         }
     })
 
+    const currentViewIndex = computed({
+        get() {
+            return store.currentViewIndex
+        }, set(value) {
+            store.setCurrentViewIndex(value)
+        }
+    })
+
+    const canNavigateItems = computed(() => {
+        return operation.value !== null && navigationOperations.includes(operation.value)
+    })
+
     const operation = computed({
         get() {
             return store.operation
@@ -233,23 +249,97 @@ export function useCrud(entity: IEntityCrud) {
     })
 
     const prepareDynamicFilters = computed(() => {
-        return store.dynamicFilters.map((filter: IEntityCrudFilter) => {
+        return expandRangeFilters(store.dynamicFilters.map((filter: IEntityCrudFilter) => {
             return {
                 field: filter.name,
                 operator: filter.operator,
                 value: filter.value
             }
-        }) as IDraxFieldFilter[]
+        })) as IDraxFieldFilter[]
     })
 
 
     const getAllFilters = computed(() =>{
         return [
-            ...store.filters,
+            ...expandRangeFilters(store.filters),
             ...prepareDynamicFilters.value
         ]  as IDraxFieldFilter[]
     })
 
+    function resolveViewIndex(item: Record<string, any>, index?: number | null) {
+        if (typeof index === 'number' && index >= 0) {
+            return index
+        }
+
+        const itemIdentifier = entity.identifier ? item?.[entity.identifier] : getItemId(item)
+
+        if (itemIdentifier !== undefined && itemIdentifier !== null) {
+            return items.value.findIndex((currentItem: Record<string, any>) => {
+                const currentIdentifier = entity.identifier ? currentItem?.[entity.identifier] : getItemId(currentItem)
+                return currentIdentifier === itemIdentifier
+            })
+        }
+
+        return items.value.findIndex((currentItem: Record<string, any>) => currentItem === item)
+    }
+
+    function openItemAt(operation: Exclude<IEntityCrudOperation, null>, item: Record<string, any>, index?: number) {
+        const resolvedIndex = resolveViewIndex(item, index)
+        currentViewIndex.value = resolvedIndex >= 0 ? resolvedIndex : null
+
+        switch (operation) {
+            case 'view':
+                onView(item)
+                return
+            case 'edit':
+                onEdit(item)
+                return
+            case 'delete':
+                onDelete(item)
+                return
+        }
+    }
+
+    function onViewAt(item: Record<string, any>, index?: number) {
+        openItemAt('view', item, index)
+    }
+
+    function onEditAt(item: Record<string, any>, index?: number) {
+        openItemAt('edit', item, index)
+    }
+
+    function onDeleteAt(item: Record<string, any>, index?: number) {
+        openItemAt('delete', item, index)
+    }
+
+    const canNavigatePrev = computed(() => {
+        return canNavigateItems.value
+            && currentViewIndex.value !== null
+            && currentViewIndex.value > 0
+    })
+
+    const canNavigateNext = computed(() => {
+        return canNavigateItems.value
+            && currentViewIndex.value !== null
+            && currentViewIndex.value < items.value.length - 1
+    })
+
+    function navigateView(direction: -1 | 1) {
+        if (currentViewIndex.value === null || operation.value === null || !canNavigateItems.value) {
+            return
+        }
+
+        const nextIndex = currentViewIndex.value + direction
+        const nextItem = items.value[nextIndex]
+
+        if (!nextItem) {
+            return
+        }
+
+        currentViewIndex.value = nextIndex
+        openItemAt(operation.value, nextItem, nextIndex)
+    }
+
 
     async function doPaginate() {
         store.setLoading(true)
@@ -524,7 +614,7 @@ export function useCrud(entity: IEntityCrud) {
             (filter: IEntityCrudFilter) =>
                 ({
                     field: filter.name,
-                    value: filter.default ? filter.default : null,
+                    value: createCrudFilterValue(filter),
                     operator: (filter.operator ? filter.operator : 'eq')
                 })
         ) as IDraxFieldFilter[]
@@ -552,13 +642,21 @@ export function useCrud(entity: IEntityCrud) {
         await doPaginate()
     }
 
+    watch(dialog, (value) => {
+        if (!value) {
+            currentViewIndex.value = null
+        }
+    })
+
 
     return {
         doPaginate, doExport, doImport, doUpdate, doCreate, doDelete,
         onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
+        onViewAt, onEditAt, onDeleteAt, navigateView, resolveViewIndex, openItemAt,
         dialog,  notify, error, paginationError, message, formValid,
         form, getForm, setForm,
         operation, getOperation, setOperation,
+        currentViewIndex, canNavigateItems, canNavigatePrev, canNavigateNext,
         loading, itemsPerPage, page, sortBy, search, totalItems, items,
         prepareFilters, filters, clearFilters, applyFilters, prepareSort,
         exportFiles, importFiles, exportLoading, importLoading, exportListVisible, importListVisible, exportError, importError,

package/src/composables/UseCrudColumns.ts

@@ -158,6 +158,16 @@ export function useCrudColumns(entity: IEntityCrud) {
     saveColumnsToStorage(defaultColumns)
   }
 
+  const setVisibleColumns = (columns: string[]) => {
+    const availableHeaders = entity.headers
+      .filter(header => !header.permission || hasPermission(header.permission))
+      .map(header => header.key)
+
+    const validColumns = columns.filter(key => availableHeaders.includes(key))
+    crudStore.setVisibleColumns(validColumns)
+    saveColumnsToStorage(validColumns)
+  }
+
   return {
     visibleColumns,
     translatedHeaders,
@@ -170,5 +180,6 @@ export function useCrudColumns(entity: IEntityCrud) {
     selectAll,
     deselectAll,
     resetToDefault,
+    setVisibleColumns,
   }
 }

package/src/composables/UseDynamicFilters.ts

@@ -171,6 +171,9 @@ export function useDynamicFilters(
                 if (['ref','array.ref'].includes(filter.type) && ['gt', 'gte', 'lt', 'lte', 'like'].includes(op.value)) {
                     return false
                 }
+                if (['date'].includes(filter.type) && ['in', 'nin', 'like'].includes(op.value)) {
+                    return false
+                }
                 return true
             })
         }

package/src/composables/UseFilterIcon.ts

@@ -24,6 +24,8 @@ export function useFilterIcon() {
           return 'mdi-not-equal'
         case 'like':
           return 'mdi-contain'
+        case 'range':
+          return 'mdi-arrow-expand-horizontal'
         default:
           return 'mdi-equal'
       }

package/src/cruds/EntityCrud.ts

@@ -2,8 +2,9 @@ import type {
   IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
   IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
   IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFieldVariant, IDraxFieldFilter,
-  IEntityCrudOnInput
+  IEntityCrudOnInput, IEntityCrudOperation
 } from "@drax/crud-share";
+import {createCrudFilterValue} from "../helpers/CrudRangeFilters";
 
 
 
@@ -138,7 +139,7 @@ class EntityCrud implements IEntityCrud {
   get formFilters(): IDraxFieldFilter[] {
     return this.filters.map(
       (filter: IEntityCrudFilter) =>
-        ({field: filter.name, value: filter.default ? filter.default : null, operator: (filter.operator ? filter.operator : 'eq')})
+        ({field: filter.name, value: createCrudFilterValue(filter), operator: (filter.operator ? filter.operator : 'eq')})
     ) as IDraxFieldFilter[]
   }
 
@@ -224,6 +225,10 @@ class EntityCrud implements IEntityCrud {
     return true
   }
 
+  get isSavedQueriesEnabled(){
+    return false
+  }
+
   get isGroupable() {
     return false
   }
@@ -346,6 +351,10 @@ class EntityCrud implements IEntityCrud {
     return false
   }
 
+  get navigationOperations(): IEntityCrudOperation[] {
+    return ['view']
+  }
+
 }
 
 export default EntityCrud;

package/src/helpers/CrudRangeFilters.test.ts

@@ -0,0 +1,52 @@
+import {describe, expect, it} from "vitest";
+import {
+    createCrudFilterValue,
+    createEmptyDateRangeValue,
+    expandRangeFilters,
+    normalizeDateRangeValue
+} from "./CrudRangeFilters";
+
+describe('CrudRangeFilters', () => {
+    it('creates an empty range value by default', () => {
+        expect(createEmptyDateRangeValue()).toEqual({from: null, to: null})
+    })
+
+    it('normalizes invalid range values to an empty range', () => {
+        expect(normalizeDateRangeValue(null)).toEqual({from: null, to: null})
+        expect(normalizeDateRangeValue('2026-01-01')).toEqual({from: null, to: null})
+    })
+
+    it('uses an empty object for range filters without default', () => {
+        expect(createCrudFilterValue({
+            name: 'birthdate',
+            type: 'date',
+            label: 'birthdate',
+            default: undefined,
+            operator: 'range'
+        })).toEqual({from: null, to: null})
+    })
+
+    it('expands range filters into gte and lte filters', () => {
+        const from = new Date('2026-01-10T00:00:00.000Z')
+        const to = new Date('2026-01-20T00:00:00.000Z')
+
+        expect(expandRangeFilters([{
+            field: 'birthdate',
+            operator: 'range',
+            value: {from, to}
+        }])).toEqual([
+            {field: 'birthdate', operator: 'gte', value: from},
+            {field: 'birthdate', operator: 'lte', value: to}
+        ])
+    })
+
+    it('omits empty range bounds when expanding', () => {
+        expect(expandRangeFilters([{
+            field: 'birthdate',
+            operator: 'range',
+            value: {from: null, to: '2026-01-20'}
+        }])).toEqual([
+            {field: 'birthdate', operator: 'lte', value: '2026-01-20'}
+        ])
+    })
+})

package/src/helpers/CrudRangeFilters.ts

@@ -0,0 +1,84 @@
+import type {IDraxFieldFilter, IEntityCrudFilter} from "@drax/crud-share";
+
+interface ICrudDateRangeValue {
+    from: Date | string | null
+    to: Date | string | null
+}
+
+function createEmptyDateRangeValue(): ICrudDateRangeValue {
+    return {
+        from: null,
+        to: null
+    }
+}
+
+function isRangeOperator(filter?: Pick<IEntityCrudFilter, 'operator'> | Pick<IDraxFieldFilter, 'operator'> | null): boolean {
+    return filter?.operator === 'range'
+}
+
+function normalizeDateRangeValue(value: any): ICrudDateRangeValue {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return createEmptyDateRangeValue()
+    }
+
+    return {
+        from: value.from ?? null,
+        to: value.to ?? null
+    }
+}
+
+function createCrudFilterValue(filter: IEntityCrudFilter) {
+    if (filter.operator === 'range') {
+        if (filter.default === undefined) {
+            return createEmptyDateRangeValue()
+        }
+
+        return normalizeDateRangeValue(filter.default)
+    }
+
+    return filter.default !== undefined ? filter.default : null
+}
+
+function expandRangeFilters(filters: Array<IDraxFieldFilter | IEntityCrudFilter>): IDraxFieldFilter[] {
+    return filters.flatMap((filter) => {
+        if (!isRangeOperator(filter)) {
+            return [{
+                field: 'field' in filter ? filter.field : filter.name,
+                operator: filter.operator ? filter.operator : 'eq',
+                value: filter.value
+            }]
+        }
+
+        const rangeValue = normalizeDateRangeValue(filter.value)
+        const fieldName = 'field' in filter ? filter.field : filter.name
+        const expandedFilters: IDraxFieldFilter[] = []
+
+        if (rangeValue.from !== null && rangeValue.from !== undefined && rangeValue.from !== '') {
+            expandedFilters.push({
+                field: fieldName,
+                operator: 'gte',
+                value: rangeValue.from
+            })
+        }
+
+        if (rangeValue.to !== null && rangeValue.to !== undefined && rangeValue.to !== '') {
+            expandedFilters.push({
+                field: fieldName,
+                operator: 'lte',
+                value: rangeValue.to
+            })
+        }
+
+        return expandedFilters
+    })
+}
+
+export {
+    createCrudFilterValue,
+    createEmptyDateRangeValue,
+    expandRangeFilters,
+    isRangeOperator,
+    normalizeDateRangeValue
+}
+
+export type {ICrudDateRangeValue}

package/src/index.ts

@@ -2,6 +2,7 @@ import Crud from "./components/Crud.vue";
 import CrudDialog from "./components/CrudDialog.vue";
 import CrudForm from "./components/CrudForm.vue";
 import CrudFormField from "./components/CrudFormField.vue";
+import CrudFieldRange from "./components/CrudFieldRange.vue";
 import CrudFormList from "./components/CrudFormList.vue";
 import CrudList from "./components/CrudList.vue";
 import CrudListTable from "./components/CrudListTable.vue";
@@ -11,6 +12,7 @@ import CrudFiltersAction from "./components/CrudFiltersAction.vue";
 import CrudNotify from "./components/CrudNotify.vue";
 import CrudSearch from "./components/CrudSearch.vue";
 import CrudAutocomplete from "./components/CrudAutocomplete.vue";
+import CrudSavedQueriesButton from "./components/buttons/CrudSavedQueriesButton.vue";
 import EntityCombobox from "./components/combobox/EntityCombobox.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
 import {useEntityStore} from "./stores/UseEntityStore";
@@ -26,6 +28,7 @@ export {
     CrudDialog,
     CrudForm,
     CrudFormField,
+    CrudFieldRange,
     CrudFormList,
     CrudList,
     CrudListTable,
@@ -33,6 +36,7 @@ export {
     CrudNotify,
     CrudSearch,
     CrudAutocomplete,
+    CrudSavedQueriesButton,
     CrudFilters,
     CrudFiltersAction,
     useCrud,

package/src/stores/UseCrudStore.ts

@@ -5,6 +5,7 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
     state: () => (
         {
             operation: null as IEntityCrudOperation,
+            currentViewIndex: null as number | null,
             dialog: false as boolean,
             form: {} as any,
             formValid: {} as any,
@@ -79,6 +80,9 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
         setOperation(operation: IEntityCrudOperation) {
             this.operation = operation
         },
+        setCurrentViewIndex(index: number | null) {
+            this.currentViewIndex = index
+        },
         setDialog(dialog: boolean) {
             this.dialog = dialog
         },