filter respone api

config/routes/routes.js

@@ -45,6 +45,20 @@ function getItemsRoute(req, res, db) {
                     res.send('Товары в этой категории не найдены или такой категории нет')
                 }
             })
+        } else if (!req.query.option && req.query.sortByAll === 'ascending') {
+            dbo.collection('storeInfo').find().toArray((err, result) => {
+                if (err) throw err;
+                const items = result[0].items;
+                Object.values(items).forEach(arr => arr.sort((a, b) => a.price - b.price)) // фильтр по возрастанию
+                res.send(items);
+            });
+        } else if (!req.query.option && req.query.sortByAll === 'descending') {
+            dbo.collection('storeInfo').find().toArray((err, result) => {
+                if (err) throw err;
+                const items = result[0].items;
+                Object.values(items).forEach(arr => arr.sort((a, b) => a.price + b.price)) // фильтр по убыванию
+                res.send(items);
+            })
         } else {
             res.send('Запрос неверный');
         }

dist/views/index.pug

@@ -63,10 +63,10 @@ main.main-section
             .category-items
               ul
                 li
-                  a.active(href='#' data-category='all') Все товары:
+                  a#catLi.active(href='#' data-category='all') Все товары:
                 each val in categories
                   li
-                    a(href='#' data-category=val) #{val}
+                    a#catLi(href='#' data-category=val) #{val}
       // Category Block END
 
       // Filter Block
@@ -78,7 +78,7 @@ main.main-section
               h2.small-title Фильтровать товары:
             .filter-options
               form(action='#')
-                label
+                label(data-sortBy='ascending')
                   input#ascending.with-gap(type='radio' name='filter')
                   span Подешевле
                 label

dist/views/product.pug

@@ -32,7 +32,7 @@ main.main-section
                     span #{count} шт
                   p Цена за 1шт.
                   .product-info__price
-                    span #{price}
+                    span #{price}₽
               .product-info__right
                 .product-right__title
                   span Описание:

src/js/components/category.component.js

@@ -14,14 +14,18 @@ export class CategoryComponent extends Component {
             this.$el.addEventListener('click', buttonHandler.bind(this));
 
             if (localStorage.getItem('category')) {
-                const category = localStorage.getItem('category');
-                const bounded = breadcrumbActiveLink.bind(this);
+                localStorage.removeItem('sortByAll', 'true'); // установка значения для компонента Filter
+
+                const category = localStorage.getItem('category'),
+                    bounded = breadcrumbActiveLink.bind(this);
+
                 document.querySelector('#loader').classList.add('hide');
-                bounded(category);
+                bounded(category); // <- ф-я окраски li по нажатию на breadcrumb
+
                 // отображем данные если был нажат breadcrumb
                 (async function(){
-                    const fData = await apiService.getItemsOne(category);
-                    const html = renderItemsOne(category, fData);
+                    const fData = await apiService.getItemsOne(category),
+                        html = renderItemsOne(category, fData);
                     document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);  
                 }())
 
@@ -35,38 +39,41 @@ export class CategoryComponent extends Component {
 async function buttonHandler(e) {
     e.preventDefault();
     if (e.target.dataset.category && e.target.dataset.category != 'all') {
+        localStorage.removeItem('sortByAll'); // установка значения для компонента Filter
+
         this.items.onShow();
         btnActiveLink(e);
 
-        const category = e.target.dataset.category.toLowerCase();
-        const fData = await apiService.getItemsOne(category);
-        const html = renderItemsOne(category, fData);
+        const category = e.target.dataset.category.toLowerCase(),
+            fData = await apiService.getItemsOne(category),
+            html = renderItemsOne(category, fData);
 
         this.items.onHide();
         document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);
     } else if (e.target.dataset.category === 'all') {
+        localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter
+
         this.items.onShow();
         btnActiveLink(e);
+        
         const fData = await apiService.getItems(),
-                categories = Object.keys(fData);
+            categories = Object.keys(fData),
+            html = renderItems(categories, fData);
 
-        const html = renderItems(categories, fData);
         this.items.onHide();
         document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);
     }
 }
 
