refs #6595 fix: VnSelectFilter fix: invoiceIn

src/components/FetchData.vue

@@ -30,7 +30,7 @@ const $props = defineProps({
     params: {
         type: Object,
         default: null,
-    }
+    },
 });
 
 const emit = defineEmits(['onFetch']);
@@ -42,9 +42,9 @@ onMounted(async () => {
     }
 });
 
-async function fetch() {
+async function fetch(fetchFilter = {}) {
     try {
-        const filter = Object.assign({}, $props.filter); // eslint-disable-line vue/no-dupe-keys
+        const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
         if ($props.where) filter.where = $props.where;
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;

src/components/common/VnSelectFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs, computed } from 'vue';
+import { ref, toRefs, computed, watch } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -23,13 +23,31 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    defaultFilter: {
+        type: Boolean,
+        default: true,
+    },
 });
 
-const { optionLabel } = toRefs($props);
+const { optionLabel, options } = toRefs($props);
 const myOptions = ref([]);
-const myOptionsOriginal = computed(() => $props.options);
+const myOptionsOriginal = ref([]);
-const vnSelectRef = ref(null);
+const vnSelectRef = ref();
 
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+function setOptions(data) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
+setOptions(options.value);
 const filter = (val, options) => {
     const search = val.toString().toLowerCase();
 
@@ -53,7 +71,8 @@ const filter = (val, options) => {
 const filterHandler = (val, update) => {
     update(
         () => {
-            myOptions.value = filter(val, myOptionsOriginal.value);
+            if ($props.defaultFilter)
+                myOptions.value = filter(val, myOptionsOriginal.value);
         },
         (ref) => {
             if (val !== '' && ref.options.length > 0) {
@@ -64,13 +83,8 @@ const filterHandler = (val, update) => {
     );
 };
 
-const value = computed({
+watch(options, (newValue) => {
-    get() {
+    setOptions(newValue);
-        return $props.modelValue;
-    },
-    set(value) {
-        emit('update:modelValue', value);
-    },
 });
 </script>
 

src/i18n/en/index.js

@@ -109,6 +109,7 @@ export default {
     customer: {
         pageTitles: {
             customers: 'Customers',
+            create: 'Create',
             list: 'List',
             webPayments: 'Web Payments',
             extendedList: 'Extended list',

src/i18n/es/index.js

@@ -109,6 +109,7 @@ export default {
     customer: {
         pageTitles: {
             customers: 'Clientes',
+            create: 'Crear',
             list: 'Listado',
             webPayments: 'Pagos Web',
             extendedList: 'Listado extendido',

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -1,13 +1,11 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
-import { getUrl } from 'composables/getUrl';
 import { tMobile } from 'composables/tMobile';
-import router from 'src/router';
 
 const route = useRoute();
 
@@ -21,11 +19,6 @@ const claimRedeliveries = ref([]);
 const workers = ref([]);
 const selected = ref([]);
 const saveButtonRef = ref();
-let salixUrl;
-
-onMounted(async () => {
-    salixUrl = await getUrl(`claim/${route.params.id}`);
-});
 
 const developmentsFilter = {
     fields: [

src/pages/Customer/Card/CustomerCard.vue

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -28,11 +29,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Customer/CustomerCreate.vue

@@ -8,6 +8,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 
@@ -74,11 +75,7 @@ const onPostcodeCreated = async () => {
         url="Countries"
     />
     <QPage>
-        <QToolbar class="bg-vn-dark">
+        <VnSubToolbar />
-            <div id="st-data"></div>
-            <QSpace />
-            <div id="st-actions"></div>
-        </QToolbar>
         <FormModel
             :form-initial-data="newClientForm"
             :observe-form-changes="false"

src/pages/Customer/Notifications/CustomerNotifications.vue

@@ -9,6 +9,7 @@ import { useStateStore } from 'stores/useStateStore';
 
 import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
 import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -102,11 +103,7 @@ const selectCustomerId = (id) => {
         </QScrollArea>
     </QDrawer>
 
-    <QToolbar class="bg-vn-dark">
+    <VnSubToolbar />
-        <div id="st-data"></div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
 
     <QPage class="column items-center q-pa-md">
         <QTable

src/pages/Department/Card/DepartmentCard.vue

@@ -2,6 +2,7 @@
 import { useStateStore } from 'stores/useStateStore';
 import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 </script>
@@ -15,11 +16,8 @@ const stateStore = useStateStore();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
+
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md column items-center">
                 <RouterView></RouterView>
             </div>

src/pages/Entry/Card/EntryCard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 </script>
@@ -15,11 +16,8 @@ const stateStore = useStateStore();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
+
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Entry/EntryCreate.vue

@@ -7,6 +7,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { toDate } from 'src/filters';
 
@@ -51,11 +52,7 @@ const companiesOptions = ref([]);
     <!-- Agregar searchbar de entries -->
 
     <QPage>
-        <QToolbar class="bg-vn-dark justify-end">
+        <VnSubToolbar />
-            <div id="st-data"></div>
-            <QSpace />
-            <div id="st-actions"></div>
-        </QToolbar>
         <FormModel url-create="Entries" model="entry" :form-initial-data="newEntryForm">
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -23,6 +23,7 @@ const userConfig = ref(null);
 
 const suppliers = ref([]);
 const suppliersRef = ref();
+const suppliersRefFilter = ref({ fields: ['id', 'nickname'], limit: 30 });
 const currencies = ref([]);
 const currenciesRef = ref();
 const companies = ref([]);
@@ -130,13 +131,36 @@ async function upsert() {
         });
     }
 }
+
+function supplierRefFilter(val) {
+    let where = { limit: 30 };
+    let params = {};
+    let key = 'nickname';
+
+    if (new RegExp(/\d/g).test(val)) {
+        key = 'id';
+    }
+    params = { [key]: { like: `%${val}%` } };
+    where = Object.assign(where, params);
+    suppliersRef.value.fetch({ where });
+}
+function currencyRefFilter(val) {
+    let where = { limit: 30 };
+    let params = {};
+    let key = 'code';
+
+    if (new RegExp(/\d/g).test(val)) {
+        key = 'id';
+    }
+    params = { [key]: { like: `%${val}%` } };
+    where = Object.assign(where, params);
+    currenciesRef.value.fetch({ where });
+}
 </script>
 <template>
     <FetchData
         ref="suppliersRef"
         url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        limit="30"
         @on-fetch="(data) => (suppliers = data)"
     />
     <FetchData
@@ -189,7 +213,8 @@ async function upsert() {
                         option-value="id"
                         option-label="nickname"
                         :input-debounce="100"
-                        @input-value="suppliersRef.fetch()"
+                        @input-value="supplierRefFilter"
+                        :default-filter="false"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -406,7 +431,9 @@ async function upsert() {
                         :options="currencies"
                         option-value="id"
                         option-label="code"
-                        @input-value="currenciesRef.fetch()"
+                        :input-debounce="100"
+                        :default-filter="false"
+                        @input-value="currencyRefFilter"
                     />
                 </div>
                 <div class="col">
@@ -417,7 +444,6 @@ async function upsert() {
                         :options="companies"
                         option-value="id"
                         option-label="code"
-                        @input-value="companiesRef.fetch()"
                     />
                 </div>
             </div>
@@ -459,7 +485,6 @@ async function upsert() {
                         :options="companies"
                         option-value="id"
                         option-label="code"
-                        @input-value="companiesRef.fetch()"
                         :rules="[requiredFieldRule]"
                     />
                 </QItem>
@@ -471,7 +496,6 @@ async function upsert() {
                         :options="warehouses"
                         option-value="id"
                         option-label="name"
-                        @input-value="warehousesRef.fetch()"
                         :rules="[requiredFieldRule]"
                     />
                     <VnSelectFilter
@@ -481,7 +505,6 @@ async function upsert() {
                         :options="dmsTypes"
                         option-value="id"
                         option-label="name"
-                        @input-value="dmsTypesRef.fetch()"
                         :rules="[requiredFieldRule]"
                     />
                 </QItem>
@@ -571,7 +594,6 @@ async function upsert() {
                         :options="companies"
                         option-value="id"
                         option-label="code"
-                        @input-value="companiesRef.fetch()"
                         :rules="[requiredFieldRule]"
                     />
                 </QItem>
@@ -583,7 +605,6 @@ async function upsert() {
                         :options="warehouses"
                         option-value="id"
                         option-label="name"
-                        @input-value="warehousesRef.fetch()"
                         :rules="[requiredFieldRule]"
                     />
                     <VnSelectFilter
@@ -593,7 +614,6 @@ async function upsert() {
                         :options="dmsTypes"
                         option-value="id"
                         option-label="name"
-                        @input-value="dmsTypesRef.fetch()"
                         :rules="[requiredFieldRule]"
                     />
                 </QItem>

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
@@ -74,11 +75,7 @@ onMounted(async () => {
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -6,6 +6,7 @@ import { QCheckbox, QBtn } from 'quasar';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { toCurrency } from 'src/filters';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
@@ -225,11 +226,7 @@ const selectWorkerId = (id) => {
             <InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
         </QScrollArea>
     </QDrawer>
-    <QToolbar class="bg-vn-dark">
+    <VnSubToolbar />
-        <div id="st-data"></div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"

src/pages/Order/Card/OrderCard.vue

@@ -2,6 +2,7 @@
 import LeftMenu from 'components/LeftMenu.vue';
 import { useStateStore } from 'stores/useStateStore';
 import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 </script>
@@ -15,6 +16,7 @@ const stateStore = useStateStore();
     </QDrawer>
     <QPageContainer>
         <QPage>
+            <VnSubToolbar />
             <RouterView></RouterView>
         </QPage>
     </QPageContainer>

src/pages/Order/Card/OrderForm.vue

@@ -9,6 +9,7 @@ import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -105,18 +106,13 @@ const orderFilter = {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data"></div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
     <FetchData
         url="Clients"
         @on-fetch="(data) => (clientList = data)"
         :filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
         auto-load
     />
-
+    <VnSubToolbar v-if="isNew" />
     <div class="q-pa-md">
         <FormModel
             :url="!isNew ? `Orders/${route.params.id}` : null"

src/pages/Supplier/Card/SupplierCard.vue

@@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -27,11 +28,8 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
+
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -78,11 +78,11 @@ const setData = (entity) => {
             <VnLv label="Alias" :value="entity.nickname" />
             <VnLv
                 :label="t('supplier.summary.payMethod')"
-                :value="entity.payMethod.name"
+                :value="entity?.payMethod?.name"
             />
             <VnLv
                 :label="t('supplier.summary.payDeadline')"
-                :value="entity.payDem.payDem"
+                :value="entity?.payDem?.payDem"
             />
             <VnLv :label="t('supplier.summary.payDay')" :value="entity.payDay" />
             <VnLv :label="t('supplier.summary.account')" :value="entity.account" />

src/pages/Supplier/SupplierCreate.vue

@@ -5,6 +5,7 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 
@@ -28,11 +29,7 @@ const newSupplierForm = reactive({
     </template>
 
     <QPage>
-        <QToolbar class="bg-vn-dark justify-end">
+        <VnSubToolbar />
-            <div id="st-data"></div>
-            <QSpace />
-            <div id="st-actions"></div>
-        </QToolbar>
         <FormModel
             url-create="Suppliers/newSupplier"
             model="supplier"

src/pages/Ticket/Card/TicketCard.vue

@@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,11 +27,8 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
+
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Travel/Card/TravelCard.vue

@@ -2,6 +2,7 @@
 import { useStateStore } from 'stores/useStateStore';
 import TravelDescriptor from './TravelDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 </script>
@@ -15,11 +16,8 @@ const stateStore = useStateStore();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
+
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Travel/TravelCreate.vue

@@ -8,7 +8,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { toDate } from 'src/filters';
 
 const { t } = useI18n();
@@ -57,11 +57,7 @@ onBeforeMount(() => {
         auto-load
     />
     <QPage>
-        <QToolbar class="bg-vn-dark">
+        <VnSubToolbar />
-            <div id="st-data"></div>
-            <QSpace />
-            <div id="st-actions"></div>
-        </QToolbar>
         <FormModel
             url-update="Travels"
             model="travel"

src/pages/Worker/Card/WorkerCard.vue

@@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import WorkerDescriptor from './WorkerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,11 +27,8 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
+
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Worker/WorkerCreate.vue

@@ -11,6 +11,7 @@ import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useUserConfig } from 'src/composables/useUserConfig';
 
@@ -122,11 +123,7 @@ onMounted(async () => {
     />
 
     <QPage>
-        <QToolbar class="bg-vn-dark">
+        <VnSubToolbar />
-            <div id="st-data"></div>
-            <QSpace />
-            <div id="st-actions"></div>
-        </QToolbar>
         <FormModel
             url-create="Workers/new"
             model="worker"

src/stores/useNavigationStore.js

@@ -19,7 +19,6 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'route',
         'supplier',
         'travel',
-        'invoiceIn',
         'entry',
     ];
     const pinnedModules = ref([]);