wip: shopping cart

spa/src/components/CategoriesInline.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="flex items-center justify-center p-5 gap-2 flex-wrap">
-  <RouterLink class="btn" to="/categories">
+  <RouterLink class="btn btn-sm" to="/categories">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
       <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
     </svg>
     Каталог
   </RouterLink>
 
-  <RouterLink v-for="category in categoriesStore.topCategories" class="btn" :to="`/category/${category.id}`">
+  <RouterLink v-for="category in categoriesStore.topCategories" class="btn btn-sm" :to="{name: 'product.categories.show', params: {category_id: category.id}}">
     {{ category.name }}
   </RouterLink>
 </div>

spa/src/components/CategoriesList/CategoryItem.vue

@@ -0,0 +1,27 @@
+<template>
+  <a
+      href="#"
+      :key="category.id"
+      class="py-2 px-4 flex items-center mb-3"
+      @click.prevent="$emit('onSelect', category)"
+  >
+    <div class="avatar">
+      <div class="w-8 h-8 rounded">
+        <img :src="category.image" :alt="category.name" loading="lazy" width="30" height="30" class="bg-base-400"/>
+      </div>
+    </div>
+
+    <h3 class="ml-5 text-lg">{{ category.name }}</h3>
+  </a>
+</template>
+
+<script setup>
+const props = defineProps({
+  category: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(["onSelect"]);
+</script>

spa/src/components/ProductsList.vue

@@ -1,7 +1,39 @@
 <template>
   <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-6 lg:max-w-7xl lg:px-8">
+    <h2 class="text-lg font-bold mb-5 text-center">{{ productsStore.products.meta.currentCategoryName }}</h2>
 
-    <div v-if="productsStore.isLoading"
+    <div v-if="productsStore.products.data.length > 0">
+      <div
+          class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
+      >
+        <RouterLink
+            v-for="product in productsStore.products.data"
+            :key="product.id"
+            class="group"
+            :to="`/product/${product.id}`"
+            @click="haptic"
+        >
+          <ProductImageSwiper :images="product.images"/>
+          <h3 class="mt-4 text-sm">{{ product.name }}</h3>
+          <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
+        </RouterLink>
+      </div>
+
+      <div v-if="productsStore.isLoading" class="text-center mt-5">
+        <span class="loading loading-spinner loading-md"></span> Загрузка...
+      </div>
+
+      <div
+          v-if="productsStore.hasMore === false"
+          class="text-gray-500 text-xs text-center mt-4 pt-4 mb-2 border-t"
+      >
+        {{ settings.noMoreProductsMessage }}
+      </div>
+    </div>
+
+    <NoProducts v-else-if="productsStore.loadFinished"/>
+
+    <div v-else
          class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
       <div v-for="n in 8" :key="n" class="animate-pulse space-y-2">
         <div class="aspect-square bg-gray-200 rounded-md"></div>
@@ -9,39 +41,6 @@
         <div class="h-4 bg-gray-200 rounded w-1/2"></div>
       </div>
     </div>
-
-    <template v-else>
-      <h2 class="text-lg font-bold mb-5 text-center">{{ productsStore.products.meta.currentCategoryName }}</h2>
-
-      <div v-if="productsStore.products.data.length > 0">
-        <div
-            class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
-        >
-          <RouterLink
-              v-for="product in productsStore.products.data"
-              :key="product.id"
-              class="group"
-              :to="`/product/${product.id}`"
-              @click="haptic"
-          >
-            <ProductImageSwiper :images="product.images"/>
-            <h3 class="mt-4 text-sm">{{ product.name }}</h3>
-            <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
-          </RouterLink>
-        </div>
-
-        <div
-            v-if="productsStore.hasMore === false"
-            class="text-gray-500 text-xs text-center mt-4 pt-4 mb-2 border-t"
-        >
-          {{ settings.noMoreProductsMessage }}
-        </div>
-      </div>
-
-      <NoProducts v-else/>
-
-
-    </template>
   </div>
 </template>
 
@@ -55,7 +54,7 @@ import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {nextTick, onMounted, ref, watch} from "vue";
 
 const route = useRoute();
-const categoryId = route.params.id ?? null;
+const categoryId = route.params.category_id ?? null;
 const productsStore = useProductsStore();
 const settings = useSettingsStore();
 
@@ -85,13 +84,14 @@ async function loadMore() {
     console.error('Ошибка загрузки', e)
   } finally {
     productsStore.isLoading = false;
+    productsStore.loadFinished = true;
   }
 }
 
 useInfiniteScroll(
     window,
     loadMore,
-    {distance: 300}
+    {distance: 500}
 )
 
 watch(() => route.params.id, async newId => {
@@ -103,7 +103,6 @@ watch(() => route.params.id, async newId => {
 });
 
 onMounted(async () => {
-  console.log("Mounted");
   const saved = productsStore.savedCategoryId === categoryId;
 
   console.log("Saved Category: ", saved);