diff --git a/src/constants/translations/en/course.json b/src/constants/translations/en/course.json index 891c44567..cfa4e7b44 100644 --- a/src/constants/translations/en/course.json +++ b/src/constants/translations/en/course.json @@ -8,6 +8,9 @@ "lessonMenuItem": "Lesson", "quizMenuItem": "Quiz", "attachmentMenuItem": "Attachment" + }, + "sectionMenu": { + "deleteSection": "Delete" } }, "errorMessages": { diff --git a/src/constants/translations/ua/course.json b/src/constants/translations/ua/course.json index aa7f7d38d..1c44bc8f8 100644 --- a/src/constants/translations/ua/course.json +++ b/src/constants/translations/ua/course.json @@ -3,11 +3,14 @@ "courseSection": { "defaultNewTitle": "Розділ 1", "defaultNewDescription": "Опис ...", - "adddResourceBtn": "Додати матеріал", + "addResourceBtn": "Додати матеріал", "resourcesMenu": { "lessonMenuItem": "Урок", "quizMenuItem": "Тест", "attachmentMenuItem": "Вкладення" + }, + "sectionMenu": { + "deleteSection": "Видалити" } }, "errorMessages": { diff --git a/src/containers/course-section/CourseSectionContainer.constants.tsx b/src/containers/course-section/CourseSectionContainer.constants.tsx new file mode 100644 index 000000000..4160a52b0 --- /dev/null +++ b/src/containers/course-section/CourseSectionContainer.constants.tsx @@ -0,0 +1,4 @@ +export const menuTypes = { + resourcesMenu: 'resources', + sectionMenu: 'section' +} diff --git a/src/containers/course-section/CourseSectionContainer.tsx b/src/containers/course-section/CourseSectionContainer.tsx index 781920c96..3ff1765af 100644 --- a/src/containers/course-section/CourseSectionContainer.tsx +++ b/src/containers/course-section/CourseSectionContainer.tsx @@ -15,6 +15,7 @@ import AppButton from '~/components/app-button/AppButton' import useMenu from '~/hooks/use-menu' import { styles } from '~/containers/course-section/CourseSectionContainer.styles' +import { menuTypes } from '~/containers/course-section/CourseSectionContainer.constants' import { TextFieldVariantEnum, SizeEnum, @@ -30,10 +31,14 @@ interface SectionProps { type openModalFunc = () => void -const CourseSectionContainer: FC = ({ sectionData }) => { +const CourseSectionContainer: FC = ({ + sectionData, + setSectionsItems +}) => { const { t } = useTranslation() const { openMenu, renderMenu, closeMenu } = useMenu() + const [activeMenu, setActiveMenu] = useState('') const [isVisible, setIsVisible] = useState(true) const [titleInput, setTitleInput] = useState(sectionData.title) const [descriptionInput, setDescriptionInput] = useState( @@ -44,6 +49,10 @@ const CourseSectionContainer: FC = ({ sectionData }) => { setIsVisible((isVisible) => !isVisible) } + const onAction = (actionFunc: openModalFunc) => { + actionFunc() + } + const onTitleInputChange = (event: ChangeEvent) => { setTitleInput(event.target.value) } @@ -52,39 +61,49 @@ const CourseSectionContainer: FC = ({ sectionData }) => { setDescriptionInput(event.target.value) } - const onAction = (actionFunc: openModalFunc) => { - actionFunc() + const onDeleteSection = () => { + setSectionsItems((prev) => { + return prev.filter((item) => item.section_id !== sectionData.section_id) + }) } + const sectionActions = [ + { + id: 1, + label: {t('course.courseSection.sectionMenu.deleteSection')}, + func: onDeleteSection + } + ] + + const sectionMenuItems = sectionActions.map(({ label, func, id }) => ( + + {label} + + )) + const addResourceActions = [ { id: 1, label: ( - - {` ${t('course.courseSection.resourcesMenu.lessonMenuItem')}`} - + {t('course.courseSection.resourcesMenu.lessonMenuItem')} ), func: closeMenu }, { id: 2, - label: ( - {` ${t('course.courseSection.resourcesMenu.quizMenuItem')}`} - ), + label: {t('course.courseSection.resourcesMenu.quizMenuItem')}, func: closeMenu }, { id: 3, label: ( - - {` ${t('course.courseSection.resourcesMenu.attachmentMenuItem')}`} - + {t('course.courseSection.resourcesMenu.attachmentMenuItem')} ), func: closeMenu } ] - const menuItems = addResourceActions.map(({ label, func, id }) => ( + const resourcesMenuItems = addResourceActions.map(({ label, func, id }) => ( onAction(func)} sx={styles.menuItem}> {label} @@ -119,9 +138,15 @@ const CourseSectionContainer: FC = ({ sectionData }) => { value={titleInput} variant={TextFieldVariantEnum.Standard} /> - + { + setActiveMenu(menuTypes.sectionMenu) + openMenu(event) + }} + > + {activeMenu === menuTypes.sectionMenu && renderMenu(sectionMenuItems)} {isVisible && ( @@ -141,14 +166,18 @@ const CourseSectionContainer: FC = ({ sectionData }) => { /> } - onClick={openMenu} + onClick={(event) => { + setActiveMenu(menuTypes.resourcesMenu) + openMenu(event) + }} size={SizeEnum.Large} startIcon={} variant={ButtonVariantEnum.Contained} > {t('course.courseSection.addResourceBtn')} - {renderMenu(menuItems)} + {activeMenu === menuTypes.resourcesMenu && + renderMenu(resourcesMenuItems)} )}