self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-02 14:47:55 +02:00
Code Issues Releases Activity

Finishing the migration of viewMenu into a component

Browse Source
This commit is contained in:
Jesús Espino 2020-10-14 12:39:41 +02:00
parent 4a607df9e8
commit bbf9fb10de
4 changed files with 117 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/client/components/boardComponent.tsx
View File

@ -6,7 +6,7 @@ import { IPropertyOption } from "../board"
import { BoardTree } from "../boardTree"
import { CardFilter } from "../cardFilter"
import { Constants } from "../constants"
import Menu from "../widgets/menu"
import ViewMenu from "../components/viewMenu"
import { Menu as OldMenu } from "../menu"
import { Mutator } from "../mutator"
import { IBlock, IPageController } from "../octoTypes"
@ -19,74 +19,6 @@ import { BoardColumn } from "./boardColumn"
import { Button } from "./button"
import { Editable } from "./editable"
type ViewMenuProps = {
mutator: Mutator,
boardTree?: BoardTree
pageController: IPageController,
board: Board,
onClose: () => void,
}
function ViewMenu({board, onClose, boardTree, mutator, pageController}: ViewMenuProps) {
const handleDeleteView = async (id: string) => {
Utils.log(`deleteView`)
const view = boardTree.activeView
const nextView = boardTree.views.find(o => o !== view)
await mutator.deleteBlock(view, "delete view")
pageController.showView(nextView.id)
}
const handleViewClick = (id: string) => {
Utils.log(`view ` + id)
const view = boardTree.views.find(o => o.id === id)
pageController.showView(view.id)
}
const handleAddViewBoard = async (id: string) => {
Utils.log(`addview-board`)
const view = new BoardView()
view.title = "Board View"
view.viewType = "board"
view.parentId = board.id
const oldViewId = boardTree.activeView.id
await mutator.insertBlock(
view,
"add view",
async () => { pageController.showView(view.id) },
async () => { pageController.showView(oldViewId) })
}
const handleAddViewTable = async (id: string) => {
Utils.log(`addview-table`)
const view = new BoardView()
view.title = "Table View"
view.viewType = "table"
view.parentId = board.id
view.visiblePropertyIds = board.cardProperties.map(o => o.id)
const oldViewId = boardTree.activeView.id
await mutator.insertBlock(
view,
"add view",
async () => { pageController.showView(view.id) },
async () => { pageController.showView(oldViewId) })
}
return (
<Menu onClose={onClose}>
{boardTree.views.map((view) => (<Menu.Text key={view.id} id={view.id} name={view.title} onClick={handleViewClick}/>))}
<Menu.Separator/>
{boardTree.views.length > 1 && <Menu.Text id="__deleteView" name="Delete View" onClick={handleDeleteView} />}
<Menu.SubMenu id="__addView" name="Add View">
<Menu.Text id='board' name='Board' onClick={handleAddViewBoard}/>
<Menu.Text id='table' name='Table' onClick={handleAddViewTable}/>
</Menu.SubMenu>
</Menu>
);
}
type Props = {
mutator: Mutator,
boardTree?: BoardTree

46
src/client/components/tableComponent.tsx
View File

@ -5,7 +5,8 @@ import { BlockIcons } from "../blockIcons"
import { IPropertyTemplate } from "../board"
import { BoardTree } from "../boardTree"
import { CsvExporter } from "../csvExporter"
import { Menu } from "../menu"
import ViewMenu from "../components/viewMenu"
import { Menu as OldMenu } from "../menu"
import { Mutator } from "../mutator"
import { IBlock, IPageController } from "../octoTypes"
import { OctoUtils } from "../octoUtils"
@ -23,6 +24,7 @@ type Props = {
type State = {
isHoverOnCover: boolean
isSearching: boolean
viewMenu: boolean
}
class TableComponent extends React.Component<Props, State> {
@ -33,7 +35,7 @@ class TableComponent extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() }
this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false}
}
componentDidUpdate(prevPros: Props, prevState: State) {
@ -85,7 +87,21 @@ class TableComponent extends React.Component<Props, State> {
<div className="octo-table">
<div className="octo-controls">
<Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} />
<div className="octo-button" style={{ color: "#000000", fontWeight: 600 }} onClick={(e) => { OctoUtils.showViewMenu(e, mutator, boardTree, pageController) }}><div className="imageDropdown"></div></div>
<div
className="octo-button"
style={{ color: "#000000", fontWeight: 600 }}
onClick={() => this.setState({viewMenu: true})}
>
{this.state.viewMenu &&
<ViewMenu
board={board}
onClose={() => this.setState({viewMenu:false})}
mutator={mutator}
boardTree={boardTree}
pageController={pageController}
/>}
<div className="imageDropdown"></div>
</div>
<div className="octo-spacer"></div>
<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
<div className={ hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
@ -198,11 +214,11 @@ class TableComponent extends React.Component<Props, State> {
const { mutator, boardTree } = this.props
const { board } = boardTree
Menu.shared.options = [
OldMenu.shared.options = [
{ id: "random", name: "Random" },
{ id: "remove", name: "Remove Icon" },
]
Menu.shared.onMenuClicked = (optionId: string, type?: string) => {
OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
switch (optionId) {
case "remove":
mutator.changeIcon(board, undefined, "remove icon")
@ -213,7 +229,7 @@ class TableComponent extends React.Component<Props, State> {
break
}
}
Menu.shared.showAtElement(e.target as HTMLElement)
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
private async propertiesClicked(e: React.MouseEvent) {
@ -221,12 +237,12 @@ class TableComponent extends React.Component<Props, State> {
const { activeView } = boardTree
const selectProperties = boardTree.board.cardProperties
Menu.shared.options = selectProperties.map((o) => {
OldMenu.shared.options = selectProperties.map((o) => {
const isVisible = activeView.visiblePropertyIds.includes(o.id)
return { id: o.id, name: o.name, type: "switch", isOn: isVisible }
})
Menu.shared.onMenuToggled = async (id: string, isOn: boolean) => {
OldMenu.shared.onMenuToggled = async (id: string, isOn: boolean) => {
const property = selectProperties.find(o => o.id === id)
Utils.assertValue(property)
Utils.log(`Toggle property ${property.name} ${isOn}`)
@ -239,7 +255,7 @@ class TableComponent extends React.Component<Props, State> {
}
await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
}
Menu.shared.showAtElement(e.target as HTMLElement)
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
private filterClicked(e: React.MouseEvent) {
@ -250,12 +266,12 @@ class TableComponent extends React.Component<Props, State> {
private async optionsClicked(e: React.MouseEvent) {
const { boardTree } = this.props
Menu.shared.options = [
OldMenu.shared.options = [
{ id: "exportCsv", name: "Export to CSV" },
{ id: "exportBoardArchive", name: "Export board archive" },
]
Menu.shared.onMenuClicked = async (id: string) => {
OldMenu.shared.onMenuClicked = async (id: string) => {
switch (id) {
case "exportCsv": {
CsvExporter.exportTableCsv(boardTree)
@ -267,7 +283,7 @@ class TableComponent extends React.Component<Props, State> {
}
}
}
Menu.shared.showAtElement(e.target as HTMLElement)
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
private async headerClicked(e: React.MouseEvent<HTMLDivElement>, templateId: string) {
@ -288,8 +304,8 @@ class TableComponent extends React.Component<Props, State> {
options.push({ id: "delete", name: "Delete" })
}
Menu.shared.options = options
Menu.shared.onMenuClicked = async (optionId: string, type?: string) => {
OldMenu.shared.options = options
OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
switch (optionId) {
case "sortAscending": {
const newSortOptions = [
@ -342,7 +358,7 @@ class TableComponent extends React.Component<Props, State> {
}
}
}
Menu.shared.showAtElement(e.target as HTMLElement)
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
async showCard(card: IBlock) {

85
src/client/components/viewMenu.tsx Normal file
View File

@ -0,0 +1,85 @@
import React from "react"
import { Mutator } from "../mutator"
import Menu from "../widgets/menu"
import { Board } from "../board"
import { BoardTree } from "../boardTree"
import { IPageController } from "../octoTypes"
import { Utils } from "../utils"
import { BoardView } from "../boardView"
type Props = {
mutator: Mutator,
boardTree?: BoardTree
pageController: IPageController,
board: Board,
onClose: () => void,
}
export default class ViewMenu extends React.Component<Props> {
handleDeleteView = async (id: string) => {
const {board, boardTree, mutator, pageController} = this.props;
Utils.log(`deleteView`)
const view = boardTree.activeView
const nextView = boardTree.views.find(o => o !== view)
await mutator.deleteBlock(view, "delete view")
pageController.showView(nextView.id)
}
handleViewClick = (id: string) => {
const {boardTree, pageController} = this.props;
Utils.log(`view ` + id)
const view = boardTree.views.find(o => o.id === id)
pageController.showView(view.id)
}
handleAddViewBoard = async (id: string) => {
const {board, boardTree, mutator, pageController} = this.props;
Utils.log(`addview-board`)
const view = new BoardView()
view.title = "Board View"
view.viewType = "board"
view.parentId = board.id
const oldViewId = boardTree.activeView.id
await mutator.insertBlock(
view,
"add view",
async () => { pageController.showView(view.id) },
async () => { pageController.showView(oldViewId) })
}
handleAddViewTable = async (id: string) => {
const {board, boardTree, mutator, pageController} = this.props;
Utils.log(`addview-table`)
const view = new BoardView()
view.title = "Table View"
view.viewType = "table"
view.parentId = board.id
view.visiblePropertyIds = board.cardProperties.map(o => o.id)
const oldViewId = boardTree.activeView.id
await mutator.insertBlock(
view,
"add view",
async () => { pageController.showView(view.id) },
async () => { pageController.showView(oldViewId) })
}
render() {
const {board, onClose, boardTree, mutator, pageController} = this.props;
return (
<Menu onClose={onClose}>
{boardTree.views.map((view) => (<Menu.Text key={view.id} id={view.id} name={view.title} onClick={this.handleViewClick}/>))}
<Menu.Separator/>
{boardTree.views.length > 1 && <Menu.Text id="__deleteView" name="Delete View" onClick={this.handleDeleteView} />}
<Menu.SubMenu id="__addView" name="Add View">
<Menu.Text id='board' name='Board' onClick={this.handleAddViewBoard}/>
<Menu.Text id='table' name='Table' onClick={this.handleAddViewTable}/>
</Menu.SubMenu>
</Menu>
);
}
}

69
src/client/octoUtils.tsx
View File

@ -9,75 +9,6 @@ import { IBlock, IPageController } from "./octoTypes"
import { Utils } from "./utils"
class OctoUtils {
static async showViewMenu(e: React.MouseEvent, mutator: Mutator, boardTree: BoardTree, pageController: IPageController) {
const { board } = boardTree
const options: MenuOption[] = boardTree.views.map(view => ({ id: view.id, name: view.title || "Untitled View" }))
options.push({ id: "", name: "", type: "separator" })
if (boardTree.views.length > 1) {
options.push({ id: "__deleteView", name: "Delete View" })
}
options.push({ id: "__addview", name: "Add View", type: "submenu" })
const addViewMenuOptions = [
{ id: "board", name: "Board" },
{ id: "table", name: "Table" }
]
Menu.shared.subMenuOptions.set("__addview", addViewMenuOptions)
Menu.shared.options = options
Menu.shared.onMenuClicked = async (optionId: string, type?: string) => {
switch (optionId) {
case "__deleteView": {
Utils.log(`deleteView`)
const view = boardTree.activeView
const nextView = boardTree.views.find(o => o !== view)
await mutator.deleteBlock(view, "delete view")
pageController.showView(nextView.id)
break
}
case "__addview-board": {
Utils.log(`addview-board`)
const view = new BoardView()
view.title = "Board View"
view.viewType = "board"
view.parentId = board.id
const oldViewId = boardTree.activeView.id
await mutator.insertBlock(
view,
"add view",
async () => { pageController.showView(view.id) },
async () => { pageController.showView(oldViewId) })
break
}
case "__addview-table": {
Utils.log(`addview-table`)
const view = new BoardView()
view.title = "Table View"
view.viewType = "table"
view.parentId = board.id
view.visiblePropertyIds = board.cardProperties.map(o => o.id)
const oldViewId = boardTree.activeView.id
await mutator.insertBlock(
view,
"add view",
async () => { pageController.showView(view.id) },
async () => { pageController.showView(oldViewId) })
break
}
default: {
const view = boardTree.views.find(o => o.id === optionId)
pageController.showView(view.id)
}
}
}
Menu.shared.showAtElement(e.target as HTMLElement)
}
static propertyDisplayValue(block: IBlock, propertyValue: string | undefined, propertyTemplate: IPropertyTemplate) {
let displayValue: string
switch (propertyTemplate.type) {