update

package.json

@@ -10,10 +10,12 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
+        "test:components": "cypress run --component",
         "test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
-        "test:unit:ci": "vitest run"
+        "test:unit:ci": "vitest run",
+        "cypr": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open"
     },
     "dependencies": {
         "@quasar/cli": "^2.3.0",
@@ -34,6 +36,7 @@
         "@quasar/app-vite": "^1.7.3",
         "@quasar/quasar-app-extension-qcalendar": "4.0.0-beta.15",
         "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
+        "@vitest/ui": "^1.6.0",
         "@vue/test-utils": "^2.4.4",
         "autoprefixer": "^10.4.14",
         "cypress": "^13.6.6",

src/components/common/VnSelect.vue

@@ -84,10 +84,21 @@ function setOptions(data) {
 }
 onMounted(() => {
     setOptions(options.value);
-    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
+    console.log(useURL.value);
+    if (useURL.value) {
+        console.log(101);
+        arrayData.store.userFilter = $props.where;
+        arrayData.store.filter.where = $props.where;
+        const { data } = await arrayData.fetch({ append: true });
+        setOptions(data);
+        return;
+    }
+    if ($props.options) setOptions($props.options);
+    else fetchFilter($props.modelValue);
 });
 
 function filter(val, options) {
+    console.log(118);
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
@@ -120,13 +131,29 @@ async function fetchFilter(val) {
 }
 
 async function filterHandler(val, update) {
+    console.log('1');
     if (!$props.defaultFilter) return update();
-    let newOptions;
-    if ($props.url) {
-        newOptions = await fetchFilter(val);
-    } else newOptions = filter(val, myOptionsOriginal.value);
+    let newOptions = [];
+    if (myOptionsFiltered.value.length > 0) {
+        console.log('2');
+        newOptions = filter(val, myOptionsFiltered.value);
+        myOptionsFiltered.value = [];
+    } else {
+        newOptions = filter(val, myOptionsOriginal.value);
+        console.log('3');
+    }
+    if (useURL.value && myOptions.value.length < 1) {
+        console.log('4');
+        arrayData.store.skip = 0;
+        arrayData.store.filter.skip = 0;
+        arrayData.store.filter.where = { [optionFilter.value]: val };
+        const { data } = await arrayData.fetch({ append: false });
+        newOptions = data;
+        myOptionsFiltered.value = data;
+    }
     update(
         () => {
+            console.log('5', newOptions);
             myOptions.value = newOptions;
         },
         (ref) => {

src/composables/useArrayData.js

@@ -1,10 +1,8 @@
 import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-import { useArrayDataStore } from 'stores/useArrayDataStore';
-import { buildFilter } from 'filters/filterPanel';
-
-const arrayDataStore = useArrayDataStore();
+import { useArrayDataStore } from 'src/stores/useArrayDataStore';
+import { buildFilter } from 'src/filters/filterPanel';
 
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
@@ -216,3 +214,5 @@ export function useArrayData(key, userOptions) {
         isLoading,
     };
 }
+
+const arrayDataStore = useArrayDataStore();

src/i18n/locale/en.yml

@@ -41,14 +41,14 @@ globals:
     rowAdded: Row added
     rowRemoved: Row removed
     pleaseWait: Please wait...
-    noPinnedModules: You don't have any pinned modules
+    noPinnedModules: "You don't have any pinned modules"
     summary:
         basicData: Basic data
     today: Today
     yesterday: Yesterday
     dateFormat: en-GB
     microsip: Open in MicroSIP
-    noSelectedRows: You don't have any line selected
+    noSelectedRows: "You don't have any line selected"
     downloadCSVSuccess: CSV downloaded successfully
     reference: Reference
     agency: Agency
@@ -244,7 +244,7 @@ customer:
         risk: Risk
         riskInfo: Invoices minus payments plus orders not yet invoiced
         credit: Credit
-        creditInfo: Company's maximum risk
+        creditInfo: "Company's maximum risk"
         securedCredit: Secured credit
         securedCreditInfo: Solunion's maximum risk
         balance: Balance

src/pages/Item/locale/en.yml

@@ -22,7 +22,7 @@ itemDiary:
     out: Out
     balance: Balance
     claim: Claim
-    showBefore: Show what's before the inventory
+    showBefore: "Show what's before the inventory"
     since: Since
     warehouse: Warehouse
 basicData:

src/pages/Zone/locale/en.yml

@@ -18,7 +18,7 @@ list:
     openSummary: Details
     searchZone: Search zones
     searchInfo: Search zone by id or name
-    confirmCloneTitle: All it's properties will be copied
+    confirmCloneTitle: "All it's properties will be copied"
     confirmCloneSubtitle: Do you want to clone this zone?
 create:
     name: Name

test/cypress/support/component.js

@@ -0,0 +1,51 @@
+import { createTestingPinia } from '@pinia/testing';
+import { mount } from 'cypress/vue';
+import { i18n } from 'src/boot/i18n';
+
+const pinia = createTestingPinia({ createSpy: () => {}, stubActions: false });
+
+// // Run this code before each *test*.
+// beforeEach(() => {
+//     // New Pinia
+//     pinia = createPinia();
+//     console.log(pinia);
+//     // Set current Pinia instance
+//     setActivePinia(pinia);
+// });
+
+function createWrapper(component, options) {
+    const defaultOptions = {
+        global: {
+            plugins: [i18n, pinia],
+        },
+        mocks: {
+            t: (tKey) => tKey,
+            $t: (tKey) => tKey,
+        },
+    };
+
+    const mountOptions = Object.assign({}, defaultOptions);
+
+    if (options instanceof Object) {
+        Object.assign(mountOptions, options);
+
+        if (options.global) {
+            mountOptions.global.plugins = defaultOptions.global.plugins;
+        }
+    }
+
+    const wrapper = mount(component, mountOptions);
+    const vm = wrapper.vm;
+
+    return wrapper;
+}
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       createWrapper: typeof createWrapper;
+//     }
+//   }
+// }
+
+Cypress.Commands.add('createWrapper', createWrapper);
+// Cypress.Commands.add('mount', mount);