mirror of
https://github.com/strapi/strapi.git
synced 2026-01-07 12:45:45 +00:00
Use getdisplayed value in the relation selects
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
parent
79ef4315a0
commit
8401308e6a
@ -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,
|
||||
};
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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 => {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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]} </Span>
|
||||
<Span>{formattedValue} </Span>
|
||||
</Link>
|
||||
) : (
|
||||
<Span>{data[mainField]} </Span>
|
||||
<Span>{formattedValue} </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,
|
||||
};
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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}
|
||||
<TextGrow ellipsis as="div" fontWeight={fontWeight} title={value}>
|
||||
{value}
|
||||
</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,
|
||||
};
|
||||
|
||||
|
||||
@ -227,7 +227,7 @@ function SelectWrapper({
|
||||
isDisabled={isDisabled}
|
||||
isLoading={isLoading}
|
||||
isClearable
|
||||
mainField={mainField.name}
|
||||
mainField={mainField}
|
||||
move={moveRelation}
|
||||
name={name}
|
||||
options={filteredOptions}
|
||||
|
||||
@ -20,8 +20,6 @@ const CollectionTypeRecursivePath = ({
|
||||
}) => {
|
||||
const { isLoading, layout, updateLayout } = useFetchContentTypeLayout(slug);
|
||||
|
||||
console.log({ layout });
|
||||
|
||||
const { rawContentTypeLayout, rawComponentsLayouts } = useMemo(() => {
|
||||
let rawContentTypeLayout = {};
|
||||
let rawComponentsLayouts = {};
|
||||
|
||||
@ -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)) {
|
||||
@ -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';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user