Pagination - eshop, home

Ciframa · Jul 16, 2024 · d530a6b · d530a6b
1 parent 0ab65b5
commit d530a6b
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 23 deletions.
diff --git a/Fitmo_backend/app/Http/Controllers/ProductController.php b/Fitmo_backend/app/Http/Controllers/ProductController.php
@@ -24,7 +24,7 @@ class ProductController extends Controller
      */
     public function index(Request $request)
     {
-        $products = Product::select(
+        $paginatedProducts = Product::select(
             'prices.*',
             'product_states.*',
             'categories.name as category_name',
@@ -59,8 +59,20 @@ public function index(Request $request)
             ->paginate(20, ['*'], 'page', $request->page ?? 1);
 
 
-        $products = $this->formatProducts($products, true);
-        return $products;
+        $products = $this->formatProducts($paginatedProducts, true);
+
+           return response()->json([
+                            'data' => $products,
+                            'pagination' => [
+                                'total' => $paginatedProducts->total(),
+                                'per_page' => $paginatedProducts->perPage(),
+                                'current_page' => $paginatedProducts->currentPage(),
+                                'last_page' => $paginatedProducts->lastPage(),
+                                'next_page_url' => $paginatedProducts->nextPageUrl(),
+                                'prev_page_url' => $paginatedProducts->previousPageUrl(),
+                                'path' => $paginatedProducts->path(),
+                            ]
+                        ]);
     }
 
     public function getSingleProduct($product_url_name)
@@ -267,7 +279,7 @@ public function getProductById($id)
     }
 
 
-    public function getCategoryProducts($categoryName)
+    public function getCategoryProducts($categoryName, Request $request)
     {
         $categoryName = join("/", explode(",", $categoryName));
         $products = [];
@@ -287,18 +299,58 @@ public function getCategoryProducts($categoryName)
         }
 
 
-        $products = Product::select('prices.*', 'product_states.*', 'product_categories.category_id as category_id', 'categories.name as category_name', 'colors.*', 'products.*',)
-            ->selectRaw('(SELECT GROUP_CONCAT(image_path) FROM images WHERE images.product_id = products.id AND images.is_main = 1) AS image_urls')
-            ->leftJoin('prices', 'products.id', '=', 'prices.product_id')
-            ->join('product_categories', 'products.id', '=', 'product_categories.product_id')
-            ->join('categories', 'categories.id', '=', 'product_categories.category_id')
-            ->join('product_states', 'products.id', '=', 'product_states.product_id')
-            ->leftJoin('colors', 'products.color_id', '=', 'colors.id')
-            ->whereIn('category_id', $categoriesToSearch)
-            ->get();
+        $paginatedProducts = Product::select(
+                    'prices.*',
+                    'product_states.*',
+                    'categories.name as category_name',
+                    'colors.*',
+                    'products.*',
+                    'product_categories.category_id as category_id'
+                )->with(['categories', 'children' => function ($query) {
+                    $query->select(
+                        'prices.*',
+                        'product_states.*',
+                        'categories.name as category_name',
+                        'colors.*',
+                        'products.*',
+                        'product_categories.category_id as category_id'
+                    )
+                        ->leftJoin('prices', 'products.id', '=', 'prices.product_id')
+                        ->join('product_states', 'products.id', '=', 'product_states.product_id')
+                        ->join('product_categories', 'products.id', '=', 'product_categories.product_id')
+                        ->join('categories', 'categories.id', '=', 'product_categories.category_id')
+                        ->leftJoin('colors', 'products.color_id', '=', 'colors.id')
+                        ->selectRaw('(SELECT GROUP_CONCAT(image_path) FROM images WHERE images.product_id = products.id AND images.is_main = 1) AS image_urls')
+                        ->where('products.parent_id', '!=', 0);
+                }])
+                    ->leftJoin('prices', 'products.id', '=', 'prices.product_id')
+                    ->join('product_states', 'products.id', '=', 'product_states.product_id')
+                    ->join('product_categories', 'products.id', '=', 'product_categories.product_id')
+                    ->join('categories', 'categories.id', '=', 'product_categories.category_id')
+                    ->leftJoin('colors', 'products.color_id', '=', 'colors.id')
+                    ->selectRaw('(SELECT GROUP_CONCAT(image_path) FROM images WHERE images.product_id = products.id AND images.is_main = 1) AS image_urls')
+                    ->orderBy('products.created_at', 'desc')
+                    ->where('products.parent_id', 0)
+                      ->whereIn('category_id', $categoriesToSearch)
+                    ->paginate(6, ['*'], 'page', $request->page ?? 1);
 
 
-        return $this->formatProducts($products);
+
+
+        $products = $this->formatProducts($paginatedProducts, true);
+       return response()->json([
+                    'data' => $products,
+                    'pagination' => [
+                        'total' => $paginatedProducts->total(),
+                        'per_page' => $paginatedProducts->perPage(),
+                        'current_page' => $paginatedProducts->currentPage(),
+                        'last_page' => $paginatedProducts->lastPage(),
+                        'next_page_url' => $paginatedProducts->nextPageUrl(),
+                        'prev_page_url' => $paginatedProducts->previousPageUrl(),
+                        'path' => $paginatedProducts->path(),
+                    ]
+                ]);
+
     }
 
     /**

diff --git a/Fitmo_frontend/src/views/Category.vue b/Fitmo_frontend/src/views/Category.vue
@@ -168,6 +168,14 @@
           sizes="col-12-xs col-6-sm col-4-lg"
           :products="product"
         />
+        <button
+          v-if="this.pagination.current_page < this.pagination.last_page"
+          class="btn-gray"
+          :onClick="() => this.getCategoryProducts()"
+        >
+          <VaProgressCircle v-show="this.isLoading" indeterminate />
+          <span v-show="!this.isLoading">Zobrazit další produkty</span>
+        </button>
       </div>
       <div
         v-if="this.products.length === 0"
@@ -206,6 +214,8 @@ export default {
       barMinValue: 10,
       barMaxValue: 5000,
       categoryText: "",
+      isLoading: false,
+      pagination: {},
       categories: [],
       imagesBasePath: `${process.env.VUE_APP_FITMO_BACKEND_URL}/categories/`,
     };
@@ -269,14 +279,19 @@ export default {
       }
     },
     async getCategoryProducts() {
+      this.isLoading = true;
       try {
-        const response = await axios.get(
-          "/api/categoryProducts/" + [this.url_path]
-        );
-        this.products = response.data;
-        console.log(this.products);
+        const url =
+          this.pagination.next_page_url ??
+          "/api/categoryProducts/" + [this.url_path];
+
+        const response = await axios.get(url);
+        this.products = [...this.products, ...response.data.data];
+        this.pagination = response.data.pagination;
       } catch (error) {
         console.log(error);
+      } finally {
+        this.isLoading = false;
       }
     },
 
@@ -391,6 +406,14 @@ export default {
     clip-path: inset(0 -100vmax);
     justify-content: space-between;
 
+    //.btn-gray {
+    //  color: #525358;
+    //  padding: 1rem 2rem;
+    //  border-radius: 0 0 2rem 2rem;
+    //  font-size: 12px;
+    //  text-decoration: underline;
+    //  border: none;
+    //}
     & > img {
       -webkit-box-shadow: 0px 0px 41px -4px rgba(0, 0, 0, 0.33);
       -moz-box-shadow: 0px 0px 41px -4px rgba(0, 0, 0, 0.33);

diff --git a/Fitmo_frontend/src/views/Home.vue b/Fitmo_frontend/src/views/Home.vue
@@ -86,7 +86,11 @@
           :products="product"
         />
       </div>
-      <button class="btn-gray" :onClick="() => getProducts()">
+      <button
+        v-if="this.pagination.current_page < this.pagination.last_page"
+        class="btn-gray"
+        :onClick="() => getProducts()"
+      >
         <VaProgressCircle v-show="this.isLoading" indeterminate />
         <span v-show="!this.isLoading">Zobrazit další produkty</span>
       </button>
@@ -123,6 +127,7 @@ export default {
       categories: [],
       ratings: [],
       products: [],
+      pagination: {},
       isLoading: false,
       imagesBasePath: `${process.env.VUE_APP_FITMO_BACKEND_URL}/categories/`,
     };
@@ -170,10 +175,11 @@ export default {
     },
     async getProducts() {
       this.isLoading = true;
-      this.page++;
       try {
-        const response = await axios.get(`/api/products?page=${this.page}`);
-        this.products = [...this.products, ...response.data];
+        const url = this.pagination.next_page_url ?? "/api/products";
+        const response = await axios.get(url);
+        this.products = [...this.products, ...response.data.data];
+        this.pagination = response.data.pagination;
       } catch (error) {
         console.log(error);
       } finally {