Fix description for selects

This commit is contained in:
soupette 2019-07-26 14:34:24 +02:00
parent c718e15513
commit 59638c0bf5
4 changed files with 57 additions and 16 deletions

View File

@ -59,7 +59,10 @@ const FieldItem = forwardRef(
<EditIcon withLongerHeight={withLongerHeight} />
) : (
<RemoveIcon
onClick={onClickRemove}
onClick={e => {
e.stopPropagation();
onClickRemove();
}}
withLongerHeight={withLongerHeight}
isDragging={isOver && isSelected}
/>

View File

@ -13,6 +13,7 @@ import SelectMany from '../SelectMany';
import { Nav, Wrapper } from './components';
function SelectWrapper({
description,
editable,
label,
mainField,
@ -42,6 +43,7 @@ function SelectWrapper({
const ref = useRef();
const startRef = useRef();
startRef.current = state._start;
console.log({ description });
ref.current = async (signal, params = state) => {
try {
@ -144,6 +146,9 @@ function SelectWrapper({
<label htmlFor={name}>{label}</label>
{isSingle && link}
</Nav>
{!isEmpty(description) && (
<p style={{ fontSize: 13, fontWeight: 500 }}>{description}</p>
)}
<Component
addRelation={value => {
addRelation({ target: { name, value } });

View File

@ -2,7 +2,7 @@ import React, { memo, useEffect, useCallback, useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators, compose } from 'redux';
import { get, isEqual, upperFirst } from 'lodash';
import { get, isEqual, isEmpty, upperFirst } from 'lodash';
import {
BackHeader,
@ -382,15 +382,16 @@ function SettingViewModel({
removeItem={removeRelation}
/>
)}
{settingType === 'edit-settings' && (
<FieldForm
fieldName={itemNameToSelect}
formType={itemFormType}
metadatas={getSelectedItemMetas()}
onChange={onChange}
selectOptions={getSelectedItemSelectOptions()}
/>
)}
{settingType === 'edit-settings' &&
!isEmpty(itemNameToSelect) && (
<FieldForm
fieldName={itemNameToSelect}
formType={itemFormType}
metadatas={getSelectedItemMetas()}
onChange={onChange}
selectOptions={getSelectedItemSelectOptions()}
/>
)}
</div>
</Block>
</div>

View File

@ -59,6 +59,8 @@ const getSize = type => {
function settingViewModelReducer(state = initialState, action) {
const layoutPath = ['modifiedData', 'layouts', 'edit'];
const { dragIndex, hoverIndex, dragRowIndex, hoverRowIndex } = action;
const getFieldType = name =>
state.getIn(['modifiedData', 'schema', 'attributes', name, 'type']);
switch (action.type) {
case ADD_FIELD_TO_LIST:
@ -66,10 +68,12 @@ function settingViewModelReducer(state = initialState, action) {
list.push(action.field)
);
case ADD_RELATION:
return state.updateIn(
['modifiedData', 'layouts', 'editRelations'],
list => list.push(action.name)
);
return state
.updateIn(['modifiedData', 'layouts', 'editRelations'], list =>
list.push(action.name)
)
.update('itemNameToSelect', () => action.name)
.update('itemFormType', () => getFieldType(action.name));
case GET_DATA_SUCCEEDED:
return state
.update('initialData', () => fromJS(action.layout || {}))
@ -112,6 +116,7 @@ function settingViewModelReducer(state = initialState, action) {
'type',
])
);
const listSize = state.getIn(layoutPath).size;
const newList = state
.getIn(layoutPath)
@ -127,7 +132,10 @@ function settingViewModelReducer(state = initialState, action) {
});
const formattedList = formatLayout(newList.toJS());
return state.updateIn(layoutPath, () => fromJS(formattedList));
return state
.updateIn(layoutPath, () => fromJS(formattedList))
.update('itemNameToSelect', () => action.name)
.update('itemFormType', () => getFieldType(action.name));
}
case ON_CHANGE:
@ -164,16 +172,35 @@ function settingViewModelReducer(state = initialState, action) {
case REMOVE_FIELD: {
const row = state.getIn([...layoutPath, action.rowIndex, 'rowContent']);
let newState;
let fieldName;
// Delete the entire row if length is one or if lenght is equal to 2 and the second element is the hidden div used to make the dnd exp smoother
if (
row.size === 1 ||
(row.size == 2 && row.getIn([1, 'name']) === '_TEMP_')
) {
fieldName = state.getIn([
'modifiedData',
'layouts',
'edit',
action.rowIndex,
'rowContent',
0,
'name',
]);
newState = state.updateIn(layoutPath, list =>
list.delete(action.rowIndex)
);
} else {
fieldName = state.getIn([
'modifiedData',
'layouts',
'edit',
action.rowIndex,
'rowContent',
action.fieldIndex,
name,
]);
newState = state.updateIn(
[...layoutPath, action.rowIndex, 'rowContent'],
list => list.delete(action.fieldIndex)
@ -181,6 +208,11 @@ function settingViewModelReducer(state = initialState, action) {
}
const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
if (state.get('itemNameToSelect') === fieldName) {
// TODO select next item
return state.updateIn(layoutPath, () => fromJS(updatedList));
}
return state.updateIn(layoutPath, () => fromJS(updatedList));
}
case REMOVE_RELATION: