From 25d1fa25dd0a0f137c176aa85365ac22fef49791 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Fri, 24 Jan 2025 06:45:18 +0300
Subject: [PATCH] feat: add add card to favorite

---
 src/App.vue                 | 18 +++++++++++++++---
 src/components/Card.vue     |  1 +
 src/components/CardList.vue | 13 ++++++++-----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ecbc5cc..381bad5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, reactive, ref, watch } from 'vue'
+import { onMounted, provide, reactive, ref, watch } from 'vue'
   import Header from '@/components/Header.vue'
   import CardList from '@/components/CardList.vue'
   import Drawer from '@/components/Drawer.vue'
@@ -34,9 +34,17 @@ import { onMounted, reactive, ref, watch } from 'vue'
     }
   }
 
-
   onMounted(fetchItems)
   watch(filters,  fetchItems)
+
+  const addItemToFavorite = async (item) => {
+    try {
+      item.isFavorite = !item.isFavorite;
+      await axios.patch(`${import.meta.env.VITE_API_URL}/items/${item.id}`, item);
+    } catch (e) {
+      console.log('Error', e)
+    }
+  }
 </script>
 <template>
   <Drawer v-if="showDrawer"/>
@@ -71,7 +79,11 @@ import { onMounted, reactive, ref, watch } from 'vue'
       </div>
 
       <div v-else>
-        <CardList v-if="items.length > 0" :items="items" />
+        <CardList
+          v-if="items.length > 0"
+          :items="items"
+          @addToFavorite="addItemToFavorite"
+        />
         <h2 v-else>Пусто</h2>
       </div>
 
diff --git a/src/components/Card.vue b/src/components/Card.vue
index 2db31c7..1e37ffe 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -3,6 +3,7 @@
 
   defineProps({
     imageUrl: String,
+    id: Number,
     title: String,
     price: Number,
     isAdded: Boolean,
diff --git a/src/components/CardList.vue b/src/components/CardList.vue
index 1dc075f..46e4748 100644
--- a/src/components/CardList.vue
+++ b/src/components/CardList.vue
@@ -5,13 +5,13 @@
     alert('Добавлено в корзину')
   }
 
-  const onClickFavorite = () => {
-    alert('Добавлено в Избранное')
-  }
-
   defineProps({
     items: Array
   })
+
+  defineEmits([
+    'addToFavorite',
+  ])
 </script>
 
 <template>
@@ -19,11 +19,14 @@
     <Card
       v-for="item in items"
       :key="item.id"
+      :id="item.id"
       :image-url="item.imageUrl"
       :title="item.title"
       :price="item.price"
+      :is-added="item.isAdded"
+      :is-favorite="item.isFavorite"
       :on-click-add="onClickAdd"
-      :on-click-favorite="onClickFavorite"
+      :on-click-favorite="() => $emit('addToFavorite', item)"
     />
   </div>
 </template>