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 { useEffect, 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 { ToggleSwitch } from "@plane/ui";
import { useProject } from "@/hooks/store/use-project";
import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
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, fetchTargetOptions, fetchTargetProjects } = useProjectExternalContours();
  const { fetchBoard } = useProjectExternalContoursBoard();
  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;

  useEffect(() => {
    if (!workspaceSlug || !projectId) return;
    fetchTargetProjects(workspaceSlug, projectId).catch(() => {
      setToast({
        type: TOAST_TYPE.ERROR,
        title: t("error"),
        message: t("external_contours_page.modal.error_message"),
      });
    });
  }, [fetchTargetProjects, projectId, t, workspaceSlug]);

  useEffect(() => {
    if (!workspaceSlug || !projectId || !formData.target_project_id) return;
    fetchTargetOptions(workspaceSlug, projectId, formData.target_project_id).catch(() => {
      setToast({
        type: TOAST_TYPE.ERROR,
        title: t("error"),
        message: t("external_contours_page.modal.error_message"),
      });
    });
  }, [fetchTargetOptions, formData.target_project_id, projectId, t, workspaceSlug]);

  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);
      await fetchBoard(workspaceSlug, projectId);
      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?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 (
    <form onSubmit={handleFormSubmit} className="flex w-full flex-col gap-6 px-6 py-6">
      <div className="space-y-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-4">
          <InboxIssueTitle
            data={formData}
            handleData={handleFormData as any}
            isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
            inputClassName="nodedc-modal-input !px-4 !py-3 !text-[15px]"
          />
          <InboxIssueDescription
            workspaceSlug={workspaceSlug}
            projectId={projectId}
            workspaceId={workspaceId}
            data={formData}
            handleData={handleFormData as any}
            editorRef={descriptionEditorRef}
            containerClassName="nodedc-modal-editor min-h-[180px] !border-none !bg-transparent !p-0"
            onAssetUpload={() => {}}
          />
          <ExternalContoursCreateProperties
            currentProjectName={currentProjectDetails?.name}
            data={formData}
            handleData={handleFormData as any}
          />
        </div>
      </div>
      <div className="flex items-center justify-between gap-3 pt-1">
        <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 text-secondary">{t("create_more")}</span>
        </div>
        <div className="flex items-center gap-3">
          <Button
            variant="secondary"
            size="lg"
            type="button"
            onClick={handleModalClose}
            className="min-w-[8.25rem] !rounded-[1.25rem] !border-transparent px-5 shadow-none"
          >
            {t("cancel")}
          </Button>
          <Button
            type="submit"
            variant="primary"
            size="lg"
            loading={formSubmitting}
            disabled={!canSubmit || isTitleLengthMoreThan255Character}
            className="min-w-[8.25rem] !rounded-[1.25rem] !border-transparent px-5 shadow-none"
          >
            {t("external_contours_page.modal.submit")}
          </Button>
        </div>
      </div>
    </form>
  );
});