Merge pull request #106 from AplinkosMinisterija/103-paruosti-datos-p…

…asirinkima 103 paruosti datos pasirinkima
AplinkosMinisterija · Sep 27, 2024 · 21216f5 · 21216f5
2 parents 1c66835 + bbe9069
commit 21216f5
Show file tree

Hide file tree

Showing 16 changed files with 1,274 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@aplinkosministerija/design-system": "^0.0.30",
+    "@aplinkosministerija/design-system": "^0.0.84",
     "@tanstack/react-query": "^5.20.5",
     "@tanstack/react-query-devtools": "^5.20.5",
     "@types/node": "^20.12.12",

diff --git a/src/components/DateRangePickerModal.tsx b/src/components/DateRangePickerModal.tsx
@@ -0,0 +1,240 @@
+import { lt } from 'date-fns/locale';
+import Datepicker, { registerLocale } from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import styled from 'styled-components';
+import { device, useWindowSize } from '@aplinkosministerija/design-system';
+import Icon from './Icons';
+import { IconName } from '../utils';
+
+registerLocale('lt', lt);
+
+export interface DateRangePickerProps {
+  onDateChange: ({ start, end }) => void;
+  endDate: Date;
+  startDate: Date;
+  setOpen: (val: boolean) => void;
+}
+
+const DateRangePickerModal = ({
+  onDateChange,
+  endDate,
+  startDate,
+  setOpen,
+}: DateRangePickerProps) => {
+  const isMobile = useWindowSize(device.mobileL);
+  const handleBlur = (event: any) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Container tabIndex={1} onBlur={handleBlur}>
+      <DateContainer>
+        {isMobile && (
+          <div
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            <CloseIcon name={IconName.close} />
+          </div>
+        )}
+        <Datepicker
+          locale="lt"
+          selected={startDate}
+          onChange={(dates) => {
+            const [start, end] = dates;
+            onDateChange({ start, end: end });
+          }}
+          startDate={startDate}
+          endDate={endDate}
+          selectsRange
+          onClickOutside={() => setOpen(false)}
+          inline
+        />
+      </DateContainer>
+    </Container>
+  );
+};
+
+const DateContainer = styled.div`
+  position: relative;
+  &:focus {
+    outline: none;
+  }
+  @media ${device.mobileL} {
+    position: fixed;
+    z-index: 9;
+    left: 0px;
+    top: 0px;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+`;
+
+const CloseIcon = styled(Icon)`
+  color: white;
+  font-size: 2.8rem;
+  align-self: center;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+`;
+
+const Container = styled.div`
+  position: relative;
+  &:focus {
+    outline: none;
+  }
+  .react-datepicker__header {
+    color: #121a55;
+    background-color: #ffffff !important;
+    border: none;
+  }
+  .react-datepicker__month {
+    margin: 0;
+  }
+  .react-datepicker__day--outside-month {
+    color: #151229;
+    opacity: 0.6;
+  }
+  .react-datepicker__day {
+    &:focus {
+      outline: none;
+    }
+    margin: 26px 32px 0px 0px;
+    position: relative;
+    font-size: 1.5rem;
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.primary};
+      color: white;
+      &::before {
+        content: '';
+        position: absolute;
+        background-color: ${({ theme }) => theme.colors.primary};
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: -1;
+        width: 50px;
+        height: 50px;
+        border-radius: 25px;
+      }
+    }
+    @media ${device.mobileS} {
+      margin: 26px 16px 0px 0px;
+      &:hover {
+        &::before {
+          content: '';
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+  }
+  .react-datepicker {
+    width: 364px;
+    position: absolute;
+    top: 5px;
+    z-index: 8;
+    background-color: #ffffff;
+    box-shadow: 0px 2px 16px #121a5529;
+    border-radius: 10px;
+    padding: 0px 26px 20px 26px;
+    border: none;
+    @media ${device.mobileL} {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    @media ${device.mobileS} {
+      width: 95%;
+    }
+  }
+  .react-datepicker__day--selected {
+    background-color: white;
+    position: relative;
+    z-index: 1;
+    font-size: 1.5rem;
+  }
+  .react-datepicker__day--keyboard-selected {
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: white;
+    font-size: 1.5rem;
+    &::before {
+      content: '';
+      position: absolute;
+      background-color: ${({ theme }) => theme.colors.primary};
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: -1;
+      width: 50px;
+      height: 50px;
+      border-radius: 25px;
+    }
+  }
+  .react-datepicker__day--selected::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+    background-color: ${({ theme }) => theme.colors.primary};
+    width: 50px;
+    height: 50px;
+    border-radius: 25px;
+  }
+  @media ${device.mobileS} {
+    .react-datepicker__day--selected::before {
+      content: '';
+      width: 30px;
+      height: 30px;
+    }
+  }
+  .react-datepicker__day-name {
+    font-size: 1.4rem;
+    font-weight: bold;
+    letter-spacing: 0px;
+    color: #151229;
+    margin: 26px 32px 0px 0px;
+    border: none;
+  }
+  @media ${device.mobileS} {
+    .react-datepicker__day-name {
+      margin: 26px 16px 0px 0px;
+    }
+  }
+  .react-datepicker__navigation {
+    top: 20px;
+  }
+  .react-datepicker__current-month {
+    text-align: center;
+    font-size: 1.6rem;
+    letter-spacing: 0px;
+    color: #121a55;
+    margin-top: 13px;
+    text-transform: capitalize;
+  }
+  .react-datepicker__navigation--previous {
+    left: 17px;
+  }
+  .react-datepicker__navigation--next {
+    right: 17px;
+  }
+  .react-datepicker__month-container {
+    float: none;
+  }
+  .react-datepicker__day--in-range {
+    background-color: ${({ theme }) => theme.colors.primary};
+  }
+`;
+
+export default DateRangePickerModal;
diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
@@ -2,23 +2,39 @@ import { useState } from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 import styled from 'styled-components';
 import Icon from './Icons';
