NODEDC_TASKMANAGER/plane-src/apps/web/ce/components/projects/external-contours/create-root.tsx

/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import type { FormEvent } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import type { EditorRefApi } from "@plane/editor";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TIssue } from "@plane/types";
import { EInboxIssueCurrentTab } from "@plane/types";
import { ToggleSwitch } from "@plane/ui";
import { useProject } from "@/hooks/store/use-project";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
import { useWorkspace } from "@/hooks/store/use-workspace";
import { useAppRouter } from "@/hooks/use-app-router";
import { InboxIssueDescription } from "@/components/inbox/modals/create-modal/issue-description";
import { InboxIssueTitle } from "@/components/inbox/modals/create-modal/issue-title";
import { ExternalContoursCreateProperties } from "./create-properties";

const defaultIssueData: Partial<TIssue> & { target_project_id?: string | null } = {
  id: undefined,
  name: "",
  description_html: "",
  priority: "none",
  target_project_id: null,
  label_ids: [],
  assignee_ids: [],
  target_date: "",
};

type Props = {
  workspaceSlug: string;
  projectId: string;
  handleModalClose: () => void;
};

export const ExternalContoursCreateRoot = observer(function ExternalContoursCreateRoot(props: Props) {
  const { workspaceSlug, projectId, handleModalClose } = props;
  const { t } = useTranslation();
  const router = useAppRouter();
  const { getWorkspaceBySlug } = useWorkspace();
  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
  const { currentProjectDetails } = useProject();
  const { createRequest } = useProjectExternalContours();
  const descriptionEditorRef = useRef<EditorRefApi>(null);
  const [createMore, setCreateMore] = useState(false);
  const [formSubmitting, setFormSubmitting] = useState(false);
  const [formData, setFormData] = useState<Partial<TIssue> & { target_project_id?: string | null }>(defaultIssueData);

  const handleFormData = <T extends keyof typeof formData>(issueKey: T, issueValue: (typeof formData)[T]) => {
    setFormData((current) => ({ ...current, [issueKey]: issueValue }));
  };

  const isTitleLengthMoreThan255Character = formData?.name ? formData.name.length > 255 : false;
  const canSubmit = !!formData.name?.trim() && !!formData.target_project_id;

  const handleFormSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!descriptionEditorRef.current?.isEditorReadyToDiscard()) {
      setToast({
        type: TOAST_TYPE.ERROR,
        title: t("error"),
        message: t("editor_is_not_ready_to_discard_changes"),
      });
      return;
    }

    setFormSubmitting(true);

    try {
      const createdRequest = await createRequest(workspaceSlug, projectId, formData);
      setToast({
        type: TOAST_TYPE.SUCCESS,
        title: t("success"),
        message: t("external_contours_page.modal.success_message"),
      });

      if (createMore) {
        setFormData(defaultIssueData);
      } else {
        handleModalClose();
      }

      if (createdRequest?.id) {
        router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${EInboxIssueCurrentTab.OPEN}&inboxIssueId=${createdRequest.id}`);
      }
    } catch (error: any) {
      setToast({
        type: TOAST_TYPE.ERROR,
        title: t("error"),
        message: error?.error || t("external_contours_page.modal.error_message"),
      });
    } finally {
      setFormSubmitting(false);
    }
  };

  if (!workspaceSlug || !projectId || !workspaceId) return <></>;

  return (
    <div className="flex w-full gap-2 bg-transparent">
      <div className="w-full rounded-lg">
        <form onSubmit={handleFormSubmit} className="flex w-full flex-col">
          <div className="space-y-5 rounded-t-lg bg-surface-1 p-5">
            <div className="flex items-center justify-between gap-2">
              <h3 className="text-18 font-medium text-secondary">{t("external_contours_page.modal.title")}</h3>
            </div>
            <div className="space-y-3">
              <InboxIssueTitle
                data={formData}
                handleData={handleFormData as any}
                isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
              />
              <InboxIssueDescription
                workspaceSlug={workspaceSlug}
                projectId={projectId}
                workspaceId={workspaceId}
                data={formData}
                handleData={handleFormData as any}
                editorRef={descriptionEditorRef}
                containerClassName="min-h-[150px] border-[0.5px] border-subtle-1 bg-layer-2 py-3"
                onAssetUpload={() => {}}
              />
              <ExternalContoursCreateProperties
                currentProjectId={projectId}
                currentProjectName={currentProjectDetails?.name}
                data={formData}
                handleData={handleFormData as any}
              />
            </div>
          </div>
          <div className="flex items-center justify-between gap-2 rounded-b-lg border-t-[0.5px] border-subtle bg-surface-1 px-5 py-4">
            <div
              className="inline-flex cursor-pointer items-center gap-1.5"
              onClick={() => setCreateMore((prevData) => !prevData)}
              role="button"
              tabIndex={0}
            >
              <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
              <span className="text-11">{t("create_more")}</span>
            </div>
            <div className="flex items-center gap-3">
              <Button variant="secondary" size="lg" type="button" onClick={handleModalClose}>
                {t("cancel")}
              </Button>
              <Button type="submit" variant="primary" size="lg" loading={formSubmitting} disabled={!canSubmit || isTitleLengthMoreThan255Character}>
                {t("external_contours_page.modal.submit")}
              </Button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
});