thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: object select dropdown for the create issue modal

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-09-13 23:14:32 +05:30
parent 9b6efa2ed3
commit 43659631cf
5 changed files with 210 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/custom-attributes/attribute-forms/file-attribute-form.tsx
View File

@ -1,7 +1,5 @@
// react-hook-form // react-hook-form
import { Controller, useForm } from "react-hook-form"; import { Controller } from "react-hook-form";
// headless ui
import { Disclosure } from "@headlessui/react";
// components // components
import { FileFormatsDropdown, FormComponentProps, Input } from "components/custom-attributes"; import { FileFormatsDropdown, FormComponentProps, Input } from "components/custom-attributes";

1
web/components/custom-attributes/index.ts
View File

@ -4,3 +4,4 @@ export * from "./delete-object-modal";
export * from "./input"; export * from "./input";
export * from "./object-modal"; export * from "./object-modal";
export * from "./objects-list"; export * from "./objects-list";
export * from "./objects-select";

54
web/components/custom-attributes/objects-select.tsx Normal file
View File

@ -0,0 +1,54 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { CustomSearchSelect } from "components/ui";
type Props = {
onChange: (val: string | null) => void;
projectId: string;
value: string | null;
};
export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, value }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { customAttributes: customAttributesStore } = useMobxStore();
const { entities, fetchEntities } = customAttributesStore;
const options:
| {
value: any;
query: string;
content: string;
}[]
| undefined = entities?.map((entity) => ({
value: entity.id,
query: entity.display_name,
content: entity.display_name,
}));
options?.unshift({ value: null, query: "default", content: "Default" });
useEffect(() => {
if (!workspaceSlug) return;
if (!entities) fetchEntities(workspaceSlug.toString(), projectId);
}, [entities, fetchEntities, projectId, workspaceSlug]);
return (
<CustomSearchSelect
label={entities?.find((e) => e.id === value)?.display_name ?? "Default"}
value={value}
maxHeight="md"
optionsClassName="!min-w-[10rem]"
onChange={onChange}
options={options}
position="right"
/>
);
});

293
web/components/issues/form.tsx
View File

