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

fix: reset data to form logic

Browse Source
This commit is contained in:
dakshesh14 2023-11-06 21:20:23 +05:30
parent 24b82e518c
commit f489f97aa8
5 changed files with 47 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
web/components/issues/draft-issue-form.tsx
View File

@ -61,9 +61,8 @@ interface IssueFormProps {
formData: Partial<IIssue>,
action?: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue"
) => Promise<void>;
data?: Partial<IIssue> | null;
initialData?: Partial<IIssue> | null;
isOpen: boolean;
prePopulatedData?: Partial<IIssue> | null;
projectId: string;
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
createMore: boolean;
@ -91,9 +90,8 @@ interface IssueFormProps {
export const DraftIssueForm: FC<IssueFormProps> = (props) => {
const {
handleFormSubmit,
data,
initialData,
isOpen,
prePopulatedData,
projectId,
setActiveProject,
createMore,
@ -124,7 +122,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
const editorSuggestions = useEditorSuggestions(workspaceSlug as string | undefined, projectId);
const {
formState: { errors, isSubmitting },
formState: { errors, isSubmitting, isDirty },
handleSubmit,
reset,
watch,
@ -132,30 +130,30 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
getValues,
setValue,
} = useForm<IIssue>({
defaultValues: prePopulatedData ?? defaultValues,
defaultValues: initialData ?? defaultValues,
reValidateMode: "onChange",
});
const issueName = watch("name");
const payload: Partial<IIssue> = {
name: watch("name"),
description: watch("description"),
description_html: watch("description_html"),
state: watch("state"),
priority: watch("priority"),
assignees: watch("assignees"),
labels: watch("labels"),
start_date: watch("start_date"),
target_date: watch("target_date"),
project: watch("project"),
parent: watch("parent"),
cycle: watch("cycle"),
module: watch("module"),
name: getValues("name"),
description: getValues("description"),
description_html: getValues("description_html"),
state: getValues("state"),
priority: getValues("priority"),
assignees: getValues("assignees"),
labels: getValues("labels"),
start_date: getValues("start_date"),
target_date: getValues("target_date"),
project: getValues("project"),
parent: getValues("parent"),
cycle: getValues("cycle"),
module: getValues("module"),
};
useEffect(() => {
if (!isOpen || data) return;
if (!isOpen) return;
setLocalStorageValue(
JSON.stringify({
@ -163,7 +161,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
})
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(payload), isOpen, data]);
}, [JSON.stringify(payload), isOpen]);
const handleCreateUpdateIssue = async (
formData: Partial<IIssue>,
@ -171,7 +169,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
) => {
await handleFormSubmit(
{
...(data ?? {}),
...(initialData ?? {}),
...formData,
},
action
@ -248,12 +246,14 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
};
useEffect(() => {
// if form is dirty, don't reset
if (isDirty) return;
reset({
...defaultValues,
...(prePopulatedData ?? {}),
...(data ?? {}),
...(initialData ?? {}),
});
}, [prePopulatedData, reset, data]);
}, [reset, initialData, isDirty]);
// update projectId in form when projectId changes
useEffect(() => {
@ -287,7 +287,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
)}
<form
onSubmit={handleSubmit((formData) =>
handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createDraft")
handleCreateUpdateIssue(formData, initialData?.id ? "convertToNewIssue" : "createDraft")
)}
>
<div className="space-y-5">
@ -583,7 +583,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
variant="neutral-primary"
loading={isSubmitting}
onClick={handleSubmit((formData) =>
handleCreateUpdateIssue(formData, data?.id ? "updateDraft" : "createDraft")
handleCreateUpdateIssue(formData, initialData?.id ? "updateDraft" : "createDraft")
)}
>
{isSubmitting ? "Saving..." : "Save Draft"}
@ -592,7 +592,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
loading={isSubmitting}
variant="primary"
onClick={handleSubmit((formData) =>
handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createNewIssue")
handleCreateUpdateIssue(formData, initialData?.id ? "convertToNewIssue" : "createNewIssue")
)}
>
{isSubmitting ? "Saving..." : "Add Issue"}

35
web/components/issues/draft-issue-modal.tsx
View File

@ -21,11 +21,10 @@ import type { IIssue } from "types";
import { SUB_ISSUES } from "constants/fetch-keys";
interface IssuesModalProps {
data?: IIssue | null;
handleClose: () => void;
isOpen: boolean;
isUpdatingSingleIssue?: boolean;
prePopulateData?: Partial<IIssue>;
initialData?: Partial<IIssue>;
fieldsToShow?: (
| "project"
| "name"
@ -48,7 +47,7 @@ const issueService = new IssueService();
const moduleService = new ModuleService();
export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer((props) => {
const { data, handleClose, isOpen, prePopulateData: prePopulateDataProps, fieldsToShow = ["all"], onSubmit } = props;
const { handleClose, isOpen, initialData, fieldsToShow = ["all"], onSubmit } = props;
// states
const [createMore, setCreateMore] = useState(false);
@ -85,33 +84,30 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
};
useEffect(() => {
setPreloadedData(prePopulateDataProps ?? {});
setPreloadedData(initialData ?? {});
if (cycleId && !prePopulateDataProps?.cycle) {
if (cycleId && !initialData?.cycle) {
setPreloadedData((prevData) => ({
...(prevData ?? {}),
...prePopulateDataProps,
...initialData,
cycle: cycleId.toString(),
}));
}
if (moduleId && !prePopulateDataProps?.module) {
if (moduleId && !initialData?.module) {
setPreloadedData((prevData) => ({
...(prevData ?? {}),
...prePopulateDataProps,
...initialData,
module: moduleId.toString(),
}));
}
if (
(router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
!prePopulateDataProps?.assignees
) {
if ((router.asPath.includes("my-issues") || router.asPath.includes("assigned")) && !initialData?.assignees) {
setPreloadedData((prevData) => ({
...(prevData ?? {}),
...prePopulateDataProps,
assignees: prePopulateDataProps?.assignees ?? [user?.id ?? ""],
...initialData,
assignees: initialData?.assignees ?? [user?.id ?? ""],
}));
}
}, [prePopulateDataProps, cycleId, moduleId, router.asPath, user?.id]);
}, [initialData, cycleId, moduleId, router.asPath, user?.id]);
useEffect(() => {
// if modal is closed, reset active project to null
@ -123,7 +119,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
// if data is present, set active project to the project of the
// issue. This has more priority than the project in the url.
if (data && data.project) return setActiveProject(data.project);
if (initialData && initialData.project) return setActiveProject(initialData.project);
if (prePopulateData && prePopulateData.project && !activeProject) return setActiveProject(prePopulateData.project);
@ -133,7 +129,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
// in the url. This has the least priority.
if (projects && projects.length > 0 && !activeProject)
setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
}, [activeProject, data, projectId, projects, isOpen, prePopulateData]);
}, [activeProject, initialData, projectId, projects, isOpen, prePopulateData]);
const createDraftIssue = async (payload: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject || !user) return;
@ -328,15 +324,14 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
<DraftIssueForm
isOpen={isOpen}
handleFormSubmit={handleFormSubmit}
prePopulatedData={prePopulateData}
data={data}
initialData={initialData}
createMore={createMore}
setCreateMore={setCreateMore}
handleClose={onClose}
handleDiscard={onDiscard}
projectId={activeProject ?? ""}
setActiveProject={setActiveProject}
status={data ? true : false}
status={initialData?.id ? true : false}
user={user ?? undefined}
fieldsToShow={fieldsToShow}
/>

9
web/components/issues/issue-layouts/list/roots/project-draft-issue-root.tsx
View File

@ -33,18 +33,13 @@ export const DraftIssueListLayout: FC = observer(() => {
(group_by: string | null, issue: IIssue, action: "update" | "delete" | "convertToIssue") => {
if (!workspaceSlug || !projectId) return;
const grouping = {
group_id: group_by,
sub_group_id: null,
};
if (action === "update") {
draftIssuesStore.updateDraftIssue(workspaceSlug.toString(), projectId.toString(), grouping, issue);
draftIssuesStore.updateDraftIssue(workspaceSlug.toString(), projectId.toString(), issue);
draftIssuesStore.updateIssueStructure(group_by, null, issue);
} else if (action === "delete") {
draftIssuesStore.deleteDraftIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
} else if (action === "convertToIssue") {
draftIssuesStore.convertDraftIssueToIssue(workspaceSlug.toString(), projectId.toString(), grouping, issue.id);
draftIssuesStore.convertDraftIssueToIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
}
},
[workspaceSlug, projectId, draftIssuesStore]

4
web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
View File

@ -28,9 +28,7 @@ export const DraftIssueQuickActions: React.FC<Props> = (props) => {
setCreateUpdateIssueModal(false);
setIssueToEdit(null);
}}
// pre-populate date only if not editing
prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue } : {}}
data={issueToEdit}
initialData={issueToEdit ? { ...issueToEdit } : { ...issue, name: issue?.name, description: issue.description }}
/>
<CustomMenu ellipsis>
<CustomMenu.MenuItem

2
web/components/workspace/sidebar-quick-action.tsx
View File

@ -21,7 +21,7 @@ export const WorkspaceSidebarQuickAction = () => {
<CreateUpdateDraftIssueModal
isOpen={isDraftIssueModalOpen}
handleClose={() => setIsDraftIssueModalOpen(false)}
prePopulateData={storedValue ? JSON.parse(storedValue) : {}}
initialData={storedValue ? JSON.parse(storedValue) : {}}
onSubmit={() => {
localStorage.removeItem("draftedIssue");
clearValue();