From df4e57263a7693df3f9b7818e37c5f4ba128f4aa Mon Sep 17 00:00:00 2001
From: takasuka_takumi <s233319@stn.nagaokaut.ac.jp>
Date: Tue, 4 Jun 2024 06:28:42 +0900
Subject: [PATCH] feat/takumi0616/241-editer-modal-cullum

---
 .../RecordEditModal.module.css                |  18 ++-
 .../RecordEditModal/RecordEditModal.tsx       | 134 ++++++++++--------
 2 files changed, 93 insertions(+), 59 deletions(-)

diff --git a/view/next-project/src/components/common/RecordEditModal/RecordEditModal.module.css b/view/next-project/src/components/common/RecordEditModal/RecordEditModal.module.css
index 2b7ea61..9521ffb 100644
--- a/view/next-project/src/components/common/RecordEditModal/RecordEditModal.module.css
+++ b/view/next-project/src/components/common/RecordEditModal/RecordEditModal.module.css
@@ -39,13 +39,25 @@
   flex-flow: row;
   flex-wrap: nowrap;
 }
-.modalContentContents {
+
+.contentsTitleAccordion {
   width: 100%;
   display: flex;
   justify-content: start;
   align-items: start;
   flex-flow: row;
   flex-wrap: nowrap;
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+.modalContentContents {
+  width: 100%;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  flex-flow: row;
+  flex-wrap: nowrap;
 }
 
 .contentsMde {
@@ -137,6 +149,6 @@
 .textButton:active {
 }
 
-.modalContentContents{
+.modalContentContents {
   font-size: 1.6rem;
-}
\ No newline at end of file
+}
diff --git a/view/next-project/src/components/common/RecordEditModal/RecordEditModal.tsx b/view/next-project/src/components/common/RecordEditModal/RecordEditModal.tsx
index f50aaee..2ae72eb 100644
--- a/view/next-project/src/components/common/RecordEditModal/RecordEditModal.tsx
+++ b/view/next-project/src/components/common/RecordEditModal/RecordEditModal.tsx
@@ -7,6 +7,9 @@ import s from './RecordEditModal.module.css';
 import 'easymde/dist/easymde.min.css';
 import dynamic from 'next/dynamic';
 import Switch from '@mui/material/Switch';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
 
 const SimpleMde = dynamic(() => import('react-simplemde-editor'), { ssr: false });
 
@@ -99,6 +102,7 @@ const RecordEditModal: FC<ModalProps> = (props) => {
   const [recordMarkdown, setRecordMarkdown] = useState<string>('');
   const [homeworkMarkdown, setHomeworkMarkdown] = useState<string>('');
   const [release, setRelease] = useState(false);
+  const [accordionOpen, setAccordionOpen] = useState(false);
 
   useEffect(() => {
     const getCurriculumChaptersUrl = process.env.CSR_API_URI + '/api/v1/get_curriculums_chapter_for_index';
@@ -205,7 +209,6 @@ const RecordEditModal: FC<ModalProps> = (props) => {
     <div className={s.modalContainer}>
       <div className={s.modalInnerContainer}>
         <div className={s.modalContent}>
-          
           <div className={s.modalContentClose}>
             <button
               className={s.modalContentCloseIcon}
@@ -227,62 +230,81 @@ const RecordEditModal: FC<ModalProps> = (props) => {
           <SimpleMde value={recordMarkdown} onChange={recordMarkdownHandler} className={s.contentsMde} />
           <h3 className={s.contentsTitle}>Homework</h3>
           <SimpleMde value={homeworkMarkdown} onChange={homeworkMarkdownHandler} className={s.homeworkMde} />
-          <h3 className={s.contentsTitle}>Teacher</h3>
-          <div className={s.modalContentContents}>
-            <select defaultValue={teacherData.user_id} onChange={teacherHandler(query)}>
-              {users.map((data: User) => {
-                if (data.id == teacherData.user_id) {
-                  return (
-                    <option key={data.id} value={data.id} selected>
-                      {data.name}
-                    </option>
-                  );
-                } else {
-                  return (
-                    <option key={data.id} value={data.id}>
-                      {data.name}
-                    </option>
-                  );
-                }
-              })}
-            </select>
-          </div>
-          <h3 className={s.contentsTitle}>Curriculum</h3>
-          <div className={s.modalContentContents}>
-            <select onChange={handleCurriculum}>
-              {formData.chapter_id === null && <option value={formData.chapter_id}>no curriculum</option>}
-              {curriculumChapters.map((data: CurriculumChapters) => {
-                return (
-                  <option key={data.curriculum.id} value={data.curriculum.id}>
-                    {data.curriculum.title}
-                  </option>
-                );
-              })}
-            </select>
-          </div>
-          <h3 className={s.contentsTitle}>Chapter</h3>
-          <div className={s.modalContentContents}>
-            <select onChange={handler('chapter_id')}>
-              {formData.chapter_id === null && <option value={formData.chapter_id}>no chapter</option>}
-              {curriculumChapter?.chapters.map((chapter: Chapter) => {
-                if (formData.chapter_id !== null && chapter.id === formData.chapter_id) {
-                  return (
-                    <option key={chapter.id} value={chapter.id} selected>
-                      {chapter.title}
-                    </option>
-                  );
-                } else {
-                  return (
-                    <option key={chapter.id} value={chapter.id}>
-                      {chapter.title}
-                    </option>
-                  );
-                }
-              })}
-            </select>
-          </div>
+
+          <Accordion
+            expanded={accordionOpen}
+            onChange={() => setAccordionOpen(!accordionOpen)}
+            sx={{
+              backgroundColor: 'transparent',
+              boxShadow: 'none',
+              '&:before': { display: 'none' },
+            }}
+          >
+            <AccordionSummary sx={{ padding: 0 }}>
+              {accordionOpen ? 'ー' : '＋'} Teacher・Curriculum・Chapter（※変更する場合のみ）
+            </AccordionSummary>
+            <AccordionDetails>
+              <>
+                <h3 className={s.contentsTitleAccordion}>Teacher</h3>
+                <div className={s.modalContentContents}>
+                  <select defaultValue={teacherData.user_id} onChange={teacherHandler(query)}>
+                    {users.map((data: User) => {
+                      if (data.id == teacherData.user_id) {
+                        return (
+                          <option key={data.id} value={data.id} selected>
+                            {data.name}
+                          </option>
+                        );
+                      } else {
+                        return (
+                          <option key={data.id} value={data.id}>
+                            {data.name}
+                          </option>
+                        );
+                      }
+                    })}
+                  </select>
+                </div>
+                <h3 className={s.contentsTitleAccordion}>Curriculum</h3>
+                <div className={s.modalContentContents}>
+                  <select onChange={handleCurriculum}>
+                    {formData.chapter_id === null && <option value={formData.chapter_id}>no curriculum</option>}
+                    {curriculumChapters.map((data: CurriculumChapters) => {
+                      return (
+                        <option key={data.curriculum.id} value={data.curriculum.id}>
+                          {data.curriculum.title}
+                        </option>
+                      );
+                    })}
+                  </select>
+                </div>
+                <h3 className={s.contentsTitleAccordion}>Chapter</h3>
+                <div className={s.modalContentContents}>
+                  <select onChange={handler('chapter_id')}>
+                    {formData.chapter_id === null && <option value={formData.chapter_id}>no chapter</option>}
+                    {curriculumChapter?.chapters.map((chapter: Chapter) => {
+                      if (formData.chapter_id !== null && chapter.id === formData.chapter_id) {
+                        return (
+                          <option key={chapter.id} value={chapter.id} selected>
+                            {chapter.title}
+                          </option>
+                        );
+                      } else {
+                        return (
+                          <option key={chapter.id} value={chapter.id}>
+                            {chapter.title}
+                          </option>
+                        );
+                      }
+                    })}
+                  </select>
+                </div>
+              </>
+            </AccordionDetails>
+          </Accordion>
+
           <div className={s.modalContentContents}>
-            <label htmlFor='release-switch'>公開する:</label>
+            <label htmlFor='release-switch'>公開する</label>
             <Switch
               checked={release}
               onChange={handleReleaseChange} // 適切なハンドラー関数を設定