feat: add error handling and append slot to VnMultiCheck component

src/components/common/VnCheckbox.vue

@@ -43,5 +43,6 @@ const checkboxModel = computed({
                 {{ info }}
             </QTooltip>
         </QIcon>
+        <slot name="append"></slot>
     </div>
 </template>

src/components/common/VnMultiCheck.vue

@@ -15,7 +15,6 @@ const props = defineProps({
     },
     url: {
         type: String,
-        default: null,
         required: true,
     },
     searchUrl: {
@@ -24,6 +23,8 @@ const props = defineProps({
     },
 });
 const value = ref(false);
+const menuRef = ref(null);
+const errorMessage = ref(null);
 const rows = ref(0);
 const onClick = () => {
     if (value.value) {
@@ -37,7 +38,11 @@ const onClick = () => {
             .then(({ data }) => {
                 rows.value = data;
             })
-            .catch(console.error);
+            .catch(({ response }) => {
+                if (response.data.error.name === 'UserError') {
+                    errorMessage.value = t('tooManyResults');
+                } else errorMessage.value = response.data.error.message;
+            });
     }
 };
 defineEmits(['update:selected', 'select:all']);
@@ -45,36 +50,63 @@ defineEmits(['update:selected', 'select:all']);
 
 <template>
     <div style="display: flex">
-        <VnCheckbox v-model="value" @click="$emit('update:selected', value)" />
-        <QBtn
+        <VnCheckbox v-model="value" @click="$emit('update:selected', value)">
+            <template #append>
+                <QIcon
+                    data-cy="btnMultiCheck"
                     v-if="value && $props.expand"
-            flat
-            dense
-            icon="expand_more"
+                    name="expand_more"
                     @click="onClick"
+                    class="cursor-pointer"
                 >
-            <QMenu anchor="bottom right" self="top right">
-                <QList>
-                    <QItem v-ripple clickable @click="$emit('select:all', toRaw(rows))">
-                        {{ t('Select all', { rows: rows.length }) }}
+                    <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 })"
+                                        />
+                                    </QItemLabel>
+                                </QItemSection>
                             </QItem>
                             <slot name="more-options"></slot>
                         </QList>
                     </QMenu>
-        </QBtn>
+                </QIcon>
+            </template>
+        </VnCheckbox>
     </div>
 </template>
 <i18n lang="yml">
 en:
-    Select all: 'Select all ({rows})'
-fr:
-    Select all: 'Sélectionner tout ({rows})'
+    tooManyResults: Too many results. Please narrow down your search.
+    records: '{rows} records'
 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})'
+    Select all: Seleccionar todo
+    tooManyResults: Demasiados registros. Restringe la búsqueda.
+    records: '{rows} registros'
 </i18n>