diff --git a/apps/private/package.json b/apps/private/package.json index 8b60093..be55937 100644 --- a/apps/private/package.json +++ b/apps/private/package.json @@ -5,7 +5,7 @@ "@paralleldrive/cuid2": "^2.2.2", "axios": "^1.7.7", "dayjs": "^1.11.13", - "koi-pool": "^0.0.32", + "koi-pool": "^0.0.33", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.26.2", diff --git a/apps/private/src/components/GoalList/components/Goal/Goal.css b/apps/private/src/components/GoalList/components/Goal/Goal.css index ac52b16..a2668b1 100644 --- a/apps/private/src/components/GoalList/components/Goal/Goal.css +++ b/apps/private/src/components/GoalList/components/Goal/Goal.css @@ -46,3 +46,23 @@ padding-top: .25rem; background-color: white; box-shadow: unset; } +.Goal .GoalIndicator { + height: 6px; + position: absolute; + bottom: 0; + z-index: 1; + display: block; + width: 50%; + left: 16px; + border-radius: 1rem 1rem 0rem 0rem; +} +.Goal .TopIndicator { + height: 6px; + position: absolute; + top: 0; + z-index: 1; + display: block; + width: 50%; + right: 16px; + border-radius: 0 0 1rem 1rem; +} \ No newline at end of file diff --git a/apps/private/src/components/GoalList/components/Goal/Goal.tsx b/apps/private/src/components/GoalList/components/Goal/Goal.tsx index 283497c..acb2324 100644 --- a/apps/private/src/components/GoalList/components/Goal/Goal.tsx +++ b/apps/private/src/components/GoalList/components/Goal/Goal.tsx @@ -10,7 +10,7 @@ import { import TaskActions from "../../actions/TaskActions"; import {useGoalListContext} from "../../../../contexts/GoalListProvider/GoalListProvider"; import GoalActions from "../../actions/GoalActions"; -import {allDueDates, type DUE_DATE, getDueDateFromDate} from "../../../../utils/utils"; +import {allDueDates, ColorSelection, type DUE_DATE, getDueDateFromDate} from "../../../../utils/utils"; import Tasks from "../Task/Task"; import {handleSubmitEnter} from "@repo/shared"; import dayjs from "dayjs"; @@ -46,12 +46,18 @@ function Goal({id, completionDate, name, isEditing, isFavorite, tasks, tasksComp return taskBeingChecked.isCompleted }) + const selectedOption = getDueDateFromDate(completionDate); + return
+
+ containerAttributes={{className: 'Select'}} - selectedOptionAttributes={{className: 'SelectedOption'}} - options={allDueDates()} - selectedOption={getDueDateFromDate(completionDate)} onClick={handleUpdateDueDate}/> + selectedOptionAttributes={{className: 'SelectedOption', style: {color: ColorSelection['Default'][selectedOption].backgroundColor}}} + options={allDueDates()} optionAttributes={ + {style: ((option) => ({...ColorSelection['Default'][option]}))} + } + selectedOption={selectedOption} onClick={handleUpdateDueDate}/>
{ @@ -93,6 +99,7 @@ function Goal({id, completionDate, name, isEditing, isFavorite, tasks, tasksComp )}
+
; } diff --git a/apps/private/src/components/GoalList/components/Task/Task.tsx b/apps/private/src/components/GoalList/components/Task/Task.tsx index 7b5491a..ae8f4de 100644 --- a/apps/private/src/components/GoalList/components/Task/Task.tsx +++ b/apps/private/src/components/GoalList/components/Task/Task.tsx @@ -29,7 +29,10 @@ function Task({text, isEditing,isCompleted, id, goalId}: TaskType & { if (isEditing) { return
{ handleSubmitEnter(event, handleToggleObjectiveEditing); }} + onKeyDown={(event) => { + handleSubmitEnter(event, handleToggleObjectiveEditing); + + }} value={text} label="" onClick={handleToggleObjectiveEditing}/>
; } diff --git a/apps/private/src/utils/utils.ts b/apps/private/src/utils/utils.ts index 97ee0c4..630ca37 100644 --- a/apps/private/src/utils/utils.ts +++ b/apps/private/src/utils/utils.ts @@ -2,95 +2,132 @@ import dayjs, {ManipulateType} from "dayjs"; export enum DUE_DATE { - TODAY = 'Today', - TOMORROW = 'Tomorrow', - WEEK = "Next Week", - TWO_WEEKS = "2 Weeks from now", - MONTH = "Next Month", - TWO_MONTHS = "2 Months from now", - QUARTER = "Next Quarter", - SIX_MONTHS = "6 Months from now", - YEAR = 'Next Year', - TWO_YEARS = '2 Years from now', - CUSTOM = "Custom" + TODAY = 'Today', + TOMORROW = 'Tomorrow', + WEEK = "Next Week", + TWO_WEEKS = "2 Weeks from now", + MONTH = "Next Month", + TWO_MONTHS = "2 Months from now", + QUARTER = "Next Quarter", + SIX_MONTHS = "6 Months from now", + YEAR = 'Next Year', + TWO_YEARS = '2 Years from now', + CUSTOM = "Custom" } export const allDueDates = (): DUE_DATE[] => [ - DUE_DATE.TODAY, - DUE_DATE.TOMORROW, - DUE_DATE.WEEK, - DUE_DATE.TWO_WEEKS, - DUE_DATE.MONTH, - DUE_DATE.TWO_MONTHS, - DUE_DATE.QUARTER, - DUE_DATE.SIX_MONTHS, - DUE_DATE.YEAR, - DUE_DATE.TWO_YEARS, - DUE_DATE.CUSTOM + DUE_DATE.TODAY, + DUE_DATE.TOMORROW, + DUE_DATE.WEEK, + DUE_DATE.TWO_WEEKS, + DUE_DATE.MONTH, + DUE_DATE.TWO_MONTHS, + DUE_DATE.QUARTER, + DUE_DATE.SIX_MONTHS, + DUE_DATE.YEAR, + DUE_DATE.TWO_YEARS, + DUE_DATE.CUSTOM ]; export const allDueDatesAndDates = (): Record => { - return allDueDates().reduce>((yeet, dueDate) => { - yeet[dueDate] = getDateFromDueDate(dueDate); - return yeet; - }, {} as Record); + return allDueDates().reduce>((yeet, dueDate) => { + yeet[dueDate] = getDateFromDueDate(dueDate); + return yeet; + }, {} as Record); }; export const getDateFromDueDate = (currentDueDate: DUE_DATE): Date | null => { - switch (currentDueDate) { - case DUE_DATE.TODAY: - return dayjs().toDate(); - case DUE_DATE.TOMORROW: - return dayjs().add(1, 'day').toDate(); - case DUE_DATE.WEEK: - return dayjs().add(1, 'week').toDate(); - case DUE_DATE.TWO_WEEKS: - return dayjs().add(2, 'week').toDate(); - case DUE_DATE.MONTH: - return dayjs().add(1, 'month').toDate(); - case DUE_DATE.TWO_MONTHS: - return dayjs().add(2, 'month').toDate(); - case DUE_DATE.QUARTER: - return dayjs().add(3, 'month').toDate(); - case DUE_DATE.SIX_MONTHS: - return dayjs().add(6, 'month').toDate(); - case DUE_DATE.YEAR: - return dayjs().add(1, "year").toDate(); - case DUE_DATE.TWO_YEARS: - return dayjs().add(2, 'year').toDate(); - default: - return null; - } + switch (currentDueDate) { + case DUE_DATE.TODAY: + return dayjs().toDate(); + case DUE_DATE.TOMORROW: + return dayjs().add(1, 'day').toDate(); + case DUE_DATE.WEEK: + return dayjs().add(1, 'week').toDate(); + case DUE_DATE.TWO_WEEKS: + return dayjs().add(2, 'week').toDate(); + case DUE_DATE.MONTH: + return dayjs().add(1, 'month').toDate(); + case DUE_DATE.TWO_MONTHS: + return dayjs().add(2, 'month').toDate(); + case DUE_DATE.QUARTER: + return dayjs().add(3, 'month').toDate(); + case DUE_DATE.SIX_MONTHS: + return dayjs().add(6, 'month').toDate(); + case DUE_DATE.YEAR: + return dayjs().add(1, "year").toDate(); + case DUE_DATE.TWO_YEARS: + return dayjs().add(2, 'year').toDate(); + default: + return null; + } }; export const getDueDateFromDate = (date: Date): DUE_DATE => { - const currentDate = dayjs(date); - const TodayDate = dayjs(new Date()); + const currentDate = dayjs(date); + const TodayDate = dayjs(new Date()); - const isBefore = (before: number, unit?: ManipulateType)=> { - return currentDate.isBefore(dayjs(TodayDate).add(before+1, unit)) - } + if (currentDate.isSame(TodayDate, 'day')) return DUE_DATE.TODAY; - if (currentDate.isSame(TodayDate, 'day')) return DUE_DATE.TODAY; + const thresholds: { value: number, unit: ManipulateType, result: DUE_DATE }[] = [ + {value: 1, unit: 'days', result: DUE_DATE.TOMORROW}, + {value: 7, unit: 'days', result: DUE_DATE.WEEK}, + {value: 14, unit: 'days', result: DUE_DATE.TWO_WEEKS}, + {value: 1, unit: 'month', result: DUE_DATE.MONTH}, + {value: 2, unit: 'months', result: DUE_DATE.TWO_MONTHS}, + {value: 3, unit: 'months', result: DUE_DATE.QUARTER}, + {value: 6, unit: 'months', result: DUE_DATE.SIX_MONTHS}, + {value: 1, unit: 'years', result: DUE_DATE.YEAR}, + {value: 2, unit: 'years', result: DUE_DATE.TWO_YEARS} + ]; - const thresholds: {value: number, unit: ManipulateType, result: DUE_DATE}[] = [ - { value: 1, unit: 'days', result: DUE_DATE.TOMORROW }, - { value: 7, unit: 'days', result: DUE_DATE.WEEK }, - { value: 14, unit: 'days', result: DUE_DATE.TWO_WEEKS }, - { value: 1, unit: 'month', result: DUE_DATE.MONTH }, - { value: 2, unit: 'months', result: DUE_DATE.TWO_MONTHS }, - { value: 3, unit: 'months', result: DUE_DATE.QUARTER }, - { value: 6, unit: 'months', result: DUE_DATE.SIX_MONTHS }, - { value: 1, unit: 'years', result: DUE_DATE.YEAR }, - { value: 2, unit: 'years', result: DUE_DATE.TWO_YEARS } - ]; + for (const threshold of thresholds) { + const addTime = dayjs(TodayDate).add(threshold.value, threshold.unit); + if (currentDate.isBefore(addTime) || currentDate.isSame(addTime)) return threshold.result; + } + return DUE_DATE.CUSTOM; - for (const threshold of thresholds) { - const addTime = dayjs(TodayDate).add(threshold.value, threshold.unit); - if (currentDate.isBefore(addTime) || currentDate.isSame(addTime)) return threshold.result; - } - return DUE_DATE.CUSTOM; +}; +type ColorSelectionOptions = 'Default' + +type ColorType = Record> -}; \ No newline at end of file +export const ColorSelection: ColorType = ( + { + Default: { + [DUE_DATE.TODAY]: {backgroundColor: '#007a0e'}, + [DUE_DATE.TOMORROW]: {backgroundColor: "#4fc300"}, + [DUE_DATE.WEEK]: {backgroundColor: "#65ff00"}, + [DUE_DATE.TWO_WEEKS]: {backgroundColor: "#c7f000"}, + [DUE_DATE.MONTH]: {backgroundColor: "#f0ca00"}, + [DUE_DATE.TWO_MONTHS]: {backgroundColor: "#f05c00"}, + [DUE_DATE.QUARTER]: {backgroundColor: "#cf3900"}, + [DUE_DATE.SIX_MONTHS]: {backgroundColor: "#871000"}, + [DUE_DATE.YEAR]: {backgroundColor: "#4d0000", color: "white"}, + [DUE_DATE.TWO_YEARS]: {backgroundColor: "#210000", color: 'white'}, + [DUE_DATE.CUSTOM]: {backgroundColor: ""} + } + } +) +// return [{ +// type: 'Default', colors: ['#007a0e', '#4fc300', '#65ff00', '#c7f000' +// , '#f0ca00', '#f05c00', '#cf3900', '#ff2700' +// , '#c51000', '#871000', '#770200', '#4d0000' +// , '#8b005b', '#700077', '#a200f0', '#25002c'] +// }, +// { +// type: 'Cold', colors: ['#0f00ff', '#0076d0', '#00a8ff', '#00def0' +// , '#a500f0', '#fe00ff', '#bf00b9', '#700077' +// , '#854d84', '#6e3973', '#692671', '#3e0a42' +// , '#320729', '#2b002c', '#1b0027', '#000000'] +// }, +// { +// type: 'Earth', colors: ['#ff1700', '#000dd0', '#00a8ff', '#f08100' +// , '#d400f0', '#ffe600', '#00bf0b', '#00770d' +// , '#007a06', '#005406', '#003e08', '#002a04' +// , '#46006a', '#1d002c', '#180027', '#000000'] +// } +// ] +// } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 36180da..50b3948 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -133,8 +133,8 @@ importers: specifier: ^1.11.13 version: 1.11.13 koi-pool: - specifier: ^0.0.32 - version: 0.0.32(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^0.0.33 + version: 0.0.33(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -2582,8 +2582,8 @@ packages: react: ^18.2.0 react-dom: ^18.2.0 - koi-pool@0.0.32: - resolution: {integrity: sha512-FMpZA9prhY8114wM5bKd5jK7r8qiC0EmLMi7ggBgdSj2x7hwMqkilj5JAWSKY3i6y8MCetn1ALY84Ule9T8jpg==} + koi-pool@0.0.33: + resolution: {integrity: sha512-WXWMlOf169GV+bI6QzRxqvmc1FqROwqDBhs2Kfd91p+0LYkLaG6b4AsqLZ3iDCbVcRvmaAgHTmH4Ra+eNlNvyg==} peerDependencies: react: ^18.2.0 react-dom: ^18.2.0 @@ -5913,7 +5913,7 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - koi-pool@0.0.32(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + koi-pool@0.0.33(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: react: 18.3.1 react-dom: 18.3.1(react@18.3.1)