feat: search component and loading splashscreen

spa/src/stores/ProductsStore.js

@@ -37,6 +37,7 @@ export const useProductsStore = defineStore('products', {
             this.page = 1;
             this.hasMore = true;
             this.loadFinished = false;
+            this.search = '';
             this.products = {
                 data: [],
                 meta: {},

spa/src/stores/SearchStore.js

@@ -0,0 +1,51 @@
+import {defineStore} from "pinia";
+import ftch from "@/utils/ftch.js";
+
+export const useSearchStore = defineStore('search', {
+
+    state: () => ({
+        search: '',
+        page: 1,
+        products: {
+            data: [],
+            meta: {},
+        },
+
+        isLoading: false,
+        isSearchPerformed: false,
+    }),
+
+    actions: {
+        reset() {
+            this.search = '';
+            this.isSearchPerformed = false;
+            this.isLoading = false;
+            this.page = 1;
+            this.products = {
+                data: [],
+                meta: {},
+            };
+        },
+
+        async performSearch() {
+            if (!this.search) {
+                return this.reset();
+            }
+
+            try {
+                this.isLoading = true;
+                this.products = await ftch('products', {
+                    page: this.page,
+                    perPage: 10,
+                    search: this.search,
+                });
+            } catch (error) {
+                console.error(error);
+            } finally {
+                this.isLoading = false;
+                this.isSearchPerformed = true;
+            }
+        },
+    },
+
+});

spa/src/stores/SettingsStore.js

@@ -22,6 +22,7 @@ export const useSettingsStore = defineStore('settings', {
 
     actions: {
         async load() {
+            console.log('Load settings');
             const settings = await fetchSettings();
             this.manifest_url = settings.manifest_url;
             this.app_name = settings.app_name;