Skip to content

編集画面のUI改善 #261

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mtureit merged 5 commits into from
May 25, 2025
Merged

編集画面のUI改善 #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0183ce6
[fix]Record作成ページのUI改善
mtureit May 20, 2025
cef1c44
[fix]選択値が反映されない問題の修正
mtureit May 20, 2025
01659a1
[fix] Post画面のReleaseのデフォルトをtrueに変更
mtureit May 22, 2025
b5ec1f6
[fix] Save Draftが値が揃うまで押せないように変更
mtureit May 23, 2025
49e4f91
[fix] Save Draftga
mtureit May 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 99 additions & 21 deletions view/next-project/src/components/common/RecordAddModal/RecordAddModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,23 @@ const RecordAddModal: FC<ModalProps> = (props) => {
const [curriculumChapter, setCurriculumChapter] = useState<CurriculumChapters>();
const [records, setRecords] = useState<Record[]>([]);
const [users, setUsers] = useState<User[]>([{ id: '', name: '' }]);
const [teacherData, setTeacherData] = useState<Teacher>({ user_id: '1' });
const [teacherData, setTeacherData] = useState<Teacher>({ user_id: '' });
const [isAnimationOpen, setIsAnimationOpen] = useState(false);
const [newRecordId, setNewRecordId] = useState('');
const [release, setRelease] = useState<boolean>(false);
// デフォルトで公開状態に変更（true）
const [release, setRelease] = useState<boolean>(true);
const { isOpen, setIsOpen } = props;
const [isFocused, setIsFocused] = useState(false);
const [placeholder, setPlaceholder] = useState('Record Name');
const [isActive, setIsActive] = useState(false);
// デフォルトで公開状態に変更（true）
const [isActive, setIsActive] = useState(true);

// 選択状態を管理する新しいstate
const [selectedCurriculumId, setSelectedCurriculumId] = useState<number | null>(null);
const [selectedChapterId, setSelectedChapterId] = useState<number | null>(null);

// ボタンホバー状態を管理するstate
const [isButtonHovered, setIsButtonHovered] = useState(false);

const handleFocus = () => {
setIsFocused(true);
Expand All @@ -109,8 +118,9 @@ const RecordAddModal: FC<ModalProps> = (props) => {
content: contentSentence,
homework: homeworkSentence,
user_id: Number(localStorage.getItem('user_id')),
chapter_id: 1,
});
chapter_id: 0,
release: true,
});

