luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Show placeholders with 'Empty' text for empty fields in the card dialog.

Browse source
This commit is contained in:
Andrey Eremchenko 2021-08-26 19:54:09 +07:00
parent e834c15ce7
commit 5e1115c1f2
8 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/src/components/cardDetail/cardDetailProperties.tsx
View file

@ -58,7 +58,7 @@ const CardDetailProperties = React.memo((props: Props) => {
contents={contents}
comments={comments}
propertyTemplate={propertyTemplate}
emptyDisplayValue='Empty'
showEmptyPlaceholder={true}
/>
</div>
)

2
webapp/src/components/gallery/galleryCard.tsx
View file

@ -149,7 +149,7 @@ const GalleryCard = React.memo((props: Props) => {
readOnly={true}
card={card}
propertyTemplate={template}
emptyDisplayValue=''
showEmptyPlaceholder={false}
/>
</Tooltip>
))}

2
webapp/src/components/kanban/kanbanCard.tsx
View file

@ -105,7 +105,7 @@ const KanbanCard = React.memo((props: Props) => {
contents={contents}
comments={comments}
propertyTemplate={template}
emptyDisplayValue=''
showEmptyPlaceholder={false}
/>
</Tooltip>
))}

10
webapp/src/components/properties/dateRange/dateRange.tsx
View file

@ -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<string, any> = {}
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 (
<div className={'DateRange '}>
<Button
onClick={() => setShowDialog(true)}
>
{displayValue || <span title={intl.formatMessage({id: 'DateRange.empty', defaultMessage: 'Empty'})}/>}
{buttonText}
</Button>
{showDialog &&

3
webapp/src/components/properties/link/link.tsx
View file

@ -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 => {
<div className='URLProperty property-link url'>
<Editable
className='octo-propertyvalue'
placeholderText=''
placeholderText={props.placeholder}
value={props.value}
readonly={props.readonly}
onChange={props.onChange}

2
webapp/src/components/properties/multiSelect.tsx
View file

@ -44,7 +44,7 @@ const MultiSelectProperty = (props: Props): JSX.Element => {
</Label>
))}
{values.length === 0 && (
<Label color='empty'>{''}</Label>
<Label color='empty'>{emptyValue}</Label>
)}
</div>
)

9
webapp/src/components/propertyValueElement.tsx
View file

@ -36,17 +36,18 @@ type Props = {
contents: Array<ContentBlock|ContentBlock[]>
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 => {
<DateRange
className='octo-propertyvalue'
value={value as string}
showEmptyPlaceholder={showEmptyPlaceholder}
onChange={(newValue) => mutator.changePropertyValue(card, propertyTemplate.id, newValue)}
/>
)
@ -209,6 +211,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
<URLProperty
value={value as string}
readonly={readOnly}
placeholder={emptyDisplayValue}
onChange={setValue}
onSave={saveTextProperty}
onCancel={() => setValue(propertyValue)}
@ -260,7 +263,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
return (
<Editable
className='octo-propertyvalue'
placeholderText=''
placeholderText={emptyDisplayValue}
value={value as string}
onChange={setValue}
onSave={saveTextProperty}

2
webapp/src/components/table/tableRow.tsx
View file

@ -140,7 +140,7 @@ const TableRow = React.memo((props: Props) => {
contents={contents}
comments={comments}
propertyTemplate={template}
emptyDisplayValue=''
showEmptyPlaceholder={false}
/>
</div>)
})}