-import { Frequency, IconName, statsTimeRangeItems } from '../utils';
+import {
+  Frequency,
+  IconName,
+  TimeRanges,
+  displayCustomDateFilterLabel,
+  formatDateAndTime,
+  formatDateFrom,
+  formatDateTo,
+  statsTimeRangeItems,
+} from '../utils';
+import DateRangePickerModal from './DateRangePickerModal';
 
 const frequencyLabels = {
   [Frequency.DAY]: 'Šiandienos',
   [Frequency.WEEK]: 'Savaitės',
   [Frequency.MONTH]: 'Mėnesio',
+  [Frequency.CUSTOM]: 'Pasirinkite datą',
 };
 
 export interface DatepickerProps {
   value: string;
   onChange: (val1: string, val2: { $gte: string; $lt: string }) => void;
-  maxDate?: Date | string;
-  minDate?: Date | string;
+  selectedDates: {
+    $gte: string;
+    $lt: string;
+  };
 }
 
-const Datepicker = ({ value, onChange }: DatepickerProps) => {
+const Datepicker = ({ value, onChange, selectedDates }: DatepickerProps) => {
   const [open, setOpen] = useState(false);
+  const [openDatePickerModal, setOpenDatePickerModal] = useState(false);
+  const [date, setDate] = useState({ start: new Date(), end: new Date() });
+
   const handleBlur = (event: any) => {
     if (!event.currentTarget.contains(event.relatedTarget)) {
       setOpen(false);
@@ -28,27 +44,57 @@ const Datepicker = ({ value, onChange }: DatepickerProps) => {
   return (
     <Container tabIndex={1} onBlur={handleBlur}>
       <FilterButton onClick={() => setOpen(!open)}>
-        <SelectedDateLabel>{frequencyLabels[value]}</SelectedDateLabel>
+        <SelectedDateLabel>
+          {value === TimeRanges.CUSTOM
+            ? displayCustomDateFilterLabel({
+                start: new Date(selectedDates.$gte),
+                end: new Date(selectedDates.$lt),
+              })
+            : frequencyLabels[value]}
+        </SelectedDateLabel>
         <Icon name={IconName.dropdownArrow} />
       </FilterButton>
 
       {open ? (
         <DateContainer>
           <FilterContainer>
-            {statsTimeRangeItems?.map((item) => (
-              <SelectedDateLabel
-                key={item.key}
-                onClick={() => {
-                  onChange(item.key, item.query);
-                  setOpen(false);
-                }}
-              >
-                {frequencyLabels[item.key]}
-              </SelectedDateLabel>
-            ))}
+            {statsTimeRangeItems?.map((item) => {
+              return (
+                <SelectedDateLabel
+                  key={item.key}
+                  onClick={() => {
+                    if (item.key === TimeRanges.CUSTOM) {
+                      setOpenDatePickerModal(true);
+                      setOpen(false);
+                    } else {
+                      onChange(item.key, item.query);
+                      setOpen(false);
+                    }
+                  }}
+                >
+                  {item.name}
+                </SelectedDateLabel>
+              );
+            })}
           </FilterContainer>
         </DateContainer>
       ) : null}
+      {openDatePickerModal && (
+        <DateRangePickerModal
+          onDateChange={(val) => {
+            val && setDate({ start: val.start, end: val.end });
+          }}
+          startDate={date.start}
+          endDate={date.end}
+          setOpen={(val) => {
+            onChange(TimeRanges.CUSTOM, {
+              $gte: formatDateAndTime(formatDateFrom(date.start)),
+              $lt: formatDateAndTime(formatDateTo(date.end || date.start)),
+            });
+            setOpenDatePickerModal(val);
+          }}
+        />
+      )}
     </Container>
   );
 };
@@ -85,8 +131,8 @@ const FilterButton = styled.div`
   flex-direction: row;
   background-color: white;
   border-radius: 16px;
-  width: 170px;
-  max-width: 160px;
+  min-width: 170px;
+  max-width: fit-content;
   align-items: center;
   justify-content: center;
   padding: 16px;

diff --git a/src/components/DeleteCard.tsx b/src/components/DeleteCard.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { device } from '../styles';
-import { Button, ButtonVariants, Modal } from '@aplinkosministerija/design-system';
+import { ButtonVariants, device } from '../styles';
+import { Button, Modal } from '@aplinkosministerija/design-system';
 import Icon from './Icons';
 export interface DeleteCardProps {
   title: string;