diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListField.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListField.js index 869a0f2b3f..f497a2b599 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListField.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListField.js @@ -3,35 +3,53 @@ import PropTypes from 'prop-types'; import { Field, Wrapper } from './components'; import GrabIcon from '../../assets/images/icon_grab.svg'; +import GrabIconBlue from '../../assets/images/icon_grab_blue.svg'; import ClickOverHint from '../../components/ClickOverHint'; import RemoveIcon from '../../components/DraggedRemovedIcon'; +import EditIcon from '../../components/VariableEditIcon'; -function ListField({ index, name, onRemove }) { +function ListField({ index, isSelected, name, onClick, onRemove }) { const [isOver, setIsOver] = useState(false); return ( setIsOver(true)} onMouseLeave={() => setIsOver(false)} + onClick={() => { + onClick(index); + }} >
{index + 1}.
- - + + {name} - onRemove(index)} /> + {isSelected && !isOver ? ( + + ) : ( + { + e.stopPropagation(); + onRemove(index); + }} + /> + )}
); } ListField.defaultProps = { + onClick: () => {}, onRemove: () => {}, }; ListField.propTypes = { index: PropTypes.number.isRequired, + isSelected: PropTypes.bool.isRequired, name: PropTypes.string.isRequired, + onClick: PropTypes.func, onRemove: PropTypes.func, }; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js index 6a498ddd66..faeb39f1e6 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js @@ -5,7 +5,7 @@ import pluginId from '../../pluginId'; import ListField from './ListField'; -function ListLayout({ displayedData, onRemove }) { +function ListLayout({ displayedData, fieldToEditIndex, onClick, onRemove }) { const handleRemove = index => { if (displayedData.length > 1) { onRemove(index); @@ -21,7 +21,9 @@ function ListLayout({ displayedData, onRemove }) { ))} diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js index dff632ec14..9365f7b98f 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js @@ -6,6 +6,7 @@ import { ON_RESET, ON_SUBMIT, RESET_PROPS, + SET_LIST_FIELD_TO_EDIT_INDEX, SUBMIT_SUCCEEDED, } from './constants'; @@ -57,6 +58,13 @@ export function resetProps() { }; } +export function setListFieldToEditIndex(index) { + return { + type: SET_LIST_FIELD_TO_EDIT_INDEX, + index, + }; +} + export function submitSucceeded() { return { type: SUBMIT_SUCCEEDED, diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/components.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/components.js index e005d057f4..6c59f679e3 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/components.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/components.js @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; const Wrapper = styled.div` display: flex; @@ -32,6 +32,17 @@ const Field = styled.div` margin-right: 10px; margin-top: -1px; } + + ${({ isSelected }) => { + if (isSelected) { + return css` + background: #e6f0fb !important; + border: 1px solid #aed4fb !important; + color: #007eff; + font-weight: 500; + `; + } + }} `; export { Wrapper, Field }; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/constants.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/constants.js index 3d5bc57349..4e600c997a 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/constants.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/constants.js @@ -7,5 +7,7 @@ export const ON_REMOVE_LIST_FIELD = export const ON_RESET = 'ContentManager/SettingViewModel/ON_RESET'; export const ON_SUBMIT = 'ContentManager/SettingViewModel/ON_SUBMIT'; export const RESET_PROPS = 'ContentManager/SettingViewModel/RESET_PROPS'; +export const SET_LIST_FIELD_TO_EDIT_INDEX = + 'ContentManager/SettingViewModel/SET_LIST_FIELD_TO_EDIT_INDEX'; export const SUBMIT_SUCCEEDED = 'ContentManager/SettingViewModel/SUBMIT_SUCCEEDED'; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js index ebcd95683e..306a264d09 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js @@ -30,6 +30,7 @@ import { onSubmit, onRemoveListField, resetProps, + setListFieldToEditIndex, } from './actions'; import reducer from './reducer'; import saga from './saga'; @@ -46,6 +47,7 @@ function SettingViewModel({ history: { goBack }, initialData, isLoading, + listFieldToEditIndex, match: { params: { name, settingType }, }, @@ -55,6 +57,7 @@ function SettingViewModel({ onReset, onSubmit, resetProps, + setListFieldToEditIndex, shouldToggleModalSubmit, }) { strapi.useInjectReducer({ key: 'settingViewModel', reducer, pluginId }); @@ -192,6 +195,8 @@ function SettingViewModel({ )} @@ -251,6 +256,7 @@ SettingViewModel.propTypes = { onReset: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired, resetProps: PropTypes.func.isRequired, + setListFieldToEditIndex: PropTypes.func.isRequired, shouldToggleModalSubmit: PropTypes.bool.isRequired, }; @@ -265,6 +271,7 @@ export function mapDispatchToProps(dispatch) { onReset, onSubmit, resetProps, + setListFieldToEditIndex, }, dispatch ); diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js index 0a9c0e84a6..f103653187 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js @@ -10,10 +10,12 @@ import { ON_REMOVE_LIST_FIELD, ON_RESET, RESET_PROPS, + SET_LIST_FIELD_TO_EDIT_INDEX, SUBMIT_SUCCEEDED, } from './constants'; export const initialState = fromJS({ + listFieldToEditIndex: 0, initialData: fromJS({}), isLoading: true, modifiedData: fromJS({}), @@ -35,20 +37,31 @@ function settingViewModelReducer(state = initialState, action) { const attrPath = ['modifiedData', 'layouts', 'list', action.index]; const attrToBeRemoved = state.getIn(attrPath); - if (attrToBeRemoved === defaultSortBy) { - const firstAttr = state.getIn(['modifiedData', 'layouts', 'list', 1]); + const firstAttr = state.getIn(['modifiedData', 'layouts', 'list', 1]); - return state - .removeIn(['modifiedData', 'layouts', 'list', action.index]) - .updateIn(defaultSortByPath, () => firstAttr); - } + return state + .removeIn(['modifiedData', 'layouts', 'list', action.index]) + .update('listFieldToEditIndex', () => { + if (action.index === state.get('listFieldToEditIndex')) { + return 0; + } - return state.removeIn(['modifiedData', 'layouts', 'list', action.index]); + return state.get('listFieldToEditIndex'); + }) + .updateIn(defaultSortByPath, () => { + if (attrToBeRemoved === defaultSortBy) { + return firstAttr; + } + + return defaultSortBy; + }); } case ON_RESET: return state.update('modifiedData', () => state.get('initialData')); case RESET_PROPS: return initialState; + case SET_LIST_FIELD_TO_EDIT_INDEX: + return state.update('listFieldToEditIndex', () => action.index); case SUBMIT_SUCCEEDED: return state .update('initialData', () => state.get('modifiedData'))