From d5ff3ee7c096022414cff33ceadaf54cc40d014e 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, 5 Aug 2024 10:32:22 +0300
Subject: [PATCH] feat: add product page

---
 pages/products/[id].vue                  |  7 ++++++
 src/entities/product/index.ts            |  2 +-
 src/entities/product/ui/ProductCard.vue  | 19 ++++++++--------
 src/entities/product/ui/ProductImage.vue | 28 ++++++++++++++++++++++++
 src/entities/product/ui/index.ts         |  1 +
 src/pages/product/index.ts               |  1 +
 src/pages/product/ui/ProductPage.vue     | 23 +++++++++++++++++++
 src/pages/product/ui/index.ts            |  1 +
 8 files changed, 71 insertions(+), 11 deletions(-)
 create mode 100644 pages/products/[id].vue
 create mode 100644 src/entities/product/ui/ProductImage.vue
 create mode 100644 src/pages/product/index.ts
 create mode 100644 src/pages/product/ui/ProductPage.vue
 create mode 100644 src/pages/product/ui/index.ts

diff --git a/pages/products/[id].vue b/pages/products/[id].vue
new file mode 100644
index 0000000..5919520
--- /dev/null
+++ b/pages/products/[id].vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ProductPage } from '~/src/pages/product'
+</script>
+
+<template>
+  <ProductPage />
+</template>
diff --git a/src/entities/product/index.ts b/src/entities/product/index.ts
index 5c91d75..cb851da 100644
--- a/src/entities/product/index.ts
+++ b/src/entities/product/index.ts
@@ -1 +1 @@
-export { ProductCard } from './ui'
+export { ProductCard, ProductImage } from './ui'
diff --git a/src/entities/product/ui/ProductCard.vue b/src/entities/product/ui/ProductCard.vue
index 804a430..8b2591c 100644
--- a/src/entities/product/ui/ProductCard.vue
+++ b/src/entities/product/ui/ProductCard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ProductImage from './ProductImage.vue'
 import { InputNumber } from '~/src/shared/ui'
 import type { CrmProduct } from '~/src/shared/model'
 
@@ -10,6 +11,12 @@ const amount = ref(0)
 const currentUnitPrice = ref(0)
 const prevUnitPrice = ref()
 
+function onImageClick() {
+  navigateTo(
+    `/products/${props.product.id}`,
+  )
+}
+
 function updatePrices() {
   if (!props.product.variants?.length) {
     return
@@ -51,17 +58,9 @@ updatePrices()
 <template>
   <div class="w-64 flex flex-col border-1 rounded-[20px]">
     <div class="h-64 relative flex flex-col justify-between rounded-t-[20px]">
-      <img alt="product_img" :src="`https://cake-crm.3crabs.ru${product.images?.[0]}`" class="rounded-t-[20px]">
-
-      <div class="flex gap-1 absolute top-3 left-3">
-        <UBadge v-for="(label, index) in product.labels" :key="index" :ui="{ rounded: 'rounded-full' }" size="md">
-          {{ label.name }}
-        </UBadge>
-      </div>
-
-      <div class="flex justify-end text-slate-500 text-sm absolute bottom-3 right-3">
+      <ProductImage :path="product.images?.[0]" :labels="product.labels" class="rounded-t-[20px] cursor-pointer" @click="onImageClick">
         {{ currentUnitPrice }} ₽ / {{ product.unit }}
-      </div>
+      </ProductImage>
     </div>
 
     <div class="flex flex-col gap-3 p-5">
diff --git a/src/entities/product/ui/ProductImage.vue b/src/entities/product/ui/ProductImage.vue
new file mode 100644
index 0000000..c2fb58b
--- /dev/null
+++ b/src/entities/product/ui/ProductImage.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { CrabscrmLabel } from '~/src/shared/model'
+
+defineProps<{
+  path?: string
+  labels?: CrabscrmLabel[]
+}>()
+</script>
+
+<template>
+  <div class="relative flex flex-col justify-between overflow-hidden">
+    <img alt="product_img" :src="`https://cake-crm.3crabs.ru${path}`">
+
+    <div class="flex gap-1 absolute top-3 left-3">
+      <UBadge v-for="(label, index) in labels" :key="index" :ui="{ rounded: 'rounded-full' }" size="md">
+        {{ label.name }}
+      </UBadge>
+    </div>
+
+    <div class="flex justify-end text-slate-500 text-sm absolute bottom-3 right-3">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/entities/product/ui/index.ts b/src/entities/product/ui/index.ts
index 50c64fe..800235b 100644
--- a/src/entities/product/ui/index.ts
+++ b/src/entities/product/ui/index.ts
@@ -1 +1,2 @@
 export { default as ProductCard } from './ProductCard.vue'
+export { default as ProductImage } from './ProductImage.vue'
diff --git a/src/pages/product/index.ts b/src/pages/product/index.ts
new file mode 100644
index 0000000..607cff0
--- /dev/null
+++ b/src/pages/product/index.ts
@@ -0,0 +1 @@
+export { ProductPage } from './ui'
diff --git a/src/pages/product/ui/ProductPage.vue b/src/pages/product/ui/ProductPage.vue
new file mode 100644
index 0000000..71f1ea7
--- /dev/null
+++ b/src/pages/product/ui/ProductPage.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ProductImage } from '~/src/entities/product'
+import { useCRMGetProduct } from '~/src/shared/api/crm/crm'
+
+const route = useRoute()
+
+const { data } = useCRMGetProduct(route.params.id as string)
+</script>
+
+<template>
+  <div class="flex gap-12">
+    <ProductImage :path="data?.data.product?.images?.[0]" class="w-128 h-128 rounded-[20px]" :labels="data?.data.product?.labels" />
+    <div class="flex flex-col gap-6">
+      <div class="font-bold text-4xl">
+        {{ data?.data.product?.name }}
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div>Надо заполнить на бэке - тяжело тестить</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/pages/product/ui/index.ts b/src/pages/product/ui/index.ts
new file mode 100644
index 0000000..dae9ec7
--- /dev/null
+++ b/src/pages/product/ui/index.ts
@@ -0,0 +1 @@
+export { default as ProductPage } from './ProductPage.vue'