From bbf9fb10de26b97a10b84da2d500a6b2cf6d32dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Wed, 14 Oct 2020 12:39:41 +0200 Subject: [PATCH] Finishing the migration of viewMenu into a component --- src/client/components/boardComponent.tsx | 70 +------------------ src/client/components/tableComponent.tsx | 46 ++++++++----- src/client/components/viewMenu.tsx | 85 ++++++++++++++++++++++++ src/client/octoUtils.tsx | 69 ------------------- 4 files changed, 117 insertions(+), 153 deletions(-) create mode 100644 src/client/components/viewMenu.tsx diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx index 9ea23b6c1..d6803ac3b 100644 --- a/src/client/components/boardComponent.tsx +++ b/src/client/components/boardComponent.tsx @@ -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 ( - - {boardTree.views.map((view) => ())} - - {boardTree.views.length > 1 && } - - - - - - ); -} - type Props = { mutator: Mutator, boardTree?: BoardTree diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx index 4179aea1e..298f41a20 100644 --- a/src/client/components/tableComponent.tsx +++ b/src/client/components/tableComponent.tsx @@ -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 { @@ -33,7 +35,7 @@ class TableComponent extends React.Component { 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 {
{ mutator.changeTitle(activeView, text) }} /> -
{ OctoUtils.showViewMenu(e, mutator, boardTree, pageController) }}>
+
this.setState({viewMenu: true})} + > + {this.state.viewMenu && + this.setState({viewMenu:false})} + mutator={mutator} + boardTree={boardTree} + pageController={pageController} + />} +
+
{ this.propertiesClicked(e) }}>Properties
{ this.filterClicked(e) }}>Filter
@@ -198,11 +214,11 @@ class TableComponent extends React.Component { 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 { 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 { 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 { } 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 { 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 { } } } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } private async headerClicked(e: React.MouseEvent, templateId: string) { @@ -288,8 +304,8 @@ class TableComponent extends React.Component { 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 { } } } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } async showCard(card: IBlock) { diff --git a/src/client/components/viewMenu.tsx b/src/client/components/viewMenu.tsx new file mode 100644 index 000000000..50fe51347 --- /dev/null +++ b/src/client/components/viewMenu.tsx @@ -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 { + 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 ( + + {boardTree.views.map((view) => ())} + + {boardTree.views.length > 1 && } + + + + + + ); + } +} diff --git a/src/client/octoUtils.tsx b/src/client/octoUtils.tsx index 0df9702e0..93e1f5c67 100644 --- a/src/client/octoUtils.tsx +++ b/src/client/octoUtils.tsx @@ -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) {