Merge pull request #27 from moevm/kharitonov_small_filters

Name and price filters

main/_front/dist/components.html

@@ -249,6 +249,30 @@ <h4 class="checkbox-group__title">Cокет</h4>
 						</label>
 					</div>
 				</div>
+
+				<div class="components__filter filter">
+					<h4 class="filter__title">Фильтры</h4>
+					<div class="filter__block">
+						<div class="input">
+							<input class="input__text" id="filter_name" type="text" placeholder="">
+							<span>Название</span>
+						</div>
+					</div>
+					<div class="filter__block">
+						<div class="filter__subtitle">Цена</div>
+						<div class="input">
+							<input class="input__text" id="filter_from" type="number" min="0" placeholder="">
+							<span>Цена от</span>
+						</div>
+						<div class="input">
+							<input class="input__text" id="filter_to" type="number" min="0" placeholder="">
+							<span>Цена до</span>
+						</div>
+					</div>
+				</div>
+				<div style="display: flex;justify-content: center;">
+					<button class="btn" id="filter_submit">Применить фильтры</button>
+				</div>
 				<div style="display: flex;justify-content: center;" class="hide">
 					<a href="add-edit" class="btn" id="add">Добавить товар</a>
 

main/_front/dist/css/style.css

@@ -284,6 +284,24 @@ body.no-scroll {
   line-height: 19px;
 }
 
