Merge pull request #20 from moevm/manucharova_filter

Filter components
moevm · Dec 7, 2024 · 4ab3c45 · 4ab3c45
2 parents 853e4ec + b0f383e
commit 4ab3c45
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 33 deletions.
diff --git a/main/_front/src/html/components.html b/main/_front/src/html/components.html
@@ -12,7 +12,7 @@
 
 </head>
 <body>
-
+ 
 <header class="header">
 	<div class="container">
 		<div class="header__inner">
@@ -67,7 +67,7 @@ <h1 class="title__text">Комплектующие</h1>
 	<div class="container">
 		<div class="components__inner">
 			<div class="components__choice grey_background">
-				<div class="choice choice-grid">
+				<div class="choice choice-grid" id="choice_components">
 					<button class="choice__elem choice__elem-with_img active" data-value="cpu">
 						<svg width="40.000000" height="40.000000" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
 							<g clip-path="url(#clip2_90)">
@@ -240,7 +240,7 @@ <h4 class="checkbox-group__title">Cокет</h4>
 				</div>
 				<div style="display: flex;justify-content: center;" class="hide">
 					<a href="add-edit" class="btn" id="add">Добавить товар</a>
-
+ 
 				</div>
 			</div>
 			<div class="components__main">

diff --git a/main/_front/src/js/components.js b/main/_front/src/js/components.js
@@ -1,35 +1,16 @@
 const choiceLists = document.querySelectorAll(".choice");
 
-choiceLists.forEach((choiceList) => {
-	const choiceItems = choiceList.querySelectorAll(".choice__elem");
-	choiceItems.forEach((choice) => {
-		if (choice.classList.contains("active")) {
-			choiceList.dataset.value = choice.dataset.value;
-			// console.log(choice.dataset.value);
-		}
-		choice.addEventListener("click", (e) => {
-			choiceItems.forEach((choice) => {
-				if (choice === e.target) {
-					choiceList.dataset.value = choice.dataset.value;
-					choice.classList.add("active");
-					console.log(choice.dataset.value);
-				}else {
-					choice.classList.remove("active");
-				}
-			});
-		});
-	});
-})
+const choice_components = document.querySelector("#choice_components");
 
-const cards_place = document.querySelector("#cards_place");
 
 let isAdmin = false;
 
-const addCards = () => {
-	fetch("http://localhost:4444/components")
+const addCards = (type) => {
+	fetch(`http://localhost:4444/components${type ? "?type=" + type : ""}`)
 		.then(res => res.json())
 		.then(data => {
 			console.log(data);
+			cards_place.replaceChildren();
 			data.forEach((item) => {
 				cards_place.insertAdjacentHTML("beforeend", `
 				<div class="card" data-id="${item._id}">
@@ -43,7 +24,6 @@ const addCards = () => {
 				</div>
 				`)
 			})
-			console.log("here")
 			const card__buttons = document.querySelectorAll(".card__button");
 			card__buttons.forEach((card_button) => {
 				card_button.addEventListener("click",(e) => {
@@ -55,6 +35,33 @@ const addCards = () => {
 			})
 		})
 }
+
+choiceLists.forEach((choiceList) => {
+	const choiceItems = choiceList.querySelectorAll(".choice__elem");
+	choiceItems.forEach((choice) => {
+		if (choice.classList.contains("active")) {
+			choiceList.dataset.value = choice.dataset.value;
+			// console.log(choice.dataset.value);
+		}
+		choice.addEventListener("click", (e) => {
+			choiceItems.forEach((choice) => {
+				if (choice === e.target) {
+					choiceList.dataset.value = choice.dataset.value;
+					choice.classList.add("active");
+					console.log(choice.dataset.value);
+					console.log("here");
+					if (choiceList.id === "choice_components") {
+						addCards(choice.dataset.value)
+					}
+				}else {
+					choice.classList.remove("active");
+				}
+			});
+		});
+	});
+})
+
+
 const btn_add = document.querySelector("#add");
 
 document.addEventListener("DOMContentLoaded", function() {
@@ -71,6 +78,6 @@ document.addEventListener("DOMContentLoaded", function() {
 				isAdmin = true;
 				btn_add.parentElement.classList.remove('hide');
 			}
-			addCards();
+			addCards("cpu");
 		})
 })
diff --git a/main/controllers/ComponentsController.js b/main/controllers/ComponentsController.js
@@ -1,5 +1,5 @@
 import ComponentsModel from "../models/Components.js";
-
+ 
 export const addComponent = async (req, res) => {
 	try {
 		const components = await ComponentsModel.find({name: req.body.name});
@@ -27,10 +27,16 @@ export const addComponent = async (req, res) => {
 		})
 	}
 }
-
+ 
 export const getAll = async (req, res) => {
 	try {
-		const components = await ComponentsModel.find().exec();
+		console.log(req.query);
+		let components;
+		if (req.query.type){
+			components = await ComponentsModel.find({type: req.query.type}).exec();
+		}else {
+			components = await ComponentsModel.find().exec();
+		}
 		res.json(components);
 	}catch (err){
 		console.warn(err);
@@ -39,11 +45,11 @@ export const getAll = async (req, res) => {
 		})
 	}
 }
-
+ 
 export const getOne = async (req, res) => {
 	try {
 		const componentId = String(req.params.id);
-
+ 
 		ComponentsModel.findOne({
 			_id: componentId
 		}).then(