wip: add ability to change project on edit / new pages.
This commit is contained in:
parent
143859cb5f
commit
f78f38ae46
5 changed files with 52 additions and 16 deletions
|
@ -1,7 +1,7 @@
|
||||||
module Twenty::GraphQL::Type
|
module Twenty::GraphQL::Type
|
||||||
class Project < GraphQL::Schema::Object
|
class Project < GraphQL::Schema::Object
|
||||||
require_relative "task"
|
require_relative "task"
|
||||||
field :id, ID, null: false
|
field :id, Int, null: false
|
||||||
field :name, String, null: false
|
field :name, String, null: false
|
||||||
field :path, String, null: false
|
field :path, String, null: false
|
||||||
field :color, String, null: false
|
field :color, String, null: false
|
||||||
|
|
|
@ -35,7 +35,7 @@ type Mutation {
|
||||||
|
|
||||||
type Project {
|
type Project {
|
||||||
color: String!
|
color: String!
|
||||||
id: ID!
|
id: Int!
|
||||||
name: String!
|
name: String!
|
||||||
path: String!
|
path: String!
|
||||||
tasks: [Task!]!
|
tasks: [Task!]!
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
import { Select } from "/components/forms/Select";
|
|
||||||
import { useCreateTask } from "/hooks/mutations/useCreateTask";
|
import { useCreateTask } from "/hooks/mutations/useCreateTask";
|
||||||
import { useUpdateTask } from "/hooks/mutations/useUpdateTask";
|
import { useUpdateTask } from "/hooks/mutations/useUpdateTask";
|
||||||
import { useFindTask } from "/hooks/queries/useFindTask";
|
import { useFindTask } from "/hooks/queries/useFindTask";
|
||||||
import { useProjects } from "/hooks/queries/useProjects";
|
import { useProjects } from "/hooks/queries/useProjects";
|
||||||
import { Task, Project, TaskInput } from "/types/schema";
|
import { Task, Project, TaskInput, Maybe } from "/types/schema";
|
||||||
import { rendermd } from "/lib/markdown-utils";
|
import { rendermd } from "/lib/markdown-utils";
|
||||||
import classnames from "classnames";
|
import classnames from "classnames";
|
||||||
|
|
||||||
|
@ -22,31 +21,44 @@ const DEFAULT_TASK_CONTENT = [
|
||||||
].join("\n");
|
].join("\n");
|
||||||
|
|
||||||
export function Task({ taskId }: { taskId?: number }) {
|
export function Task({ taskId }: { taskId?: number }) {
|
||||||
const { register, handleSubmit, watch, setValue: set } = useForm<TaskInput>();
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
watch,
|
||||||
|
setValue: set,
|
||||||
|
} = useForm<TaskInput>({
|
||||||
|
defaultValues: { projectId: 1 },
|
||||||
|
});
|
||||||
const [isEditable, setIsEditable] = useState<boolean>(!taskId);
|
const [isEditable, setIsEditable] = useState<boolean>(!taskId);
|
||||||
const [createTask] = useCreateTask();
|
const [createTask] = useCreateTask();
|
||||||
const [updateTask] = useUpdateTask();
|
const updateTask = useUpdateTask();
|
||||||
const { data: taskData, loading: findingTask } = useFindTask(Number(taskId));
|
const { data: taskData, loading: findingTask } = useFindTask(Number(taskId));
|
||||||
const { data: projectsData, loading: findingProjects } = useProjects();
|
const { data: projectsData, loading: findingProjects } = useProjects();
|
||||||
const task = taskData?.findTask;
|
const task = taskData?.findTask;
|
||||||
const projects = projectsData?.projects;
|
const projects = projectsData?.projects;
|
||||||
const content = watch("content");
|
const content = watch("content");
|
||||||
|
const projectId: Maybe<number> = watch("projectId");
|
||||||
const onSave = (input: TaskInput) => {
|
const onSave = (input: TaskInput) => {
|
||||||
if (taskId) {
|
if (taskId) {
|
||||||
updateTask({ variables: { taskId, input } })
|
updateTask({ variables: { taskId, input } }).then(
|
||||||
.then(() => location.href = '/tasks');
|
() => (location.href = "/tasks"),
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
createTask({ variables: { input } })
|
createTask({ variables: { input } }).then(
|
||||||
.then(() => location.href = '/tasks');
|
() => (location.href = "/tasks"),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const title = task ? task.title : "New task";
|
const title = task ? task.title : "New task";
|
||||||
document.title = title;
|
document.title = title;
|
||||||
set("projectId", 1);
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
set("projectId", task?.project?.id);
|
||||||
|
}, [task?.project?.id]);
|
||||||
|
|
||||||
if (findingProjects || findingTask) {
|
if (findingProjects || findingTask) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -72,7 +84,15 @@ export function Task({ taskId }: { taskId?: number }) {
|
||||||
</div>
|
</div>
|
||||||
<div className="panel-body">
|
<div className="panel-body">
|
||||||
<div>
|
<div>
|
||||||
<Select {...register("projectId")} className="form">
|
<select
|
||||||
|
{...register("projectId")}
|
||||||
|
className="form"
|
||||||
|
value={projectId}
|
||||||
|
onChange={event => {
|
||||||
|
const v: string = event.target.value;
|
||||||
|
set("projectId", Number(v));
|
||||||
|
}}
|
||||||
|
>
|
||||||
{projects.map((project: Project, key: number) => {
|
{projects.map((project: Project, key: number) => {
|
||||||
return (
|
return (
|
||||||
<option key={key} value={project.id}>
|
<option key={key} value={project.id}>
|
||||||
|
@ -80,7 +100,7 @@ export function Task({ taskId }: { taskId?: number }) {
|
||||||
</option>
|
</option>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</Select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
|
|
|
@ -1,4 +1,8 @@
|
||||||
import { UpdateTaskPayload, MutationUpdateTaskArgs } from "/types/schema";
|
import {
|
||||||
|
UpdateTaskPayload,
|
||||||
|
MutationUpdateTaskArgs,
|
||||||
|
TaskInput,
|
||||||
|
} from "/types/schema";
|
||||||
import { gql, useMutation } from "@apollo/client";
|
import { gql, useMutation } from "@apollo/client";
|
||||||
|
|
||||||
const GQL = gql`
|
const GQL = gql`
|
||||||
|
@ -9,6 +13,18 @@ const GQL = gql`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
type TArgs = {
|
||||||
|
variables: { taskId: number; input: TaskInput };
|
||||||
|
};
|
||||||
|
|
||||||
export function useUpdateTask() {
|
export function useUpdateTask() {
|
||||||
return useMutation<UpdateTaskPayload, MutationUpdateTaskArgs>(GQL);
|
const [update] = useMutation<UpdateTaskPayload, MutationUpdateTaskArgs>(GQL);
|
||||||
|
return ({ variables: { taskId, input }, ...rest }: TArgs) => {
|
||||||
|
const projectId = Number(input.projectId);
|
||||||
|
const variables = {
|
||||||
|
taskId,
|
||||||
|
input: { ...input, ...{ projectId } },
|
||||||
|
};
|
||||||
|
return update({ variables, ...rest });
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -77,7 +77,7 @@ export type MutationUpdateTaskArgs = {
|
||||||
export type Project = {
|
export type Project = {
|
||||||
__typename?: "Project";
|
__typename?: "Project";
|
||||||
color: Scalars["String"]["output"];
|
color: Scalars["String"]["output"];
|
||||||
id: Scalars["ID"]["output"];
|
id: Scalars["Int"]["output"];
|
||||||
name: Scalars["String"]["output"];
|
name: Scalars["String"]["output"];
|
||||||
path: Scalars["String"]["output"];
|
path: Scalars["String"]["output"];
|
||||||
tasks: Array<Task>;
|
tasks: Array<Task>;
|
||||||
|
|
Loading…
Reference in a new issue