Massive overhaul individual list settings

src/components/atoms/ElapsedTime.tsx

@@ -1,36 +1,49 @@
-import { useContext, useEffect } from "react";
+import React, { PropsWithChildren, useContext, useEffect } from "react";
 import { DateContext } from "../TimeHandler";
 import { StartEndUnitType } from "../../features/itemList/types";
-import { getCurrentRatio } from "../bottomRow/utils";
+import { advanceTerm, getCurrentRatio } from "../bottomRow/utils";
 import { DateTime } from "luxon";
 
-interface IElapsedTime {
-  term?: StartEndUnitType;
+interface IAdvanceTerm {
+  term: StartEndUnitType;
   setTerm: React.Dispatch<React.SetStateAction<StartEndUnitType>>;
-  advanceTerm: (...props: any) => void;
   isScopedToWorkingHours?: boolean;
+}
+
+interface IElapsedTime extends IAdvanceTerm {
   className?: string;
 }
 
-export const ElapsedTime = ({
+const AdvanceTerm = ({
   term,
   setTerm,
-  advanceTerm,
   isScopedToWorkingHours,
-  className,
-}: IElapsedTime) => {
+  children,
+}: PropsWithChildren<IAdvanceTerm>) => {
   const date = useContext(DateContext);
   const currentTimeMillis = DateTime.fromISO(date).toMillis();
   useEffect(() => {
-    advanceTerm(term, setTerm, currentTimeMillis, isScopedToWorkingHours);
-  }, [term, setTerm, currentTimeMillis, isScopedToWorkingHours, advanceTerm]);
+    if (currentTimeMillis > term.end) {
+      advanceTerm(term, setTerm, currentTimeMillis, isScopedToWorkingHours);
+    }
+  }, [term, setTerm, currentTimeMillis, isScopedToWorkingHours]);
 
-  if (term) {
-    return (
-      <span className={`float-right ${className}`}>
-        {getCurrentRatio(term) + "%"}
-      </span>
-    );
-  }
-  return null;
+  return <>{children}</>;
 };
+
+export const ElapsedTime = ({
+  term,
+  setTerm,
+  isScopedToWorkingHours,
+  className,
+}: IElapsedTime) => (
+  <AdvanceTerm
+    setTerm={setTerm}
+    isScopedToWorkingHours={isScopedToWorkingHours}
+    term={term}
+  >
+    <span className={`float-right ${className}`}>
+      {getCurrentRatio(term) + "%"}
+    </span>
+  </AdvanceTerm>
+);

src/components/atoms/Icon.tsx

