task detail attachment form

2026-06-17 15:34:47 +03:30
parent 707908fe03
commit 92033fb94c
6 changed files with 130 additions and 4 deletions
@@ -0,0 +1,78 @@
+import { type FC, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Button from "../../../../../components/Button";
+import Input from "../../../../../components/Input";
+import Select from "../../../../../components/Select";
+
+type Props = {
+  onClose: () => void;
+  onSubmit: (data: { file?: File; title: string; linkId: string }) => void;
+};
+
+const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit }) => {
+  const { t } = useTranslation("global");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [title, setTitle] = useState("");
+  const [linkId, setLinkId] = useState("");
+
+  const linkItems = [{ value: "", label: t("taskmanager.task_detail.none") }];
+
+  const canSubmit = Boolean(file) || Boolean(title.trim());
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = e.target.files?.[0];
+    if (selected) setFile(selected);
+  };
+
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    onSubmit({
+      file: file ?? undefined,
+      title: title.trim(),
+      linkId,
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-xs font-bold text-center">{t("taskmanager.task_detail.attachment")}</h3>
+
+      <div className="w-full h-8 border border-white rounded-xl items-center px-2 flex gap-2 bg-white/63">
+        <button type="button" onClick={() => fileInputRef.current?.click()} className="shrink-0 h-6 rounded-lg text-[11px] px-3 bg-secondary">
+          {t("select_file")}
+        </button>
+        <span className="text-[11px] text-description truncate">{file ? file.name : t("no_select_file")}</span>
+        <input ref={fileInputRef} type="file" className="hidden" onChange={handleFileChange} />
+      </div>
+
+      <div className="flex items-center gap-2 mt-1.5">
+        <div className="flex-1 border-t border-dashed border-[#D0D0D0]" />
+        <span className="text-[11px] text-description">{t("taskmanager.task_detail.or")}</span>
+        <div className="flex-1 border-t border-dashed border-[#D0D0D0]" />
+      </div>
+
+      <Input label={t("taskmanager.task_detail.label_title")} value={title} onChange={(e) => setTitle(e.target.value)} className="h-8 bg-white/63 border-white" labelClassName="text-xs" />
+
+      <Select
+        label={t("taskmanager.task_detail.link")}
+        labelClassName="text-xs"
+        value={linkId}
+        onChange={(e) => setLinkId(e.target.value)}
+        items={linkItems}
+        className="h-8 bg-white/63 border-white text-xs rounded-xl"
+      />
+
+      <div className="flex justify-end gap-2">
+        <Button type="button" onClick={onClose} className="h-8 bg-[#E8E4F0] text-[#292D32] rounded-xl text-xs w-[95px]">
+          {t("cancel")}
+        </Button>
+        <Button type="button" onClick={handleSubmit} disabled={!canSubmit} className="h-8 bg-[#292D32] text-white rounded-xl text-xs disabled:opacity-50 w-[95px]">
+          {t("taskmanager.task_detail.insert")}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDetailAttachmentForm;