From 69584ef6fa695a5b87268632166d43cbd7f2c7f2 Mon Sep 17 00:00:00 2001 From: Louise Wang Date: Tue, 24 May 2022 15:28:24 +0200 Subject: [PATCH] feat: add language selections --- .../item/publish/categories.spec.js | 21 +++--- .../item/publish/CategorySelection.js | 73 ++++++------------- src/components/item/publish/DropdownMenu.js | 71 ++++++++++++++++++ src/config/constants.js | 1 + src/config/selectors.js | 10 ++- 5 files changed, 110 insertions(+), 66 deletions(-) create mode 100644 src/components/item/publish/DropdownMenu.js diff --git a/cypress/integration/item/publish/categories.spec.js b/cypress/integration/item/publish/categories.spec.js index 92a5efd68..5f64c8d04 100644 --- a/cypress/integration/item/publish/categories.spec.js +++ b/cypress/integration/item/publish/categories.spec.js @@ -1,9 +1,8 @@ import { + buildCategoriesSelectionValueSelector, buildCategoryMenuOptions, + buildCategorySelectionId, buildPublishButtonId, - CATEGORIES_SELECTION_VALUE_SELECTOR, - SHARE_ITEM_CATEGORY_DISCIPLINE, - SHARE_ITEM_CATEGORY_LEVEL, } from '../../../../src/config/selectors'; import { buildItemPath } from '../../../../src/config/paths'; import { @@ -22,14 +21,14 @@ const findCategoryNameById = (id) => SAMPLE_CATEGORIES.find((entry) => entry.id === id)?.name; export const deleteOption = (index) => { - cy.get(`#${SHARE_ITEM_CATEGORY_LEVEL}`).click(); - cy.get(buildCategoryMenuOptions(SHARE_ITEM_CATEGORY_LEVEL, index)).click(); + cy.get(`#${buildCategorySelectionId('Level')}`).click(); + cy.get(buildCategoryMenuOptions(buildCategorySelectionId('Level'), index)).click(); }; export const addOption = (index) => { - cy.get(`#${SHARE_ITEM_CATEGORY_DISCIPLINE}`).click(); + cy.get(`#${buildCategorySelectionId('Discipline')}`).click(); cy.get( - buildCategoryMenuOptions(SHARE_ITEM_CATEGORY_DISCIPLINE, index), + buildCategoryMenuOptions(buildCategorySelectionId('Discipline'), index), ).click(); }; @@ -43,7 +42,7 @@ describe('Categories', () => { it('Display Item Categories', () => { // check for displaying value - const levelValue = cy.get(CATEGORIES_SELECTION_VALUE_SELECTOR); + const levelValue = cy.get(buildCategoriesSelectionValueSelector('Level')); levelValue .first() .contains(findCategoryNameById(item.categories[0].categoryId)); @@ -51,7 +50,7 @@ describe('Categories', () => { it('Display item without category', () => { // check for not displaying if no categories - const disciplineValue = cy.get(`#${SHARE_ITEM_CATEGORY_DISCIPLINE}`); + const disciplineValue = cy.get(`#${buildCategorySelectionId('Discipline')}`); disciplineValue.should('be.empty'); }); @@ -91,7 +90,7 @@ describe('Categories permissions', () => { }); cy.visit(buildItemPath(item.id)); openPublishItemTab(item.id); - const levelValue = cy.get(`#${SHARE_ITEM_CATEGORY_LEVEL}`); + const levelValue = cy.get(`#${buildCategorySelectionId('Level')}`); levelValue.should('not.exist'); }); @@ -104,7 +103,7 @@ describe('Categories permissions', () => { }); cy.visit(buildItemPath(item.id)); openPublishItemTab(item.id); - const levelValue = cy.get(`#${SHARE_ITEM_CATEGORY_LEVEL}`); + const levelValue = cy.get(`#${buildCategorySelectionId('Level')}`); levelValue.should('not.exist'); }); }); diff --git a/src/components/item/publish/CategorySelection.js b/src/components/item/publish/CategorySelection.js index cec40b1a5..89fed3f08 100644 --- a/src/components/item/publish/CategorySelection.js +++ b/src/components/item/publish/CategorySelection.js @@ -5,20 +5,14 @@ import { Map } from 'immutable'; import { makeStyles } from '@material-ui/core/styles'; import { useTranslation } from 'react-i18next'; import Typography from '@material-ui/core/Typography'; -import TextField from '@material-ui/core/TextField'; -import Autocomplete from '@material-ui/lab/Autocomplete'; import { useParams } from 'react-router'; import { MUTATION_KEYS } from '@graasp/query-client'; import { hooks, useMutation } from '../../../config/queryClient'; -import { - SHARE_ITEM_CATEGORY_LEVEL, - SHARE_ITEM_CATEGORY_DISCIPLINE, - SHARE_ITEM_CATEGORY_LEVEL_TITLE_ID, -} from '../../../config/selectors'; import { CurrentUserContext } from '../../context/CurrentUserContext'; import ErrorAlert from '../../common/ErrorAlert'; import { CATEGORY_TYPES } from '../../../config/constants'; import { sortByName } from '../../../utils/item'; +import DropdownMenu from './DropdownMenu'; const { useCategoryTypes, useCategories, useItemCategories } = hooks; const { POST_ITEM_CATEGORY, DELETE_ITEM_CATEGORY } = MUTATION_KEYS; @@ -71,6 +65,11 @@ const CategorySelection = ({ item }) => { ) ?.toArray() .sort(sortByName); + const languageList = categoriesMap + ?.get( + categoryTypes?.find((type) => type.name === CATEGORY_TYPES.LANGUAGE)?.id, + ) + ?.toArray(); // initialize state variable const [selectedValues, setSelectedValues] = useState([]); @@ -132,51 +131,23 @@ const CategorySelection = ({ item }) => { {t('Category')} - - {t('Level')} - - selectedValues.includes(value))} - getOptionSelected={(option, value) => option.id === value.id} - options={levelList} - getOptionLabel={(option) => option.name} - onChange={handleChange('level')} - renderInput={(params) => ( - - )} + + - {t('Discipline')} - - selectedValues.includes(value), - )} - getOptionSelected={(option, value) => option.id === value.id} - options={disciplineList} - getOptionLabel={(option) => option.name} - onChange={handleChange('discipline')} - renderInput={(params) => ( - - )} + ); diff --git a/src/components/item/publish/DropdownMenu.js b/src/components/item/publish/DropdownMenu.js new file mode 100644 index 000000000..e856e4356 --- /dev/null +++ b/src/components/item/publish/DropdownMenu.js @@ -0,0 +1,71 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { makeStyles } from '@material-ui/core/styles'; +import { useTranslation } from 'react-i18next'; +import Typography from '@material-ui/core/Typography'; +import TextField from '@material-ui/core/TextField'; +import Autocomplete from '@material-ui/lab/Autocomplete'; +import { + buildCategorySelectionId, + buildCategorySelectionTitleId, +} from '../../../config/selectors'; +import ErrorAlert from '../../common/ErrorAlert'; + +const useStyles = makeStyles((theme) => ({ + wrapper: { + marginTop: theme.spacing(2), + }, + selection: { + marginTop: theme.spacing(2), + }, + dropMenu: { + width: 'auto', + maxWidth: '85%', + }, +})); + +const DropdownMenu = ({ title, handleChange, valueList, selectedValues }) => { + const { t } = useTranslation(); + const classes = useStyles(); + + if (!valueList) { + return ; + } + + return ( +
+ + {title} + + selectedValues.includes(value))} + getOptionSelected={(option, value) => option.id === value.id} + options={valueList} + getOptionLabel={(option) => option.name} + onChange={handleChange} + renderInput={(params) => ( + + )} + /> +
+ ); +}; + +DropdownMenu.propTypes = { + title: PropTypes.string.isRequired, + valueList: PropTypes.instanceOf(Array).isRequired, + selectedValues: PropTypes.instanceOf(Array).isRequired, + handleChange: PropTypes.instanceOf(Function).isRequired, +}; + +export default DropdownMenu; diff --git a/src/config/constants.js b/src/config/constants.js index af50de052..97385c647 100644 --- a/src/config/constants.js +++ b/src/config/constants.js @@ -189,6 +189,7 @@ export const THUMBNAIL_SETTING_MAX_HEIGHT = 200; export const CATEGORY_TYPES = { LEVEL: 'level', DISCIPLINE: 'discipline', + LANGUAGE: 'language', }; // todo: factor out in graasp constants/utils diff --git a/src/config/selectors.js b/src/config/selectors.js index b20af826d..62ad22ad0 100644 --- a/src/config/selectors.js +++ b/src/config/selectors.js @@ -144,9 +144,10 @@ export const CHATBOX_ID = 'chatbox'; export const CHATBOX_INPUT_BOX_ID = 'chatboxInputBox'; export const CONFIRM_RECYCLE_BUTTON_ID = 'confirmRecycleButton'; export const SHARE_ITEM_VISIBILITY_SELECT_ID = 'shareItemVisiblitySelect'; -export const SHARE_ITEM_CATEGORY_LEVEL_TITLE_ID = 'shareItemCategoryLevelTitle'; -export const SHARE_ITEM_CATEGORY_LEVEL = 'shareItemCategoryLevel'; -export const SHARE_ITEM_CATEGORY_DISCIPLINE = 'shareItemCategoryDiscipline'; +export const buildCategorySelectionTitleId = (title) => + `itemCategoryTitle-${title}`; +export const buildCategorySelectionId = (title) => + `itemCategoryDropdown-${title}`; export const SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID = 'shareItemPseudonymizedSchema'; export const ITEM_RECYCLE_BUTTON_CLASS = 'itemRecycleButton'; @@ -174,7 +175,8 @@ export const ITEM_TAGS_EDIT_SUBMIT_BUTTON_ID = 'itemTagsEditSubmitButton'; export const buildCustomizedTagsSelector = (index) => `customizedTagsPreview-${index}`; -export const CATEGORIES_SELECTION_VALUE_SELECTOR = `#${SHARE_ITEM_CATEGORY_LEVEL_TITLE_ID}+div span`; +export const buildCategoriesSelectionValueSelector = (title) => + `#${buildCategorySelectionTitleId(title)}+div span`; export const buildCategoryMenuOptions = (menuName, optionIndex) => `#${menuName}-popup li[data-option-index="${optionIndex}"]`;