Record count

src/components/FetchData.vue

@@ -29,8 +29,8 @@ const $props = defineProps({
     },
 });
 
-defineExpose({ fetch });
 const emit = defineEmits(['onFetch']);
+defineExpose({ fetch });
 
 onMounted(async () => {
     if ($props.autoLoad) {

src/components/Paginate.vue

@@ -44,7 +44,7 @@ const $props = defineProps({
     },
 });
 
-defineEmits(['onNavigate']);
+const emit = defineEmits(['onFetch', 'onPaginate']);
 defineExpose({ refresh });
 
 onMounted(() => {
@@ -116,6 +116,9 @@ async function paginate() {
     pagination.value.descending = descending;
 
     isLoading.value = false;
+
+    emit('onFetch', rows);
+    emit('onPaginate', data);
 }
 
 async function refresh() {
@@ -134,6 +137,8 @@ async function refresh() {
     rows.value = data;
 
     isLoading.value = false;
+
+    emit('onFetch', rows);
 }
 
 async function onLoad(...params) {

src/i18n/en/index.js

@@ -202,7 +202,8 @@ export default {
             state: 'State'
         },
         rmaList: {
-            code: 'Code'
+            code: 'Code',
+            records: 'records'
         },
         rma: {
             user: 'User',

src/i18n/es/index.js

@@ -201,7 +201,8 @@ export default {
             state: 'Estado'
         },
         rmaList: {
-            code: 'Código'
+            code: 'Código',
+            records: 'registros'
         },
         rma: {
             user: 'Usuario',

src/pages/Claim/ClaimRmaList.vue

@@ -8,12 +8,22 @@ import Paginate from 'src/components/Paginate.vue';
 const quasar = useQuasar();
 const { t } = useI18n();
 
+const rmas = ref([]);
 const card = ref(null);
+
+function onFetch(data) {
+    rmas.value = data.value;
+}
+
 const newRma = ref({
     code: '',
     crated: new Date(),
 });
 
+function onInputUpdate(value) {
+    newRma.value.code = value.toUpperCase();
+}
+
 function submit() {
     const formData = newRma.value;
     if (formData.code === '') return;
@@ -62,18 +72,24 @@ function hide() {
         <q-page-sticky expand position="top" :offset="[16, 16]">
             <q-card class="card q-pa-md">
                 <q-form @submit="submit">
-                    <q-input v-model="newRma.code" :label="t('claim.rmaList.code')" class="q-mb-md" autofocus />
+                    <q-input
-                    <!-- <div class="text-caption">$(0) entries</div> -->
+                        v-model="newRma.code"
+                        :label="t('claim.rmaList.code')"
+                        @update:model-value="onInputUpdate"
+                        class="q-mb-md"
+                        autofocus
+                    />
+                    <div class="text-caption">{{ rmas.length }} {{ t('claim.rmaList.records') }}</div>
                 </q-form>
             </q-card>
         </q-page-sticky>
 
-        <paginate ref="card" url="/ClaimRmas" sort-by="id DESC" auto-load>
+        <paginate ref="card" url="/ClaimRmas" @on-fetch="onFetch" sort-by="id DESC" auto-load>
             <template #body="{ rows }">
                 <q-card class="card">
-                    <template v-for="row of rows" :key="row.id">
+                    <template v-for="row of rows" :key="row.code">
                         <q-item class="q-pa-none items-start">
-                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <q-item-section class="q-pa-md">
                                 <q-list>
                                     <q-item class="q-pa-none">
                                         <q-item-section>