Fix ctb allowed types

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-03-26 14:15:24 +01:00
parent 7840578474
commit 3eb635380a
6 changed files with 42 additions and 12 deletions

View File

@ -31,7 +31,9 @@
"model": "file",
"via": "related",
"allowedTypes": [
"images"
"files",
"images",
"videos"
],
"plugin": "upload",
"required": false

View File

@ -13,8 +13,8 @@ import Text from './Text';
const MenuList = ({ selectProps: { changeMediaAllowedTypes, value }, ...rest }) => {
const { formatMessage } = useGlobalContext();
const Component = components.MenuList;
const areAllAllowedTypesSelected = value.value.length === 3;
const someChecked = !areAllAllowedTypesSelected && value.value.length > 0;
const areAllAllowedTypesSelected = value.value && value.value.length === 3;
const someChecked = value.value && !areAllAllowedTypesSelected && value.value.length > 0;
const options = [
{
name: 'images',
@ -58,7 +58,7 @@ const MenuList = ({ selectProps: { changeMediaAllowedTypes, value }, ...rest })
</div>
<SubUl tad="ul" isOpen>
{options.map(({ name, infos }) => {
const isChecked = value.value.includes(name);
const isChecked = value.value && value.value.includes(name);
const target = { name, value: !isChecked };
return (

View File

@ -15,8 +15,9 @@ const AllowedTypesSelect = ({ name, changeMediaAllowedTypes, styles, value }) =>
const ref = useRef();
/* eslint-disable indent */
const displayedValue =
value.length === 0
value === null || value.length === 0
? formatMessage({ id: getTrad('form.attribute.media.allowed-types.none') })
: value
.sort()
@ -35,16 +36,20 @@ const AllowedTypesSelect = ({ name, changeMediaAllowedTypes, styles, value }) =>
ref={ref}
refState={ref}
styles={styles}
value={{ label: displayedValue, value }}
value={{ label: displayedValue, value: value || '' }}
/>
);
};
AllowedTypesSelect.defaultProps = {
value: null,
};
AllowedTypesSelect.propTypes = {
changeMediaAllowedTypes: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
styles: PropTypes.object.isRequired,
value: PropTypes.array.isRequired,
value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
};
export default AllowedTypesSelect;

View File

@ -53,6 +53,7 @@ const FormModal = () => {
const { emitEvent, formatMessage } = useGlobalContext();
const query = useQuery();
const attributeOptionRef = useRef();
const {
addAttribute,
addCreatedComponentToDynamicZone,
@ -1197,6 +1198,8 @@ const FormModal = () => {
value = retrievedValue.join('\n');
} else if (input.name === 'uid') {
value = input.value;
} else if (input.name === 'allowedTypes' && retrievedValue === '') {
value = null;
} else {
value = retrievedValue;
}

View File

@ -103,13 +103,21 @@ const reducer = (state, action) => {
return fromJS(['images', 'videos', 'files']);
}
return fromJS([]);
return null;
});
}
return state.updateIn(['modifiedData', 'allowedTypes'], list => {
return state.updateIn(['modifiedData', 'allowedTypes'], currentList => {
let list = currentList || fromJS([]);
if (list.includes(action.name)) {
return list.filter(v => v !== action.name);
list = list.filter(v => v !== action.name);
if (list.size === 0) {
return null;
}
return list;
}
return list.push(action.name);

View File

@ -248,7 +248,7 @@ describe('CTB | containers | FormModal | reducer | actions', () => {
value: false,
type: 'ON_CHANGE_ALLOWED_TYPE',
};
const expected = state.setIn(['modifiedData', 'allowedTypes'], fromJS([]));
const expected = state.setIn(['modifiedData', 'allowedTypes'], null);
expect(reducer(state, action)).toEqual(expected);
});
@ -271,7 +271,7 @@ describe('CTB | containers | FormModal | reducer | actions', () => {
expect(reducer(state, action)).toEqual(expected);
});
it('Shoul remove the type', () => {
it('Should remove the type', () => {
const state = initialState.setIn(
['modifiedData', 'allowedTypes'],
fromJS(['videos', 'images', 'files'])
@ -285,6 +285,18 @@ describe('CTB | containers | FormModal | reducer | actions', () => {
expect(reducer(state, action)).toEqual(expected);
});
it('Should remove set the allowedTypes to null if removing the last type', () => {
const state = initialState.setIn(['modifiedData', 'allowedTypes'], fromJS(['videos']));
const action = {
name: 'videos',
value: null,
type: 'ON_CHANGE_ALLOWED_TYPE',
};
const expected = state.setIn(['modifiedData', 'allowedTypes'], null);
expect(reducer(state, action)).toEqual(expected);
});
});
describe('RESET_PROPS', () => {