Skip to content

Commit

Permalink
feature: Adds coloring to each goal dependent on their due date.
Browse files Browse the repository at this point in the history
  • Loading branch information
@JonnyDeates
JonnyDeates committed Oct 7, 2024
1 parent 2a4b48e commit 2ea4e71
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 84 deletions.
2 changes: 1 addition & 1 deletion apps/private/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
20 changes: 20 additions & 0 deletions apps/private/src/components/GoalList/components/Goal/Goal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
15 changes: 11 additions & 4 deletions apps/private/src/components/GoalList/components/Goal/Goal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -46,12 +46,18 @@ function Goal({id, completionDate, name, isEditing, isFavorite, tasks, tasksComp
return taskBeingChecked.isCompleted
})

const selectedOption = getDueDateFromDate(completionDate);

return <div className='Goal'>
<div className={'TopIndicator'} style={ColorSelection['Default'][selectedOption]}/>

<Select<DUE_DATE>
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}/>
<CloseButton onClick={handleDeleteGoal}/>
<div className='Header'>
{
Expand Down Expand Up @@ -93,6 +99,7 @@ function Goal({id, completionDate, name, isEditing, isFavorite, tasks, tasksComp
</React.Fragment>
)}
</div>
<div className={'GoalIndicator'} style={ColorSelection['Default'][selectedOption]}/>
<Button className="AddObjective" onClick={handleAddObjective}>Add Objective</Button>
</div>;
}
Expand Down
5 changes: 4 additions & 1 deletion apps/private/src/components/GoalList/components/Task/Task.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,10 @@ function Task({text, isEditing,isCompleted, id, goalId}: TaskType & {
if (isEditing) {
return <div className="Task">
<FloatingLabelInputWithButton onChange={handleInputChange} width='100%' divProps={{className: "TaskInput"}}
onKeyDown={(event) => { handleSubmitEnter(event, handleToggleObjectiveEditing); }}
onKeyDown={(event) => {
handleSubmitEnter(event, handleToggleObjectiveEditing);

}}
value={text} label="" onClick={handleToggleObjectiveEditing}/>
</div>;
}
Expand Down
183 changes: 110 additions & 73 deletions apps/private/src/utils/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<DUE_DATE, Date | null> => {
return allDueDates().reduce<Record<DUE_DATE, Date | null>>((yeet, dueDate) => {
yeet[dueDate] = getDateFromDueDate(dueDate);
return yeet;
}, {} as Record<DUE_DATE, Date | null>);
return allDueDates().reduce<Record<DUE_DATE, Date | null>>((yeet, dueDate) => {
yeet[dueDate] = getDateFromDueDate(dueDate);
return yeet;
}, {} as Record<DUE_DATE, Date | null>);
};

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<ColorSelectionOptions, Record<DUE_DATE, { color?: string, backgroundColor: string }>>

};
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']
// }
// ]
// }
10 changes: 5 additions & 5 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 2ea4e71

Please sign in to comment.