diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index 8915500fc..3c431fa14 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -34,7 +34,7 @@ import VnTableFilter from './VnTableFilter.vue'; import { getColAlign } from 'src/composables/getColAlign'; import RightMenu from '../common/RightMenu.vue'; import VnScroll from '../common/VnScroll.vue'; -import VnMultiCheck from '../common/VnMultiCheck.vue'; +import VnCheckboxMenu from '../common/VnCheckboxMenu.vue'; const arrayData = useArrayData(useAttrs()['data-key']); const $props = defineProps({ @@ -644,21 +644,15 @@ const rowCtrlClickFunction = computed(() => { }; return () => {}; }); -const handleMultiCheck = (value) => { - if (value) { +const handleHeaderSelection = (evt, data) => { + if (evt === 'selected' && data) { selected.value = tableRef.value.rows; - } else { - selected.value = []; - } - emit('update:selected', selected.value); -}; - -const handleSelectedAll = (data) => { - if (data) { + } else if (evt === 'selectAll') { selected.value = data; } else { selected.value = []; } + emit('update:selected', selected.value); }; @@ -724,14 +718,14 @@ const handleSelectedAll = (data) => { :data-cy > - + @update:selected="handleHeaderSelection('selected', $event)" + @select:all="handleHeaderSelection('selectAll', $event)" + /> diff --git a/src/components/common/VnCheckboxMenu.vue b/src/components/common/VnCheckboxMenu.vue new file mode 100644 index 000000000..bfb5b4441 --- /dev/null +++ b/src/components/common/VnCheckboxMenu.vue @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +en: + tooManyResults: Too many results. Please narrow down your search. + records: '{rows} records' +es: + Select all: Seleccionar todo + tooManyResults: Demasiados registros. Restringe la búsqueda. + records: '{rows} registros' + diff --git a/src/components/common/VnMultiCheck.vue b/src/components/common/VnMultiCheck.vue deleted file mode 100644 index 19b93ffa9..000000000 --- a/src/components/common/VnMultiCheck.vue +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - - - - - {{ t('Select all', { rows: rows.length }) }} - - - - - - - - -en: - Select all: 'Select all ({rows})' -fr: - Select all: 'Sélectionner tout ({rows})' -es: - Select all: 'Seleccionar todo ({rows})' -de: - Select all: 'Alle auswählen ({rows})' -it: - Select all: 'Seleziona tutto ({rows})' -pt: - Select all: 'Selecionar tudo ({rows})' - diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue index 2cb72261f..97fec882c 100644 --- a/src/components/common/VnSelect.vue +++ b/src/components/common/VnSelect.vue @@ -161,7 +161,7 @@ const arrayData = useArrayData(arrayDataKey, { searchUrl: false, mapKey: $attrs['map-key'], }); - +const isMenuOpened = ref(false); const computedSortBy = computed(() => { return $props.sortBy || $props.optionLabel + ' ASC'; }); @@ -186,7 +186,9 @@ onMounted(() => { if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300); }); -const someIsLoading = computed(() => isLoading.value || !!arrayData?.isLoading?.value); +const someIsLoading = computed( + () => (isLoading.value || !!arrayData?.isLoading?.value) && !isMenuOpened.value, +); function findKeyInOptions() { if (!$props.options) return; return filter($props.modelValue, $props.options)?.length; @@ -369,6 +371,8 @@ function getCaption(opt) { :input-debounce="useURL ? '300' : '0'" :loading="someIsLoading" @virtual-scroll="onScroll" + @popup-hide="isMenuOpened = false" + @popup-show="isMenuOpened = true" @keydown="handleKeyDown" :data-cy="$attrs.dataCy ?? $attrs.label + '_select'" :data-url="url" diff --git a/src/pages/Customer/Notifications/CustomerNotifications.vue b/src/pages/Customer/Notifications/CustomerNotifications.vue index 02792182c..84babe24d 100644 --- a/src/pages/Customer/Notifications/CustomerNotifications.vue +++ b/src/pages/Customer/Notifications/CustomerNotifications.vue @@ -89,7 +89,6 @@ const columns = computed(() => [ diff --git a/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue b/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue index 141a02bfc..36157082b 100644 --- a/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue +++ b/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue @@ -142,13 +142,13 @@ onMounted(async () => { valentinesDay: Valentine's Day mothersDay: Mother's Day allSaints: All Saints' Day - Campaign consumption: Campaign consumption ({rows}) + Campaign consumption: Campaign consumption - {rows} records es: params: valentinesDay: Día de San Valentín mothersDay: Día de la Madre allSaints: Día de Todos los Santos - Campaign consumption: Consumo campaña ({rows}) + Campaign consumption: Consumo campaña - {rows} registros Campaign: Campaña From: Desde To: Hasta