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

[Gh 684] Autosize fix for multi-select columns (#882)

Browse source 
* temporary commit

* cleanup code

* final fixes

* remove setting perItemPadding where not necessary

* Update webapp/src/octoUtils.tsx

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

* Update webapp/src/components/table/table.tsx

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>
This commit is contained in:
Scott Bishel 2021-08-05 09:24:01 -06:00 committed by GitHub
parent 578b91fd2e
commit 2eb3f59ddc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,9 +25,7 @@ const MultiSelectProperty = (props: Props): JSX.Element => {
const {propertyTemplate, emptyValue, propertyValue, isEditable, onChange, onChangeColor, onDeleteOption, onCreate, onDeleteValue} = props
const [open, setOpen] = useState(false)
const values = Array.isArray(propertyValue) ?
propertyValue.map((v) => propertyTemplate.options.find((o) => o!.id === v)).filter((v): v is IPropertyOption => Boolean(v)) :
[]
const values = Array.isArray(propertyValue) && propertyValue.length > 0 ? propertyValue.map((v) => propertyTemplate.options.find((o) => o!.id === v)).filter((v): v is IPropertyOption => Boolean(v)) : []
if (!isEditable || !open) {
return (
@ -44,6 +42,9 @@ const MultiSelectProperty = (props: Props): JSX.Element => {
{v.value}
</Label>
))}
{values.length === 0 && (
<Label color='empty'>{''}</Label>
)}
</div>
)
}

64
webapp/src/components/table/table.tsx
View file

@ -86,21 +86,63 @@ const Table = (props: Props): JSX.Element => {
if (!columnRef?.current) {
return
}
const {fontDescriptor, padding} = Utils.getFontAndPaddingFromCell(columnRef.current)
let template: IPropertyTemplate | undefined
const columnFontPadding = Utils.getFontAndPaddingFromCell(columnRef.current)
let perItemPadding = 0
if (columnID !== Constants.titleColumnId) {
template = visibleProperties.find((t: IPropertyTemplate) => t.id === columnID)
if (!template) {
return
}
if (template.type === 'multiSelect') {
// For multiselect, the padding calculated above depends on the number selected when calculating the padding.
// Need to calculate it manually here.
// DOM Object hierarchy should be {cell -> property -> [value1, value2, etc]}
let valueCount = 0
if (columnRef?.current?.childElementCount > 0) {
const propertyElement = columnRef.current.children.item(0) as Element
if (propertyElement) {
valueCount = propertyElement.childElementCount
if (valueCount > 0) {
const statusPadding = Utils.getFontAndPaddingFromChildren(propertyElement.children, 0)
perItemPadding = statusPadding.padding / valueCount
}
}
}
// remove the "value" portion of the original calculation
columnFontPadding.padding -= (perItemPadding * valueCount)
}
}
cards.forEach((card) => {
let displayValue = card.title
if (columnID !== Constants.titleColumnId) {
const template = visibleProperties.find((t: IPropertyTemplate) => t.id === columnID)
if (!template) {
return
let thisLen = 0
if (columnID === Constants.titleColumnId) {
thisLen = Utils.getTextWidth(card.title, columnFontPadding.fontDescriptor) + columnFontPadding.padding
} else if (template) {
const displayValue = (OctoUtils.propertyDisplayValue(card, card.fields.properties[columnID], template as IPropertyTemplate, intl) || '')
switch (template.type) {
case 'select': {
thisLen = Utils.getTextWidth(displayValue.toString().toUpperCase(), columnFontPadding.fontDescriptor)
break
}
displayValue = (OctoUtils.propertyDisplayValue(card, card.fields.properties[columnID], template, intl) || '') as string
if (template.type === 'select') {
displayValue = displayValue.toUpperCase()
case 'multiSelect': {
if (displayValue) {
const displayValues = displayValue as string[]
displayValues.forEach((value) => {
thisLen += Utils.getTextWidth(value.toUpperCase(), columnFontPadding.fontDescriptor) + perItemPadding
})
}
break
}
default: {
thisLen = Utils.getTextWidth(displayValue.toString(), columnFontPadding.fontDescriptor)
break
}
}
thisLen += columnFontPadding.padding
}
const thisLen = Utils.getTextWidth(displayValue, fontDescriptor) + padding
if (thisLen > longestSize) {
longestSize = thisLen
}
@ -286,7 +328,7 @@ const Table = (props: Props): JSX.Element => {
})}
</div>
{/* Table header row */}
{/* Table rows */}
<div className='table-row-container'>
{activeView.fields.groupById &&
visibleGroups.map((group) => {

10
webapp/src/octoUtils.tsx
View file

@ -30,6 +30,16 @@ class OctoUtils {
}
break
}
case 'multiSelect': {
if (propertyValue?.length) {
const options = propertyTemplate.options.filter((o) => propertyValue.includes(o.id))
if (!options.length) {
Utils.assertFailure(`Invalid multiSelect option IDs ${propertyValue}, block.title: ${block.title}`)
}
displayValue = options.map((o) => o.value)
}
break
}
case 'createdTime': {
displayValue = Utils.displayDateTime(new Date(block.createAt), intl)
break