feat: add filter for types add reset filters

guz86 · Sep 24, 2024 · dd32fa5 · dd32fa5
1 parent ecd9ab3
commit dd32fa5
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 48 deletions.
diff --git a/app/public/assets/arrow-down.svg b/app/public/assets/arrow-down.svg
diff --git a/app/public/assets/close.png b/app/public/assets/close.png
diff --git a/app/src/components/Filters/Filters.css b/app/src/components/Filters/Filters.css
@@ -1,56 +1,108 @@
 .filters {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 24px;
 }
 
 .type-filter {
-  color: rgb(94, 119, 147);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 148%;
+    color: rgb(94, 119, 147);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 148%;
 }
 
 .day-filter {
-  color: rgb(0, 44, 251);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0%;
+    color: rgb(0, 44, 251);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+    letter-spacing: 0%;
 }
 
 .day-filter {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
 .day-filter-number {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
 .filter-arrow-icon {
-  width: 17px;
+    width: 17px;
 }
 
 .dropdown-button {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  color: #5e7793;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 148%;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    color: #5e7793;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 148%;
 }
 
 .arrow-icon {
-  padding: 0px 4px;
+    padding: 0px 4px;
 }
 
+
 .dropdown-menu {
-  display: none;
+    display: none;
+    position: absolute;
+    background-color: white;
+    border: 1px solid #bbb;
+    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
+    z-index: 1000;
+    margin-top: 3px;
+    border-radius: 8px;
+    width: 133px;
+    text-align: left;
+    color: #2B2D33;
+}
+
+.type-filter .dropdown-menu {
+    display: block;
+}
+
+.dropdown-item {
+    padding: 7px 12px 7px 12px;
+    cursor: pointer;
+}
+
+.dropdown-item:hover {
+    background: rgb(222, 228, 255);
+}
+
+.arrow-up {
+    transform: rotate(180deg);
+}
+
+.arrow-down {
+    transform: rotate(0deg);
+}
+
+.filter-text {
+    color: #5e7793;
+}
+
+.active-filter {
+    color: #015EF5;
+}
+
+.reset-filters{
+    padding-left: 10px;
+}
+
+.reset-filters-close{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 5px;
+    cursor: pointer;
 }
diff --git a/app/src/components/Filters/Filters.tsx b/app/src/components/Filters/Filters.tsx
@@ -1,22 +1,95 @@
 import './Filters.css';
+import { useState, useEffect, useRef } from 'react';
+
+interface FiltersProps {
+  onFilterChange: (filter: string) => void;
+}
+
+const Filters: React.FC<FiltersProps> = ({ onFilterChange }) => {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [currentFilter, setCurrentFilter] = useState('Все типы');
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleFilterChange = (filter: string) => {
+    const filterNames: { [key: string]: string } = {
+      '': 'Все типы',
+      '1': 'Входящие',
+      '0': 'Исходящие',
+    };
+
+    setCurrentFilter(filterNames[filter]);
+    onFilterChange(filter);
+    setMenuOpen(false);
+  };
+
+  const handleResetFilters = () => {
+    setCurrentFilter('Все типы');
+    onFilterChange('');
+    setMenuOpen(false);
+  };
+
+  const handleToggleMenu = () => {
+    setMenuOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+      setMenuOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
 
-const Filters = () => {
   return (
-    <div className="filters">
+    <div className="filters" ref={menuRef}>
       <div className="type-filter">
-        <div className="dropdown-button">
-          <div>Все типы</div>
-          <img
-            src="/assets/arrow-down.png"
-            alt="arrow"
-            className="arrow-icon"
-          />
-        </div>
-        <div className="dropdown-menu">
-          <div className="dropdown-item">Все типы</div>
-          <div className="dropdown-item">Входящие</div>
-          <div className="dropdown-item">Исходящие</div>
+        <div style={{ display: 'flex' }}>
+          <div className="dropdown-button" onClick={handleToggleMenu}>
+            <div
+              className={`filter-text ${currentFilter !== 'Все типы' ? 'active-filter' : ''}`}
+            >
+              {currentFilter}
+            </div>
+            <img
+              src="/assets/arrow-down.png"
+              alt="arrow"
+              className={`arrow-icon ${isMenuOpen ? 'arrow-up' : 'arrow-down'}`}
+            />
+          </div>
+          {currentFilter !== 'Все типы' && (
+            <div className="reset-filters-close" onClick={handleResetFilters}>
+              <div className="reset-filters">Сбросить фильтры</div>
+              <img src="/assets/close.png" alt="close" />
+            </div>
+          )}
         </div>
+        {isMenuOpen && (
+          <div className="dropdown-menu">
+            <div
+              className="dropdown-item"
+              onClick={() => handleFilterChange('')}
+            >
+              Все типы
+            </div>
+            <div
+              className="dropdown-item"
+              onClick={() => handleFilterChange('1')}
+            >
+              Входящие
+            </div>
+            <div
+              className="dropdown-item"
+              onClick={() => handleFilterChange('0')}
+            >
+              Исходящие
+            </div>
+          </div>
+        )}
       </div>
       <div className="day-filter">
         <img

diff --git a/app/src/pages/AppPage.tsx b/app/src/pages/AppPage.tsx
@@ -7,6 +7,7 @@ import { formatCalls } from '../utils/formatCalls';
 
 const AppPage = () => {
   const [rows, setRows] = useState<Call[]>([]);
+  const [filter, setFilter] = useState('');
 
   useEffect(() => {
     const getCalls = async () => {
@@ -17,23 +18,22 @@ const AppPage = () => {
 
         const dateStart = startDate.toISOString().split('T')[0];
         const dateEnd = endDate.toISOString().split('T')[0];
-        const inOut = '';
 
-        const calls = await fetchCalls(dateStart, dateEnd, inOut);
+        const calls = await fetchCalls(dateStart, dateEnd, filter);
         setRows(calls);
       } catch (error) {
         console.error(error);
       }
     };
 
     getCalls();
-  }, []);
+  }, [filter]);
 
   const formattedRows = formatCalls(rows);
 
   return (
     <div className="wrapper">
-      <Filters />
+      <Filters onFilterChange={setFilter} />
       <Table rows={formattedRows} />
     </div>
   );