From a84ff6901a1282ed7e40c6a049272d4e310f7a70 Mon Sep 17 00:00:00 2001 From: Chen-I Lim Date: Tue, 13 Oct 2020 14:42:20 -0700 Subject: [PATCH] Initial implementation of sidebar. --- html-templates/index.ejs | 29 ---- server/main/main.go | 20 ++- server/main/octoDatabase.go | 26 ++++ src/client/boardPage.tsx | 146 +++++++++---------- src/client/boardsPage.ts | 112 -------------- src/client/components/sidebar.tsx | 126 ++++++++++++++++ src/client/components/tableComponent.tsx | 2 +- src/client/components/tableRow.tsx | 2 +- src/client/components/workspaceComponent.tsx | 57 ++++++++ src/client/mutator.ts | 4 +- src/client/octoTypes.ts | 5 +- src/client/workspaceTree.ts | 23 +++ src/static/main.css | 91 +++++++++++- webpack.common.js | 31 +--- 14 files changed, 417 insertions(+), 257 deletions(-) delete mode 100644 html-templates/index.ejs delete mode 100644 src/client/boardsPage.ts create mode 100644 src/client/components/sidebar.tsx create mode 100644 src/client/components/workspaceComponent.tsx create mode 100644 src/client/workspaceTree.ts diff --git a/html-templates/index.ejs b/html-templates/index.ejs deleted file mode 100644 index 85f4fd368..000000000 --- a/html-templates/index.ejs +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - <%= htmlWebpackPlugin.options.title %> - - - - - - - - - - - -
-

- All Boards -

