erp-city-vue-components 0.1.0 → 0.1.1

package/README.md

@@ -8,10 +8,10 @@ Designed to integrate with `erp-city` and `erp-city-client`:
 
 ## Install
 
-Local development (recommended in monorepo-style):
+Install from npm:
 
 ```bash
-npm install ../erp-city-vue-components
+npm install erp-city-vue-components
 ```
 
 Or add to your app `package.json`:
@@ -19,7 +19,7 @@ Or add to your app `package.json`:
 ```json
 {
   "dependencies": {
-    "erp-city-vue-components": "file:../erp-city-vue-components"
+    "erp-city-vue-components": "^0.1.0"
   }
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "erp-city-vue-components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./src/index.js",
   "exports": {

package/src/components/FavoritesSidebar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import FavoriteProductCard from './FavoriteProductCard.vue';
 import { favoritesState } from '../state/favoritesState.js';
 import { productsState } from '../state/productsState.js';
@@ -18,6 +18,18 @@ onMounted(() => {
         favoritesState.fetchFavorites();
     }
 });
+
+watch(
+    () => favoritesState.ids.length,
+    (count) => {
+        if (!count) {
+            return;
+        }
+
+        productsState.ensureLoaded();
+    },
+    { immediate: true },
+);
 </script>
 
 <template>

package/src/state/productsState.js

@@ -4,13 +4,46 @@ import { route } from 'ziggy-js';
 
 export const productsState = reactive({
     products: [],
+    loading: false,
+    error: null,
+    loaded: false,
 
     getProduct(id) {
         return this.products.find(product => product.id === id);
     },
 
     async loadProducts() {
-        const { data } = await axios.get(route('products.index'));
-        this.products = data;
-    }
+        this.loading = true;
+        this.error = null;
+
+        try {
+            const { data } = await axios.get(route('products.index'));
+            this.products = Array.isArray(data) ? data : [];
+            this.loaded = true;
+        } catch (error) {
+            this.error = error?.response?.data?.message || 'Nu am putut încărca produsele.';
+            throw error;
+        } finally {
+            this.loading = false;
+        }
+    },
+
+    async ensureLoaded() {
+        if (this.loaded || this.loading) {
+            return;
+        }
+
+        try {
+            await this.loadProducts();
+        } catch (error) {
+            // Errors are stored on state; callers can check productsState.error.
+        }
+    },
+
+    reset() {
+        this.products = [];
+        this.loading = false;
+        this.error = null;
+        this.loaded = false;
+    },
 });