From 5868f6af53bb4a60c4c144e03e15297ec1092a05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D0=BE=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BD=20=D0=A3=D0=BA=D0=BE=D0=BB=D0=BE=D0=B2?=
 <“ukolov.konst@gmail.com”>
Date: Mon, 2 Sep 2024 01:18:24 +0300
Subject: [PATCH] feat: add localStorage

---
 .../product/model/use-product-price.ts        | 34 +++++++++++--------
 src/entities/product/ui/ProductCard.vue       |  4 +--
 src/entities/product/ui/ProductPrice.vue      |  4 +--
 src/features/cart/index.ts                    |  1 +
 src/features/cart/ui/CartButton.vue           | 28 +++++++++++++++
 src/features/cart/ui/index.ts                 |  1 +
 src/widgets/header/ui/Header.vue              | 11 ++----
 7 files changed, 57 insertions(+), 26 deletions(-)
 create mode 100644 src/features/cart/index.ts
 create mode 100644 src/features/cart/ui/CartButton.vue
 create mode 100644 src/features/cart/ui/index.ts

diff --git a/src/entities/product/model/use-product-price.ts b/src/entities/product/model/use-product-price.ts
index 092c53e..23698d7 100644
--- a/src/entities/product/model/use-product-price.ts
+++ b/src/entities/product/model/use-product-price.ts
@@ -13,9 +13,7 @@ export function useProductPrice(variants: CrmVariant[], id: string) {
     count: number
   }[]>('added-items', [])
 
-  const currentPriceForAll = computed(() => currentUnitPrice.value * amount.value)
-
-  const prevUnitPriceForAll = computed(() => prevUnitPrice.value * amount.value)
+  const storageProduct = computed(() => addedItems.value.find(item => item.id === id))
 
   const setInitCurrentPrice = () => {
     currentUnitPrice.value = Number(variants[0].price) / 100
@@ -43,27 +41,35 @@ export function useProductPrice(variants: CrmVariant[], id: string) {
       prevUnitPrice.value = undefined
     }
 
-    if (oldValue === 0 && value > 0) {
-      addedItems.value.push({
-        id,
-        count: value,
-      })
-    }
-
-    if (oldValue > 0 && value === 0) {
+    if (value === 0) {
       addedItems.value = addedItems.value.filter(item => item.id !== id)
 
       setInitCurrentPrice()
+
+      return
     }
+
+    if (storageProduct.value) {
+      storageProduct.value.count = value
+      return
+    }
+
+    addedItems.value.push({
+      id,
+      count: value,
+    })
   })
 
-  setInitCurrentPrice()
+  if (storageProduct.value) {
+    amount.value = storageProduct.value.count
+  }
+  else {
+    setInitCurrentPrice()
+  }
 
   return {
     amount,
     currentUnitPrice,
     prevUnitPrice,
-    currentPriceForAll,
-    prevUnitPriceForAll,
   }
 }
diff --git a/src/entities/product/ui/ProductCard.vue b/src/entities/product/ui/ProductCard.vue
index cf76561..ed620bf 100644
--- a/src/entities/product/ui/ProductCard.vue
+++ b/src/entities/product/ui/ProductCard.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
   product: CrmProduct
 }>()
 
-const { amount, currentUnitPrice, prevUnitPriceForAll, prevUnitPrice } = useProductPrice(props.product.variants || [], props.product.id!)
+const { amount, currentUnitPrice, prevUnitPrice } = useProductPrice(props.product.variants || [], props.product.id!)
 
 function onImageClick() {
   navigateTo(
@@ -32,7 +32,7 @@ function onImageClick() {
           {{ currentUnitPrice }} ₽
         </div>
         <div v-if="prevUnitPrice" class="line-through text-slate-400">
-          {{ prevUnitPriceForAll }} ₽
+          {{ prevUnitPrice }} ₽
         </div>
       </div>
 
diff --git a/src/entities/product/ui/ProductPrice.vue b/src/entities/product/ui/ProductPrice.vue
index aff0798..782fc14 100644
--- a/src/entities/product/ui/ProductPrice.vue
+++ b/src/entities/product/ui/ProductPrice.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
   productId: string
 }>()
 
-const { amount, currentUnitPrice, prevUnitPrice, prevUnitPriceForAll } = useProductPrice(props.variants, props.productId)
+const { amount, currentUnitPrice, prevUnitPrice } = useProductPrice(props.variants, props.productId)
 </script>
 
 <template>
@@ -18,7 +18,7 @@ const { amount, currentUnitPrice, prevUnitPrice, prevUnitPriceForAll } = useProd
         {{ currentUnitPrice }} ₽
       </div>
       <div v-if="prevUnitPrice" class="line-through text-slate-400">
-        {{ prevUnitPriceForAll }} ₽
+        {{ prevUnitPrice }} ₽
       </div>
     </div>
     <div class="flex-1">
diff --git a/src/features/cart/index.ts b/src/features/cart/index.ts
new file mode 100644
index 0000000..0d06c08
--- /dev/null
+++ b/src/features/cart/index.ts
@@ -0,0 +1 @@
+export { CartButton } from './ui'
diff --git a/src/features/cart/ui/CartButton.vue b/src/features/cart/ui/CartButton.vue
new file mode 100644
index 0000000..81fec0f
--- /dev/null
+++ b/src/features/cart/ui/CartButton.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+
+const addedItems = useStorage<{
+  id: string
+  count: number
+}[]>('added-items', [])
+
+const addedItemsAmount = computed(() => addedItems.value.length)
+</script>
+
+<template>
+  <UButton
+    variant="soft"
+    size="xl"
+    class="border text-black border-pink-500"
+    icon="heroicons-shopping-cart"
+    :trailing-icon="addedItemsAmount ? 'badge' : undefined"
+  >
+    Корзина
+    <template #trailing>
+      <UBadge
+        v-if="addedItemsAmount"
+        size="xs" :label="addedItemsAmount"
+      />
+    </template>
+  </UButton>
+</template>
diff --git a/src/features/cart/ui/index.ts b/src/features/cart/ui/index.ts
new file mode 100644
index 0000000..0205cf4
--- /dev/null
+++ b/src/features/cart/ui/index.ts
@@ -0,0 +1 @@
+export { default as CartButton } from './CartButton.vue'
diff --git a/src/widgets/header/ui/Header.vue b/src/widgets/header/ui/Header.vue
index de49681..1ae86f6 100644
--- a/src/widgets/header/ui/Header.vue
+++ b/src/widgets/header/ui/Header.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { CartButton } from '~/src/features/cart'
+
 function goToCatalogPage() {
   navigateTo({
     path: '/catalog',
@@ -17,14 +19,7 @@ function goToCatalogPage() {
         Каталог
       </UButton>
       <UInputMenu placeholder="Поиск по каталогу" size="xl" class="w-full" leading-icon="heroicons-magnifying-glass" />
-      <UButton variant="soft" size="xl" class="border text-black border-pink-500" icon="heroicons-shopping-cart" trailing-icon="badge">
-        Корзина
-        <template #trailing>
-          <UBadge
-            size="xs" label="2"
-          />
-        </template>
-      </UButton>
+      <CartButton />
     </div>
   </div>
 </template>