diff --git a/todoblue/src/app/board/[board]/TaskDiv.module.css b/todoblue/src/app/board/[board]/TaskDiv.module.css index ed628ae..74139e2 100644 --- a/todoblue/src/app/board/[board]/TaskDiv.module.css +++ b/todoblue/src/app/board/[board]/TaskDiv.module.css @@ -5,7 +5,7 @@ ; grid-template-columns: auto 1fr; align-items: center; - min-width: unset; + min-width: 300px; } .taskIcon { @@ -49,34 +49,48 @@ padding: 8px; } +.asdaf { + --something: hsl(150, 1%, 41%), hsl(213, 22%, 61%), hsl(212, 100%, 81%), hsl(6, 66%, 72%), hsl(17, 98%, 52%); +} + .taskImportanceHighest { - --bhsl-current-hue: 100deg; - --bhsl-current-saturation: 37%; - --bhsl-current-lightness: 68.2%; + --bhsl-current-hue: 15deg; + --bhsl-current-saturation: 98%; + --bhsl-current-lightness: 75%; + + font-weight: 800; } .taskImportanceHigh { - --bhsl-current-hue: 159deg; - --bhsl-current-saturation: 30%; - --bhsl-current-lightness: 52%; + --bhsl-current-hue: 260deg; + --bhsl-current-saturation: 66%; + --bhsl-current-lightness: 72%; + + font-weight: 700; } .taskImportanceNormal { - --bhsl-current-hue: 186deg; - --bhsl-current-saturation: 47%; - --bhsl-current-lightness: 38%; + --bhsl-current-hue: 212deg; + --bhsl-current-saturation: 100%; + --bhsl-current-lightness: 81%; + + font-weight: 400; } .taskImportanceLow { - --bhsl-current-hue: 203deg; - --bhsl-current-saturation: 64%; - --bhsl-current-lightness: 32%; + --bhsl-current-hue: 168deg; + --bhsl-current-saturation: 22%; + --bhsl-current-lightness: 61%; + + font-weight: 300; } .taskImportanceLowest { - --bhsl-current-hue: 237deg; - --bhsl-current-saturation: 44%; - --bhsl-current-lightness: 31%; + --bhsl-current-hue: 120deg; + --bhsl-current-saturation: 30%; + --bhsl-current-lightness: 30%; + + font-weight: 300; } @keyframes inProgress { diff --git a/todoblue/src/app/board/[board]/Types.ts b/todoblue/src/app/board/[board]/Types.ts index b271c0c..5dd8854 100644 --- a/todoblue/src/app/board/[board]/Types.ts +++ b/todoblue/src/app/board/[board]/Types.ts @@ -28,6 +28,22 @@ export type TaskImportance = "Low" | "Lowest"; +export const IMPORTANCE_TO_NUMBER = { + "Highest": 5, + "High": 4, + "Normal": 3, + "Low": 2, + "Lowest": 1, +} + +export const IMPORTANCE_TO_STRING = { + "Highest": "Critico", + "High": "Importante", + "Normal": "Normale", + "Low": "Opzionale", + "Lowest": "Irrilevante" +} + export type TaskPriority = "Highest" | "High" | @@ -35,6 +51,22 @@ export type TaskPriority = "Low" | "Lowest"; +export const PRIORITY_TO_NUMBER = { + "Highest": 5, + "High": 4, + "Normal": 3, + "Low": 2, + "Lowest": 1, +} + +export const PRIORITY_TO_STRING = { + "Highest": "Urgente", + "High": "Prioritario", + "Normal": "Normale", + "Low": "Rimandabile", + "Lowest": "In qualsiasi momento" +} + export type TaskStatus = "Unfinished" | "InProgress" | diff --git a/todoblue/src/app/board/[board]/useBoard.tsx b/todoblue/src/app/board/[board]/useBoard.tsx index cff021a..343dcb9 100644 --- a/todoblue/src/app/board/[board]/useBoard.tsx +++ b/todoblue/src/app/board/[board]/useBoard.tsx @@ -1,20 +1,31 @@ "use client"; import {TaskIconEl} from "@/app/board/[board]/TaskIconEl" -import {BoardAction} from "@/app/board/[board]/Types" -import {TaskIcon, TaskWithId} from "@/app/board/[board]/types" +import {BoardAction, IMPORTANCE_TO_NUMBER, IMPORTANCE_TO_STRING, PRIORITY_TO_NUMBER, PRIORITY_TO_STRING, TaskImportance, TaskPriority} from "@/app/board/[board]/Types" +import {TaskIcon, TaskWithId} from "@/app/board/[board]/Types" import {useBoardWebSocket} from "@/app/board/[board]/useBoardWebSocket" import {GroupNamingFunction, GroupSortingFunction, TaskGroup, TaskGroupingFunction, TaskSortingFunction, useBoardTaskArranger} from "@/app/board/[board]/useBoardTaskArranger" import {useBoardTitleEditor} from "@/app/board/[board]/useBoardTitleEditor" import {useCycleState} from "@/app/useCycleState" -import {faBell, faBookmark, faBuilding, faCircle, faClock, faComment, faEnvelope, faEye, faFaceSmile, faFile, faFlag, faHand, faHandshake, faHeart, faImage, faMoon, faPaperPlane, faSquare, faStar, faSun, faUser, IconDefinition} from "@fortawesome/free-solid-svg-icons" -import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import {Dispatch, SetStateAction} from "react" function groupTasksByIcon(a: TaskWithId) {return a.icon} -function sortGroupsByKey(a: TaskGroup, b: TaskGroup) {return a.key.localeCompare(b.key)} +function groupTasksByImportance(a: TaskWithId) {return a.importance} +function groupTasksByPriority(a: TaskWithId) {return a.priority} -function nameToFontAwesomeIcon(a: string) { +function sortGroupsByKey(a: TaskGroup, b: TaskGroup) {return a.key.localeCompare(b.key)} +function sortGroupsByImportance(a: TaskGroup, b: TaskGroup) { + const aN = IMPORTANCE_TO_NUMBER[a.key as TaskImportance] + const bN = IMPORTANCE_TO_NUMBER[b.key as TaskImportance] + return bN - aN; +} +function sortGroupsByPriority(a: TaskGroup, b: TaskGroup) { + const aN = PRIORITY_TO_NUMBER[a.key as TaskPriority] + const bN = PRIORITY_TO_NUMBER[b.key as TaskPriority] + return bN - aN; +} + +function iconToTitle(a: string) { let icon = a as TaskIcon; return <> @@ -22,9 +33,17 @@ function nameToFontAwesomeIcon(a: string) { {a} } +function importanceToTitle(a: string) { + return IMPORTANCE_TO_STRING[a as TaskImportance]; +} +function priorityToTitle(a: string) { + return PRIORITY_TO_STRING[a as TaskPriority]; +} const TASK_GROUPERS: [TaskGroupingFunction, GroupSortingFunction, GroupNamingFunction][] = [ - [groupTasksByIcon, sortGroupsByKey, nameToFontAwesomeIcon], + [groupTasksByIcon, sortGroupsByKey, iconToTitle], + [groupTasksByImportance, sortGroupsByImportance, importanceToTitle], + [groupTasksByPriority, sortGroupsByPriority, priorityToTitle], ] function sortTasksByText(a: TaskWithId, b: TaskWithId) {return a.text.localeCompare(b.text)} diff --git a/todoblue/src/app/board/[board]/useBoardTaskArranger.ts b/todoblue/src/app/board/[board]/useBoardTaskArranger.ts index f94107b..07b04b8 100644 --- a/todoblue/src/app/board/[board]/useBoardTaskArranger.ts +++ b/todoblue/src/app/board/[board]/useBoardTaskArranger.ts @@ -1,6 +1,6 @@ "use client"; -import {Task, TaskWithId} from "@/app/board/[board]/types" +import {Task, TaskWithId} from "@/app/board/[board]/Types" import {ReactNode, useMemo} from "react" export type TaskGroup = {