Add task creation

Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-26 15:47:57 +01:00
parent 58fddfc240
commit eaaab56968
11 changed files with 992 additions and 143 deletions

View File

@@ -0,0 +1,119 @@
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
);
DialogHeader.displayName = "DialogHeader";
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
);
DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-gray-500", className)}
{...props}
/>
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
};

View File

@@ -1,4 +1,4 @@
import { Suspense, useEffect } from "react";
import { Suspense, useEffect, useState } from "react";
import { useParams } from "react-router";
import {
graphql,
@@ -7,13 +7,25 @@ import {
useQueryLoader,
useMutation,
} from "react-relay";
import { CheckCircle2 } from "lucide-react";
import { CheckCircle2, Plus } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { useToast } from "@/hooks/use-toast";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Helmet } from "react-helmet-async";
import type { ControlOverviewPageQuery as ControlOverviewPageQueryType } from "./__generated__/ControlOverviewPageQuery.graphql";
import type { ControlOverviewPageUpdateTaskStateMutation as ControlOverviewPageUpdateTaskStateMutationType } from "./__generated__/ControlOverviewPageUpdateTaskStateMutation.graphql";
import type { ControlOverviewPageCreateTaskMutation as ControlOverviewPageCreateTaskMutationType } from "./__generated__/ControlOverviewPageCreateTaskMutation.graphql";
const controlOverviewPageQuery = graphql`
query ControlOverviewPageQuery($controlId: ID!) {
@@ -24,7 +36,8 @@ const controlOverviewPageQuery = graphql`
description
state
category
tasks {
tasks(first: 100) @connection(key: "ControlOverviewPage_tasks") {
__id
edges {
node {
id
@@ -44,9 +57,25 @@ const updateTaskStateMutation = graphql`
$input: UpdateTaskStateInput!
) {
updateTaskState(input: $input) {
taskEdge {
task {
id
state
}
}
}
`;
const createTaskMutation = graphql`
mutation ControlOverviewPageCreateTaskMutation(
$input: CreateTaskInput!
$connections: [ID!]!
) {
createTask(input: $input) {
taskEdge @prependEdge(connections: $connections) {
node {
id
name
description
state
}
}
@@ -68,9 +97,16 @@ function ControlOverviewPageContent({
useMutation<ControlOverviewPageUpdateTaskStateMutationType>(
updateTaskStateMutation
);
const [createTask] =
useMutation<ControlOverviewPageCreateTaskMutationType>(createTaskMutation);
const control = data.control;
const tasks = control?.tasks?.edges.map((edge) => edge?.node) ?? [];
// State for the create task dialog
const [isCreateTaskOpen, setIsCreateTaskOpen] = useState(false);
const [newTaskName, setNewTaskName] = useState("");
const [newTaskDescription, setNewTaskDescription] = useState("");
const handleTaskClick = (taskId: string, currentState: string) => {
const newState = currentState === "DONE" ? "TODO" : "DONE";
@@ -83,9 +119,11 @@ function ControlOverviewPageContent({
},
optimisticResponse: {
updateTaskState: {
task: {
id: taskId,
state: newState,
taskEdge: {
node: {
id: taskId,
state: newState,
},
},
},
},
@@ -107,6 +145,53 @@ function ControlOverviewPageContent({
});
};
const handleCreateTask = () => {
if (!newTaskName.trim()) {
toast({
title: "Error creating task",
description: "Task name is required",
variant: "destructive",
});
return;
}
if (!control?.id) {
toast({
title: "Error creating task",
description: "Control ID is missing",
variant: "destructive",
});
return;
}
createTask({
variables: {
connections: [`${data.control?.tasks?.__id}`],
input: {
controlId: control.id,
name: newTaskName,
description: newTaskDescription,
},
},
onCompleted: () => {
toast({
title: "Task created",
description: "New task has been created successfully.",
});
setNewTaskName("");
setNewTaskDescription("");
setIsCreateTaskOpen(false);
},
onError: (error) => {
toast({
title: "Error creating task",
description: error.message,
variant: "destructive",
});
},
});
};
return (
<div className="min-h-screen bg-white p-6 space-y-6">
<div className="space-y-4">
@@ -147,7 +232,59 @@ function ControlOverviewPageContent({
</Card>
<div>
<h2 className="text-xl font-semibold mb-6">Tasks</h2>
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-semibold">Tasks</h2>
<Dialog open={isCreateTaskOpen} onOpenChange={setIsCreateTaskOpen}>
<DialogTrigger asChild>
<Button size="sm" className="flex items-center gap-1">
<Plus className="w-4 h-4" />
<span>Add Task</span>
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Create New Task</DialogTitle>
<DialogDescription>
Add a new task to this control. Click save when you&apos;re
done.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<label htmlFor="name" className="text-sm font-medium">
Task Name
</label>
<Input
id="name"
value={newTaskName}
onChange={(e) => setNewTaskName(e.target.value)}
placeholder="Enter task name"
/>
</div>
<div className="space-y-2">
<label htmlFor="description" className="text-sm font-medium">
Description (optional)
</label>
<Input
id="description"
value={newTaskDescription}
onChange={(e) => setNewTaskDescription(e.target.value)}
placeholder="Enter task description"
/>
</div>
</div>
<DialogFooter>
<Button
variant="outline"
onClick={() => setIsCreateTaskOpen(false)}
>
Cancel
</Button>
<Button onClick={handleCreateTask}>Create Task</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
<div className="space-y-2">
{tasks.map((task) => (
<div
@@ -188,6 +325,17 @@ function ControlOverviewPageContent({
>
{task?.name}
</h3>
{task?.description && (
<p
className={`text-xs mt-1 ${
task?.state === "DONE"
? "text-gray-400 line-through"
: "text-gray-500"
}`}
>
{task.description}
</p>
)}
</div>
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-gray-400 text-sm">06.00 - 07.30</div>
@@ -206,6 +354,12 @@ function ControlOverviewPageContent({
</div>
</div>
))}
{tasks.length === 0 && (
<div className="text-center py-8 text-gray-500">
<p>No tasks yet. Click &quot;Add Task&quot; to create one.</p>
</div>
)}
</div>
</div>
</div>

View File

@@ -0,0 +1,185 @@
/**
* @generated SignedSource<<1454591ad65fc1aa76b9ac37604383ce>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type TaskState = "DONE" | "TODO";
export type CreateTaskInput = {
controlId: string;
description: string;
name: string;
};
export type ControlOverviewPageCreateTaskMutation$variables = {
connections: ReadonlyArray<string>;
input: CreateTaskInput;
};
export type ControlOverviewPageCreateTaskMutation$data = {
readonly createTask: {
readonly taskEdge: {
readonly node: {
readonly description: string;
readonly id: string;
readonly name: string;
readonly state: TaskState;
};
};
};
};
export type ControlOverviewPageCreateTaskMutation = {
response: ControlOverviewPageCreateTaskMutation$data;
variables: ControlOverviewPageCreateTaskMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v3 = {
"alias": null,
"args": null,
"concreteType": "TaskEdge",
"kind": "LinkedField",
"name": "taskEdge",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Task",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "ControlOverviewPageCreateTaskMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateTaskPayload",
"kind": "LinkedField",
"name": "createTask",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "ControlOverviewPageCreateTaskMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateTaskPayload",
"kind": "LinkedField",
"name": "createTask",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "prependEdge",
"key": "",
"kind": "LinkedHandle",
"name": "taskEdge",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "a181d85ad48dde4a694a7def2700ee96",
"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"
}
};
})();
(node as any).hash = "3e4ccc4d984d30492fc65afc16e6930c";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<3e556c8d6b7896963c5433de8acca792>>
* @generated SignedSource<<91fa70daabd409bc43d5e25a2fa98a13>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -22,6 +22,7 @@ export type ControlOverviewPageQuery$data = {
readonly name?: string;
readonly state?: ControlState;
readonly tasks?: {
readonly __id: string;
readonly edges: ReadonlyArray<{
readonly node: {
readonly description: string;
@@ -82,59 +83,99 @@ v5 = {
"storageKey": null
},
v6 = {
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "TaskConnection",
"kind": "LinkedField",
"name": "tasks",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "TaskEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Task",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "Control",
"abstractKey": null
};
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v8 = [
{
"alias": null,
"args": null,
"concreteType": "TaskEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Task",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v7/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
}
],
"storageKey": null
},
{
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
}
],
v9 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
@@ -151,7 +192,27 @@ return {
"plural": false,
"selections": [
(v2/*: any*/),
(v6/*: any*/)
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
{
"alias": "tasks",
"args": null,
"concreteType": "TaskConnection",
"kind": "LinkedField",
"name": "__ControlOverviewPage_tasks_connection",
"plural": false,
"selections": (v8/*: any*/),
"storageKey": null
}
],
"type": "Control",
"abstractKey": null
}
],
"storageKey": null
}
@@ -173,31 +234,66 @@ return {
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v7/*: any*/),
(v2/*: any*/),
(v6/*: any*/)
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
{
"alias": null,
"args": (v9/*: any*/),
"concreteType": "TaskConnection",
"kind": "LinkedField",
"name": "tasks",
"plural": false,
"selections": (v8/*: any*/),
"storageKey": "tasks(first:100)"
},
{
"alias": null,
"args": (v9/*: any*/),
"filters": null,
"handle": "connection",
"key": "ControlOverviewPage_tasks",
"kind": "LinkedHandle",
"name": "tasks"
}
],
"type": "Control",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "130c195db0e9055a63b88ea5eee8b3aa",
"cacheID": "a13eb28fcbe162deaff92653c19cc22a",
"id": null,
"metadata": {},
"metadata": {
"connection": [
{
"count": null,
"cursor": null,
"direction": "forward",
"path": [
"control",
"tasks"
]
}
]
},
"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 category\n tasks {\n edges {\n node {\n id\n name\n description\n state\n }\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 category\n tasks(first: 100) {\n edges {\n node {\n id\n name\n description\n state\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "1feb1b6d25907ac45205183c39092d35";
(node as any).hash = "dfdddd9d98741d1e2bfabf4d4430756f";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<191b5c89c10a7d949997216a79f49598>>
* @generated SignedSource<<168d543d518d84054b1f194ee13feeaa>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -19,11 +19,9 @@ export type ControlOverviewPageUpdateTaskStateMutation$variables = {
};
export type ControlOverviewPageUpdateTaskStateMutation$data = {
readonly updateTaskState: {
readonly taskEdge: {
readonly node: {
readonly id: string;
readonly state: TaskState;
};
readonly task: {
readonly id: string;
readonly state: TaskState;
};
};
};
@@ -58,34 +56,23 @@ v1 = [
{
"alias": null,
"args": null,
"concreteType": "TaskEdge",
"concreteType": "Task",
"kind": "LinkedField",
"name": "taskEdge",
"name": "task",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Task",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
}
],
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
}
],
@@ -113,16 +100,16 @@ return {
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "ea56b9c3f41a4b69a3643884f8f2306d",
"cacheID": "7099089b96d6ca450d88f0a3597b2203",
"id": null,
"metadata": {},
"name": "ControlOverviewPageUpdateTaskStateMutation",
"operationKind": "mutation",
"text": "mutation ControlOverviewPageUpdateTaskStateMutation(\n $input: UpdateTaskStateInput!\n) {\n updateTaskState(input: $input) {\n taskEdge {\n node {\n id\n state\n }\n }\n }\n}\n"
"text": "mutation ControlOverviewPageUpdateTaskStateMutation(\n $input: UpdateTaskStateInput!\n) {\n updateTaskState(input: $input) {\n task {\n id\n state\n }\n }\n}\n"
}
};
})();
(node as any).hash = "3113753b83cf06bd8aca41610c1e89fd";
(node as any).hash = "a81e1f58fa9931a70b85633b6ad0bd7a";
export default node;