@ -22,6 +22,7 @@ import {
} from "components/issues/select"; } from "components/issues/select";
import { CreateStateModal } from "components/states"; import { CreateStateModal } from "components/states";
import { CreateLabelModal } from "components/labels"; import { CreateLabelModal } from "components/labels";
import { ObjectsSelect } from "components/custom-attributes";
// ui // ui
import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui"; import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
import { TipTapEditor } from "components/tiptap"; import { TipTapEditor } from "components/tiptap";
@ -33,15 +34,8 @@ import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
const defaultValues: Partial<IIssue> = { const defaultValues: Partial<IIssue> = {
project: "", project: "",
name: "", name: "",
description: {
type: "doc",
content: [
{
type: "paragraph",
},
],
},
description_html: "<p></p>", description_html: "<p></p>",
entity: null,
estimate_point: null, estimate_point: null,
state: "", state: "",
parent: null, parent: null,
@ -68,6 +62,7 @@ export interface IssueFormProps {
| "project" | "project"
| "name" | "name"
| "description" | "description"
| "entity"
| "state" | "state"
| "priority" | "priority"
| "assignee" | "assignee"
@ -249,25 +244,38 @@ export const IssueForm: FC<IssueFormProps> = ({
)} )}
<form onSubmit={handleSubmit(handleCreateUpdateIssue)}> <form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
<div className="space-y-5"> <div className="space-y-5">
<div className="flex items-center gap-x-2"> <div className="flex items-center justify-between gap-2">
{(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && ( <div className="flex items-center gap-x-2">
<Controller {(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && (
control={control} <Controller
name="project" control={control}
render={({ field: { value, onChange } }) => ( name="project"
<IssueProjectSelect render={({ field: { value, onChange } }) => (
value={value} <IssueProjectSelect
onChange={(val: string) => { value={value}
onChange(val); onChange={(val: string) => {
setActiveProject(val); onChange(val);
}} setActiveProject(val);
/> }}
)} />
/> )}
)} />
<h3 className="text-xl font-semibold leading-6 text-custom-text-100"> )}
{status ? "Update" : "Create"} Issue <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
</h3> {status ? "Update" : "Create"} Issue
</h3>
</div>
<div className="flex-shrink-0">
{(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && (
<Controller
control={control}
name="entity"
render={({ field: { value, onChange } }) => (
<ObjectsSelect onChange={onChange} projectId={projectId} value={value} />
)}
/>
)}
</div>
</div> </div>
{watch("parent") && {watch("parent") &&
(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (fieldsToShow.includes("all") || fieldsToShow.includes("parent")) &&
@ -407,128 +415,133 @@ export const IssueForm: FC<IssueFormProps> = ({
)} )}
/> />
)} )}
{(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && ( {/* default object properties */}
<Controller {watch("entity") === null && (
control={control} <>
name="priority" {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
render={({ field: { value, onChange } }) => ( <Controller
<IssuePrioritySelect value={value} onChange={onChange} /> control={control}
)} name="priority"
/> render={({ field: { value, onChange } }) => (
)} <IssuePrioritySelect value={value} onChange={onChange} />
{(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && ( )}
<Controller
control={control}
name="assignees"
render={({ field: { value, onChange } }) => (
<IssueAssigneeSelect
projectId={projectId}
value={value}
onChange={onChange}
/> />
)} )}
/> {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
)} <Controller
{(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && ( control={control}
<Controller name="assignees"
control={control} render={({ field: { value, onChange } }) => (
name="labels" <IssueAssigneeSelect
render={({ field: { value, onChange } }) => ( projectId={projectId}
<IssueLabelSelect value={value}
setIsOpen={setLabelModal} onChange={onChange}
value={value} />
onChange={onChange} )}
projectId={projectId}
/> />
)} )}
/> {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
)} <Controller
{(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && ( control={control}
<div> name="labels"
<Controller render={({ field: { value, onChange } }) => (
control={control} <IssueLabelSelect
name="start_date" setIsOpen={setLabelModal}
render={({ field: { value, onChange } }) => ( value={value}
<IssueDateSelect onChange={onChange}
label="Start date" projectId={projectId}
maxDate={maxDate ?? undefined} />
onChange={onChange} )}
value={value} />
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
<div>
<Controller
control={control}
name="start_date"
render={({ field: { value, onChange } }) => (
<IssueDateSelect
label="Start date"
maxDate={maxDate ?? undefined}
onChange={onChange}
value={value}
/>
)}
/> />
)} </div>
/> )}
</div> {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
)} <div>
{(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && ( <Controller
<div> control={control}
<Controller name="target_date"
control={control} render={({ field: { value, onChange } }) => (
name="target_date" <IssueDateSelect
render={({ field: { value, onChange } }) => ( label="Due date"
<IssueDateSelect minDate={minDate ?? undefined}
label="Due date" onChange={onChange}
minDate={minDate ?? undefined} value={value}
onChange={onChange} />
value={value} )}
/> />
)} </div>
/> )}
</div> {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
)} <div>
{(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && ( <Controller
<div> control={control}
<Controller name="estimate_point"
control={control} render={({ field: { value, onChange } }) => (
name="estimate_point" <IssueEstimateSelect value={value} onChange={onChange} />
render={({ field: { value, onChange } }) => ( )}
<IssueEstimateSelect value={value} onChange={onChange} /> />
)} </div>
/> )}
</div> {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
)} <Controller
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && ( control={control}
<Controller name="parent"
control={control} render={({ field: { onChange } }) => (
name="parent" <ParentIssuesListModal
render={({ field: { onChange } }) => ( isOpen={parentIssueListModalOpen}
<ParentIssuesListModal handleClose={() => setParentIssueListModalOpen(false)}
isOpen={parentIssueListModalOpen} onChange={(issue) => {
handleClose={() => setParentIssueListModalOpen(false)} onChange(issue.id);
onChange={(issue) => { setSelectedParentIssue(issue);
onChange(issue.id); }}
setSelectedParentIssue(issue); projectId={projectId}
}} />
projectId={projectId} )}
/> />
)} )}
/> {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
)} <CustomMenu ellipsis>
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && ( {watch("parent") ? (
<CustomMenu ellipsis> <>
{watch("parent") ? ( <CustomMenu.MenuItem
<> renderAs="button"
<CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}
renderAs="button" >
onClick={() => setParentIssueListModalOpen(true)} Change parent issue
> </CustomMenu.MenuItem>
Change parent issue <CustomMenu.MenuItem
</CustomMenu.MenuItem> renderAs="button"
<CustomMenu.MenuItem onClick={() => setValue("parent", null)}
renderAs="button" >
onClick={() => setValue("parent", null)} Remove parent issue
> </CustomMenu.MenuItem>
Remove parent issue </>
</CustomMenu.MenuItem> ) : (
</> <CustomMenu.MenuItem
) : ( renderAs="button"
<CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}
renderAs="button" >
onClick={() => setParentIssueListModalOpen(true)} Select Parent Issue
> </CustomMenu.MenuItem>
Select Parent Issue )}
</CustomMenu.MenuItem> </CustomMenu>
)} )}
</CustomMenu> </>
)} )}
</div> </div>
</div> </div>

7
web/types/issues.d.ts vendored
View File

@ -2,19 +2,13 @@ import { KeyedMutator } from "swr";
import type { import type {
IState, IState,
IUser, IUser,
IProject,
ICycle, ICycle,
IModule, IModule,
IUserLite, IUserLite,
IProjectLite, IProjectLite,
IWorkspaceLite, IWorkspaceLite,
IStateLite, IStateLite,
TStateGroups,
Properties, Properties,
IIssueFilterOptions,
TIssueGroupByOptions,
TIssueViewOptions,
TIssueOrderByOptions,
IIssueDisplayFilterOptions, IIssueDisplayFilterOptions,
} from "types"; } from "types";
@ -87,6 +81,7 @@ export interface IIssue {
assignees_list: string[]; assignees_list: string[];
attachment_count: number; attachment_count: number;
attachments: any[]; attachments: any[];
entity: string | null;
issue_relations: { issue_relations: {
id: string; id: string;
issue: string; issue: string;