salix-front/src/components/common/VnCheckboxMenu.vue

105 lines
3.0 KiB
Vue

<script setup>
import { ref } from 'vue';
import VnCheckbox from './VnCheckbox.vue';
import axios from 'axios';
import { toRaw } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
const route = useRoute();
const { t } = useI18n();
const model = defineModel({ type: [Boolean] });
const props = defineProps({
url: {
type: String,
required: true,
},
searchUrl: {
type: [String, Boolean],
default: 'table',
},
});
const menuRef = ref(null);
const errorMessage = ref(null);
const rows = ref(0);
const onClick = async () => {
errorMessage.value = null;
const { filter } = JSON.parse(route.query[props.searchUrl]);
filter.limit = 0;
const params = {
params: { filter: JSON.stringify(filter) },
};
try {
const { data } = axios.get(props.url, params);
rows.value = data;
} catch (error) {
const response = error.response;
if (response.data.error.name === 'UserError') {
errorMessage.value = t('tooManyResults');
} else {
errorMessage.value = response.data.error.message;
}
}
};
defineEmits(['update:selected', 'select:all']);
</script>
<template>
<QIcon
style="margin-left: -10px"
data-cy="btnMultiCheck"
name="expand_more"
@click="onClick"
class="cursor-pointer"
color="primary"
size="xs"
>
<QMenu
fit
anchor="bottom start"
self="top left"
ref="menuRef"
data-cy="menuMultiCheck"
>
<QList separator>
<QItem
data-cy="selectAll"
v-ripple
clickable
@click="
$refs.menuRef.hide();
$emit('select:all', toRaw(rows));
"
>
<QItemSection>
<QItemLabel>
<span v-text="t('Select all')" />
</QItemLabel>
<QItemLabel overline caption>
<span
v-if="errorMessage"
class="text-negative"
v-text="errorMessage"
/>
<span
v-else
v-text="t('records', { rows: rows.length ?? 0 })"
/>
</QItemLabel>
</QItemSection>
</QItem>
<slot name="more-options"></slot>
</QList>
</QMenu>
</QIcon>
</template>
<i18n lang="yml">
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'
</i18n>