const [recordMarkdown, setRecordMarkdown] = useState<string>(contentSentence);
const [homeworkMarkdown, setHomeworkMarkdown] = useState<string>(homeworkSentence);
Expand All @@ -120,7 +130,7 @@ const RecordAddModal: FC<ModalProps> = (props) => {
const getCurriculumChapters = async (url: string) => {
const data = await get(url);
setCurriculumChapters(data);
setCurriculumChapter(data[0]);
// 初期選択を削除
};
getCurriculumChapters(getCurriculumChaptersUrl);

Expand Down Expand Up @@ -163,6 +173,10 @@ const RecordAddModal: FC<ModalProps> = (props) => {

setTitleLength(value.length);
}
} else if (input === 'chapter_id') {
const chapterId = Number(value);
setSelectedChapterId(chapterId);
setRecordData({ ...recordData, [input]: chapterId });
} else {
setRecordData({ ...recordData, [input]: value });
}
Expand All @@ -181,13 +195,39 @@ const RecordAddModal: FC<ModalProps> = (props) => {

const handleCurriculum = useCallback(
(e: React.ChangeEvent<HTMLSelectElement>) => {
setCurriculumChapter(
curriculumChapters.find((curriculumChapter) => curriculumChapter.curriculum.id === Number(e.target.value)),
);
const curriculumId = Number(e.target.value);
setSelectedCurriculumId(curriculumId);
const selectedCurriculum = curriculumChapters.find((curriculumChapter) => curriculumChapter.curriculum.id === curriculumId);
setCurriculumChapter(selectedCurriculum);
// Curriculumが変更されたらChapterの選択をリセット
setSelectedChapterId(null);
setRecordData({ ...recordData, chapter_id: 0 });
},
[curriculumChapters, setCurriculumChapter],
[curriculumChapters, setCurriculumChapter, recordData],
);

// ボタンの有効/無効を判定する関数
const isSubmitDisabled = () => {
return !selectedCurriculumId || !selectedChapterId || !teacherData.user_id || teacherData.user_id === '';
};

// Save Draftボタンが無効な理由を取得する関数
const getDisableReason = () => {
const missingItems = [];

if (!teacherData.user_id || teacherData.user_id === '') {
missingItems.push('Teacherを選択してください');
}
if (!selectedCurriculumId) {
missingItems.push('Curriculumを選択してください');
}
if (!selectedChapterId) {
missingItems.push('Chapterを選択してください');
}

return missingItems.join('、');
};

const submitRecord = async (recordData: Record, teacherData: Teacher) => {
const submitRecordUrl = `${process.env.CSR_API_URI}/records`;
const submitData = {
Expand Down Expand Up @@ -245,15 +285,51 @@ const RecordAddModal: FC<ModalProps> = (props) => {
<input type='checkbox' name='check' checked={release} onChange={() => {}} />
</div>
</div>
<div className={s.modalSubmitButton}>
<Button
onClick={() => {
submitRecord(recordData, teacherData);
setIsAnimationOpen(true);
}}
<div className={s.modalSubmitButton} style={{ position: 'relative' }}>
<div
onMouseEnter={() => setIsButtonHovered(true)}
onMouseLeave={() => setIsButtonHovered(false)}
>
Save Draft
</Button>
<Button
onClick={() => {
submitRecord(recordData, teacherData);
setIsAnimationOpen(true);
}}
disabled={isSubmitDisabled()}
>
Save Draft
</Button>
</div>
{isSubmitDisabled() && isButtonHovered && (
<div style={{
position: 'absolute',
top: '100%',
left: '50%',
transform: 'translateX(-50%)',
backgroundColor: '#333',
color: '#fff',
padding: '6px 8px',
borderRadius: '4px',
fontSize: '12px',
whiteSpace: 'nowrap',
zIndex: 1000,
marginTop: '4px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
}}>
{getDisableReason()}
<div style={{
position: 'absolute',
top: '-5px',
left: '50%',
transform: 'translateX(-50%)',
width: 0,
height: 0,
borderLeft: '5px solid transparent',
borderRight: '5px solid transparent',
borderBottom: '5px solid #333'
}} />
</div>
)}
</div>
</div>
</div>
Expand All @@ -273,6 +349,7 @@ const RecordAddModal: FC<ModalProps> = (props) => {
<label className={isFocused ? `${s.label} ${s.focus}` : s.label}>Record Name ( 残りの文字数 : {MAX_TITLE_LENGTH - titleLength} )</label>
</div>
<div className={s.mdeWrapper}>
<div className={s.selectLabel}>Content</div>
<SimpleMde
placeholder='Record Write with Markdown'
value={recordMarkdown}
Expand All @@ -281,6 +358,7 @@ const RecordAddModal: FC<ModalProps> = (props) => {
/>
</div>
<div className={s.mdeWrapper}>
<div className={s.selectLabel}>Homework</div>
<SimpleMde
placeholder='Home Work Write with Markdown'
value={homeworkMarkdown}
Expand All @@ -294,7 +372,7 @@ const RecordAddModal: FC<ModalProps> = (props) => {
<div className={s.teacherSelect}>
<div className={s.selectWrapper}>
<div className={s.selectLabel}>Teacher</div>
<select defaultValue={teacherData.user_id} onChange={handleTeacher}>
<select value={teacherData.user_id} onChange={handleTeacher}>
<option value='' hidden>
Tap and Choose
</option>
Expand All @@ -309,7 +387,7 @@ const RecordAddModal: FC<ModalProps> = (props) => {
<div className={s.curriculumSelect}>
<div className={s.selectWrapper}>
<div className={s.selectLabel}>Curriculum</div>
<select onChange={handleCurriculum}>
<select value={selectedCurriculumId || ''} onChange={handleCurriculum}>
<option value='' hidden>
Tap and Choose
</option>
Expand All @@ -324,7 +402,7 @@ const RecordAddModal: FC<ModalProps> = (props) => {
<div className={s.chapterSelect}>
<div className={s.selectWrapper}>
<div className={s.selectLabel}>Chapter</div>
<select onChange={handleRecord('chapter_id')}>
<select value={selectedChapterId || ''} onChange={handleRecord('chapter_id')}>
<option value='' hidden>
Tap and Choose
</option>
Expand Down
Loading