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'))