Use getdisplayed value in the relation selects

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-12-08 15:30:32 +01:00
parent 79ef4315a0
commit 8401308e6a
14 changed files with 71 additions and 26 deletions

View File

@ -31,6 +31,9 @@ Cell.propTypes = {
relationType: PropTypes.string,
rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
type: PropTypes.string,
queryInfos: PropTypes.shape({
endPoint: PropTypes.string.isRequired,
}),
value: PropTypes.any,
}).isRequired,
};

View File

@ -6,8 +6,8 @@ import { IconLinks } from '@buffetjs/core';
import { Duplicate } from '@buffetjs/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useListView } from '../../../hooks';
import { getDisplayedValue } from '../../../utils';
import CustomInputCheckbox from '../../CustomInputCheckbox';
import getDisplayedValue from './utils/getDisplayedValue';
import ActionContainer from './ActionContainer';
import Cell from './Cell';

View File

@ -55,8 +55,6 @@ const CustomTable = ({
return displayedHeaders;
}, [formatMessage, hasDraftAndPublish, displayedHeaders]);
console.log({ headers });
const colSpanLength = isBulkable && canDelete ? headers.length + 2 : headers.length + 1;
const handleRowGoTo = id => {

View File

@ -2,10 +2,8 @@ import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from
import { Text, Padded } from '@buffetjs/core';
import { LoadingIndicator, request } from 'strapi-helper-plugin';
import PropTypes from 'prop-types';
import getRequestUrl from '../../utils/getRequestUrl';
import { getDisplayedValue, getRequestUrl } from '../../utils';
import Tooltip from '../Tooltip';
import getDisplayedValue from '../CustomTable/Row/utils/getDisplayedValue';
const RelationPreviewTooltip = ({
tooltipId,
@ -99,11 +97,15 @@ RelationPreviewTooltip.propTypes = {
tooltipId: PropTypes.string.isRequired,
mainField: PropTypes.exact({
name: PropTypes.string.isRequired,
schema: PropTypes.object.isRequired,
schema: PropTypes.shape({
type: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
name: PropTypes.string.isRequired,
rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
queryInfos: PropTypes.object.isRequired,
queryInfos: PropTypes.shape({
endPoint: PropTypes.string.isRequired,
}).isRequired,
};
export default RelationPreviewTooltip;

View File

@ -89,7 +89,12 @@ ListItem.propTypes = {
displayNavigationLink: PropTypes.bool.isRequired,
findRelation: PropTypes.func,
isDisabled: PropTypes.bool.isRequired,
mainField: PropTypes.string.isRequired,
mainField: PropTypes.shape({
name: PropTypes.string.isRequired,
schema: PropTypes.shape({
type: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
moveRelation: PropTypes.func,
onRemove: PropTypes.func,
targetModel: PropTypes.string,

View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { Link, useLocation } from 'react-router-dom';
import { isEmpty } from 'lodash';
import { useIntl } from 'react-intl';
import { getTrad } from '../../utils';
import { getDisplayedValue, getTrad } from '../../utils';
import IconRemove from '../../assets/images/icon_remove.svg';
import RelationDPState from '../RelationDPState';
import { Span } from './components';
@ -42,6 +42,9 @@ const Relation = ({
? formatMessage({ id: getTrad(titleLabelID) })
: formatMessage({ id: getTrad('containers.Edit.clickToJump') });
const value = data[mainField.name];
const formattedValue = getDisplayedValue(mainField.schema.type, value, mainField.name);
if (isDragging || !displayNavigationLink) {
title = '';
}
@ -59,10 +62,10 @@ const Relation = ({
)}
{displayNavigationLink ? (
<Link to={{ pathname: to, state: { from: pathname } }} title={title}>
<Span>{data[mainField]}&nbsp;</Span>
<Span>{formattedValue}&nbsp;</Span>
</Link>
) : (
<Span>{data[mainField]}&nbsp;</Span>
<Span>{formattedValue}&nbsp;</Span>
)}
</div>
<div style={{ cursor }}>
@ -84,7 +87,12 @@ Relation.propTypes = {
hasDraftAndPublish: PropTypes.bool.isRequired,
isDisabled: PropTypes.bool.isRequired,
isDragging: PropTypes.bool,
mainField: PropTypes.string.isRequired,
mainField: PropTypes.shape({
name: PropTypes.string.isRequired,
schema: PropTypes.shape({
type: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
onRemove: PropTypes.func,
to: PropTypes.string,
};

View File

@ -76,6 +76,7 @@ function SelectMany({
return true;
}}
mainField={mainField}
isLoading={isLoading}
isMulti
isSearchable
@ -129,7 +130,12 @@ SelectMany.propTypes = {
displayNavigationLink: PropTypes.bool.isRequired,
isDisabled: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired,
mainField: PropTypes.string.isRequired,
mainField: PropTypes.shape({
name: PropTypes.string.isRequired,
schema: PropTypes.shape({
type: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
move: PropTypes.func,
name: PropTypes.string.isRequired,
onInputChange: PropTypes.func.isRequired,

View File

@ -3,13 +3,15 @@ import { components } from 'react-select';
import PropTypes from 'prop-types';
import { get, has, isEmpty } from 'lodash';
import { Flex, Padded, Text } from '@buffetjs/core';
import { getDisplayedValue } from '../../utils';
import RelationDPState from '../RelationDPState';
const SingleValue = props => {
const Component = components.SingleValue;
const hasDraftAndPublish = has(get(props, 'data.value'), 'published_at');
const isDraft = isEmpty(get(props, 'data.value.published_at'));
const value = props.data.label;
const mainField = get(props, ['selectProps', 'mainField'], {});
const value = getDisplayedValue(mainField.schema.type, props.data.label, mainField.name);
if (hasDraftAndPublish) {
return (
@ -43,6 +45,14 @@ const SingleValue = props => {
SingleValue.propTypes = {
data: PropTypes.object.isRequired,
selectProps: PropTypes.shape({
mainField: PropTypes.shape({
name: PropTypes.string.isRequired,
schema: PropTypes.shape({
type: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
}).isRequired,
};
export default SingleValue;

View File

@ -26,6 +26,7 @@ function SelectOne({
isClearable
isDisabled={isDisabled}
isLoading={isLoading}
mainField={mainField}
options={options}
onChange={onChange}
onInputChange={onInputChange}
@ -33,7 +34,7 @@ function SelectOne({
onMenuScrollToBottom={onMenuScrollToBottom}
placeholder={placeholder}
styles={styles}
value={isNull(value) ? null : { label: get(value, [mainField], ''), value }}
value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}
/>
);
}
@ -47,7 +48,12 @@ SelectOne.propTypes = {
components: PropTypes.object,
isDisabled: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired,
mainField: PropTypes.string.isRequired,
mainField: PropTypes.shape({
name: PropTypes.string.isRequired,
schema: PropTypes.shape({
type: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
onInputChange: PropTypes.func.isRequired,

View File

@ -5,7 +5,7 @@ import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import { get, has, isEmpty } from 'lodash';
import { Flex, Text } from '@buffetjs/core';
import { getTrad } from '../../utils';
import { getDisplayedValue, getTrad } from '../../utils';
import RelationDPState from '../RelationDPState';
const TextGrow = styled(Text)`
@ -22,6 +22,8 @@ const Option = props => {
: 'components.Select.publish-info-title';
const title = formatMessage({ id: getTrad(titleLabelID) });
const fontWeight = props.isFocused ? 'bold' : 'regular';
const mainField = get(props, ['selectProps', 'mainField'], {});
const value = getDisplayedValue(mainField.schema.type, props.label, mainField.name);
if (hasDraftAndPublish) {
return (
@ -36,8 +38,8 @@ const Option = props => {
title={title}
/>
<TextGrow ellipsis as="div" fontWeight={fontWeight}>
{props.label}&nbsp;
<TextGrow ellipsis as="div" fontWeight={fontWeight} title={value}>
{value}&nbsp;
</TextGrow>
</Flex>
</Component>
@ -46,8 +48,8 @@ const Option = props => {
return (
<Component {...props}>
<Text ellipsis fontWeight={fontWeight}>
{props.label}
<Text ellipsis fontWeight={fontWeight} title={value}>
{value}
</Text>
</Component>
);
@ -62,6 +64,12 @@ Option.propTypes = {
isFocused: PropTypes.bool.isRequired,
selectProps: PropTypes.shape({
hasDraftAndPublish: PropTypes.bool,
mainField: PropTypes.shape({
name: PropTypes.string.isRequired,
schema: PropTypes.shape({
type: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
}).isRequired,
};

View File

@ -227,7 +227,7 @@ function SelectWrapper({
isDisabled={isDisabled}
isLoading={isLoading}
isClearable
mainField={mainField.name}
mainField={mainField}
move={moveRelation}
name={name}
options={filteredOptions}

View File

@ -20,8 +20,6 @@ const CollectionTypeRecursivePath = ({
}) => {
const { isLoading, layout, updateLayout } = useFetchContentTypeLayout(slug);
console.log({ layout });
const { rawContentTypeLayout, rawComponentsLayouts } = useMemo(() => {
let rawContentTypeLayout = {};
let rawComponentsLayouts = {};

View File

@ -1,6 +1,6 @@
import { isEmpty, isNull, isObject, toLower, toString } from 'lodash';
import moment from 'moment';
import dateFormats from '../../../../utils/dateFormats';
import dateFormats from './dateFormats';
const getDisplayedValue = (type, value, name) => {
switch (toLower(type)) {

View File

@ -6,6 +6,7 @@ export { default as formatFiltersFromQuery } from './formatFiltersFromQuery';
export { default as formatFiltersToQuery } from './formatFiltersToQuery';
export { default as formatLayoutToApi } from './formatLayoutToApi';
export { default as generatePermissionsObject } from './generatePermissionsObject';
export { default as getDisplayedValue } from './getDisplayedValue';
export { default as getFieldName } from './getFieldName';
export { default as getInjectedComponents } from './getComponents';
export { default as getMaxTempKey } from './getMaxTempKey';