-
- - - \ No newline at end of file diff --git a/server/main/main.go b/server/main/main.go index db2aebb07..f49eb7156 100644 --- a/server/main/main.go +++ b/server/main/main.go @@ -39,6 +39,13 @@ func handleStaticFile(r *mux.Router, requestPath string, filePath string, conten }) } +func handleDefault(r *mux.Router, requestPath string) { + r.HandleFunc(requestPath, func(w http.ResponseWriter, r *http.Request) { + log.Printf("handleDefault") + http.Redirect(w, r, "/board", http.StatusFound) + }) +} + // ---------------------------------------------------------------------------------------------------- // REST APIs @@ -48,12 +55,15 @@ func handleGetBlocks(w http.ResponseWriter, r *http.Request) { blockType := query.Get("type") var blocks []string - if len(blockType) > 0 { + if len(blockType) > 0 && len(parentID) > 0 { blocks = getBlocksWithParentAndType(parentID, blockType) + } else if len(blockType) > 0 { + blocks = getBlocksWithType(blockType) } else { blocks = getBlocksWithParent(parentID) } - log.Printf("GetBlocks parentID: %s, %d result(s)", parentID, len(blocks)) + + log.Printf("GetBlocks parentID: %s, type: %s, %d result(s)", parentID, blockType, len(blocks)) response := `[` + strings.Join(blocks[:], ",") + `]` jsonResponse(w, 200, response) } @@ -335,11 +345,9 @@ func main() { r := mux.NewRouter() // Static files - handleStaticFile(r, "/", "index.html", "text/html; charset=utf-8") - handleStaticFile(r, "/boards", "boards.html", "text/html; charset=utf-8") - handleStaticFile(r, "/board", "board.html", "text/html; charset=utf-8") + handleDefault(r, "/") - handleStaticFile(r, "/boardsPage.js", "boardsPage.js", "text/javascript; charset=utf-8") + handleStaticFile(r, "/board", "board.html", "text/html; charset=utf-8") handleStaticFile(r, "/boardPage.js", "boardPage.js", "text/javascript; charset=utf-8") handleStaticFile(r, "/favicon.ico", "static/favicon.svg", "image/svg+xml; charset=utf-8") diff --git a/server/main/octoDatabase.go b/server/main/octoDatabase.go index 4a4568fa1..3b98953f2 100644 --- a/server/main/octoDatabase.go +++ b/server/main/octoDatabase.go @@ -155,6 +155,32 @@ func getBlocksWithParent(parentID string) []string { return blocksFromRows(rows) } +func getBlocksWithType(blockType string) []string { + query := `WITH latest AS + ( + SELECT * FROM + ( + SELECT + *, + ROW_NUMBER() OVER (PARTITION BY id ORDER BY insert_at DESC) AS rn + FROM blocks + ) a + WHERE rn = 1 + ) + + SELECT COALESCE("json", '{}') + FROM latest + WHERE delete_at = 0 and type = $1` + + rows, err := db.Query(query, blockType) + if err != nil { + log.Printf(`getBlocksWithParentAndType ERROR: %v`, err) + panic(err) + } + + return blocksFromRows(rows) +} + func getSubTree(blockID string) []string { query := `WITH latest AS ( diff --git a/src/client/boardPage.tsx b/src/client/boardPage.tsx index 6e6c2a6f2..ad5eb650f 100644 --- a/src/client/boardPage.tsx +++ b/src/client/boardPage.tsx @@ -3,11 +3,10 @@ import ReactDOM from "react-dom" import { BoardTree } from "./boardTree" import { BoardView } from "./boardView" import { CardTree } from "./cardTree" -import { BoardComponent } from "./components/boardComponent" import { CardDialog } from "./components/cardDialog" import { FilterComponent } from "./components/filterComponent" import { PageHeader } from "./components/pageHeader" -import { TableComponent } from "./components/tableComponent" +import { WorkspaceComponent } from "./components/workspaceComponent" import { FlashMessage } from "./flashMessage" import { Mutator } from "./mutator" import { OctoClient } from "./octoClient" @@ -15,6 +14,7 @@ import { OctoListener } from "./octoListener" import { IBlock, IPageController } from "./octoTypes" import { UndoManager } from "./undomanager" import { Utils } from "./utils" +import { WorkspaceTree } from "./workspaceTree" class BoardPage implements IPageController { boardTitle: HTMLElement @@ -23,10 +23,11 @@ class BoardPage implements IPageController { groupByButton: HTMLElement groupByLabel: HTMLElement - boardId: string - viewId: string + boardId?: string + viewId?: string - boardTree: BoardTree + workspaceTree: WorkspaceTree + boardTree?: BoardTree view: BoardView updateTitleTimeout: number @@ -41,28 +42,18 @@ class BoardPage implements IPageController { constructor() { const queryString = new URLSearchParams(window.location.search) - if (!queryString.has("id")) { - // No id, redirect to home - window.location.href = "/" - return - } + const boardId = queryString.get("id") + const viewId = queryString.get("v") this.layoutPage() - this.boardId = queryString.get("id") - this.viewId = queryString.get("v") + this.workspaceTree = new WorkspaceTree(this.octo) console.log(`BoardPage. boardId: ${this.boardId}`) - if (this.boardId) { - this.boardTree = new BoardTree(this.octo, this.boardId) - this.sync() - - this.boardListener.open(this.boardId, (blockId: string) => { - console.log(`octoListener.onChanged: ${blockId}`) - this.sync() - }) + if (boardId) { + this.attachToBoard(boardId, viewId) } else { - // Show error + this.sync() } document.body.addEventListener("keydown", async (e) => { @@ -111,10 +102,15 @@ class BoardPage implements IPageController { render() { const { octo, boardTree } = this - const { board, activeView } = boardTree + const { board, activeView } = boardTree || {} const mutator = new Mutator(octo) - const rootElement = Utils.getElementById("main") + const mainElement = Utils.getElementById("main") + + ReactDOM.render( + , + Utils.getElementById("header") + ) ReactDOM.render( , @@ -123,54 +119,23 @@ class BoardPage implements IPageController { if (board) { Utils.setFavicon(board.icon) - } else { - ReactDOM.render( -
Loading...
, - rootElement - ) - return + document.title = `OCTO - ${board.title} | ${activeView.title}` } - if (activeView) { - document.title = `OCTO - ${board.title} | ${activeView.title}` + ReactDOM.render( + , + mainElement + ) - switch (activeView.viewType) { - case "board": { - ReactDOM.render( - , - rootElement - ) - break - } - - case "table": { - ReactDOM.render( - , - rootElement - ) - break - } - - default: { - Utils.assertFailure(`render() Unhandled viewType: ${activeView.viewType}`) - } - } - - if (boardTree && boardTree.board && this.shownCardTree) { - ReactDOM.render( - { this.showCard(undefined) }}>, - Utils.getElementById("overlay") - ) - } else { - ReactDOM.render( -
, - Utils.getElementById("overlay") - ) - } + if (boardTree && boardTree.board && this.shownCardTree) { + ReactDOM.render( + { this.showCard(undefined) }}>, + Utils.getElementById("overlay") + ) } else { ReactDOM.render( -
Loading...
, - rootElement +
, + Utils.getElementById("overlay") ) } @@ -189,7 +154,7 @@ class BoardPage implements IPageController { boardTree={boardTree} pageX={pageX} pageY={pageY} - onClose={() => {this.showFilter(undefined)}} + onClose={() => { this.showFilter(undefined) }} > , Utils.getElementById("modal") @@ -199,22 +164,38 @@ class BoardPage implements IPageController { } } + private attachToBoard(boardId: string, viewId?: string) { + this.boardId = boardId + this.viewId = viewId + + this.boardTree = new BoardTree(this.octo, boardId) + + this.boardListener.open(boardId, (blockId: string) => { + console.log(`octoListener.onChanged: ${blockId}`) + this.sync() + }) + + this.sync() + } + async sync() { - const { boardTree } = this + const { workspaceTree, boardTree } = this - await boardTree.sync() + await workspaceTree.sync() + if (boardTree) { + await boardTree.sync() - // Default to first view - if (!this.viewId) { - this.viewId = boardTree.views[0].id + // Default to first view + if (!this.viewId) { + this.viewId = boardTree.views[0].id + } + + boardTree.setActiveView(this.viewId) + // TODO: Handle error (viewId not found) + this.viewId = boardTree.activeView.id + console.log(`sync complete... title: ${boardTree.board.title}`) } - boardTree.setActiveView(this.viewId) - // TODO: Handle error (viewId not found) - this.viewId = boardTree.activeView.id - - console.log(`sync complete... title: ${boardTree.board.title}`) - this.render() } @@ -240,6 +221,15 @@ class BoardPage implements IPageController { this.render() } + showBoard(boardId: string) { + if (this.boardTree?.board?.id === boardId) { return } + + const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + `?id=${encodeURIComponent(boardId)}` + window.history.pushState({ path: newUrl }, "", newUrl) + + this.attachToBoard(boardId) + } + showView(viewId: string) { this.viewId = viewId this.boardTree.setActiveView(this.viewId) diff --git a/src/client/boardsPage.ts b/src/client/boardsPage.ts deleted file mode 100644 index b37603446..000000000 --- a/src/client/boardsPage.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { Archiver } from "./archiver" -import { Board } from "./board" -import { Mutator } from "./mutator" -import { OctoClient } from "./octoClient" -import { UndoManager } from "./undomanager" -import { Utils } from "./utils" - -class BoardsPage { - boardsPanel: HTMLElement - - boardId: string - boards: Board[] - - octo = new OctoClient() - - constructor() { - // This is a placeholder page - - const root = Utils.getElementById("octo-tasks-app") - root.innerText = "" - - // Header - root.appendChild(Utils.htmlToElement(`
OCTO { this.addClicked() } - } - - document.body.appendChild(document.createElement("br")) - - { - const importButton = document.body.appendChild(document.createElement("div")) - importButton.className = "octo-button" - importButton.innerText = "Import archive" - importButton.onclick = async () => { - const octo = new OctoClient() - const mutator = new Mutator(octo, UndoManager.shared) - Archiver.importFullArchive(mutator, () => { - this.updateView() - }) - } - } - - { - const exportButton = document.body.appendChild(document.createElement("div")) - exportButton.className = "octo-button" - exportButton.innerText = "Export archive" - exportButton.onclick = () => { - const octo = new OctoClient() - const mutator = new Mutator(octo, UndoManager.shared) - Archiver.exportFullArchive(mutator) - } - } - - this.updateView() - } - - async getBoardData() { - const boards = this.octo.getBlocks(null, "board") - } - - async updateView() { - const { boardsPanel } = this - - boardsPanel.innerText = "" - - const boards = await this.octo.getBlocks(null, "board") - for (const board of boards) { - const p = boardsPanel.appendChild(document.createElement("p")) - const a = p.appendChild(document.createElement("a")) - a.style.padding = "5px 10px" - a.style.fontSize = "20px" - a.href = `./board?id=${encodeURIComponent(board.id)}` - - if (board.icon) { - const icon = a.appendChild(document.createElement("span")) - icon.className = "octo-icon" - icon.style.marginRight = "10px" - icon.innerText = board.icon - } - - const title = a.appendChild(document.createElement("b")) - const updatedDate = new Date(board.updateAt) - title.innerText = board.title - const details = a.appendChild(document.createElement("span")) - details.style.fontSize = "15px" - details.style.color = "#909090" - details.style.marginLeft = "10px" - details.innerText = ` ${Utils.displayDate(updatedDate)}` - } - - console.log(`updateView: ${boards.length} board(s).`) - } - - async addClicked() { - const board = new Board() - await this.octo.insertBlock(board) - await this.updateView() - } -} - -export = BoardsPage - -const _ = new BoardsPage() -console.log("boardsView") diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx new file mode 100644 index 000000000..5ce027fdc --- /dev/null +++ b/src/client/components/sidebar.tsx @@ -0,0 +1,126 @@ +import React from "react" +import { Archiver } from "../archiver" +import { Board } from "../board" +import { BoardTree } from "../boardTree" +import { Menu, MenuOption } from "../menu" +import { Mutator } from "../mutator" +import { IPageController } from "../octoTypes" +import { WorkspaceTree } from "../workspaceTree" + +type Props = { + mutator: Mutator + pageController: IPageController + workspaceTree: WorkspaceTree, + boardTree?: BoardTree +} + +class Sidebar extends React.Component { + + render() { + const { workspaceTree } = this.props + const { boards } = workspaceTree + + return ( +
+ { + boards.map(board => { + const displayTitle = board.title || "(Untitled Board)" + return ( +
+
{ this.boardClicked(board) }}>{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
+
+
{ this.showOptions(e, board) }}>
+
+ ) + }) + } + +
+ +
{ this.addBoardClicked() }}>+ Add Board
+ +
+ +
{ this.settingsClicked(e) }}>Settings
+
+ ) + } + + private showOptions(e: React.MouseEvent, board: Board) { + const { mutator, pageController, workspaceTree } = this.props + const { boards } = workspaceTree + + const options: MenuOption[] = [] + + const nextBoardId = boards.length > 1 ? boards.find(o => o.id !== board.id).id : undefined + if (nextBoardId) { + options.push({ id: "delete", name: "Delete board" }) + } + + Menu.shared.options = options + Menu.shared.onMenuClicked = (optionId: string, type?: string) => { + switch (optionId) { + case "delete": { + mutator.deleteBlock( + board, + "delete block", + async () => { pageController.showBoard(nextBoardId!) }, + async () => { pageController.showBoard(board.id) }, + ) + break + } + } + } + Menu.shared.showAtElement(e.target as HTMLElement) + } + + private settingsClicked(e: React.MouseEvent) { + const { mutator } = this.props + + Menu.shared.options = [ + { id: "import", name: "Import Archive" }, + { id: "export", name: "Export Archive" }, + ] + Menu.shared.onMenuClicked = (optionId: string, type?: string) => { + switch (optionId) { + case "import": { + Archiver.importFullArchive(mutator, () => { + this.forceUpdate() + }) + break + } + case "export": { + Archiver.exportFullArchive(mutator) + break + } + } + } + + // HACKHACK: Show menu above (TODO: refactor menu code to do this automatically) + const element = e.target as HTMLElement + const bodyRect = document.body.getBoundingClientRect() + const rect = element.getBoundingClientRect() + Menu.shared.showAt(rect.left - bodyRect.left + 20, rect.top - bodyRect.top - 30 * Menu.shared.options.length) + } + + private boardClicked(board: Board) { + const { pageController } = this.props + pageController.showBoard(board.id) + } + + async addBoardClicked() { + const { mutator, boardTree, pageController } = this.props + + const oldBoardId = boardTree?.board?.id + const board = new Board() + await mutator.insertBlock( + board, + "add board", + async () => { pageController.showBoard(board.id) }, + async () => { if (oldBoardId) { pageController.showBoard(oldBoardId) } }) + + await mutator.insertBlock(board) + } +} + +export { Sidebar } diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx index 795ba6e39..4179aea1e 100644 --- a/src/client/components/tableComponent.tsx +++ b/src/client/components/tableComponent.tsx @@ -111,7 +111,7 @@ class TableComponent extends React.Component { {/* Headers */}
-
+
{ {/* Name / title */} -
{ openButonRef.current.style.display = null }} onMouseLeave={() => { openButonRef.current.style.display = "none" }}> +
{ openButonRef.current.style.display = null }} onMouseLeave={() => { openButonRef.current.style.display = "none" }}>
{card.icon}
{ + render() { + const { mutator, boardTree, workspaceTree, pageController } = this.props + + const element = +
+ + {this.mainComponent()} +
+ + return element + } + + private mainComponent() { + const { mutator, boardTree, pageController } = this.props + const { activeView } = boardTree || {} + + if (!activeView) { + return
+ } + + switch (activeView?.viewType) { + case "board": { + return + } + + case "table": { + return + } + + default: { + Utils.assertFailure(`render() Unhandled viewType: ${activeView.viewType}`) + return
+ } + } + + } +} + +export { WorkspaceComponent } diff --git a/src/client/mutator.ts b/src/client/mutator.ts index 2cf8e10a7..b88099c07 100644 --- a/src/client/mutator.ts +++ b/src/client/mutator.ts @@ -50,7 +50,7 @@ class Mutator { ) } - async deleteBlock(block: IBlock, description?: string) { + async deleteBlock(block: IBlock, description?: string, beforeRedo?: () => Promise, afterUndo?: () => Promise) { const { octo, undoManager } = this if (!description) { @@ -59,10 +59,12 @@ class Mutator { await undoManager.perform( async () => { + await beforeRedo?.() await octo.deleteBlock(block.id) }, async () => { await octo.insertBlock(block) + await afterUndo?.() }, description ) diff --git a/src/client/octoTypes.ts b/src/client/octoTypes.ts index 026046329..62672528c 100644 --- a/src/client/octoTypes.ts +++ b/src/client/octoTypes.ts @@ -11,10 +11,10 @@ interface IBlock { type: string title?: string - url?: string + url?: string // TODO: Move to properties (_url) icon?: string order: number - properties: IProperty[] + properties: IProperty[] // TODO: Change to map createAt: number updateAt: number @@ -24,6 +24,7 @@ interface IBlock { // These are methods exposed by the top-level page to components interface IPageController { showCard(card: IBlock): Promise + showBoard(boardId: string): void showView(viewId: string): void showFilter(anchorElement?: HTMLElement): void setSearchText(text?: string): void diff --git a/src/client/workspaceTree.ts b/src/client/workspaceTree.ts new file mode 100644 index 000000000..c86fdb6d0 --- /dev/null +++ b/src/client/workspaceTree.ts @@ -0,0 +1,23 @@ +import { Board } from "./board" +import { OctoClient } from "./octoClient" +import { IBlock } from "./octoTypes" + +class WorkspaceTree { + boards: Board[] = [] + + constructor( + private octo: OctoClient) { + } + + async sync() { + const blocks = await this.octo.getBlocks(undefined, "board") + this.rebuild(blocks) + } + + private rebuild(blocks: IBlock[]) { + const boardBlocks = blocks.filter(block => block.type === "board") + this.boards = boardBlocks.map(o => new Board(o)) + } +} + +export { WorkspaceTree } diff --git a/src/static/main.css b/src/static/main.css index 9dc77aa1c..512da8390 100644 --- a/src/static/main.css +++ b/src/static/main.css @@ -5,6 +5,10 @@ } html, body { + display: flex; + flex-direction: column; + + width: 100%; height: 100%; color: rgb(55, 53, 47); } @@ -60,19 +64,88 @@ hr { display: inline-block; } -/* OCTO */ +/* App frame */ + +#octo-tasks-app { + flex: 1 1 auto; + display: flex; + flex-direction: column; + overflow: auto; +} + +#octo-tasks-app > #main { + flex: 1 1 auto; + display: flex; + flex-direction: column; + overflow: auto; +} + +/* Sidebar */ + +.octo-workspace { + flex: 1 1 auto; + display: flex; + flex-direction: row; + overflow: auto; +} + +.octo-sidebar { + display: flex; + flex-direction: column; + + min-height: 100%; + background-color: rgb(247, 246, 243); + min-width: 230px; + padding: 20px 0; +} + +.octo-sidebar-item { + display: flex; + flex-direction: row; + + font-weight: 500; + padding: 3px 20px; +} + +.octo-sidebar-title { + cursor: pointer; +} + +.octo-sidebar-item:hover { + background-color: rgba(0, 0, 0, 0.05); +} + +.octo-sidebar-item .octo-button:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +/* Main app */ + +.octo-app { + flex: 1 1 auto; + display: flex; + flex-direction: column; + overflow: auto; +} .octo-frame { + flex: 1 1 auto; + display: flex; + flex-direction: column; + overflow: scroll; + padding: 10px 95px 50px 95px; - min-width: 1000px; } .octo-board { + flex: 0 1 auto; + display: flex; flex-direction: column; } .octo-controls { + flex: 0 0 auto; display: flex; flex-direction: row; @@ -115,12 +188,14 @@ hr { display: flex; flex-direction: row; padding: 0 10px; + flex: 0 1 auto; } .octo-board-column { + flex: 0 0 auto; + display: flex; flex-direction: column; - flex-shrink: 0; width: 260px; margin-right: 15px; @@ -136,6 +211,7 @@ hr { } .octo-board-card { + flex: 0 0 auto; position: relative; display: flex; flex-direction: column; @@ -370,6 +446,7 @@ hr { } .octo-icontitle { + flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; @@ -382,6 +459,7 @@ hr { } .octo-board-card > .octo-icontitle { + flex: 1 1 auto; font-weight: 500; } @@ -548,6 +626,7 @@ hr { } .octo-table-cell { + flex: 0 0 auto; display: flex; flex-direction: row; @@ -556,7 +635,7 @@ hr { box-sizing: border-box; padding: 5px 8px 6px 8px; - width: 240px; + width: 150px; min-height: 32px; font-size: 14px; @@ -566,6 +645,10 @@ hr { position: relative; } +.octo-table-cell.title-cell { + width: 280px; +} + .octo-table-cell .octo-propertyvalue { line-height: 17px; } diff --git a/webpack.common.js b/webpack.common.js index a309b070a..ccf4d613f 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,9 +1,9 @@ -const webpack = require("webpack"); -const path = require("path"); -const CopyPlugin = require("copy-webpack-plugin"); -var HtmlWebpackPlugin = require('html-webpack-plugin'); +const webpack = require("webpack") +const path = require("path") +const CopyPlugin = require("copy-webpack-plugin") +var HtmlWebpackPlugin = require('html-webpack-plugin') -const outpath = path.resolve(__dirname, "pack"); +const outpath = path.resolve(__dirname, "pack") function makeCommonConfig() { const commonConfig = { @@ -47,20 +47,6 @@ function makeCommonConfig() { { from: path.resolve(__dirname, "node_modules/easymde/dist/easymde.min.css"), to: "static" }, ], }), - new HtmlWebpackPlugin({ - inject: true, - title: "OCTO", - chunks: [], - template: "html-templates/index.ejs", - filename: 'index.html' - }), - new HtmlWebpackPlugin({ - inject: true, - title: "OCTO - Boards", - chunks: ["boardsPage"], - template: "html-templates/page.ejs", - filename: 'boards.html' - }), new HtmlWebpackPlugin({ inject: true, title: "OCTO", @@ -70,16 +56,15 @@ function makeCommonConfig() { }), ], entry: { - boardsPage: "./src/client/boardsPage.ts", boardPage: "./src/client/boardPage.tsx" }, output: { filename: "[name].js", path: outpath } - }; + } - return commonConfig; + return commonConfig } -module.exports = makeCommonConfig; +module.exports = makeCommonConfig