bugfix: weekdays, feat: hover highlight selected date

antonstihl · Jan 17, 2024 · ebd8b27 · ebd8b27
1 parent 9ed5517
commit ebd8b27
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 59 deletions.
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -41,7 +41,7 @@ function getDateCells(year: number, month: number): DateCell[] {
     });
   }
   const isJanuary = month === 0;
-  const previousMonth: number = isJanuary ? 12 : month - 1;
+  const previousMonth: number = isJanuary ? 11 : month - 1;
   const yearOfPreviousMonth: number = isJanuary ? year - 1 : year;
   const isDecember = month === 11;
   const nextMonth = isDecember ? 0 : month + 1;
@@ -52,7 +52,7 @@ function getDateCells(year: number, month: number): DateCell[] {
       month: previousMonth,
       date: getDaysInMonth(yearOfPreviousMonth, previousMonth),
     };
-    getDayOfMyDate(d) > 0;
+    getDayOfMyDate(d) !== 0;
     d = { year: yearOfPreviousMonth, month: previousMonth, date: d.date - 1 }
   ) {
     dates.unshift({
@@ -80,6 +80,7 @@ export type Props = {
   allAllocatedDates: MyAllocatedDate[];
   parentId?: string;
   childId?: string;
+  hoveredDate?: MyDate;
 };
 
 const Calendar = ({
@@ -89,6 +90,7 @@ const Calendar = ({
   allAllocatedDates,
   parentId,
   childId,
+  hoveredDate,
 }: Props) => {
   const today = new Date();
   const [month, setMonth] = useState(today.getMonth());
@@ -180,6 +182,9 @@ const Calendar = ({
               today={myDatesEqual(convertToMyDate(today), dateCell.date)}
               activeMonth={dateCell.current}
               toggleSelectedDate={() => toggleSelectedDate(dateCell.date)}
+              highlight={
+                hoveredDate ? myDatesEqual(hoveredDate, dateCell.date) : false
+              }
             />
           );
         })}

diff --git a/src/components/DateButton.tsx b/src/components/DateButton.tsx
@@ -22,6 +22,7 @@ export type Props = {
   today: boolean;
   activeMonth: boolean;
   toggleSelectedDate: () => void;
+  highlight: boolean;
 };
 
 export default function DateButton({
@@ -32,6 +33,7 @@ export default function DateButton({
   today,
   activeMonth,
   toggleSelectedDate,
+  highlight,
 }: Props) {
   const decoratedLeaves = leaves.map((leave: Leave) => ({
     paceStyle: getAllocationBarWidthStyle(leave.pace),
@@ -52,7 +54,9 @@ export default function DateButton({
     </div>
   ) : (
     <button
-      className="flex justify-between flex-col rounded-sm h-max min-w-fit select-none shadow-sm shadow-black"
+      className={`flex justify-between flex-col rounded-sm h-max min-w-fit select-none shadow-sm shadow-black ${
+        highlight ? "bg-black text-white" : "bg-white"
+      }`}
       onClick={toggleSelectedDate}
     >
       <div className="flex justify-center">

diff --git a/src/components/SegmentedControl.tsx b/src/components/SegmentedControl.tsx
@@ -1,4 +1,3 @@
-
 export type Option = {
   label: string;
   value: any;

diff --git a/src/components/SelectedDatesList.tsx b/src/components/SelectedDatesList.tsx
diff --git a/src/pages/CalendarPage.tsx b/src/pages/CalendarPage.tsx
@@ -9,7 +9,7 @@ import SelectedDatesList from "../components/SelectedDatesList";
 import { useChild, useChildUpdate, useChildren } from "../context/ChildContext";
 import { useParent } from "../context/ParentContext";
 import { useAllAllocatedDates } from "../hooks/useAllocatedDates";
-import { convertToDate } from "../utils/DateUtilities";
+import { convertToDate, toggleDateInArray } from "../utils/DateUtilities";
 import { MyDate } from "../types/types";
 
 const leaveOptions: Option[] = [
@@ -47,8 +47,8 @@ function CalendarPage() {
           (ad) => ad.childId === childId && ad.parentId === parent.id
         )
       : [];
-
   const [level, setLevel] = useState<Level>("Sjukpenning");
+  const [hoveredDate, setHoveredDate] = useState<MyDate | undefined>(undefined);
 
   useEffect(() => {
     const selectedDates = JSON.parse(
@@ -200,6 +200,7 @@ function CalendarPage() {
                 allAllocatedDates={allAllocatedDates}
                 parentId={parent?.id}
                 childId={childId}
+                hoveredDate={hoveredDate}
               />
             </Card>
           )}
@@ -220,11 +221,45 @@ function CalendarPage() {
                         Avmarkera alla
                       </Button>
                     </div>
-                    <SelectedDatesList
-                      selectedDates={selectedDates}
-                      setSelectedDates={updateSelectedDates}
-                    />
-                    {selectedDates.length === 0 && <p className="w-full text-center">Inga datum valda.</p>}
+                    <div className="flex w-full flex-col gap-2 justify-start">
+                      {selectedDates
+                        .sort(
+                          (a, b) =>
+                            convertToDate(a).getTime() -
+                            convertToDate(b).getTime()
+                        )
+                        .map((sd) => (
+                          <div
+                            key={
+                              sd.year.toString() +
+                              sd.month.toString() +
+                              sd.date.toString()
+                            }
+                            className="flex bg-green-700 text-white justify-between items-center shadow-sm shadow-black rounded-md"
+                            onMouseEnter={() => setHoveredDate(sd)}
+                            onMouseLeave={() => setHoveredDate(undefined)}
+                          >
+                            <div className="font-mono text-sm pl-2 py-1">{`${
+                              sd.year
+                            }-${String(sd.month + 1).padStart(2, "0")}-${String(
+                              sd.date
+                            ).padStart(2, "0")}`}</div>
+                            <button
+                              className="text-white px-3 py-1 hover:bg-green-900 h-full rounded-md"
+                              onClick={() =>
+                                updateSelectedDates(
+                                  toggleDateInArray(sd, selectedDates)
+                                )
+                              }
+                            >
+                              x
+                            </button>
+                          </div>
+                        ))}
+                    </div>
+                    {selectedDates.length === 0 && (
+                      <p className="w-full text-center">Inga datum valda.</p>
+                    )}
                     <div className="flex flex-col gap-2">
                       <p>Ledig</p>
                       <SegmentedControl