+.filter__title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.filter__block {
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.filter__subtitle {
+  font-size: 18px;
+}
+
 .header {
   padding: 15px 0;
   border-bottom: 1px solid #D0D0D0;

main/_front/dist/js/components.js

@@ -11,6 +11,11 @@ let global_id_for_dialog;
 
 const header_nav = document.querySelector("#header_nav");
 
+const filter_name = document.querySelector("#filter_name");
+const filter_from = document.querySelector("#filter_from");
+const filter_to = document.querySelector("#filter_to");
+const filter_submit = document.querySelector("#filter_submit");
+
 let isAdmin = false;
 
 const addAdminPanel = () => {
@@ -60,9 +65,31 @@ const openDialog = (name, id) => {
 	btn_no.addEventListener("click", no_event_handler)
 }
 
+function createQueryParams(baseUrl, filters) {
+	const params = new URLSearchParams();
+
+	Object.entries(filters).forEach(([key, value]) => {
+		if (Array.isArray(value)) {
+			// Если значение — массив
+			value.forEach(val => params.append(`${key}[]`, val));
+		} else if (typeof value === "object" && value !== null) {
+			// Если значение — объект
+			Object.entries(value).forEach(([subKey, subValue]) =>
+				params.append(`${key}[${subKey}]`, subValue)
+			);
+		} else {
+			// Если значение — примитив
+			params.append(key, value);
+		}
+	});
+
+	return `${baseUrl}?${params.toString()}`;
+}
 
-const addCards = (type) => {
-	fetch(`http://localhost:4444/components${type ? "?type=" + type : ""}`)
+const addCards = (filters) => {
+	const query = createQueryParams("http://localhost:4444/components", filters)
+	console.log(query)
+	fetch(query)
 		.then(res => res.json())
 		.then(data => {
 			console.log(data);
@@ -114,7 +141,10 @@ choiceLists.forEach((choiceList) => {
 					console.log(choice.dataset.value);
 					console.log("here");
 					if (choiceList.id === "choice_components") {
-						addCards(choice.dataset.value)
+						const params = {
+							type: choice.dataset.value
+						};
+						addCards(params)
 					}
 				}else {
 					choice.classList.remove("active");
@@ -125,6 +155,7 @@ choiceLists.forEach((choiceList) => {
 })
 
 
+
 const btn_add = document.querySelector("#add");
 
 document.addEventListener("DOMContentLoaded", function() {
@@ -142,7 +173,25 @@ document.addEventListener("DOMContentLoaded", function() {
 				addAdminPanel();
 				btn_add.parentElement.classList.remove('hide');
 			}
-			addCards("cpu");
+			const params = {
+				type: "cpu"
+			};
+
+			addCards(params);
 		})
 })
 
+filter_submit.addEventListener('click', () => {
+	const params = {};
+	if (filter_name.value.trim() !== ""){
+		params["name"] = filter_name.value.trim();
+	}
+	if (filter_to.value.trim() !== ""){
+		params["max_price"] = filter_to.value;
+	}
+	if (filter_from.value.trim() !== ""){
+		params["min_price"] = filter_from.value;
+	}
+	params["type"] = choice_components.dataset.value;
+	addCards(params);
+})

main/_front/src/html/components.html

@@ -249,6 +249,30 @@ <h4 class="checkbox-group__title">Cокет</h4>
 						</label>
 					</div>
 				</div>
+
+				<div class="components__filter filter">
+					<h4 class="filter__title">Фильтры</h4>
+					<div class="filter__block">
+						<div class="input">
+							<input class="input__text" id="filter_name" type="text" placeholder="">
+							<span>Название</span>
+						</div>
+					</div>
+					<div class="filter__block">
+						<div class="filter__subtitle">Цена</div>
+						<div class="input">
+							<input class="input__text" id="filter_from" type="number" min="0" placeholder="">
+							<span>Цена от</span>
+						</div>
+						<div class="input">
+							<input class="input__text" id="filter_to" type="number" min="0" placeholder="">
+							<span>Цена до</span>
+						</div>
+					</div>
+				</div>
+				<div style="display: flex;justify-content: center;">
+					<button class="btn" id="filter_submit">Применить фильтры</button>
+				</div>
 				<div style="display: flex;justify-content: center;" class="hide">
 					<a href="add-edit" class="btn" id="add">Добавить товар</a>
 

main/_front/src/js/components.js

@@ -11,6 +11,11 @@ let global_id_for_dialog;
 
 const header_nav = document.querySelector("#header_nav");
 
+const filter_name = document.querySelector("#filter_name");
+const filter_from = document.querySelector("#filter_from");
+const filter_to = document.querySelector("#filter_to");
+const filter_submit = document.querySelector("#filter_submit");
+
 let isAdmin = false;
 
 const addAdminPanel = () => {
@@ -60,9 +65,31 @@ const openDialog = (name, id) => {
 	btn_no.addEventListener("click", no_event_handler)
 }
 
+function createQueryParams(baseUrl, filters) {
+	const params = new URLSearchParams();
+
+	Object.entries(filters).forEach(([key, value]) => {
+		if (Array.isArray(value)) {
+			// Если значение — массив
+			value.forEach(val => params.append(`${key}[]`, val));
+		} else if (typeof value === "object" && value !== null) {
+			// Если значение — объект
+			Object.entries(value).forEach(([subKey, subValue]) =>
+				params.append(`${key}[${subKey}]`, subValue)
+			);
+		} else {
+			// Если значение — примитив
+			params.append(key, value);
+		}
+	});
+
+	return `${baseUrl}?${params.toString()}`;
+}
 
-const addCards = (type) => {
-	fetch(`http://localhost:4444/components${type ? "?type=" + type : ""}`)
+const addCards = (filters) => {
+	const query = createQueryParams("http://localhost:4444/components", filters)
+	console.log(query)
+	fetch(query)
 		.then(res => res.json())
 		.then(data => {
 			console.log(data);
@@ -114,7 +141,10 @@ choiceLists.forEach((choiceList) => {
 					console.log(choice.dataset.value);
 					console.log("here");
 					if (choiceList.id === "choice_components") {
-						addCards(choice.dataset.value)
+						const params = {
+							type: choice.dataset.value
+						};
+						addCards(params)
 					}
 				}else {
 					choice.classList.remove("active");
@@ -125,6 +155,7 @@ choiceLists.forEach((choiceList) => {
 })
 
 
+
 const btn_add = document.querySelector("#add");
 
 document.addEventListener("DOMContentLoaded", function() {
@@ -142,7 +173,25 @@ document.addEventListener("DOMContentLoaded", function() {
 				addAdminPanel();
 				btn_add.parentElement.classList.remove('hide');
 			}
-			addCards("cpu");
+			const params = {
+				type: "cpu"
+			};
+
+			addCards(params);
 		})
 })
 
+filter_submit.addEventListener('click', () => {
+	const params = {};
+	if (filter_name.value.trim() !== ""){
+		params["name"] = filter_name.value.trim();
+	}
+	if (filter_to.value.trim() !== ""){
+		params["max_price"] = filter_to.value;
+	}
+	if (filter_from.value.trim() !== ""){
+		params["min_price"] = filter_from.value;
+	}
+	params["type"] = choice_components.dataset.value;
+	addCards(params);
+})

main/_front/src/scss/blocks/_components.scss

@@ -30,4 +30,5 @@
 
 .components__sort {
 	margin-bottom: 20px;
-}
+}
+

main/_front/src/scss/elems/_filter.scss

@@ -0,0 +1,17 @@
+.filter__title {
+	text-align: center;
+	font-size: 20px;
+	font-weight: 700;
+	margin-bottom: 12px;
+}
+
+.filter__block {
+	margin-bottom: 15px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.filter__subtitle {
+	font-size: 18px;
+}

main/controllers/ComponentsController.js

@@ -1,4 +1,5 @@
 import ComponentsModel from "../models/Components.js";
+import components from "../models/Components.js";
 
 export const addComponent = async (req, res) => {
 	try {
@@ -31,12 +32,54 @@ export const addComponent = async (req, res) => {
 export const getAll = async (req, res) => {
 	try {
 		console.log(req.query);
-		let components;
+		const conditions = []
 		if (req.query.type){
-			components = await ComponentsModel.find({type: req.query.type}).exec();
-		}else {
-			components = await ComponentsModel.find().exec();
+			conditions.push({
+				type: req.query.type,
+			});
+		}
+		if (req.query.max_price && req.query.min_price) {
+			conditions.push({
+				price: {$gte: req.query.min_price, $lte: req.query.max_price}
+			});
+		}else if (req.query.min_price) {
+			conditions.push({
+				price: {$gte: req.query.min_price}
+			})
+		}else if (req.query.max_price) {
+			conditions.push({
+				price: {$lte: req.query.max_price}
+			})
+		}
+		if (req.query.name){
+			conditions.push({
+				name: {$regex: new RegExp(req.query.name, "i")},
+			})
 		}
+		const query = conditions.length > 0 ? {$and: conditions} : {}
+		const components = await ComponentsModel.find(query)
+		console.log(components);
+		// let components;
+		// if (req.query.type){
+		// 	components = await ComponentsModel.find({type: req.query.type}).exec();
+		// }else {
+		// 	components = await ComponentsModel.find().exec();
+		// }
+		// const conditions = [];
+		// conditions.push({
+		// 	main_properties: {
+		// 		$elemMatch: {
+		// 			name: "Сокет (разъем на плате)",
+		// 			value: "LGA 1700"
+		// 		}
+		// 	},
+		// })
+		// conditions.push({
+		// 	price: {$gte: 9000, $lte: 18000}
+		// })
+		// const query = conditions.length > 0 ? {$and: conditions} : {}
+		// const components2 = await ComponentsModel.find(query)
+		// console.log(components2);
 		res.json(components);
 	}catch (err){
 		console.warn(err);