Initial implementation of sidebar.
This commit is contained in:
Chen-I Lim
parent
e227d384d2
commit
a84ff6901a
14 changed files with 417 additions and 257 deletions
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
|
||||
<link rel="stylesheet" href="/main.css">
|
||||
<link rel="stylesheet" href="/images.css">
|
||||
<link rel="stylesheet" href="/colors.css">
|
||||
|
||||
<script>
|
||||
window.location.href = "/boards"
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="container">
|
||||
<header id="header">
|
||||
<a href="/">OCTO</a>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<p>
|
||||
<a href="boards">All Boards</a>
|
||||
</p>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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
|
||||
(
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<PageHeader />,
|
||||
Utils.getElementById("header")
|
||||
)
|
||||
|
||||
ReactDOM.render(
|
||||
<PageHeader />,
|
||||
|
|
@ -123,54 +119,23 @@ class BoardPage implements IPageController {
|
|||
|
||||
if (board) {
|
||||
Utils.setFavicon(board.icon)
|
||||
} else {
|
||||
ReactDOM.render(
|
||||
<div className="page-loading">Loading...</div>,
|
||||
rootElement
|
||||
)
|
||||
return
|
||||
document.title = `OCTO - ${board.title} | ${activeView.title}`
|
||||
}
|
||||
|
||||
if (activeView) {
|
||||
document.title = `OCTO - ${board.title} | ${activeView.title}`
|
||||
ReactDOM.render(
|
||||
<WorkspaceComponent mutator={mutator} workspaceTree={this.workspaceTree} boardTree={this.boardTree} pageController={this} />,
|
||||
mainElement
|
||||
)
|
||||
|
||||
switch (activeView.viewType) {
|
||||
case "board": {
|
||||
ReactDOM.render(
|
||||
<BoardComponent mutator={mutator} boardTree={this.boardTree} pageController={this} />,
|
||||
rootElement
|
||||
)
|
||||
break
|
||||
}
|
||||
|
||||
case "table": {
|
||||
ReactDOM.render(
|
||||
<TableComponent mutator={mutator} boardTree={this.boardTree} pageController={this} />,
|
||||
rootElement
|
||||
)
|
||||
break
|
||||
}
|
||||
|
||||
default: {
|
||||
Utils.assertFailure(`render() Unhandled viewType: ${activeView.viewType}`)
|
||||
}
|
||||
}
|
||||
|
||||
if (boardTree && boardTree.board && this.shownCardTree) {
|
||||
ReactDOM.render(
|
||||
<CardDialog mutator={mutator} boardTree={boardTree} cardTree={this.shownCardTree} onClose={() => { this.showCard(undefined) }}></CardDialog>,
|
||||
Utils.getElementById("overlay")
|
||||
)
|
||||
} else {
|
||||
ReactDOM.render(
|
||||
<div />,
|
||||
Utils.getElementById("overlay")
|
||||
)
|
||||
}
|
||||
if (boardTree && boardTree.board && this.shownCardTree) {
|
||||
ReactDOM.render(
|
||||
<CardDialog mutator={mutator} boardTree={boardTree} cardTree={this.shownCardTree} onClose={() => { this.showCard(undefined) }}></CardDialog>,
|
||||
Utils.getElementById("overlay")
|
||||
)
|
||||
} else {
|
||||
ReactDOM.render(
|
||||
<div>Loading...</div>,
|
||||
rootElement
|
||||
<div />,
|
||||
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) }}
|
||||
>
|
||||
</FilterComponent>,
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -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(`<div class="page-header"><a href="/">OCTO</a></div`))
|
||||
|
||||
const mainPanel = root.appendChild(document.createElement("div"))
|
||||
|
||||
this.boardsPanel = mainPanel.appendChild(document.createElement("div"))
|
||||
|
||||
{
|
||||
const addButton = document.body.appendChild(document.createElement("div"))
|
||||
addButton.className = "octo-button"
|
||||
addButton.innerText = "+ Add Board"
|
||||
addButton.onclick = () => { 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")
|
||||
126
src/client/components/sidebar.tsx
Normal file
126
src/client/components/sidebar.tsx
Normal file
|
|
@ -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<Props> {
|
||||
|
||||
render() {
|
||||
const { workspaceTree } = this.props
|
||||
const { boards } = workspaceTree
|
||||
|
||||
return (
|
||||
<div className="octo-sidebar">
|
||||
{
|
||||
boards.map(board => {
|
||||
const displayTitle = board.title || "(Untitled Board)"
|
||||
return (
|
||||
<div key={board.id} className="octo-sidebar-item octo-hover-container">
|
||||
<div className="octo-sidebar-title" onClick={() => { this.boardClicked(board) }}>{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}</div>
|
||||
<div className="octo-spacer"></div>
|
||||
<div className="octo-button square octo-hover-item" onClick={(e) => { this.showOptions(e, board) }}><div className="imageOptions" /></div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
<br />
|
||||
|
||||
<div className="octo-button" onClick={() => { this.addBoardClicked() }}>+ Add Board</div>
|
||||
|
||||
<div className="octo-spacer"></div>
|
||||
|
||||
<div className="octo-button" onClick={(e) => { this.settingsClicked(e) }}>Settings</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 }
|
||||
|
|
@ -111,7 +111,7 @@ class TableComponent extends React.Component<Props, State> {
|
|||
{/* Headers */}
|
||||
|
||||
<div className="octo-table-header" id="mainBoardHeader">
|
||||
<div className="octo-table-cell" id="mainBoardHeader">
|
||||
<div className="octo-table-cell title-cell" id="mainBoardHeader">
|
||||
<div
|
||||
className="octo-label"
|
||||
style={{ cursor: "pointer" }}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ class TableRow extends React.Component<Props, State> {
|
|||
|
||||
{/* Name / title */}
|
||||
|
||||
<div className="octo-table-cell" id="mainBoardHeader" onMouseOver={() => { openButonRef.current.style.display = null }} onMouseLeave={() => { openButonRef.current.style.display = "none" }}>
|
||||
<div className="octo-table-cell title-cell" id="mainBoardHeader" onMouseOver={() => { openButonRef.current.style.display = null }} onMouseLeave={() => { openButonRef.current.style.display = "none" }}>
|
||||
<div className="octo-icontitle">
|
||||
<div className="octo-icon">{card.icon}</div>
|
||||
<Editable
|
||||
|
|
|
|||
57
src/client/components/workspaceComponent.tsx
Normal file
57
src/client/components/workspaceComponent.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import React from "react"
|
||||
import { BoardTree } from "../boardTree"
|
||||
import { Mutator } from "../mutator"
|
||||
import { IPageController } from "../octoTypes"
|
||||
import { Utils } from "../utils"
|
||||
import { WorkspaceTree } from "../workspaceTree"
|
||||
import { BoardComponent } from "./boardComponent"
|
||||
import { Sidebar } from "./sidebar"
|
||||
import { TableComponent } from "./tableComponent"
|
||||
|
||||
type Props = {
|
||||
mutator: Mutator,
|
||||
workspaceTree: WorkspaceTree
|
||||
boardTree?: BoardTree
|
||||
pageController: IPageController
|
||||
}
|
||||
|
||||
class WorkspaceComponent extends React.Component<Props> {
|
||||
render() {
|
||||
const { mutator, boardTree, workspaceTree, pageController } = this.props
|
||||
|
||||
const element =
|
||||
<div className="octo-workspace">
|
||||
<Sidebar mutator={mutator} pageController={pageController} workspaceTree={workspaceTree} boardTree={boardTree}></Sidebar>
|
||||
{this.mainComponent()}
|
||||
</div>
|
||||
|
||||
return element
|
||||
}
|
||||
|
||||
private mainComponent() {
|
||||
const { mutator, boardTree, pageController } = this.props
|
||||
const { activeView } = boardTree || {}
|
||||
|
||||
if (!activeView) {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
switch (activeView?.viewType) {
|
||||
case "board": {
|
||||
return <BoardComponent mutator={mutator} boardTree={boardTree} pageController={pageController} />
|
||||
}
|
||||
|
||||
case "table": {
|
||||
return <TableComponent mutator={mutator} boardTree={boardTree} pageController={pageController} />
|
||||
}
|
||||
|
||||
default: {
|
||||
Utils.assertFailure(`render() Unhandled viewType: ${activeView.viewType}`)
|
||||
return <div></div>
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export { WorkspaceComponent }
|
||||
|
|
@ -50,7 +50,7 @@ class Mutator {
|
|||
)
|
||||
}
|
||||
|
||||
async deleteBlock(block: IBlock, description?: string) {
|
||||
async deleteBlock(block: IBlock, description?: string, beforeRedo?: () => Promise<void>, afterUndo?: () => Promise<void>) {
|
||||
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
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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<void>
|
||||
showBoard(boardId: string): void
|
||||
showView(viewId: string): void
|
||||
showFilter(anchorElement?: HTMLElement): void
|
||||
setSearchText(text?: string): void
|
||||
|
|
|
|||
23
src/client/workspaceTree.ts
Normal file
23
src/client/workspaceTree.ts
Normal file
|
|
@ -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 }
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue