diff --git a/src/components/VnTable/VnContextMenu.vue b/src/components/VnTable/VnContextMenu.vue new file mode 100644 index 000000000..c20c213f5 --- /dev/null +++ b/src/components/VnTable/VnContextMenu.vue @@ -0,0 +1,136 @@ + + + +es: + Filter by selection: Filtro por selección + Exclude selection: Excluir selección + Remove filter: Quitar filtro por selección + Remove all filters: Eliminar todos los filtros + Copy value: Copiar valor + diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue index bdba421da..13a345b48 100644 --- a/src/components/VnTable/VnFilter.vue +++ b/src/components/VnTable/VnFilter.vue @@ -136,6 +136,9 @@ async function addFilter(value, name) { value = value === '' ? undefined : value; let field = columnFilter.value?.name ?? $props.column.name ?? name; + delete arrayData.store?.userParams?.[field]; + delete arrayData.store?.filter?.where?.[field]; + if (columnFilter.value?.inWhere) { if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field; return await arrayData.addFilterWhere({ [field]: value }); diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index 1c77d9962..eeb500c6d 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -33,6 +33,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue'; import VnTableFilter from './VnTableFilter.vue'; import { getColAlign } from 'src/composables/getColAlign'; import RightMenu from '../common/RightMenu.vue'; +import VnContextMenu from './VnContextMenu.vue'; import VnScroll from '../common/VnScroll.vue'; import VnCheckboxMenu from '../common/VnCheckboxMenu.vue'; import VnCheckbox from '../common/VnCheckbox.vue'; @@ -182,8 +183,9 @@ const app = inject('app'); const tableHeight = useTableHeight(); const vnScrollRef = ref(null); -const editingRow = ref(null); -const editingField = ref(null); +const editingRow = ref(); +const editingField = ref(); +const contextMenuRef = ref({}); const isTableMode = computed(() => mode.value == TABLE_MODE); const selectRegex = /select/; const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']); @@ -220,6 +222,10 @@ onBeforeMount(() => { onMounted(async () => { if ($props.isEditable) document.addEventListener('click', clickHandler); + document.addEventListener('contextmenu', (event) => { + event.preventDefault(); + contextMenuRef.value.handler(event); + }); mode.value = quasar.platform.is.mobile && !$props.disableOption?.card ? CARD_MODE @@ -243,6 +249,7 @@ onMounted(async () => { onUnmounted(async () => { if ($props.isEditable) document.removeEventListener('click', clickHandler); + document.removeEventListener('contextmenu', {}); }); watch( @@ -852,6 +859,7 @@ const handleHeaderSelection = (evt, data) => { ]" :data-row-index="rowIndex" :data-col-field="col?.name" + :data-col-value="row?.[col?.name]" >
{ +
{{ getLocale(`${tag.label}`) }}: - {{ formatFn(tag.value) }} + {{ formatFn(tag) }}