diff --git a/src/constants/translations/en/filters.json b/src/constants/translations/en/filters.json index 68b4a1db6..73b9ffca1 100644 --- a/src/constants/translations/en/filters.json +++ b/src/constants/translations/en/filters.json @@ -8,5 +8,6 @@ "creationTime": "Creation time" } }, - "filtersListTitle": "Filters" + "filtersListTitle": "Filters", + "filtersLevelsLable": "Levels" } diff --git a/src/constants/translations/en/my-courses-page.json b/src/constants/translations/en/my-courses-page.json index 6e801d898..6d869c604 100644 --- a/src/constants/translations/en/my-courses-page.json +++ b/src/constants/translations/en/my-courses-page.json @@ -8,5 +8,10 @@ "newCourse": { "bannerTitle": "Add Banner Image", "addIconAlt": "Add image icon" + }, + "filterLabel": { + "categories": "Choose the category of the course", + "subjects": "Choose the subject of the course", + "levels": "Choose suitable levels for the course" } } diff --git a/src/constants/translations/ua/filters.json b/src/constants/translations/ua/filters.json index 49197772e..327bfa01c 100644 --- a/src/constants/translations/ua/filters.json +++ b/src/constants/translations/ua/filters.json @@ -8,5 +8,6 @@ "creationTime": "Часом створення" } }, - "filtersListTitle": "Фільтри" + "filtersListTitle": "Фільтри", + "filtersLevelsLable": "Рівні" } diff --git a/src/constants/translations/ua/my-courses-page.json b/src/constants/translations/ua/my-courses-page.json index b5651ae84..c577f1f6e 100644 --- a/src/constants/translations/ua/my-courses-page.json +++ b/src/constants/translations/ua/my-courses-page.json @@ -8,5 +8,10 @@ "newCourse": { "bannerTitle": "Додайте зображення банеру", "addIcon": "Додати забраження" + }, + "filterLabel": { + "categories": "Оберіть категорію курсу", + "subjects": "Оберіть предмет курсу", + "levels": "Оберіть відповідний рівень курсу" } } diff --git a/src/containers/my-courses/course-search-tool-bar/CourseSearchToolbar.style.ts b/src/containers/my-courses/course-search-tool-bar/CourseSearchToolbar.style.ts new file mode 100644 index 000000000..8ec2e45fe --- /dev/null +++ b/src/containers/my-courses/course-search-tool-bar/CourseSearchToolbar.style.ts @@ -0,0 +1,93 @@ +import { TypographyVariantEnum } from '~/types' +const commonStyle = { + fontSize: '14px', + position: 'absolute', + top: '-33px', + left: '-14px' +} + +export const styles = { + container: { + minHeight: '110px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between' + }, + autocomplete: { + width: '100%', + maxWidth: { md: '370px' }, + mr: '30px', + '& .MuiOutlinedInput-root': { + padding: '5px 9px' + }, + label: { + lineHeight: '20px' + }, + position: 'relative', + '& .MuiFormHelperText-root': { + ...commonStyle + } + }, + drowlevel: { + width: '370px', + position: 'relative' + }, + drowstyle: { + ...commonStyle + }, + otherToolbar: { + borderRadius: '10px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + backgroundColor: 'backgroundColor', + boxShadow: 'none' + }, + menuProps: { + PaperProps: { + style: { + maxHeight: '224px', + width: '250px' + } + } + }, + input: { + style: { + padding: 0 + } + }, + descriptionLabel: { + shrink: false, + sx: { typography: TypographyVariantEnum.Body1, top: -21 } + }, + titleInput: { + disableUnderline: true, + style: { + fontSize: '35px', + fontWeight: 500, + maxHeight: '35px', + marginTop: 0 + } + }, + descriptionInput: { + disableUnderline: true, + style: { fontSize: '16px', maxHeight: '16px', marginTop: 0 } + }, + titleLabel: { + shrink: false, + sx: { typography: TypographyVariantEnum.H4, top: -23 } + }, + titleDescBox: { + width: '100%', + display: 'flex', + flexDirection: 'column', + marginBottom: '30px' + }, + searchBoxes: { + width: '100%', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + my: '30px' + } +} diff --git a/src/containers/my-courses/course-search-tool-bar/CourseSearchToolbar.tsx b/src/containers/my-courses/course-search-tool-bar/CourseSearchToolbar.tsx new file mode 100644 index 000000000..a1b9ccde9 --- /dev/null +++ b/src/containers/my-courses/course-search-tool-bar/CourseSearchToolbar.tsx @@ -0,0 +1,172 @@ +import { useCallback, useState, SyntheticEvent, ChangeEvent } from 'react' +import { useTranslation } from 'react-i18next' +import FormControl from '@mui/material/FormControl' +import FormHelperText from '@mui/material/FormHelperText' +import Box from '@mui/material/Box' +import OutlinedInput from '@mui/material/OutlinedInput' +import InputLabel from '@mui/material/InputLabel' +import MenuItem from '@mui/material/MenuItem' +import ListItemText from '@mui/material/ListItemText' +import Select, { SelectChangeEvent } from '@mui/material/Select' +import Checkbox from '@mui/material/Checkbox' + +import AppTextField from '~/components/app-text-field/AppTextField' +import { subjectService } from '~/services/subject-service' +import { categoryService } from '~/services/category-service' +import useBreakpoints from '~/hooks/use-breakpoints' +import AppToolbar from '~/components/app-toolbar/AppToolbar' +import AsyncAutocomplete from '~/components/async-autocomlete/AsyncAutocomplete' + +import { + CategoryNameInterface, + FindOffersFilters, + FindOffersFiltersActions, + SubjectNameInterface, + ProficiencyLevelEnum, + TextFieldVariantEnum +} from '~/types' +import { styles } from '~/containers/my-courses/course-search-tool-bar/CourseSearchToolbar.style' + +interface OfferSearchToolbarProps { + filters: FindOffersFilters + filterActions: FindOffersFiltersActions + resetPage: () => void +} +const levelLists = Object.values(ProficiencyLevelEnum) +const CourseSearchToolbar = ({ + filters, + resetPage, + filterActions +}: OfferSearchToolbarProps) => { + const { t } = useTranslation() + const { isMobile } = useBreakpoints() + const { updateFilterInQuery } = filterActions + const [selectedLevel, setSelectedLevel] = useState([]) + const [titleName, setTitleName] = useState('') + const [decriptionName, setDecriptionName] = useState('') + const getSubjectsNames = useCallback( + () => subjectService.getSubjectsNames(filters.categoryId), + [filters.categoryId] + ) + const onChangeTitle = (e: ChangeEvent) => { + setTitleName(e.target.value) + } + const onChangeDescription = (e: ChangeEvent) => { + setDecriptionName(e.target.value) + } + const onCategoryChange = ( + _: SyntheticEvent, + value: CategoryNameInterface | null + ) => { + updateFilterInQuery(value?._id ?? '', 'categoryId') + updateFilterInQuery('', 'subjectId') + resetPage() + } + const onSubjectChange = ( + _: SyntheticEvent, + value: SubjectNameInterface | null + ) => { + updateFilterInQuery(value?._id ?? '', 'subjectId') + resetPage() + } + const onLevelChange = (event: SelectChangeEvent) => { + const { + target: { value } + } = event + setSelectedLevel(value as ProficiencyLevelEnum[]) + updateFilterInQuery(value as ProficiencyLevelEnum[], 'proficiencyLevel') + resetPage() + } + const renderSelectedLevels = (selected: string[]) => { + return selected.join(', ') + } + const menuItems = levelLists.map((item) => ( + + -1} /> + + + )) + const AppAutoCompleteList = ( + <> + + + + {t('filters.filtersLevelsLable')} + + + {t('myCoursesPage.filterLabel.levels')} + + + + ) + + return ( + + {!isMobile && ( + + + + + + {AppAutoCompleteList} + + )} + {isMobile && AppAutoCompleteList} + + ) +} + +export default CourseSearchToolbar diff --git a/src/pages/create-course/CreateCourse.tsx b/src/pages/create-course/CreateCourse.tsx index 4c2da18f1..fee9bbf79 100644 --- a/src/pages/create-course/CreateCourse.tsx +++ b/src/pages/create-course/CreateCourse.tsx @@ -5,12 +5,12 @@ import Box from '@mui/material/Box' import AddIcon from '@mui/icons-material/Add' import PageWrapper from '~/components/page-wrapper/PageWrapper' -import AppButton from '~/components/app-button/AppButton' import CourseSectionsList from '~/containers/course-sections-list/CourseSectionsList' - import { sectionInitialData } from '~/pages/create-course/CreateCourse.constants' import AddCourseBanner from '~/containers/add-course-banner/AddCourseBanner' -import { authRoutes } from '~/router/constants/authRoutes' +import CourseSearchToolbar from '~/containers/my-courses/course-search-tool-bar/CourseSearchToolbar' +import { useFilterQuery } from '~/hooks/use-filter-query' +import AppButton from '~/components/app-button/AppButton' import { ButtonTypeEnum, @@ -18,6 +18,11 @@ import { SizeEnum, CourseSection } from '~/types' + +import { countActiveOfferFilters } from '~/utils/count-active-filters' +import { authRoutes } from '~/router/constants/authRoutes' +import { defaultFilters } from '~/pages/find-offers/FindOffers.constants' +import { UserRoleEnum } from '~/types' import { styles } from '~/pages/create-course/CreateCourse.styles' const CreateCourse = () => { @@ -41,6 +46,16 @@ const CreateCourse = () => { } const formData = new FormData() + const { filters, filterQueryActions } = useFilterQuery({ + defaultFilters: defaultFilters(UserRoleEnum.Tutor), + countActiveFilters: countActiveOfferFilters + }) + const resetPage = () => { + filterQueryActions.updateFilterInQuery( + defaultFilters(UserRoleEnum.Tutor).page, + 'page' + ) + } return ( @@ -59,6 +74,13 @@ const CreateCourse = () => { {t('course.addSectionBtn')} + + + navigate(authRoutes.myCourses.root.path)}