feat: add enter date for date picker

guz86 · Sep 25, 2024 · c81da44 · c81da44
1 parent 3d1f609
commit c81da44
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 7 deletions.
diff --git a/app/src/components/Filters/Filters.css b/app/src/components/Filters/Filters.css
@@ -50,11 +50,6 @@
 
 .arrow-icon {
   padding: 0px 4px;
-  transition: transform 0.2s;
-}
-
-.filter-arrow-icon:hover .arrow-icon {
-  transform: scale(1.1);
 }
 
 .dropdown-menu {
@@ -119,9 +114,56 @@
   border: 1px solid #bbb;
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
   z-index: 1000;
-  margin-top: 150px;
+  margin-top: 220px;
   border-radius: 8px;
-  width: 133px;
+  width: 204px;
   text-align: left;
   color: #2b2d33;
 }
+
+.custom-date-range {
+  display: flex;
+  justify-content: center;
+  color: rgb(173, 191, 223);
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+}
+
+.date-input {
+  display: flex;
+  align-items: baseline;
+}
+
+.date-field {
+  width: 18px;
+  padding-bottom: 20px;
+  border: none;
+  outline: none;
+}
+
+.date-field-year {
+  width: 28px;
+  padding-bottom: 20px;
+  border: none;
+  outline: none;
+}
+
+.date-separator {
+  font-size: 14px;
+}
+
+.date-range-separator {
+  font-size: 14px;
+  padding-right: 10px;
+}
+
+.calendar-icon {
+  width: 16px;
+  height: 17.6px;
+  cursor: pointer;
+}
+
+.custom-date-range.active .date-field {
+  border-bottom: 2px solid #2563eb;
+}
diff --git a/app/src/components/Filters/Filters.tsx b/app/src/components/Filters/Filters.tsx
@@ -6,23 +6,33 @@ interface FiltersProps {
   onDateRangeChange: (range: string) => void;
   onLeftArrowClick: () => void;
   onRightArrowClick: () => void;
+  onCustomDateRangeChange: (startDate: string, endDate: string) => void;
 }
 
 const Filters: React.FC<FiltersProps> = ({
   onFilterChange,
   onDateRangeChange,
   onLeftArrowClick,
   onRightArrowClick,
+  onCustomDateRangeChange,
 }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [currentFilter, setCurrentFilter] = useState('Все типы');
   const [isDateMenuOpen, setDateMenuOpen] = useState(false);
   const [currentDateRange, setCurrentDateRange] = useState('3 дня');
+  const [isCustomDateRange, setIsCustomDateRange] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
   const [isLeftHovered, setIsLeftHovered] = useState(false);
   const [isRightHovered, setIsRightHovered] = useState(false);
   const [isCalendarHovered, setIsCalendarHovered] = useState(false);
 
+  const [startDay, setStartDay] = useState('');
+  const [startMonth, setStartMonth] = useState('');
+  const [startYear, setStartYear] = useState('');
+  const [endDay, setEndDay] = useState('');
+  const [endMonth, setEndMonth] = useState('');
+  const [endYear, setEndYear] = useState('');
+
   const handleFilterChange = (filter: string) => {
     const filterNames: { [key: string]: string } = {
       '': 'Все типы',
@@ -49,6 +59,7 @@ const Filters: React.FC<FiltersProps> = ({
     setCurrentDateRange(range);
     onDateRangeChange(range);
     setDateMenuOpen(false);
+    setIsCustomDateRange(false);
   };
 
   const handleToggleDateMenu = () => {
@@ -62,6 +73,23 @@ const Filters: React.FC<FiltersProps> = ({
     }
   };
 
+  const handleCustomDateRangeChange = () => {
+    const startDate = `${startYear}-${startMonth}-${startDay}`;
+    const endDate = `${endYear}-${endMonth}-${endDay}`;
+
+    if (startDate && endDate) {
+      onCustomDateRangeChange(startDate, endDate);
+      setStartDay('');
+      setStartMonth('');
+      setStartYear('');
+      setEndDay('');
+      setEndMonth('');
+      setEndYear('');
+      setIsCustomDateRange(false);
+      setCurrentDateRange('Диапазон');
+    }
+  };
+
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
@@ -195,6 +223,74 @@ const Filters: React.FC<FiltersProps> = ({
             >
               Год
             </div>
+            <div
+              className={`dropdown-item ${isCustomDateRange ? 'active-filter' : ''}`}
+              onClick={() => setIsCustomDateRange((prev) => !prev)}
+            >
+              Указать даты
+            </div>
+
+            <div
+              className={`custom-date-range ${isCustomDateRange ? 'active' : ''}`}
+            >
+              <div className="date-input">
+                <input
+                  type="text"
+                  value={startDay}
+                  onChange={(e) => setStartDay(e.target.value)}
+                  className="date-field"
+                  placeholder="_ _"
+                />
+                <span className="date-separator">.</span>
+                <input
+                  type="text"
+                  value={startMonth}
+                  onChange={(e) => setStartMonth(e.target.value)}
+                  className="date-field"
+                  placeholder="_ _"
+                />
+                <span className="date-separator">.</span>
+                <input
+                  type="text"
+                  value={startYear}
+                  onChange={(e) => setStartYear(e.target.value)}
+                  className="date-field-year"
+                  placeholder="_ _"
+                />
+              </div>
+              <span className="date-range-separator">-</span>
+              <div className="date-input">
+                <input
+                  type="text"
+                  value={endDay}
+                  onChange={(e) => setEndDay(e.target.value)}
+                  className="date-field"
+                  placeholder="_ _"
+                />
+                <span className="date-separator">.</span>
+                <input
+                  type="text"
+                  value={endMonth}
+                  onChange={(e) => setEndMonth(e.target.value)}
+                  className="date-field"
+                  placeholder="_ _"
+                />
+                <span className="date-separator">.</span>
+                <input
+                  type="text"
+                  value={endYear}
+                  onChange={(e) => setEndYear(e.target.value)}
+                  className="date-field-year"
+                  placeholder="_ _"
+                />
+              </div>
+              <img
+                onClick={handleCustomDateRangeChange}
+                src="/assets/icon-calendar.png"
+                alt="calendar"
+                className="calendar-icon"
+              />
+            </div>
           </div>
         )}
       </div>

diff --git a/app/src/pages/AppPage.tsx b/app/src/pages/AppPage.tsx
@@ -114,13 +114,25 @@ const AppPage = () => {
     setCustomDateRange({ startDate, endDate });
   };
 
+  const handleCustomDateRangeChange = (startDate: string, endDate: string) => {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+
+    if (!isNaN(start.getTime()) && !isNaN(end.getTime()) && start <= end) {
+      setCustomDateRange({ startDate: start, endDate: end });
+    } else {
+      console.error('Invalid date range selected');
+    }
+  };
+
   return (
     <div className="wrapper">
       <Filters
         onFilterChange={setFilter}
         onDateRangeChange={setDateRange}
         onLeftArrowClick={handleLeftArrowClick}
         onRightArrowClick={handleRightArrowClick}
+        onCustomDateRangeChange={handleCustomDateRangeChange}
       />
       <Table rows={formattedRows} />
     </div>