Skip to content

Commit 69ee2f7

Browse files
elvisdragonmaoelvisdragonmao
authored
Merge pull request #4 from NYCU-SDC/feat/CORE-155-add-form-setting-page
[CORE-155] Add form setting page
2 parents f717ae0 + e48d724 commit 69ee2f7

32 files changed

+1256
-15
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,15 @@
5050
padding: 3rem;
5151
color: var(--comment);
5252
}
53+
54+
.info {
55+
max-width: 25rem;
56+
}
57+
58+
.replies {
59+
max-width: 30rem;
60+
}
61+
62+
.design {
63+
max-width: 30rem;
64+
}

‎src/features/form/components/AdminFormDetailPage.tsx‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@ import { AdminLayout } from "@/layouts";
22
import { useState } from "react";
33
import { useLocation, useNavigate, useParams } from "react-router-dom";
44
import styles from "./AdminFormDetailPage.module.css";
5+
import { AdminFormDesignPage } from "./AdminFormDetailPages/DesignPage";
6+
import { AdminFormEditPage } from "./AdminFormDetailPages/EditPage";
7+
import { AdminFormInfoPage } from "./AdminFormDetailPages/InfoPage";
8+
import { AdminFormRepliesPage } from "./AdminFormDetailPages/RepliesPage";
9+
import { AdminSectionEditPage } from "./AdminFormDetailPages/SectionEditPage";
510

611
type TabType = "info" | "edit" | "reply" | "design";
712

813
export const AdminFormDetailPage = () => {
9-
const { formid } = useParams();
14+
const { formid, sectionId } = useParams();
1015
const location = useLocation();
1116
const navigate = useNavigate();
1217

@@ -44,9 +49,31 @@ export const AdminFormDetailPage = () => {
4449
</div>
4550

4651
<div className={styles.content}>
47-
<div className={styles.placeholder}>
48-
<p>Content for {activeTab} tab</p>
49-
</div>
52+
{activeTab === "info" && (
53+
<div className={styles.info}>
54+
<AdminFormInfoPage />
55+
</div>
56+
)}
57+
{activeTab === "edit" && !sectionId && (
58+
<div className={styles.edit}>
59+
<AdminFormEditPage />
60+
</div>
61+
)}
62+
{activeTab === "edit" && sectionId && (
63+
<div className={styles.edit}>
64+
<AdminSectionEditPage />
65+
</div>
66+
)}
67+
{activeTab === "reply" && (
68+
<div className={styles.replies}>
69+
<AdminFormRepliesPage />
70+
</div>
71+
)}
72+
{activeTab === "design" && (
73+
<div className={styles.design}>
74+
<AdminFormDesignPage />
75+
</div>
76+
)}
5077
</div>
5178
</div>
5279
</AdminLayout>

‎src/features/form/components/AdminFormDetailPages/DesignPage.module.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 2rem;
5+
}
6+
7+
.label {
8+
margin: 0;
9+
margin-bottom: 0.5rem;
10+
}
11+
12+
.radio {
13+
display: flex;
14+
gap: 0.5rem;
15+
}
16+
17+
.color {
18+
width: 1.5rem;
19+
height: 1.5rem;
20+
border-radius: 9999px;
21+
}
22+
23+
.color.active {
24+
border: 0.125rem solid var(--foreground);
25+
}
26+
27+
.quote {
28+
margin: 0;
29+
}
30+
31+
.blockquote {
32+
padding: 0;
33+
padding-left: 1rem;
34+
}
35+
36+
.link {
37+
color: var(--orange);
38+
}

‎src/features/form/components/AdminFormDetailPages/DesignPage.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { ColorPicker, FileUpload, Input } from "@/shared/components";
2+
import { useState } from "react";
3+
import styles from "./DesignPage.module.css";
4+
5+
export const AdminFormDesignPage = () => {
6+
const [selectedColor, setSelectedColor] = useState("#ff5555");
7+
return (
8+
<>
9+
<section className={styles.container}>
10+
<div>
11+
<p className={styles.label}>主題顏色</p>
12+
<ColorPicker value={selectedColor} onChange={setSelectedColor} allowCustom={false} />
13+
</div>
14+
<FileUpload label="封面圖片" />
15+
<h3>表單外觀</h3>
16+
<Input label="頁首字體" type="text" placeholder="請輸入文字" />
17+
<Input label="問題字體" type="text" placeholder="請輸入文字" />
18+
<Input label="文字字體" type="text" placeholder="請輸入文字" />
19+
20+
<blockquote className={styles.blockquote}>
21+
<p className={styles.quote}>
22+
您可以從{" "}
23+
<a className={styles.link} href="https://font.emtech.cc/" target="_blank" rel="noopener noreferrer">
24+
emfont
25+
</a>{" "}
26+
尋找適合的字體。
27+
</p>
28+
</blockquote>
29+
</section>
30+
</>
31+
);
32+
};

‎src/features/form/components/AdminFormDetailPages/EditPage.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useNavigate, useParams } from "react-router-dom";
2+
3+
export const AdminFormEditPage = () => {
4+
const { formid } = useParams();
5+
const navigate = useNavigate();
6+
7+
const handleEditForm = (sectionId: string) => {
8+
navigate(`/orgs/sdc/forms/${formid}/section/${sectionId}/edit`);
9+
};
10+
11+
return (
12+
<>
13+
<div>Section Edit Page Content</div>
14+
<button onClick={() => handleEditForm("test")}>Edit Form</button>
15+
</>
16+
);
17+
};

