From 1fd9fd292db7639cd88c22c5b262af8a66ae9fcf 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: Tue, 6 Aug 2024 10:47:36 +0300
Subject: [PATCH] feat: add breadcrumbs

---
 src/features/breadcrumbs/index.ts           |  1 +
 src/features/breadcrumbs/ui/Breadcrumbs.vue | 41 +++++++++++++++++++++
 src/features/breadcrumbs/ui/index.ts        |  1 +
 src/pages/catalog/ui/CatalogPage.vue        | 21 ++++++++---
 src/pages/position/ui/PositionPage.vue      | 24 +++++++++---
 src/shared/ui/layouts/StandardLayout.vue    |  2 +-
 src/widgets/header/ui/Header.vue            |  8 +++-
 7 files changed, 84 insertions(+), 14 deletions(-)
 create mode 100644 src/features/breadcrumbs/index.ts
 create mode 100644 src/features/breadcrumbs/ui/Breadcrumbs.vue
 create mode 100644 src/features/breadcrumbs/ui/index.ts

diff --git a/src/features/breadcrumbs/index.ts b/src/features/breadcrumbs/index.ts
new file mode 100644
index 0000000..359a27a
--- /dev/null
+++ b/src/features/breadcrumbs/index.ts
@@ -0,0 +1 @@
+export { Breadcrumbs } from './ui'
diff --git a/src/features/breadcrumbs/ui/Breadcrumbs.vue b/src/features/breadcrumbs/ui/Breadcrumbs.vue
new file mode 100644
index 0000000..39a2d3a
--- /dev/null
+++ b/src/features/breadcrumbs/ui/Breadcrumbs.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useCRMGetBreadcrumbs, useCRMGetCatalog } from '~/src/shared/api/crm/crm'
+
+const route = useRoute()
+
+const { data: catalogData } = useCRMGetCatalog()
+const { data: breadcrumbsData } = useCRMGetBreadcrumbs(route.params.id as string)
+
+const links = computed(() => {
+  const breadcrumbs = [{
+    label: 'Каталог',
+    to: '/catalog',
+  }]
+
+  if (!catalogData.value?.data.categories?.length) {
+    return breadcrumbs
+  }
+
+  if (route.name === 'catalog-positions-id') {
+    const category = catalogData.value.data.categories[0].children?.find(category => category.id === route.params.id)
+
+    breadcrumbs.push({
+      label: category?.name || 'Категория',
+      to: `/catalog/${category?.uri}`,
+    })
+  }
+
+  if (route.name === 'products-id') {
+    breadcrumbs.push({
+      label: breadcrumbsData.value?.data.categories?.[0].name || 'Продукт',
+      to: route.path,
+    })
+  }
+
+  return breadcrumbs
+})
+</script>
+
+<template>
+  <UBreadcrumb :links />
+</template>
diff --git a/src/features/breadcrumbs/ui/index.ts b/src/features/breadcrumbs/ui/index.ts
new file mode 100644
index 0000000..1d30591
--- /dev/null
+++ b/src/features/breadcrumbs/ui/index.ts
@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs.vue'
diff --git a/src/pages/catalog/ui/CatalogPage.vue b/src/pages/catalog/ui/CatalogPage.vue
index 1545347..5fabe65 100644
--- a/src/pages/catalog/ui/CatalogPage.vue
+++ b/src/pages/catalog/ui/CatalogPage.vue
@@ -5,6 +5,7 @@ import { Sidebar } from '~/src/widgets/sidebar'
 import { StandardLayout } from '~/src/shared/ui'
 import { Header } from '~/src/widgets/header'
 import { Footer } from '~/src/widgets/footer'
+import Breadcrumbs from '~/src/features/breadcrumbs/ui/Breadcrumbs.vue'
 
 const { data: positions } = useCRMGetPositions('0')
 </script>
@@ -14,14 +15,24 @@ const { data: positions } = useCRMGetPositions('0')
     <template #header>
       <Header />
     </template>
