From 88ff1d8b992ee0ee07f176a77f5c446f28900745 Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Tue, 25 Nov 2025 17:38:23 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BF=D0=B8=D1=81?=
 =?UTF-8?q?=D0=B0=D0=BB=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B1=D0=BE=D1=80=20?=
 =?UTF-8?q?=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D0=BE=D0=B2=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=B4=20=D0=BD=D0=BE=D0=B2=D1=83=D1=8E=20=D0=BB=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=B8=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/catalog/CategoryFilters.tsx  | 64 +++++++++++++++----
 1 file changed, 50 insertions(+), 14 deletions(-)

diff --git a/front/src/features/catalog/CategoryFilters.tsx b/front/src/features/catalog/CategoryFilters.tsx
index 98cbbf2..a086911 100644
--- a/front/src/features/catalog/CategoryFilters.tsx
+++ b/front/src/features/catalog/CategoryFilters.tsx
@@ -1,22 +1,58 @@
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
-import { setSelectedCategory } from "../store/categoriesSlice";
+import { setSelectedCategory } from "./categoriesSlice";
 import styles from "./CategoriesSidebar.module.css";
+import { setFilters, fetchProductsByCategory, setPage } from "./productsSlice";
+import { useState } from "react";
 
-export const CategoriesSidebar = () => {
-  const { items, selectedCategoryId } = useAppSelector(s => s.categories);
+export const CategoryFilters = () => {
   const dispatch = useAppDispatch();
+  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+  const products = useAppSelector(s => s.products);
+  const cat = cats.find(x => x.id === selectedCategoryId);
+  const [local, setLocal] = useState<Record<string, (string|number)[]>>({});
 
+  const apply = () => {
+    dispatch(setFilters(local));
+    dispatch(setPage(1));
+    if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit, filters: local }));
+  };
+
+  if (!cat) return null;
   return (
-    <div className={styles.sidebar}>
-      {items.map(cat => (
-        <div
-          key={cat.id}
-          className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
-          onClick={() => dispatch(setSelectedCategory(cat.id))}
-        >
-          {cat.name}
-        </div>
-      ))}
+    <div className={styles.wrap}>
+      <h4 className={styles.title}>ПАРАМЕТРЫ</h4>
+      <div className={styles.blocks}>
+        {cat.atributes.map(attr => (
+          <div key={attr.id} className={styles.block}>
+            <div className={styles.blockTitle}>{`${attr.name}:`}</div>
+            <div className={styles.options}>
+              {attr.vals.map(v => {
+                const key = `attr_${attr.id}`;
+                const active = local[key]?.includes(v.val);
+                return (
+                  <label key={v.id} className={styles.opt}>
+                    <input type="checkbox"
+                      checked={!!active}
+                      onChange={() => {
+                        const cur = local[key] ?? [];
+                        const next = cur.includes(v.val) ? cur.filter(x => x !== v.val) : [...cur, v.val];
+                        setLocal({ ...local, [key]: next });
+                      }} />
+                    {v.val}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.actions}>
+        <button className={styles.apply} onClick={apply}>Показать</button>
+        <button className={styles.reset} onClick={() => { setLocal({}); dispatch(setFilters({})); dispatch(setPage(1)); if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit })); }}>Сбросить</button>
+      </div>
     </div>
   );
-};
\ No newline at end of file
+};
+
+export default CategoryFilters;
\ No newline at end of file