UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: перевод внешних контуров на shell предложений

2026-04-18 21:04:29 +03:00
parent c76f519488
commit 390bcdbf38
20 changed files with 1586 additions and 96 deletions
@@ -0,0 +1,139 @@
+/**
+ * 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 { ToggleSwitch } from "@plane/ui";
+import { useProject } from "@/hooks/store/use-project";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+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 { getWorkspaceBySlug } = useWorkspace();
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
+  const { currentProjectDetails } = useProject();
+  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);
+    setToast({
+      type: TOAST_TYPE.INFO,
+      title: t("external_contours_page.modal.toast_title"),
+      message: t("external_contours_page.modal.toast_message"),
+    });
+    setFormSubmitting(false);
+
+    if (!createMore) {
+      handleModalClose();
+    }
+  };
+
+  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>
+  );
+});