feat: add RepliesPage component and integrate with AdminFormDetailPage

Author: Kyle9410-Chen

src/features/form/components/AdminFormDetailPage.module.css

@@ -55,6 +55,10 @@
 	max-width: 25rem;
 }
 
+.replies {
+	max-width: 30rem;
+}
+
 .design {
 	max-width: 30rem;
 }

src/features/form/components/AdminFormDetailPage.tsx

@@ -5,6 +5,7 @@ import styles from "./AdminFormDetailPage.module.css";
 import { AdminFormDesignPage } from "./AdminFormDetailPages/DesignPage";
 import { AdminFormEditPage } from "./AdminFormDetailPages/EditPage";
 import { AdminFormInfoPage } from "./AdminFormDetailPages/InfoPage";
+import { AdminFormRepliesPage } from "./AdminFormDetailPages/RepliesPage";
 import { AdminSectionEditPage } from "./AdminFormDetailPages/SectionEditPage";
 
 type TabType = "info" | "edit" | "reply" | "design";
@@ -63,7 +64,11 @@ export const AdminFormDetailPage = () => {
 							<AdminSectionEditPage />
 						</div>
 					)}
-					{activeTab === "reply" && <div>Reply Page Content</div>}
+					{activeTab === "reply" && (
+						<div className={styles.replies}>
+							<AdminFormRepliesPage />
+						</div>
+					)}
 					{activeTab === "design" && (
 						<div className={styles.design}>
 							<AdminFormDesignPage />

src/features/form/components/AdminFormDetailPages/SectionEditPage.tsx

@@ -151,6 +151,12 @@ export const AdminSectionEditPage = () => {
 		setQuestions(updatedQuestions);
 	};
 
+	const handleToggleIsFromAnswer = (questionIndex: number) => {
+		const updatedQuestions = [...questions];
+		updatedQuestions[questionIndex].isFromAnswer = !updatedQuestions[questionIndex].isFromAnswer;
+		setQuestions(updatedQuestions);
+	};
+
 	return (
 		<>
 			<div className={styles.layout}>
@@ -183,6 +189,7 @@ export const AdminSectionEditPage = () => {
 								onStartChange={newStart => handleStartChange(index, newStart)}
 								onEndChange={newEnd => handleEndChange(index, newEnd)}
 								onChangeIcon={newIcon => handleChangeIcon(index, newIcon)}
+								onToggleIsFromAnswer={() => handleToggleIsFromAnswer(index)}
 							/>
 						))}
 					</div>

src/features/form/components/AdminFormDetailPages/components/OptionsQuestion.module.css

@@ -22,3 +22,9 @@
 	color: var(--orange);
 	padding: 0 0.5rem;
 }
+
+.wrapper {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+}

src/features/form/components/AdminFormDetailPages/components/OptionsQuestion.tsx

@@ -1,3 +1,5 @@
+import { Select } from "@/shared/components/Select/Select";
+import { Switch } from "@/shared/components/Switch/Switch";
 import { X } from "lucide-react";
 import type { Option } from "../types/option";
 import { OptionsInput } from "./OptionsInput";
@@ -12,49 +14,71 @@ export interface OptionsQuestionProps {
 	onAddOther: () => void;
 	onRemove: (optionIndex: number) => void;
 	onRemoveOther: () => void;
+	onToggleIsFromAnswer: () => void;
 }
 
 export const OptionsQuestion = (props: OptionsQuestionProps) => {
 	return (
 		<div className={styles.container}>
-			{props.options.map((option, index) => {
-				if (!option.isOther) {
-					return (
-						<div className={styles.optionWrapper}>
-							<OptionsInput
-								key={index}
-								value={option.label}
-								type={props.type}
-								themeColor="--comment"
-								variant="flushed"
-								listLabel={`${index + 1}.`}
-								className={styles.optionInput}
-								autoFocus={index === props.options.length - 1 - props.options.filter(option => option.isOther).length}
-								onChange={e => props.onChange(index, e.target.value)}
-							/>
-							{props.options.length > 1 && <X onClick={() => props.onRemove(index)} />}
-						</div>
-					);
-				}
-				if (option.isOther) {
-					return (
-						<div className={styles.optionWrapper}>
-							<OptionsInput key="other" value="其他" type={props.type} variant="none" readOnly />
-							{props.options.length > 1 && <X onClick={props.onRemoveOther} />}
-						</div>
-					);
-				}
-			})}
-			<div className={styles.addOptions}>
-				<OptionsInput value="新增選項" type={props.type} variant="none" onClick={props.onAdd} listLabel={`${props.options.length + 1}.`} readOnly className={styles.addOption} />
-				{!props.options.some(option => option.isOther) && props.type !== "list" && (
-					<>
-						或
-						<a className={styles.addOther} onClick={props.onAddOther}>
-							新增其他
-						</a>
-					</>
-				)}
+			{!props.isFromAnswer && (
+				<>
+					{props.options.map((option, index) => {
+						if (!option.isOther) {
+							return (
+								<div className={styles.optionWrapper}>
+									<OptionsInput
+										key={index}
+										value={option.label}
+										type={props.type}
+										themeColor="--comment"
+										variant="flushed"
+										listLabel={`${index + 1}.`}
+										className={styles.optionInput}
+										autoFocus={index === props.options.length - 1 - props.options.filter(option => option.isOther).length}
+										onChange={e => props.onChange(index, e.target.value)}
+									/>
+									{props.options.length > 1 && <X onClick={() => props.onRemove(index)} />}
+								</div>
+							);
+						}
+						if (option.isOther) {
+							return (
+								<div className={styles.optionWrapper}>
+									<OptionsInput key="other" value="其他" type={props.type} variant="none" readOnly />
+									{props.options.length > 1 && <X onClick={props.onRemoveOther} />}
+								</div>
+							);
+						}
+					})}
+					<div className={styles.addOptions}>
+						<OptionsInput value="新增選項" type={props.type} variant="none" onClick={props.onAdd} listLabel={`${props.options.length + 1}.`} readOnly className={styles.addOption} />
+						{!props.options.some(option => option.isOther) && props.type !== "list" && (
+							<>
+								或
+								<a className={styles.addOther} onClick={props.onAddOther}>
+									新增其他
+								</a>
+							</>
+						)}
+					</div>
+				</>
+			)}
+			{props.isFromAnswer && (
+				<Select
+					disabled
+					placeholder="從回答選項中選擇"
+					options={[
+						{
+							label: "區域A",
+							value: "areaA"
+						}
+					]}
+					value="areaA"
+				/>
+			)}
+			<div className={styles.wrapper}>
+				<p>問題來自答案</p>
+				<Switch checked={props.isFromAnswer} onClick={props.onToggleIsFromAnswer} />
 			</div>
 		</div>
 	);

src/features/form/components/AdminFormDetailPages/components/QuestionCard.tsx

@@ -24,6 +24,7 @@ export interface QuestionCardProps {
 	onStartChange?: (newStart: number) => void;
 	onEndChange?: (newEnd: number) => void;
 	onChangeIcon?: (newIcon: Question["icon"]) => void;
+	onToggleIsFromAnswer?: () => void;
 }
 
 type typeInfo = {
@@ -167,6 +168,11 @@ export const QuestionCard = (props: QuestionCardProps): ReactNode => {
 									props.onRemoveOtherOption();
 								}
 							}}
+							onToggleIsFromAnswer={() => {
+								if (props.onToggleIsFromAnswer) {
+									props.onToggleIsFromAnswer();
+								}
+							}}
 						/>
 					)}
 					{question.type === "LINEAR_SCALE" && (