‎src/features/form/components/AdminFormDetailPages/InfoPage.module.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 2rem;
5+
}
6+
7+
.count {
8+
display: flex;
9+
gap: 0.25rem;
10+
}
11+
12+
.count > .item {
13+
display: flex;
14+
min-width: 5.25rem;
15+
min-height: 5.25rem;
16+
flex-direction: column;
17+
justify-content: center;
18+
align-items: center;
19+
background-color: var(--selection);
20+
}
21+
22+
.count > .item > .value {
23+
margin: 0;
24+
}
25+
26+
.switch {
27+
display: flex;
28+
}
29+
30+
.switch > .label {
31+
flex: 1;
32+
margin: 0;
33+
}

‎src/features/form/components/AdminFormDetailPages/InfoPage.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Input, Switch } from "@/shared/components";
2+
import styles from "./InfoPage.module.css";
3+
4+
export const AdminFormInfoPage = () => {
5+
return (
6+
<>
7+
<div className={styles.container}>
8+
<h3>表單資訊</h3>
9+
<section className={styles.seciton}>
10+
<div className={`${styles.count}`}>
11+
<div className={`${styles.item}`}>
12+
<h2 className={`${styles.value}`}>15</h2>
13+
<p className={styles.value}>填寫中</p>
14+
</div>
15+
<div className={`${styles.item}`}>
16+
<h2 className={`${styles.value}`}>20</h2>
17+
<p className={styles.value}>已提交</p>
18+
</div>
19+
</div>
20+
</section>
21+
<h3>表單設定</h3>
22+
<Input label="確認訊息" placeholder="輸入表單提交後顯示的訊息" />
23+
<div className={`${styles.switch}`}>
24+
<p className={`${styles.label}`}>需登入（收集電子郵件）</p>
25+
<Switch />
26+
</div>
27+
<div className={`${styles.switch}`}>
28+
<p className={`${styles.label}`}>允許編輯回覆</p>
29+
<Switch />
30+
</div>
31+
<div className={`${styles.switch}`}>
32+
<p className={`${styles.label}`}>所有問題設為必填</p>
33+
<Switch />
34+
</div>
35+
<div className={`${styles.switch}`}>
36+
<p className={`${styles.label}`}>限定回答時間</p>
37+
<Switch />
38+
</div>
39+
<Input label="開始日期" type="date" defaultValue={new Date().toISOString().split("T")[0]} />
40+
<Input label="結束日期" type="date" defaultValue={new Date().toISOString()} />
41+
</div>
42+
</>
43+
);
44+
};

‎src/features/form/components/AdminFormDetailPages/RepliesPage.module.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 1rem;
5+
}
6+
7+
.wrapper {
8+
display: flex;
9+
align-items: center;
10+
gap: 1rem;
11+
}
12+
13+
.status {
14+
color: var(--green);
15+
background-color: var(--green-subtle);
16+
border-radius: 0;
17+
clip-path: polygon(0.25rem 0, 100% 0, 100% 0, calc(100% - 0.25rem) 100%, 0 100%, 0 100%);
18+
}
19+
20+
.checkButton {
21+
background-color: white;
22+
}

‎src/features/form/components/AdminFormDetailPages/RepliesPage.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Badge, Button, Input } from "@/shared/components";
2+
import { Repeat2, SquareArrowOutUpRight } from "lucide-react";
3+
import styles from "./RepliesPage.module.css";
4+
5+
export const AdminFormRepliesPage = () => {
6+
return (
7+
<div className={styles.container}>
8+
<div className={styles.wrapper}>
9+
<h2>回覆蒐集</h2>
10+
<Badge className={styles.status} variant="success" showDot>
11+
已連結 Google Sheets
12+
</Badge>
13+
</div>
14+
<p>請將以下服務帳號加入您的 Google Sheets 編輯權限：</p>
15+
<Input value="your-service-account@example.com" readOnly></Input>
16+
<Input value="sss" readOnly></Input>
17+
<div className={styles.wrapper}>
18+
<Button className={styles.checkButton} variant="primary">
19+
<Repeat2 />
20+
檢查狀態
21+
</Button>
22+
<Button variant="primary">
23+
<SquareArrowOutUpRight />
24+
檢視表單
25+
</Button>
26+
</div>
27+
</div>
28+
);
29+
};

‎src/features/form/components/AdminFormDetailPages/SectionEditPage.module.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.layout {
2+
display: flex;
3+
gap: 2rem;
4+
}
5+
6+
.content {
7+
flex: 1;
8+
}
9+
10+
.container {
11+
display: flex;
12+
flex-direction: column;
13+
gap: 1rem;
14+
margin-top: 1rem;
15+
}
16+
17+
.sidebar {
18+
display: flex;
19+
flex-direction: column;
20+
gap: 0.25rem;
21+
border-radius: 1rem;
22+
font-size: 1rem;
23+
min-width: 15rem;
24+
margin-top: 1.5rem;
25+
padding: 1.5rem 1rem;
26+
background-color: var(--background-color-primary);
27+
}
28+
29+
.card {
30+
display: flex;
31+
flex-direction: column;
32+
gap: 1rem;
33+
border-radius: 1rem;
34+
background-color: var(--background-color-tertiary);
35+
padding: 2rem;
36+
}
37+
38+
.newQuestion {
39+
display: inline-flex;
40+
align-items: center;
41+
gap: 0.5rem;
42+
border: none;
43+
background-color: inherit;
44+
color: inherit;
45+
padding: 0.25rem 0.5rem;
46+
border-radius: 0.25rem;
47+
}
48+
49+
.newQuestion:hover {
50+
background-color: var(--hero-background-color-primary);
51+
}
52+
53+
.sidebar > p {
54+
padding: 0 0.5rem;
55+
}

0 commit comments

Comments
 (0)