-    <div class="flex gap-12">
-      <Sidebar />
-      <div class="flex flex-col gap-8 pb-34">
-        <div class="grid grid-cols-4 gap-4">
-          <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+    <div class="flex flex-col gap-8">
+      <div class="flex flex-col gap-4">
+        <Breadcrumbs />
+        <h1 class="text-4xl font-black">
+          Все товары
+        </h1>
+      </div>
+
+      <div class="flex gap-12">
+        <Sidebar />
+        <div class="flex flex-col gap-8 pb-34">
+          <div class="grid grid-cols-4 gap-4">
+            <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+          </div>
         </div>
       </div>
     </div>
+
     <template #footer>
       <Footer />
     </template>
diff --git a/src/pages/position/ui/PositionPage.vue b/src/pages/position/ui/PositionPage.vue
index 5473f80..e94560e 100644
--- a/src/pages/position/ui/PositionPage.vue
+++ b/src/pages/position/ui/PositionPage.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { ProductCard } from '~/src/entities/product'
-import { useCRMGetPositions } from '~/src/shared/api/crm/crm'
+import { useCRMGetCatalog, useCRMGetPositions } from '~/src/shared/api/crm/crm'
 import { Sidebar } from '~/src/widgets/sidebar'
 import { StandardLayout } from '~/src/shared/ui'
 import { Header } from '~/src/widgets/header'
 import { Footer } from '~/src/widgets/footer'
+import Breadcrumbs from '~/src/features/breadcrumbs/ui/Breadcrumbs.vue'
 
 const route = useRoute()
 
 const { data: positions } = useCRMGetPositions(route.params.id as string)
+const { data: catalog } = useCRMGetCatalog()
+
+const pageName = computed(() => catalog.value?.data?.categories?.[0]?.children?.find(category => category.id === route.params.id)?.name)
 </script>
 
 <template>
@@ -16,11 +20,19 @@ const { data: positions } = useCRMGetPositions(route.params.id as string)
     <template #header>
       <Header />
     </template>
-    <div class="flex gap-12">
-      <Sidebar />
-      <div class="flex flex-col gap-8 pb-34">
-        <div class="grid grid-cols-4 gap-4">
-          <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+    <div class="flex flex-col gap-8">
+      <div class="flex flex-col gap-4">
+        <Breadcrumbs />
+        <h1 class="text-4xl font-black">
+          {{ pageName }}
+        </h1>
+      </div>
+      <div class="flex gap-12">
+        <Sidebar />
+        <div class="flex flex-col gap-8 pb-34">
+          <div class="grid grid-cols-4 gap-4">
+            <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/shared/ui/layouts/StandardLayout.vue b/src/shared/ui/layouts/StandardLayout.vue
index 95b645e..e36ac8b 100644
--- a/src/shared/ui/layouts/StandardLayout.vue
+++ b/src/shared/ui/layouts/StandardLayout.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full ma ">
+  <div class="flex flex-col w-full h-full justify-between">
     <div class="border-b border-gray-200 px-31 sticky top-0 z-50 bg-white flex-shrink-0">
       <slot name="header" />
     </div>
diff --git a/src/widgets/header/ui/Header.vue b/src/widgets/header/ui/Header.vue
index 10155b5..de49681 100644
--- a/src/widgets/header/ui/Header.vue
+++ b/src/widgets/header/ui/Header.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-
+function goToCatalogPage() {
+  navigateTo({
+    path: '/catalog',
+  })
+}
 </script>
 
 <template>
@@ -9,7 +13,7 @@
       alt="svg"
     >
     <div class="flex gap-5 w-full">
-      <UButton size="xl" icon="heroicons-bars-3">
+      <UButton size="xl" icon="heroicons-bars-3" @click="goToCatalogPage">
         Каталог
       </UButton>
       <UInputMenu placeholder="Поиск по каталогу" size="xl" class="w-full" leading-icon="heroicons-magnifying-glass" />