+// Окраска li по нажатию
 function btnActiveLink(e) {
-    Array.from(e.target.parentNode.parentNode.querySelectorAll('li a')).forEach(li => li.classList.remove('active'));
+    Array.from(e.target.parentNode.parentNode.querySelectorAll('#catLi')).forEach(li => li.classList.remove('active'));
     e.target.classList.add('active');
 }
 
+// Окраска li по нажатию на breadcrumb
 function breadcrumbActiveLink(category) {
-    const links = this.$el.querySelectorAll('.category-items ul li a');
+    const links = this.$el.querySelectorAll('#catLi');
     Array.from(links).forEach(li => li.classList.remove('active'));
-    Array.from(links).forEach(li => {
-        if (li.dataset.category.toLowerCase() === category) {
-            li.classList.add('active');
-        }
-    });
+    Array.from(links).forEach(li => li.dataset.category.toLowerCase() === category ? li.classList.add('active') : false);
 }

src/js/components/filter.component.js

@@ -0,0 +1,32 @@
+import { Component } from "../core/component";
+
+export class FilterComponent extends Component {
+    constructor(id) {
+        super(id);
+    }
+
+    init() {
+        if (this.$el) {
+            this.$el.addEventListener('click', sortByAllHandler.bind(this));
+            this.$el.addEventListener('click', sortByOneHandler.bind(this));
+        }
+    }
+}
+
+function sortByAllHandler(e) {
+    if (localStorage.getItem('sortByAll')) {
+        if (e.target.id) {
+            const sortBy = e.target.id;
+            console.log(sortBy, 'By all');
+        }
+    }
+}
+
+function sortByOneHandler(e) {
+    if (!localStorage.getItem('sortByAll')) {
+        if (e.target.id) {
+            const sortBy = e.target.id;
+            console.log(sortBy, 'By one');
+        }
+    }
+}

src/js/components/items.component.js

@@ -9,18 +9,23 @@ export class ItemsComponent extends Component {
     }
 
     async init() {
-        
         if (this.$el) {
+            localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter
             if (!localStorage.getItem('category')) {
+            const roster = this.$el.querySelector('#roster');  // Список с товарами
+            
+            // Получаем все товары и вывоим их если нету ключа category в ls
                const fData = await apiService.getItems(),
                 categories = Object.keys(fData);
             
                 if (categories.length) {
                     const html = renderItems(categories, fData);
-                    this.$el.querySelector('#roster').insertAdjacentHTML('afterbegin', html);  
+                    roster.insertAdjacentHTML('afterbegin', html);  
                 } else {
-                    this.$el.querySelector('#roster').innerHTML = 'Товаров на сайте пока что нету';
+                    roster.innerHTML = 'Товаров на сайте пока что нету';
                 }
+
+                // Убираем крутящийся лоадер
                 this.loader.hide(); 
             } 
         } 

src/js/index.js

@@ -5,6 +5,7 @@ import { LoaderComponent } from "./components/loader.component.js";
 import { ItemsComponent } from "./components/items.component.js";
 import { CategoryComponent } from "./components/category.component.js";
 import { BreadcrumbComponent } from "./components/breadcrumb.component.js";
+import { FilterComponent } from "./components/filter.component.js";
 
 const header = new HeaderComponent('header');
 const loader = new LoaderComponent('loader');
@@ -12,4 +13,5 @@ const information = new InformationComponent('information');
 const cart = new CartComponent('cart');
 const items = new ItemsComponent('items', {loader});
 const category = new CategoryComponent('category', {items});
+const filter = new FilterComponent('filter');
 const breadcumb = new BreadcrumbComponent('breadcrumb');

src/js/templates/items.template.js

@@ -26,7 +26,7 @@ export function renderItems(categories, items) {
                                 <span>Цена за 1 шт.</span>
                             </div>
                             <div class="list-price">
-                                <span>${item.price}</span>
+                                <span>${item.price}₽</span>
                             </div>
                             <div class="list-buttons">
                                 <button class="btn-small waves-effect waves-light">Купить</button>

src/js/templates/itemsOne.template.js

@@ -25,7 +25,7 @@ export function renderItemsOne(category, items) {
                                     <span>Цена за 1 шт.</span>
                                 </div>
                                 <div class="list-price">
-                                    <span>${item.price}</span>
+                                    <span>${item.price}₽</span>
                                 </div>
                                 <div class="list-buttons">
                                     <button class="btn-small waves-effect waves-light">Купить</button>