diff --git a/webapp/src/components/cardDetail/cardDetailProperties.tsx b/webapp/src/components/cardDetail/cardDetailProperties.tsx index be728bf8b..ebabdd7e2 100644 --- a/webapp/src/components/cardDetail/cardDetailProperties.tsx +++ b/webapp/src/components/cardDetail/cardDetailProperties.tsx @@ -58,7 +58,7 @@ const CardDetailProperties = React.memo((props: Props) => { contents={contents} comments={comments} propertyTemplate={propertyTemplate} - emptyDisplayValue='Empty' + showEmptyPlaceholder={true} /> ) diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx index 4bec4af1f..0c1407fa0 100644 --- a/webapp/src/components/gallery/galleryCard.tsx +++ b/webapp/src/components/gallery/galleryCard.tsx @@ -149,7 +149,7 @@ const GalleryCard = React.memo((props: Props) => { readOnly={true} card={card} propertyTemplate={template} - emptyDisplayValue='' + showEmptyPlaceholder={false} /> ))} diff --git a/webapp/src/components/kanban/kanbanCard.tsx b/webapp/src/components/kanban/kanbanCard.tsx index 916af303e..5d1e8cf05 100644 --- a/webapp/src/components/kanban/kanbanCard.tsx +++ b/webapp/src/components/kanban/kanbanCard.tsx @@ -105,7 +105,7 @@ const KanbanCard = React.memo((props: Props) => { contents={contents} comments={comments} propertyTemplate={template} - emptyDisplayValue='' + showEmptyPlaceholder={false} /> ))} diff --git a/webapp/src/components/properties/dateRange/dateRange.tsx b/webapp/src/components/properties/dateRange/dateRange.tsx index 50048a0c2..a8f07d1cc 100644 --- a/webapp/src/components/properties/dateRange/dateRange.tsx +++ b/webapp/src/components/properties/dateRange/dateRange.tsx @@ -22,6 +22,7 @@ import {Utils} from '../../../utils' type Props = { className: string value: string + showEmptyPlaceholder?: boolean onChange: (value: string) => void } @@ -35,7 +36,7 @@ type DateProperty = { const loadedLocales: Record = {} function DateRange(props: Props): JSX.Element { - const {className, value, onChange} = props + const {className, value, showEmptyPlaceholder, onChange} = props const intl = useIntl() const timeZoneOffset = new Date().getTimezoneOffset() * 60 * 1000 @@ -151,12 +152,17 @@ function DateRange(props: Props): JSX.Element { setShowDialog(false) } + let buttonText = displayValue + if (!buttonText && showEmptyPlaceholder) { + buttonText = intl.formatMessage({id: 'DateRange.empty', defaultMessage: 'Empty'}) + } + return (
{showDialog && diff --git a/webapp/src/components/properties/link/link.tsx b/webapp/src/components/properties/link/link.tsx index ac3a01477..f1e24b983 100644 --- a/webapp/src/components/properties/link/link.tsx +++ b/webapp/src/components/properties/link/link.tsx @@ -12,6 +12,7 @@ import LinkIcon from '../../../widgets/icons/Link' type Props = { value: string readonly?: boolean + placeholder?: string onChange: (value: string) => void onSave: () => void onCancel: () => void @@ -38,7 +39,7 @@ const URLProperty = (props: Props): JSX.Element => {
{ ))} {values.length === 0 && ( - + )}
) diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx index 48929d161..e9e74a980 100644 --- a/webapp/src/components/propertyValueElement.tsx +++ b/webapp/src/components/propertyValueElement.tsx @@ -36,17 +36,18 @@ type Props = { contents: Array comments: CommentBlock[] propertyTemplate: IPropertyTemplate - emptyDisplayValue: string + showEmptyPlaceholder: boolean } const PropertyValueElement = (props:Props): JSX.Element => { const [value, setValue] = useState(props.card.fields.properties[props.propertyTemplate.id] || '') const [serverValue, setServerValue] = useState(props.card.fields.properties[props.propertyTemplate.id] || '') - const {card, propertyTemplate, readOnly, emptyDisplayValue, board, contents, comments} = props + const {card, propertyTemplate, readOnly, showEmptyPlaceholder, board, contents, comments} = props const intl = useIntl() const propertyValue = card.fields.properties[propertyTemplate.id] const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate, intl) + const emptyDisplayValue = showEmptyPlaceholder ? intl.formatMessage({id: 'PropertyValueElement.empty', defaultMessage: 'Empty'}) : '' const finalDisplayValue = displayValue || emptyDisplayValue const [open, setOpen] = useState(false) @@ -201,6 +202,7 @@ const PropertyValueElement = (props:Props): JSX.Element => { mutator.changePropertyValue(card, propertyTemplate.id, newValue)} /> ) @@ -209,6 +211,7 @@ const PropertyValueElement = (props:Props): JSX.Element => { setValue(propertyValue)} @@ -260,7 +263,7 @@ const PropertyValueElement = (props:Props): JSX.Element => { return ( { contents={contents} comments={comments} propertyTemplate={template} - emptyDisplayValue='' + showEmptyPlaceholder={false} />
) })}