@@ -1,6 +1,11 @@
 import { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { CSSProperties, MouseEventHandler } from "react";
+import {
+  CSSProperties,
+  ForwardedRef,
+  MouseEventHandler,
+  forwardRef,
+} from "react";
 
 interface IconProps {
   icon: IconDefinition;
@@ -11,12 +16,17 @@ interface IconProps {
   title?: string;
 }
 
-const Icon = ({ faStyle, iconClassName, faClassName, ...rest }: IconProps) => {
-  return (
-    <i aria-hidden="true" className={iconClassName}>
-      <FontAwesomeIcon style={faStyle} className={faClassName} {...rest} />
-    </i>
-  );
-};
+const Icon = forwardRef(
+  (
+    { faStyle, iconClassName, faClassName, ...rest }: IconProps,
+    ref?: ForwardedRef<HTMLElement | null>
+  ) => {
+    return (
+      <span ref={ref} aria-hidden="true" className={iconClassName}>
+        <FontAwesomeIcon style={faStyle} className={faClassName} {...rest} />
+      </span>
+    );
+  }
+);
 
 export default Icon;

src/components/atoms/RadioButton.tsx

@@ -3,7 +3,7 @@ import { Sentencecase } from "../../features/utils/Sentencecase";
 
 interface RadioButtonProps {
   enabled: boolean;
-  category: string;
+  groupId: number;
   firstIsChecked: boolean;
   setIsChecked: React.Dispatch<React.SetStateAction<boolean>>;
   firstRadioName: string;
@@ -12,7 +12,7 @@ interface RadioButtonProps {
 
 const RadioButton = ({
   enabled,
-  category,
+  groupId,
   firstIsChecked,
   setIsChecked,
   firstRadioName,
@@ -22,8 +22,8 @@ const RadioButton = ({
     const isChecked = e.currentTarget.value === firstRadioName;
     setIsChecked(isChecked);
   };
-  const firstRadioCategory = `${category}-${firstRadioName}`;
-  const secondRadioCategory = `${category}-${secondRadioName}`;
+  const firstRadioCategory = `group-${groupId}-${firstRadioName}`;
+  const secondRadioCategory = `group-${groupId}-${secondRadioName}`;
   return (
     <>
       <input
@@ -35,7 +35,7 @@ const RadioButton = ({
         onChange={handleChange}
         checked={firstIsChecked}
       />
-      <label htmlFor={firstRadioCategory}>{` ${Sentencecase(
+      <label htmlFor={firstRadioCategory} className="text-xs">{` ${Sentencecase(
         firstRadioName
       )} `}</label>
       <input
@@ -47,9 +47,10 @@ const RadioButton = ({
         onChange={handleChange}
         checked={!firstIsChecked}
       />
-      <label htmlFor={secondRadioCategory}>{` ${Sentencecase(
-        secondRadioName
-      )}`}</label>
+      <label
+        htmlFor={secondRadioCategory}
+        className="text-xs"
+      >{` ${Sentencecase(secondRadioName)}`}</label>
     </>
   );
 };

src/components/bottomRow/index.tsx

@@ -2,15 +2,13 @@ import { selectAllUnits } from "../../features/settings/settingsSlice";
 import { useAppSelector } from "../../app/hooks";
 import { selectAllLists } from "../../features/itemList/itemListSlice";
 import { ListGroup } from "./list/Group";
-import { advanceTerm, useShortTerm, useTerm, DraggableLists } from "./utils";
+import { useShortTerm, useTerm } from "./utils";
+import { DraggableLists } from "./list/DraggableLists";
 
 export const BottomRow = () => {
   // Short term
-  const {
-    shortTerm: savedShortTerm,
-    mediumTerm: savedMediumTerm,
-    longTerm: savedLongTerm,
-  } = useAppSelector(selectAllUnits);
+  const [savedShortTerm, savedMediumTerm, savedLongTerm] =
+    useAppSelector(selectAllUnits);
 
   const [shortTerm, setShortTerm, isScopedToWorkingHours] = useShortTerm();
   const [mediumTerm, setMediumTerm] = useTerm(savedMediumTerm);
@@ -21,29 +19,29 @@ export const BottomRow = () => {
     <div className="flex justify-between lg:h-1/2 lg:flex-nowrap h-auto flex-wrap">
       <DraggableLists lists={lists}>
         <ListGroup
+          groupId={0}
           title={savedShortTerm.title}
           isScopedToWorkingHours={isScopedToWorkingHours}
           term={shortTerm}
           setTerm={setShortTerm}
           list={lists.shortTermList}
           listKey="shortTermList"
-          advanceTerm={advanceTerm}
         />
         <ListGroup
+          groupId={1}
           title={savedMediumTerm.title}
           term={mediumTerm}
           setTerm={setMediumTerm}
           list={lists.mediumTermList}
           listKey="mediumTermList"
-          advanceTerm={advanceTerm}
         />
         <ListGroup
+          groupId={2}
           title={savedLongTerm.title}
           term={longTerm}
           setTerm={setLongTerm}
           list={lists.longTermList}
           listKey="longTermList"
-          advanceTerm={advanceTerm}
         />
       </DraggableLists>
     </div>

src/components/bottomRow/list/Group.tsx

@@ -7,8 +7,10 @@ import { DragAndDrop } from "./item/DumbListItem";
 import { List } from "./List";
 import { ElapsedTime } from "../../atoms/ElapsedTime";
 import Icon from "../../atoms/Icon";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
+import { faGears } from "@fortawesome/free-solid-svg-icons/faGears";
+import { ColumnSettings } from "../../settings/ColumnSettings";
 
 const createNameList = (list: ListGroupProps["list"]) =>
   list.map((item) => item.name);
@@ -24,36 +26,62 @@ export const ListGroup = ({
   list,
   dragAndDrop,
   listKey,
-  advanceTerm,
   isScopedToWorkingHours,
+  groupId,
 }: ListGroupProps) => {
   const [hideIcon, setHideIcon] = useState(true);
+  const [hideSettings, setHideSettings] = useState(true);
   const iconShowOrHide = hideIcon ? " hidden" : " fade-in-1s";
+  const settingsContainer = useRef(null as HTMLDivElement | null);
 
   return (
     <div className="fade-in-up-1s align-top m-2 w-full lg:w-3/10 inline-block">
       <div
-        className="pb-1 text-2xl border-b border-current text-center"
+        className={`pb-1 text-2xl border-current text-center${
+          hideSettings ? " border-b" : ""
+        }`}
+        role="columnheader"
+        tabIndex={0}
         onMouseEnter={() => setHideIcon(false)}
         onMouseLeave={() => setHideIcon(true)}
       >
+        <div className="min-w-10 inline-block">
+          <Icon
+            onClick={(e) => {
+              e.stopPropagation();
+              setHideSettings(!hideSettings);
+            }}
+            icon={faGears}
+            iconClassName={`cursor-pointer mr-2${iconShowOrHide}`}
+          />
+        </div>
         <div className="min-w-8 inline-block">
           <Icon
             onClick={() => copyListToClipboard(list)}
             icon={faCopy}
-            iconClassName={`cursor-pointer  mr-2${iconShowOrHide}`}
+            iconClassName={`cursor-pointer mr-2${iconShowOrHide}`}
           />
         </div>
         <span className="text-[1.6875rem]">{title}</span>
         <ElapsedTime
           className="text-[1.6875rem]"
           term={term}
           setTerm={setTerm}
-          advanceTerm={advanceTerm}
           isScopedToWorkingHours={isScopedToWorkingHours}
         />
       </div>
-      <List itemList={list} listKey={listKey} dragAndDrop={dragAndDrop} />
+      {hideSettings ? (
+        <List itemList={list} listKey={listKey} dragAndDrop={dragAndDrop} />
+      ) : (
+        <div data-testid="column-settings" ref={settingsContainer}>
+          <ColumnSettings
+            settingsContainer={settingsContainer}
+            hideSettings={hideSettings}
+            setHideSettings={setHideSettings}
+            groupId={groupId}
+          />
+        </div>
+      )}
     </div>
   );
 };
@@ -63,8 +91,8 @@ interface ListGroupProps {
   list: ItemList;
   dragAndDrop?: DragAndDrop;
   listKey: ListKey;
-  term?: StartEndUnitType;
+  term: StartEndUnitType;
   setTerm: React.Dispatch<React.SetStateAction<StartEndUnitType>>;
-  advanceTerm: (...props: any) => void;
   isScopedToWorkingHours?: boolean;
+  groupId: number;
 }

src/components/bottomRow/list/item/Item.tsx

@@ -32,11 +32,11 @@ export const SmartListItem = ({
     useRef(null);
 
   const closeAndSaveInput = useCallback(
-    (name: string) => {
+    (name?: string) => {
       dispatch(
         updateListItem({
           listKey,
-          name,
+          name: name ?? "",
           index,
         })
       );

src/components/bottomRow/utils/advanceTerm.ts

@@ -0,0 +1,42 @@
+import { DateTime } from "luxon";
+import { StartEndUnitType } from "../../../features/itemList/types";
+import { isNewDay } from "../../../features/utils/isNewDay";
+
+const OneDay = { days: 1 };
+const advanceTermGen = (termObject: StartEndUnitType) => {
+  const duration = termObject.end - termObject.start;
+  termObject.start = termObject.end + 1;
+  termObject.end = termObject.start + duration;
+};
+
+const advanceWorkingHours = (termObject: StartEndUnitType) => {
+  termObject.start = DateTime.fromMillis(termObject.start)
+    .plus(OneDay)
+    .toMillis();
+  termObject.end = DateTime.fromMillis(termObject.end).plus(OneDay).toMillis();
+};
+
+/**
+ * A function that updates the start and end properties of the term object, if the current time is past the end of the current day.
+ * @param term the term object
+ * @param setTerm a setState function
+ * @param currentTimeMillis current time in milliseconds
+ * @param isScopedToWorkingHours boolean value to indicate if daily hours should be scoped to working hours
+ */
+export const advanceTerm = (
+  term: StartEndUnitType,
+  setTerm: React.Dispatch<React.SetStateAction<StartEndUnitType>>,
+  currentTimeMillis: number,
+  isScopedToWorkingHours?: boolean
+) => {
+  const termCopy = { ...term };
+  if (isScopedToWorkingHours) {
+    if (isNewDay(currentTimeMillis)) {
+      advanceWorkingHours(termCopy);
+      setTerm(termCopy);
+    }
+  } else {
+    advanceTermGen(termCopy);
+    setTerm(termCopy);
+  }
+};