src/components/VnTable/VnTableFilter.vue

@@ -27,7 +27,7 @@ function columnName(col) {
 </script>
 <template>
     <VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
-        <template #body="{ params, orders }">
+        <template #body="{ params, orders, searchFn }">
             <div
                 class="row no-wrap flex-center"
                 v-for="col of columns.filter((c) => c.columnFilter ?? true)"
@@ -52,6 +52,7 @@ function columnName(col) {
             <slot
                 name="moreFilterPanel"
                 :params="params"
+                :search-fn="searchFn"
                 :orders="orders"
                 :columns="columns"
             />

src/components/common/VnSection.vue

@@ -106,7 +106,14 @@ function checkIsMain() {
                     :data-key="dataKey"
                     :array-data="arrayData"
                     :columns="columns"
-                />
+                >
+                    <template #moreFilterPanel="{ params, orders, searchFn }">
+                        <slot
+                            name="moreFilterPanel"
+                            v-bind="{ params, orders, searchFn }"
+                        />
+                    </template>
+                </VnTableFilter>
             </slot>
         </template>
     </RightAdvancedMenu>

src/i18n/locale/en.yml

@@ -635,8 +635,8 @@ wagon:
         name: Name
 
 supplier:
-    search: Search provider
-    searchInfo: Search provider by id or name
+    search: Search supplier
+    searchInfo: Search supplier by id or name
     list:
         payMethod: Pay method
         account: Account

src/pages/Customer/Card/CustomerConsumption.vue

@@ -119,7 +119,7 @@ const openSendEmailDialog = async () => {
     openConfirmationModal(
         t('The consumption report will be sent'),
         t('Please, confirm'),
-        () => sendCampaignMetricsEmail({ address: arrayData.store.data.email })
+        () => sendCampaignMetricsEmail({ address: arrayData.store.data.email }),
     );
 };
 const sendCampaignMetricsEmail = ({ address }) => {
@@ -152,7 +152,7 @@ const updateDateParams = (value, params) => {
         v-if="campaignList"
         data-key="CustomerConsumption"
         url="Clients/consumption"
-        :order="['itemTypeFk', 'itemName', 'itemSize', 'description']"        
+        :order="['itemTypeFk', 'itemName', 'itemSize', 'description']"
         :filter="{ where: { clientFk: route.params.id } }"
         :columns="columns"
         search-url="consumption"

src/pages/Supplier/Card/SupplierCard.vue

@@ -1,7 +1,13 @@
 <script setup>
 import SupplierDescriptor from './SupplierDescriptor.vue';
 import VnCardBeta from 'src/components/common/VnCardBeta.vue';
+import filter from './SupplierFilter.js';
 </script>
 <template>
-    <VnCardBeta data-key="Supplier" url="Suppliers" :descriptor="SupplierDescriptor" />
+    <VnCardBeta
+        data-key="Supplier"
+        url="Suppliers"
+        :descriptor="SupplierDescriptor"
+        :filter="filter"
+    />
 </template>

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -16,6 +16,7 @@ import axios from 'axios';
 import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
 import { useArrayData } from 'composables/useArrayData';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const state = useState();
 const stateStore = useStateStore();
@@ -173,59 +174,59 @@ onMounted(async () => {
             </div>
         </div>
     </Teleport>
-    <QPage class="column items-center q-pa-md">
-        <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <SupplierConsumptionFilter data-key="SupplierConsumption" />
-        </Teleport>
-        <QTable
-            :rows="rows"
-            row-key="id"
-            hide-header
-            class="full-width q-mt-md"
-            :no-data-label="t('No results')"
-        >
-            <template #body="{ row }">
-                <QTr>
-                    <QTd no-hover>
-                        <span class="label">{{ t('supplier.consumption.entry') }}: </span>
-                        <span>{{ row.id }}</span>
-                    </QTd>
-                    <QTd no-hover>
-                        <span class="label">{{ t('globals.date') }}: </span>
-                        <span>{{ toDate(row.shipped) }}</span></QTd
-                    >
-                    <QTd colspan="6" no-hover>
-                        <span class="label">{{ t('globals.reference') }}: </span>
-                        <span>{{ row.invoiceNumber }}</span>
-                    </QTd>
-                </QTr>
-                <QTr v-for="(buy, index) in row.buys" :key="index">
-                    <QTd no-hover>
-                        <QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
-                        <ItemDescriptorProxy :id="buy.itemFk" />
-                    </QTd>
+        </template>
+    </RightMenu>
+    <QTable
+        :rows="rows"
+        row-key="id"
+        hide-header
+        class="full-width q-mt-md"
+        :no-data-label="t('No results')"
+    >
+        <template #body="{ row }">
+            <QTr>
+                <QTd no-hover>
+                    <span class="label">{{ t('supplier.consumption.entry') }}: </span>
+                    <span>{{ row.id }}</span>
+                </QTd>
+                <QTd no-hover>
+                    <span class="label">{{ t('globals.date') }}: </span>
+                    <span>{{ toDate(row.shipped) }}</span></QTd
+                >
+                <QTd colspan="6" no-hover>
+                    <span class="label">{{ t('globals.reference') }}: </span>
+                    <span>{{ row.invoiceNumber }}</span>
+                </QTd>
+            </QTr>
+            <QTr v-for="(buy, index) in row.buys" :key="index">
+                <QTd no-hover>
+                    <QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
+                    <ItemDescriptorProxy :id="buy.itemFk" />
+                </QTd>
 
-                    <QTd no-hover>
-                        <span>{{ buy.subName }}</span>
-                        <FetchedTags :item="buy" />
-                    </QTd>
-                    <QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
-                    <QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
-                    <QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
-                </QTr>
-                <QTr>
-                    <QTd colspan="5" no-hover>
-                        <span class="label">{{ t('Total entry') }}: </span>
-                        <span>{{ row.total }} €</span>
-                    </QTd>
-                    <QTd no-hover>
-                        <span class="label">{{ t('Total stems') }}: </span>
-                        <span>{{ row.quantity }}</span>
-                    </QTd>
-                </QTr>
-            </template>
-        </QTable>
-    </QPage>
+                <QTd no-hover>
+                    <span>{{ buy.subName }}</span>
+                    <FetchedTags :item="buy" />
+                </QTd>
+                <QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
+                <QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
+                <QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
+            </QTr>
+            <QTr>
+                <QTd colspan="5" no-hover>
+                    <span class="label">{{ t('Total entry') }}: </span>
+                    <span>{{ row.total }} €</span>
+                </QTd>
+                <QTd no-hover>
+                    <span class="label">{{ t('Total stems') }}: </span>
+                    <span>{{ row.quantity }}</span>
+                </QTd>
+            </QTr>
+        </template>
+    </QTable>
 </template>
 
 <style scoped lang="scss">

src/pages/Supplier/SupplierList.vue

@@ -2,14 +2,15 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnTable from 'components/VnTable/VnTable.vue';
-import SupplierListFilter from './SupplierListFilter.vue';
 import VnSection from 'src/components/common/VnSection.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'src/components/FetchData.vue';
 
 const { t } = useI18n();
 const tableRef = ref();
 const dataKey = 'SupplierList';
-
+const provincesOptions = ref([]);
 const columns = computed(() => [
     {
         align: 'left',
@@ -105,8 +106,12 @@ const columns = computed(() => [
 ]);
 </script>
 <template>
-    <!-- <SupplierListFilter data-key="SuppliersList" /> -->
-
+    <FetchData
+        url="Provinces"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+    />
     <VnSection
         :data-key="dataKey"
         :columns="columns"
@@ -133,13 +138,26 @@ const columns = computed(() => [
                 }"
                 :columns="columns"
                 redirect="supplier"
-            />
+                :right-search="false"
+            >
+                <template #more-create-dialog="{ data }">
+                    <VnInput
+                        :label="t('globals.name')"
+                        v-model="data.socialName"
+                        :uppercase="true"
+                    />
+                </template>
+            </VnTable>
         </template>
-        <template #more-create-dialog="{ data }">
-            <VnInput
-                :label="t('globals.name')"
-                v-model="data.socialName"
-                :uppercase="true"
+        <template #moreFilterPanel="{ params, searchFn }">
+            <VnSelect
+                :label="t('globals.params.provinceFk')"
+                v-model="params.provinceFk"
+                @update:model-value="searchFn()"
+                :options="provincesOptions"
+                filled
+                dense
+                class="q-px-sm q-pr-lg"
             />
         </template>
     </VnSection>

src/pages/Supplier/SupplierListFilter.vue

@@ -1,122 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import FetchData from 'components/FetchData.vue';
-
-const props = defineProps({
-    dataKey: {
-        type: String,
-        required: true,
-    },
-});
-
-const { t } = useI18n();
-
-const provincesOptions = ref([]);
-const countriesOptions = ref([]);
-</script>
-
-<template>
-    <FetchData
-        url="Provinces"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC'}"
-        @on-fetch="(data) => (provincesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="countries"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC'}"
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-    />
-    <VnFilterPanel
-        :data-key="props.dataKey"
-        :search-button="true"
-        :unremovable-params="['supplierFk']"
-    >
-        <template #tags="{ tag, formatFn }">
-            <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
-            </div>
-        </template>
-        <template #body="{ params, searchFn }">
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        v-model="params.search"
-                        :label="t('params.search')"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        v-model="params.nickname"
-                        :label="t('params.nickname')"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput v-model="params.nif" :label="t('params.nif')" is-outlined />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        :label="t('params.provinceFk')"
-                        v-model="params.provinceFk"
-                        @update:model-value="searchFn()"
-                        :options="provincesOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        :label="t('params.countryFk')"
-                        v-model="params.countryFk"
-                        @update:model-value="searchFn()"
-                        :options="countriesOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-        </template>
-    </VnFilterPanel>
-</template>
-
-<i18n>
-en:
-    params:
-        search: General search
-        nickname: Alias
-        nif: Tax number
-        provinceFk: Province
-        countryFk: Country
-es:
-    params:
-        search: Búsqueda general
-        nickname: Alias
-        nif: NIF/CIF
-        provinceFk: Provincia
-        countryFk: País
-</i18n>

src/router/modules/supplier.js

@@ -99,6 +99,15 @@ const supplierCard = {
             component: () =>
                 import('src/pages/Supplier/Card/SupplierAddressesCreate.vue'),
         },
+        {
+            path: 'balance',
+            name: 'SupplierBalance',
+            meta: {
+                title: 'balance',
+                icon: 'balance',
+            },
+            component: () => import('src/pages/Supplier/Card/SupplierBalance.vue'),
+        },
         {
             path: 'consumption',
             name: 'SupplierConsumption',