fix home view

frontend/src/components/TheFooter.vue

@@ -10,11 +10,7 @@
             <p>[email protected]</p>
             <p>+7 912 345 67 89</p>
         </div>
-        <div class="links">
-            <router-link to="/"><p>Условия аренды</p></router-link>
-            <router-link to="/"><p>Контакты</p></router-link>
-            <router-link to="/"><p>Оплата и доставка</p></router-link>
-        </div>
+
     </div>
 
 </template>

frontend/src/js/router.js

@@ -17,6 +17,7 @@ import ToolsSearch from "@/views/ToolsSearch.vue";
 import ToolView from "@/views/ToolView.vue";
 import CheckoutView from "@/views/CheckoutView.vue";
 import OrderView from "@/views/OrderView.vue";
+import ToolsByCategory from "@/views/ToolsByCategory.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -143,6 +144,12 @@ const router = createRouter({
       name: 'order-details',
       props: true,
       component: OrderView
+    },
+    {
+      path: '/tools/category/:category',
+      name: 'tools-by-category',
+      props: true,
+      component: ToolsByCategory
     }
   ],
 })

frontend/src/services/toolServices.js

@@ -7,7 +7,10 @@ const API_URL = 'http://localhost:8000/api/tools';
 
 export const getSearchTools = async (search, filters={}) => {
   try{
-    let url = `${API_URL}/search?query=${search}`
+    let url = `${API_URL}/search?`
+    if(search){
+      url += `query=${search}`
+    }
     if(Object.keys(filters).length > 0){
       if(filters.category){
         filters.category.map((elem) => {

frontend/src/views/HomeView.vue

@@ -44,14 +44,16 @@ export default{
                 'no-bottom-border': isBottomRow,
                 'no-right-border': isLastColumn,
             };
+        },
+        pushSearchByCategory(categoryName){
+            this.$router.push({name: 'tools-by-category', params: {category: categoryName}})
         }
     }
 }
 </script>
 
 <template>
     <UploadProgress v-if="isLoading"></UploadProgress>
-    <TheNavbar></TheNavbar>
     <main>
         <div class="categories">
             <div class="header">
@@ -65,7 +67,7 @@ export default{
                         :key="index"
                         :class="getCellClass(index)"
                     >
-                        <span>
+                        <span class="pointer" @click="pushSearchByCategory(category.name)">
                             {{ category.name }}
                         </span>
 
@@ -153,4 +155,12 @@ main {
 .no-right-border {
     border-right: none;
 }
+
+.pointer {
+    cursor: pointer;
+}
+
+.pointer:hover {
+    color: #46760A;
+}
 </style>

frontend/src/views/ToolsByCategory.vue

@@ -0,0 +1,262 @@
+<template>
+    <UploadProgress v-if="isLoading"></UploadProgress>
+    <div class="content">
+        <div class="header">
+            <h1>Инструменты категории: «{{ category }}»</h1>
+        </div>
+        <div class="mt-32">
+            <div class="flex">
+                <div v-for="tool in tools[currentPage]">
+                    <ToolCard
+                        :image="tool.images[0]"
+                        :title="tool.name"
+                        :description="tool.description"
+                        :rating="tool.rating"
+                        :dailyPrice="tool.dailyPrice"
+                        :id=tool._id
+                    />
+                </div>
+                <div class="paginator">
+                    <vue-awesome-paginate
+                        :total-items="toolsCount"
+                        :items-per-page="12"
+                        :max-pages-shown="5"
+                        v-model="currentPage"
+                        paginate-buttons-class="btn"
+                        active-page-class="btn-active"
+                        back-button-class="back-btn"
+                        next-button-class="next-btn"
+                        @click="onPageChange"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ToolCard from "@/components/tool/ToolCard.vue";
+import UploadProgress from "@/components/UploadProgress.vue";
+import {VueAwesomePaginate} from "vue-awesome-paginate";
+import {getSearchTools} from "@/services/toolServices.js";
+import {getAllCategories} from "@/services/adminServices.js";
+import {useToast} from "vue-toastification";
+
+export default {
+    name: "ToolsByCategory",
+    components: {VueAwesomePaginate, UploadProgress, ToolCard},
+    setup() {
+        const toast = useToast();
+        return {toast}
+    },
+    data() {
+        return {
+            isLoading: true,
+            tools: {},
+            toolsCount: 0,
+            currentPage: 1,
+        }
+    },
+    computed: {
+        category() {
+            return this.$route.params.category
+        },
+    },
+    watch: {
+        '$route.params.category': {
+            immediate: true,
+            handler(newQuery) {
+                this.fetchResults(newQuery);
+            },
+        }
+    },
+    mounted() {
+        this.fetchResults(this.category);
+    },
+    methods:{
+        fetchResults(category) {
+            const filters = {}
+            filters.page = this.currentPage
+            filters.category = [category]
+            getSearchTools("", filters).then((data) => {
+                this.tools["1"] = data.tools
+                this.toolsCount = data.totalNumber
+                this.isLoading = false
+            })
+        },
+
+        fetchResultWithFilters(pageChange=false) {
+            if(!pageChange){
+                this.tools = {}
+                this.currentPage = 1
+            }
+            const filters = {}
+            filters.page = this.currentPage
+            filters.category = [this.category]
+            this.isLoading = true
+            getSearchTools("", filters).then((data) => {
+                this.tools[this.currentPage] = data.tools
+                this.toolsCount = data.totalNumber
+                this.isLoading = false
+            })
+        },
+
+        onPageChange() {
+            if(this.tools[this.currentPage])
+                return
+            this.fetchResultWithFilters(true)
+        }
+    }
+}
+</script>
+
+<style scoped>
+.header {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #D5D5D5;
+}
+
+h1 {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.content {
+    padding-left: 32px;
+    padding-right: 32px;
+    padding-bottom: 64px;
+}
+
+.mt-32 {
+    margin-top: 32px;
+    display: flex;
+    flex-direction: row;
+}
+
+.flex {
+    margin-left: 64px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 48px;
+}
+
+.filters {
+    width: 250px;
+}
+
+.categories {
+    width: 250px;
+    margin-top: 16px;
+}
+
+.price {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+h2 {
+    font-weight: 600;
+    font-size: 18px;
+}
+
+label {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+}
+
+.ml-16 {
+    margin-left: 14px;
+}
+
+.categories-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+input[type="checkbox"] {
+    -webkit-appearance: none; /* Убираем стандартный вид */
+    -moz-appearance: none;
+    appearance: none;
+    width: 20px; /* Задаем размер чекбокса */
+    height: 20px;
+    border: 2px solid #D1D1D1; /* Цвет рамки */
+    border-radius: 4px; /* Скругление углов */
+    outline: none;
+    cursor: pointer;
+    position: relative;
+}
+
+input[type="checkbox"]:checked {
+    background-color: #6A983C; /* Цвет фона при активации чекбокса */
+    border-color: #46760A; /* Изменяем цвет рамки при активации */
+}
+
+input[type="checkbox"]:checked::after {
+    content: ''; /* Добавляем псевдоэлемент для галочки */
+    position: absolute;
+    top: 2px; /* Настройте положение галочки по вертикали */
+    left: 6px; /* Настройте положение галочки по горизонтали */
+    width: 6px;
+    height: 12px;
+    border: solid white; /* Цвет галочки */
+    border-width: 0 2px 2px 0; /* Создаем галочку */
+    transform: rotate(45deg); /* Поворачиваем */
+}
+
+input[type="number"] {
+    width: 109px;
+    height: 42px;
+    border: 1px solid #D5D5D5;
+    border-radius: 12px;
+    padding: 8px;
+}
+
+form button {
+    width: 240px;
+    height: 40px;
+    margin-top: 32px;
+    padding: 8px;
+    background-color: #6A983C;
+    border-radius: 12px;
+    border: 2px solid #46760A;
+    color: #FFFFFF;
+    font-weight: bold;
+}
+
+>>> .btn {
+    height: 30px;
+    width: 30px;
+    border: none;
+    margin: 4px;
+    cursor: pointer;
+    border-radius: 3px;
+    font-weight: bold;
+    background-color: #D9D9D9;
+}
+
+>>> .back-btn {
+    background-color: #D9D9D9;
+}
+
+>>> .next-btn {
+    background-color: #D9D9D9;
+}
+
+>>> .btn-active {
+    background-color: #6A983C;
+    color: white;
+}
+
+
+
+.paginator {
+    margin-top: 32px;
+    width: 100%;
+    display: flex;
+    justify-content: end;
+}
+</style>