Add task time estimate

Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-03-13 09:14:08 +01:00
parent 3255e32eac
commit 376edd927d
11 changed files with 366 additions and 101 deletions

View File

@@ -56,6 +56,43 @@ import type { ControlOverviewPageUploadEvidenceMutation as ControlOverviewPageUp
import type { ControlOverviewPageDeleteEvidenceMutation as ControlOverviewPageDeleteEvidenceMutationType } from "./__generated__/ControlOverviewPageDeleteEvidenceMutation.graphql";
import { Textarea } from "@/components/ui/textarea";
// Function to format ISO8601 duration to human-readable format
const formatDuration = (isoDuration: string): string => {
if (!isoDuration || !isoDuration.startsWith("P")) {
return isoDuration;
}
try {
const durationRegex =
/P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?/;
const matches = isoDuration.match(durationRegex);
if (!matches) return isoDuration;
const years = matches[1] ? parseInt(matches[1]) : 0;
const months = matches[2] ? parseInt(matches[2]) : 0;
const days = matches[3] ? parseInt(matches[3]) : 0;
const hours = matches[4] ? parseInt(matches[4]) : 0;
const minutes = matches[5] ? parseInt(matches[5]) : 0;
const seconds = matches[6] ? parseInt(matches[6]) : 0;
const parts = [];
if (years) parts.push(`${years} ${years === 1 ? "year" : "years"}`);
if (months) parts.push(`${months} ${months === 1 ? "month" : "months"}`);
if (days) parts.push(`${days} ${days === 1 ? "day" : "days"}`);
if (hours) parts.push(`${hours} ${hours === 1 ? "hour" : "hours"}`);
if (minutes)
parts.push(`${minutes} ${minutes === 1 ? "minute" : "minutes"}`);
if (seconds)
parts.push(`${seconds} ${seconds === 1 ? "second" : "seconds"}`);
return parts.length > 0 ? parts.join(", ") : "No duration";
} catch (error) {
console.error("Error parsing duration:", error);
return isoDuration;
}
};
const controlOverviewPageQuery = graphql`
query ControlOverviewPageQuery($controlId: ID!) {
control: node(id: $controlId) {
@@ -74,6 +111,7 @@ const controlOverviewPageQuery = graphql`
name
description
state
timeEstimate
version
evidences(first: 50)
@connection(key: "ControlOverviewPage_evidences") {
@@ -122,6 +160,7 @@ const createTaskMutation = graphql`
id
name
description
timeEstimate
state
}
}
@@ -269,6 +308,9 @@ function ControlOverviewPageContent({
const [isCreateTaskOpen, setIsCreateTaskOpen] = useState(false);
const [newTaskName, setNewTaskName] = useState("");
const [newTaskDescription, setNewTaskDescription] = useState("");
const [timeEstimateDays, setTimeEstimateDays] = useState("");
const [timeEstimateHours, setTimeEstimateHours] = useState("");
const [timeEstimateMinutes, setTimeEstimateMinutes] = useState("");
const [isDeleteTaskOpen, setIsDeleteTaskOpen] = useState(false);
const [taskToDelete, setTaskToDelete] = useState<{
@@ -325,6 +367,33 @@ function ControlOverviewPageContent({
[tasks]
);
// Function to convert days, hours, and minutes to ISO 8601 duration format
const convertToISODuration = useCallback(() => {
let duration = "P";
if (timeEstimateDays && parseInt(timeEstimateDays) > 0) {
duration += `${parseInt(timeEstimateDays)}D`;
}
if (
(timeEstimateHours && parseInt(timeEstimateHours) > 0) ||
(timeEstimateMinutes && parseInt(timeEstimateMinutes) > 0)
) {
duration += "T";
if (timeEstimateHours && parseInt(timeEstimateHours) > 0) {
duration += `${parseInt(timeEstimateHours)}H`;
}
if (timeEstimateMinutes && parseInt(timeEstimateMinutes) > 0) {
duration += `${parseInt(timeEstimateMinutes)}M`;
}
}
// Return empty string if no time components were provided
return duration === "P" ? "" : duration;
}, [timeEstimateDays, timeEstimateHours, timeEstimateMinutes]);
useEffect(() => {
const handleDragEnter = (e: globalThis.DragEvent) => {
e.preventDefault();
@@ -415,6 +484,9 @@ function ControlOverviewPageContent({
return;
}
// Convert the time estimate components to ISO 8601 format
const isoTimeEstimate = convertToISODuration();
createTask({
variables: {
connections: [`${data.control.tasks?.__id}`],
@@ -422,6 +494,7 @@ function ControlOverviewPageContent({
controlId: data.control.id,
name: newTaskName,
description: newTaskDescription,
timeEstimate: isoTimeEstimate,
},
},
onCompleted: () => {
@@ -431,6 +504,9 @@ function ControlOverviewPageContent({
});
setNewTaskName("");
setNewTaskDescription("");
setTimeEstimateDays("");
setTimeEstimateHours("");
setTimeEstimateMinutes("");
setIsCreateTaskOpen(false);
},
onError: (error) => {
@@ -804,6 +880,72 @@ function ControlOverviewPageContent({
placeholder="Enter task description"
/>
</div>
<div className="space-y-2">
<label
htmlFor="timeEstimate"
className="text-sm font-medium"
>
Time Estimate (optional)
</label>
<div className="grid grid-cols-3 gap-4">
<div>
<label
htmlFor="days"
className="text-xs text-gray-500 block mb-1"
>
Days
</label>
<Input
id="days"
type="number"
min="0"
value={timeEstimateDays}
onChange={(e) =>
setTimeEstimateDays(e.target.value)
}
placeholder="0"
/>
</div>
<div>
<label
htmlFor="hours"
className="text-xs text-gray-500 block mb-1"
>
Hours
</label>
<Input
id="hours"
type="number"
min="0"
max="23"
value={timeEstimateHours}
onChange={(e) =>
setTimeEstimateHours(e.target.value)
}
placeholder="0"
/>
</div>
<div>
<label
htmlFor="minutes"
className="text-xs text-gray-500 block mb-1"
>
Minutes
</label>
<Input
id="minutes"
type="number"
min="0"
max="59"
value={timeEstimateMinutes}
onChange={(e) =>
setTimeEstimateMinutes(e.target.value)
}
placeholder="0"
/>
</div>
</div>
</div>
</div>
<DialogFooter>
<Button
@@ -903,15 +1045,16 @@ function ControlOverviewPageContent({
>
{task?.name}
</h3>
{task?.description && (
{task?.timeEstimate && (
<p
className={`text-xs mt-1 ${
className={`text-xs mt-1 flex items-center ${
task?.state === "DONE"
? "text-gray-400 line-through"
: "text-gray-500"
: "text-blue-500"
}`}
>
{task.description}
<span className="inline-block w-4 h-4 mr-1">⏱️</span>
<span>{formatDuration(task.timeEstimate)}</span>
</p>
)}
</div>

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<1454591ad65fc1aa76b9ac37604383ce>>
* @generated SignedSource<<502600204c0e5180095f00fe3372ea5a>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -14,6 +14,7 @@ export type CreateTaskInput = {
controlId: string;
description: string;
name: string;
timeEstimate: any;
};
export type ControlOverviewPageCreateTaskMutation$variables = {
connections: ReadonlyArray<string>;
@@ -27,6 +28,7 @@ export type ControlOverviewPageCreateTaskMutation$data = {
readonly id: string;
readonly name: string;
readonly state: TaskState;
readonly timeEstimate: any;
};
};
};
@@ -91,6 +93,13 @@ v3 = {
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "timeEstimate",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -170,16 +179,16 @@ return {
]
},
"params": {
"cacheID": "a181d85ad48dde4a694a7def2700ee96",
"cacheID": "ed1842681cbb14392603c1b73e82b6f9",
"id": null,
"metadata": {},
"name": "ControlOverviewPageCreateTaskMutation",
"operationKind": "mutation",
"text": "mutation ControlOverviewPageCreateTaskMutation(\n $input: CreateTaskInput!\n) {\n createTask(input: $input) {\n taskEdge {\n node {\n id\n name\n description\n state\n }\n }\n }\n}\n"
"text": "mutation ControlOverviewPageCreateTaskMutation(\n $input: CreateTaskInput!\n) {\n createTask(input: $input) {\n taskEdge {\n node {\n id\n name\n description\n timeEstimate\n state\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "3e4ccc4d984d30492fc65afc16e6930c";
(node as any).hash = "d2e06ccdb00312c0862187a18f374d23";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<5f28c9407a05834be16d66330e268caa>>
* @generated SignedSource<<1a0065809cf4bdeff6f4bb7ff087cdf7>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -45,6 +45,7 @@ export type ControlOverviewPageQuery$data = {
readonly id: string;
readonly name: string;
readonly state: TaskState;
readonly timeEstimate: any;
readonly version: number;
};
}>;
@@ -117,24 +118,31 @@ v8 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "version",
"name": "timeEstimate",
"storageKey": null
},
v9 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"name": "version",
"storageKey": null
},
v10 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"name": "__typename",
"storageKey": null
},
v11 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
},
v12 = {
"alias": null,
"args": null,
"concreteType": "PageInfo",
@@ -159,7 +167,7 @@ v11 = {
],
"storageKey": null
},
v12 = {
v13 = {
"kind": "ClientExtension",
"selections": [
{
@@ -171,7 +179,7 @@ v12 = {
}
]
},
v13 = [
v14 = [
{
"alias": null,
"args": null,
@@ -218,25 +226,25 @@ v13 = [
"name": "createdAt",
"storageKey": null
},
(v9/*: any*/)
(v10/*: any*/)
],
"storageKey": null
},
(v10/*: any*/)
(v11/*: any*/)
],
"storageKey": null
},
(v11/*: any*/),
(v12/*: any*/)
(v12/*: any*/),
(v13/*: any*/)
],
v14 = [
v15 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
],
v15 = [
v16 = [
{
"kind": "Literal",
"name": "first",
@@ -296,6 +304,7 @@ return {
(v4/*: any*/),
(v5/*: any*/),
(v8/*: any*/),
(v9/*: any*/),
{
"alias": "evidences",
"args": null,
@@ -303,19 +312,19 @@ return {
"kind": "LinkedField",
"name": "__ControlOverviewPage_evidences_connection",
"plural": false,
"selections": (v13/*: any*/),
"selections": (v14/*: any*/),
"storageKey": null
},
(v9/*: any*/)
(v10/*: any*/)
],
"storageKey": null
},
(v10/*: any*/)
(v11/*: any*/)
],
"storageKey": null
},
(v11/*: any*/),
(v12/*: any*/)
(v12/*: any*/),
(v13/*: any*/)
],
"storageKey": null
}
@@ -344,7 +353,7 @@ return {
"name": "node",
"plural": false,
"selections": [
(v9/*: any*/),
(v10/*: any*/),
(v2/*: any*/),
{
"kind": "InlineFragment",
@@ -356,7 +365,7 @@ return {
(v7/*: any*/),
{
"alias": null,
"args": (v14/*: any*/),
"args": (v15/*: any*/),
"concreteType": "TaskConnection",
"kind": "LinkedField",
"name": "tasks",
@@ -383,41 +392,42 @@ return {
(v4/*: any*/),
(v5/*: any*/),
(v8/*: any*/),
(v9/*: any*/),
{
"alias": null,
"args": (v15/*: any*/),
"args": (v16/*: any*/),
"concreteType": "EvidenceConnection",
"kind": "LinkedField",
"name": "evidences",
"plural": false,
"selections": (v13/*: any*/),
"selections": (v14/*: any*/),
"storageKey": "evidences(first:50)"
},
{
"alias": null,
"args": (v15/*: any*/),
"args": (v16/*: any*/),
"filters": null,
"handle": "connection",
"key": "ControlOverviewPage_evidences",
"kind": "LinkedHandle",
"name": "evidences"
},
(v9/*: any*/)
(v10/*: any*/)
],
"storageKey": null
},
(v10/*: any*/)
(v11/*: any*/)
],
"storageKey": null
},
(v11/*: any*/),
(v12/*: any*/)
(v12/*: any*/),
(v13/*: any*/)
],
"storageKey": "tasks(first:100)"
},
{
"alias": null,
"args": (v14/*: any*/),
"args": (v15/*: any*/),
"filters": null,
"handle": "connection",
"key": "ControlOverviewPage_tasks",
@@ -434,7 +444,7 @@ return {
]
},
"params": {
"cacheID": "1dc4bdedef3b39fd2e441f5259f83d29",
"cacheID": "bd9679f5980ac0eed07f28e4f0cf4f27",
"id": null,
"metadata": {
"connection": [
@@ -457,11 +467,11 @@ return {
},
"name": "ControlOverviewPageQuery",
"operationKind": "query",
"text": "query ControlOverviewPageQuery(\n $controlId: ID!\n) {\n control: node(id: $controlId) {\n __typename\n id\n ... on Control {\n name\n description\n state\n importance\n category\n tasks(first: 100) {\n edges {\n node {\n id\n name\n description\n state\n version\n evidences(first: 50) {\n edges {\n node {\n id\n mimeType\n filename\n size\n state\n createdAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n }\n}\n"
"text": "query ControlOverviewPageQuery(\n $controlId: ID!\n) {\n control: node(id: $controlId) {\n __typename\n id\n ... on Control {\n name\n description\n state\n importance\n category\n tasks(first: 100) {\n edges {\n node {\n id\n name\n description\n state\n timeEstimate\n version\n evidences(first: 50) {\n edges {\n node {\n id\n mimeType\n filename\n size\n state\n createdAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "ff1a734556fc0d56e90ddae161a93408";
(node as any).hash = "81d519cc3ea015284326fa7d5052b25f";
export default node;