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

GH-2007 Use VisiblePropertyIds for view property order (#2010)

Browse source 
* update for views to use viewPropertyIds for order

* build fixes

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Scott Bishel 2022-01-05 14:24:22 -07:00 committed by GitHub
parent 72bf464b22
commit 9ed0922e8c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 58 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/src/components/calendar/fullCalendar.tsx
View file

@ -66,7 +66,7 @@ const CalendarFullView = (props: Props): JSX.Element|null => {
const isSelectable = !readonly
const visiblePropertyTemplates = useMemo(() => (
board.fields.cardProperties.filter((template: IPropertyTemplate) => activeView.fields.visiblePropertyIds.includes(template.id))
activeView.fields.visiblePropertyIds.map((id) => board.fields.cardProperties.find((t) => t.id === id)).filter((i) => i) as IPropertyTemplate[]
), [board.fields.cardProperties, activeView.fields.visiblePropertyIds])
let {initialDate} = props

4
webapp/src/components/gallery/gallery.tsx
View file

@ -25,7 +25,9 @@ type Props = {
const Gallery = (props: Props): JSX.Element => {
const {activeView, board, cards} = props
const visiblePropertyTemplates = board.fields.cardProperties.filter((template: IPropertyTemplate) => activeView.fields.visiblePropertyIds.includes(template.id))
const visiblePropertyTemplates =
activeView.fields.visiblePropertyIds.map((id) => board.fields.cardProperties.find((t) => t.id === id)).filter((i) => i) as IPropertyTemplate[]
const isManualSort = activeView.fields.sortOptions.length === 0
const onDropToCard = (srcCard: Card, dstCard: Card) => {

3
webapp/src/components/kanban/kanban.tsx
View file

@ -48,7 +48,8 @@ const Kanban = (props: Props) => {
const propertyValues = groupByProperty.options || []
Utils.log(`${propertyValues.length} propertyValues`)
const visiblePropertyTemplates = board.fields.cardProperties.filter((template: IPropertyTemplate) => activeView.fields.visiblePropertyIds.includes(template.id))
const visiblePropertyTemplates =
activeView.fields.visiblePropertyIds.map((id) => board.fields.cardProperties.find((t) => t.id === id)).filter((i) => i) as IPropertyTemplate[]
const isManualSort = activeView.fields.sortOptions.length === 0
const propertyNameChanged = useCallback(async (option: IPropertyOption, text: string): Promise<void> => {

10
webapp/src/components/table/tableHeaderMenu.tsx
View file

@ -5,7 +5,7 @@ import React, {FC} from 'react'
import {useIntl} from 'react-intl'
import {Constants} from '../../constants'
import {Board, IPropertyTemplate} from '../../blocks/board'
import {Board} from '../../blocks/board'
import {BoardView} from '../../blocks/boardView'
import {Card} from '../../blocks/card'
import mutator from '../../mutator'
@ -42,7 +42,9 @@ const TableHeaderMenu: FC<Props> = (props: Props): JSX.Element => {
// eslint-disable-next-line no-warning-comments
// TODO: Handle name column
} else {
const index = board.fields.cardProperties.findIndex((o: IPropertyTemplate) => o.id === templateId)
const index = activeView.fields.visiblePropertyIds.findIndex((i) => i === templateId)
// const index = board.fields.cardProperties.findIndex((o: IPropertyTemplate) => o.id === templateId)
mutator.insertPropertyTemplate(board, activeView, index)
}
}}
@ -55,7 +57,9 @@ const TableHeaderMenu: FC<Props> = (props: Props): JSX.Element => {
// eslint-disable-next-line no-warning-comments
// TODO: Handle title column
} else {
const index = board.fields.cardProperties.findIndex((o: IPropertyTemplate) => o.id === templateId) + 1
const index = activeView.fields.visiblePropertyIds.findIndex((i) => i === templateId) + 1
// const index = board.fields.cardProperties.findIndex((o: IPropertyTemplate) => o.id === templateId) + 1
mutator.insertPropertyTemplate(board, activeView, index)
}
}}

16
webapp/src/components/table/tableHeaders.tsx
View file

@ -1,6 +1,6 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useCallback} from 'react'
import React, {useCallback, useMemo} from 'react'
import {FormattedMessage, useIntl} from 'react-intl'
@ -108,13 +108,17 @@ const TableHeaders = (props: Props): JSX.Element => {
mutator.updateBlock(newView, activeView, 'autosize column')
}, [activeView, board, cards])
const visiblePropertyTemplates = useMemo(() => (
activeView.fields.visiblePropertyIds.map((id) => board.fields.cardProperties.find((t) => t.id === id)).filter((i) => i) as IPropertyTemplate[]
), [board.fields.cardProperties, activeView.fields.visiblePropertyIds])
const onDropToColumn = useCallback(async (template: IPropertyTemplate, container: IPropertyTemplate) => {
Utils.log(`ondrop. Source column: ${template.name}, dest column: ${container.name}`)
// Move template to new index
const destIndex = container ? board.fields.cardProperties.indexOf(container) : 0
await mutator.changePropertyTemplateOrder(board, template, destIndex >= 0 ? destIndex : 0)
}, [board])
const destIndex = container ? activeView.fields.visiblePropertyIds.indexOf(container.id) : 0
await mutator.changeViewVisiblePropertiesOrder(activeView, template, destIndex >= 0 ? destIndex : 0)
}, [activeView.fields.visiblePropertyIds])
const titleSortOption = activeView.fields.sortOptions?.find((o) => o.propertyId === Constants.titleColumnId)
let titleSorted: 'up' | 'down' | 'none' = 'none'
@ -147,14 +151,12 @@ const TableHeaders = (props: Props): JSX.Element => {
/>
{/* Table header row */}
{board.fields.cardProperties.filter((template: IPropertyTemplate) => activeView.fields.visiblePropertyIds.includes(template.id)).map((template: IPropertyTemplate) => {
{visiblePropertyTemplates.map((template) => {
let sorted: 'up' | 'down' | 'none' = 'none'
const sortOption = activeView.fields.sortOptions.find((o: ISortOption) => o.propertyId === template.id)
if (sortOption) {
sorted = sortOption.reversed ? 'down' : 'up'
}
return (
<TableHeader
name={template.name}

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

@ -1,6 +1,6 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useEffect, useRef, useState} from 'react'
import React, {useEffect, useRef, useState, useMemo} from 'react'
import {FormattedMessage} from 'react-intl'
import {Card} from '../../blocks/card'
@ -60,6 +60,10 @@ const TableRow = React.memo((props: Props) => {
}
}, [])
const visiblePropertyTemplates = useMemo(() => (
activeView.fields.visiblePropertyIds.map((id) => board.fields.cardProperties.find((t) => t.id === id)).filter((i) => i) as IPropertyTemplate[]
), [board.fields.cardProperties, activeView.fields.visiblePropertyIds])
let className = props.isSelected ? 'TableRow octo-table-row selected' : 'TableRow octo-table-row'
if (isOver) {
className += ' dragover'
@ -121,8 +125,7 @@ const TableRow = React.memo((props: Props) => {
</div>
{/* Columns, one per property */}
{board.fields.cardProperties.filter((template: IPropertyTemplate) => activeView.fields.visiblePropertyIds.includes(template.id)).map((template: IPropertyTemplate) => {
{visiblePropertyTemplates.map((template) => {
if (!columnRefs.get(template.id)) {
columnRefs.set(template.id, React.createRef())
}
@ -142,7 +145,8 @@ const TableRow = React.memo((props: Props) => {
propertyTemplate={template}
showEmptyPlaceholder={false}
/>
</div>)
</div>
)
})}
</div>
)

31
webapp/src/mutator.ts
View file

@ -262,8 +262,9 @@ class Mutator {
const oldBlocks: Block[] = [board]
const newBoard = createBoard(board)
const startIndex = (index >= 0) ? index : board.fields.cardProperties.length
newBoard.fields.cardProperties.splice(startIndex, 0, newTemplate)
// insert at end of board.fields.cardProperties
newBoard.fields.cardProperties.push(newTemplate)
const changedBlocks: Block[] = [newBoard]
let description = 'add property'
@ -272,7 +273,10 @@ class Mutator {
oldBlocks.push(activeView)
const newActiveView = createBoardView(activeView)
newActiveView.fields.visiblePropertyIds.push(newTemplate.id)
// insert in proper location in activeview.fields.visiblePropetyIds
const viewIndex = index > 0 ? index : activeView.fields.visiblePropertyIds.length
newActiveView.fields.visiblePropertyIds.splice(viewIndex, 0, newTemplate.id)
changedBlocks.push(newActiveView)
description = 'add column'
@ -559,6 +563,27 @@ class Mutator {
)
}
async changeViewVisiblePropertiesOrder(view: BoardView, template: IPropertyTemplate, destIndex: number, description = 'change property order'): Promise<void> {
const oldVisiblePropertyIds = view.fields.visiblePropertyIds
const newOrder = oldVisiblePropertyIds.slice()
const srcIndex = oldVisiblePropertyIds.indexOf(template.id)
Utils.log(`srcIndex: ${srcIndex}, destIndex: ${destIndex}`)
newOrder.splice(destIndex, 0, newOrder.splice(srcIndex, 1)[0])
await undoManager.perform(
async () => {
await octoClient.patchBlock(view.id, {updatedFields: {visiblePropertyIds: newOrder}})
},
async () => {
await octoClient.patchBlock(view.id, {updatedFields: {visiblePropertyIds: oldVisiblePropertyIds}})
},
description,
this.undoGroupId,
)
}
async changeViewVisibleProperties(viewId: string, oldVisiblePropertyIds: string[], visiblePropertyIds: string[], description = 'show / hide property'): Promise<void> {
await undoManager.perform(
async () => {