fix: Hardcoded to fix create course

kmock930 · Aug 9, 2024 · a1f2fae · a1f2fae
1 parent a555926
commit a1f2fae
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 12 deletions.
diff --git a/frontend/src/components/DashboardForm/DashboardForm.tsx b/frontend/src/components/DashboardForm/DashboardForm.tsx
@@ -39,8 +39,20 @@ function DashboardForm({ actions, name, children }: DashboardFormProps) {
   const pathname = usePathname();
   const form = useForm({
     onSubmit: (values) => {
-      console.log(JSON.stringify(values));
-      sendRequest(name, values);
+      if (name === 'applications') {
+        // Work around course_ids
+        values.course_ids = Object.keys(values.courses).filter(
+          (key) => values.courses[key] === true,
+        ).map(courseId => Number(courseId));
+        delete values.courses;
+        // Work around ba_camp_options
+        const optionArr = Object.keys(values).filter(key => key.startsWith('option'));
+        values.ba_camp_answers = optionArr.map(key => values[key]);
+        for (const key of optionArr) delete values[key];
+        sendRequest('surveys', values);
+      } else {
+        sendRequest(name, values);
+      }
       router.push(`/admin/${name}`);
     },
   });

diff --git a/frontend/src/components/SurveyForm/SurveyForm.tsx b/frontend/src/components/SurveyForm/SurveyForm.tsx
@@ -67,6 +67,7 @@ const TabsContent = styled(Tabs.Content)({
 function SurveyForm({ survey }: SurveyFormProps) {
   const [careOptions, setCareOptions] = React.useState(0);
   const { data: courseData } = useSWR<Course[]>('courses', fetcher);
+  const [enableCare, setEnableCare] = React.useState(false);
 
   const handleAddCareOption = () => {
     setCareOptions(careOptions + 1);
@@ -78,7 +79,7 @@ function SurveyForm({ survey }: SurveyFormProps) {
 
   return (
     <DashboardForm
-      name='surveys'
+      name='applications'
       actions={
         <button
           className={css({
@@ -122,25 +123,45 @@ function SurveyForm({ survey }: SurveyFormProps) {
               </legend>
               <Input
                 type='text'
-                name='survey-name-en'
+                name='survey_name.en-us'
                 label='Survey Name'
                 placeholder='Survey Name'
                 isHideLabel={true}
               />
               <Input
                 type='text'
-                name='survey-name-zh-Hant'
+                name='survey_name.zh-cn'
                 label='问卷名称'
                 placeholder='问卷名称'
                 isHideLabel={true}
               />
               <Input
                 type='text'
-                name='survey-name-zh-Hans'
+                name='survey_name.zh-cn'
                 label='問卷名稱'
                 placeholder='問卷名稱'
                 isHideLabel={true}
               />
+              <legend className={css({ padding: 0 })}>
+                Age Group
+              </legend>
+              <Input
+                type='text'
+                name='age_group'
+                label='Age Group'
+                placeholder='Age Group'
+                isHideLabel={true}
+              />
+              <legend className={css({ padding: 0 })}>
+                Period
+              </legend>
+              <Input
+                type='text'
+                name='period'
+                label='Period'
+                placeholder='Period'
+                isHideLabel={true}
+              />
             </fieldset>
             <Label>
               Select course(s) for this survey
@@ -154,7 +175,7 @@ function SurveyForm({ survey }: SurveyFormProps) {
                 {courseData?.map((course) => {
                   return (
                     <Checkbox
-                      name={`course.${course.id}`}
+                      name={`courses.${course.id}`}
                       key={course.id}
                       value={`${course.id}`}
                     >
@@ -187,6 +208,10 @@ function SurveyForm({ survey }: SurveyFormProps) {
                   },
                 })}
                 id='airplane-mode'
+                onCheckedChange={(e) => {
+                  setEnableCare(e);
+                  setCareOptions(0);
+                }}
               >
                 <Switch.Thumb
                   className={css({
@@ -236,31 +261,31 @@ function SurveyForm({ survey }: SurveyFormProps) {
                   </div>
                   <Input
                     type='text'
-                    name={`option-${key + 1}-en`}
+                    name={`option${key + 1}.en-us`}
                     label='Option'
                     placeholder='Option'
                     isHideLabel={true}
                   />
                   <Input
                     type='text'
-                    name={`option-${key + 1}-zh-Hant`}
+                    name={`option${key + 1}.zh-hk`}
                     label='選擇'
                     placeholder='選擇'
                     isHideLabel={true}
                   />
                   <Input
                     type='text'
-                    name={`option-${key + 1}-zh-Hans`}
+                    name={`option${key + 1}.zh-cn`}
                     label='选择'
                     placeholder='选择'
                     isHideLabel={true}
                   />
                 </div>
               );
             })}
-            <button type='button' onClick={handleAddCareOption}>
+            {enableCare && <button type='button' onClick={handleAddCareOption}>
               Add New Care Option
-            </button>
+            </button>}
           </div>
         </TabsContent>
         <TabsContent value='response'>