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

Merge remote-tracking branch 'origin/main' into remove-show-card

Browse source
This commit is contained in:
Jesús Espino 2020-10-15 00:49:15 +02:00
commit 63a8aa6983
14 changed files with 11372 additions and 11156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21766
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -28,6 +28,7 @@
"@types/marked": "^1.1.0",
"@types/react": "^16.9.49",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.6",
"copy-webpack-plugin": "^6.0.3",
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",

92
server/main/main.go
View file

@ -19,8 +19,9 @@ import (
"github.com/gorilla/mux"
)
var wsServer *WSServer
var config *Configuration
var wsServer *WSServer
var store *SQLStore
// ----------------------------------------------------------------------------------------------------
// HTTP handlers
@ -56,22 +57,22 @@ func handleGetBlocks(w http.ResponseWriter, r *http.Request) {
var blocks []string
if len(blockType) > 0 && len(parentID) > 0 {
blocks = getBlocksWithParentAndType(parentID, blockType)
blocks = store.getBlocksWithParentAndType(parentID, blockType)
} else if len(blockType) > 0 {
blocks = getBlocksWithType(blockType)
blocks = store.getBlocksWithType(blockType)
} else {
blocks = getBlocksWithParent(parentID)
blocks = store.getBlocksWithParent(parentID)
}
log.Printf("GetBlocks parentID: %s, type: %s, %d result(s)", parentID, blockType, len(blocks))
response := `[` + strings.Join(blocks[:], ",") + `]`
jsonResponse(w, 200, response)
jsonResponse(w, http.StatusOK, response)
}
func handlePostBlocks(w http.ResponseWriter, r *http.Request) {
requestBody, err := ioutil.ReadAll(r.Body)
if err != nil {
errorResponse(w, 500, `{}`)
errorResponse(w, http.StatusInternalServerError, `{}`)
return
}
@ -79,41 +80,33 @@ func handlePostBlocks(w http.ResponseWriter, r *http.Request) {
defer func() {
if r := recover(); r != nil {
log.Printf(`ERROR: %v`, r)
errorResponse(w, 500, `{}`)
errorResponse(w, http.StatusInternalServerError, `{}`)
return
}
}()
var blockMaps []map[string]interface{}
err = json.Unmarshal([]byte(requestBody), &blockMaps)
var blocks []Block
err = json.Unmarshal([]byte(requestBody), &blocks)
if err != nil {
errorResponse(w, 500, ``)
errorResponse(w, http.StatusInternalServerError, ``)
return
}
var blockIDsToNotify = []string{}
uniqueBlockIDs := make(map[string]bool)
for _, blockMap := range blockMaps {
jsonBytes, err := json.Marshal(blockMap)
if err != nil {
errorResponse(w, 500, `{}`)
return
}
block := blockFromMap(blockMap)
for _, block := range blocks {
// Error checking
if len(block.Type) < 1 {
errorResponse(w, 500, fmt.Sprintf(`{"description": "missing type", "id": "%s"}`, block.ID))
errorResponse(w, http.StatusInternalServerError, fmt.Sprintf(`{"description": "missing type", "id": "%s"}`, block.ID))
return
}
if block.CreateAt < 1 {
errorResponse(w, 500, fmt.Sprintf(`{"description": "invalid createAt", "id": "%s"}`, block.ID))
errorResponse(w, http.StatusInternalServerError, fmt.Sprintf(`{"description": "invalid createAt", "id": "%s"}`, block.ID))
return
}
if block.UpdateAt < 1 {
errorResponse(w, 500, fmt.Sprintf(`{"description": "invalid updateAt", "id": "%s"}`, block.ID))
errorResponse(w, http.StatusInternalServerError, fmt.Sprintf(`{"description": "invalid updateAt", "id": "%s"}`, block.ID))
return
}
@ -124,13 +117,19 @@ func handlePostBlocks(w http.ResponseWriter, r *http.Request) {
blockIDsToNotify = append(blockIDsToNotify, block.ParentID)
}
insertBlock(block, string(jsonBytes))
jsonBytes, err := json.Marshal(block)
if err != nil {
errorResponse(w, http.StatusInternalServerError, `{}`)
return
}
store.insertBlock(block, string(jsonBytes))
}
wsServer.broadcastBlockChangeToWebsocketClients(blockIDsToNotify)
log.Printf("POST Blocks %d block(s)", len(blockMaps))
jsonResponse(w, 200, "{}")
log.Printf("POST Blocks %d block(s)", len(blocks))
jsonResponse(w, http.StatusOK, "{}")
}
func handleDeleteBlock(w http.ResponseWriter, r *http.Request) {
@ -139,43 +138,43 @@ func handleDeleteBlock(w http.ResponseWriter, r *http.Request) {
var blockIDsToNotify = []string{blockID}
parentID := getParentID(blockID)
parentID := store.getParentID(blockID)
if len(parentID) > 0 {
blockIDsToNotify = append(blockIDsToNotify, parentID)
}
deleteBlock(blockID)
store.deleteBlock(blockID)
wsServer.broadcastBlockChangeToWebsocketClients(blockIDsToNotify)
log.Printf("DELETE Block %s", blockID)
jsonResponse(w, 200, "{}")
jsonResponse(w, http.StatusOK, "{}")
}
func handleGetSubTree(w http.ResponseWriter, r *http.Request) {
vars := mux.Vars(r)
blockID := vars["blockID"]
blocks := getSubTree(blockID)
blocks := store.getSubTree(blockID)
log.Printf("GetSubTree blockID: %s, %d result(s)", blockID, len(blocks))
response := `[` + strings.Join(blocks[:], ",") + `]`
jsonResponse(w, 200, response)
jsonResponse(w, http.StatusOK, response)
}
func handleExport(w http.ResponseWriter, r *http.Request) {
blocks := getAllBlocks()
blocks := store.getAllBlocks()
log.Printf("EXPORT Blocks, %d result(s)", len(blocks))
response := `[` + strings.Join(blocks[:], ",") + `]`
jsonResponse(w, 200, response)
jsonResponse(w, http.StatusOK, response)
}
func handleImport(w http.ResponseWriter, r *http.Request) {
requestBody, err := ioutil.ReadAll(r.Body)
if err != nil {
errorResponse(w, 500, `{}`)
errorResponse(w, http.StatusInternalServerError, `{}`)
return
}
@ -183,31 +182,30 @@ func handleImport(w http.ResponseWriter, r *http.Request) {
defer func() {
if r := recover(); r != nil {
log.Printf(`ERROR: %v`, r)
errorResponse(w, 500, `{}`)
errorResponse(w, http.StatusInternalServerError, `{}`)
return
}
}()
var blockMaps []map[string]interface{}
err = json.Unmarshal([]byte(requestBody), &blockMaps)
var blocks []Block
err = json.Unmarshal([]byte(requestBody), &blocks)
if err != nil {
errorResponse(w, 500, ``)
errorResponse(w, http.StatusInternalServerError, ``)
return
}
for _, blockMap := range blockMaps {
jsonBytes, err := json.Marshal(blockMap)
for _, block := range blocks {
jsonBytes, err := json.Marshal(block)
if err != nil {
errorResponse(w, 500, `{}`)
errorResponse(w, http.StatusInternalServerError, `{}`)
return
}
block := blockFromMap(blockMap)
insertBlock(block, string(jsonBytes))
store.insertBlock(block, string(jsonBytes))
}
log.Printf("IMPORT Blocks %d block(s)", len(blockMaps))
jsonResponse(w, 200, "{}")
log.Printf("IMPORT Blocks %d block(s)", len(blocks))
jsonResponse(w, http.StatusOK, "{}")
}
// File upload
@ -378,7 +376,11 @@ func main() {
http.Handle("/", r)
connectDatabase(config.DBType, config.DBConfigString)
store, err = NewSQLStore(config.DBType, config.DBConfigString)
if err != nil {
log.Fatal("Unable to start the database", err)
panic(err)
}
// Ctrl+C handling
handler := make(chan os.Signal, 1)

110
server/main/octoDatabase.go
View file

@ -10,42 +10,61 @@ import (
_ "github.com/mattn/go-sqlite3"
)
var db *sql.DB
// SQLStore is a SQL database
type SQLStore struct {
db *sql.DB
dbType string
}
func connectDatabase(dbType string, connectionString string) {
// NewSQLStore creates a new SQLStore
func NewSQLStore(dbType, connectionString string) (*SQLStore, error) {
log.Println("connectDatabase")
var err error
db, err = sql.Open(dbType, connectionString)
db, err := sql.Open(dbType, connectionString)
if err != nil {
log.Fatal("connectDatabase: ", err)
panic(err)
return nil, err
}
err = db.Ping()
if err != nil {
log.Println(`Database Ping failed`)
panic(err)
return nil, err
}
createTablesIfNotExists(dbType)
store := &SQLStore{
db: db,
dbType: dbType,
}
err = store.createTablesIfNotExists()
if err != nil {
log.Println(`Table creation failed`)
return nil, err
}
return store, nil
}
// Block is the basic data unit
type Block struct {
ID string `json:"id"`
ParentID string `json:"parentId"`
Type string `json:"type"`
CreateAt int64 `json:"createAt"`
UpdateAt int64 `json:"updateAt"`
DeleteAt int64 `json:"deleteAt"`
ID string `json:"id"`
ParentID string `json:"parentId"`
Schema int64 `json:"schema"`
Type string `json:"type"`
Title string `json:"title"`
Properties map[string]interface{} `json:"properties"`
Fields map[string]interface{} `json:"fields"`
CreateAt int64 `json:"createAt"`
UpdateAt int64 `json:"updateAt"`
DeleteAt int64 `json:"deleteAt"`
}
func createTablesIfNotExists(dbType string) {
func (s *SQLStore) createTablesIfNotExists() error {
// TODO: Add update_by with the user's ID
// TODO: Consolidate insert_at and update_at, decide if the server of DB should set it
var query string
if dbType == "sqlite3" {
if s.dbType == "sqlite3" {
query = `CREATE TABLE IF NOT EXISTS blocks (
id VARCHAR(36),
insert_at DATETIME NOT NULL DEFAULT current_timestamp,
@ -71,39 +90,16 @@ func createTablesIfNotExists(dbType string) {
);`
}
_, err := db.Exec(query)
_, err := s.db.Exec(query)
if err != nil {
log.Fatal("createTablesIfNotExists: ", err)
panic(err)
return err
}
log.Printf("createTablesIfNotExists(%s)", dbType)
log.Printf("createTablesIfNotExists(%s)", s.dbType)
return nil
}
func blockFromMap(m map[string]interface{}) Block {
var b Block
b.ID = m["id"].(string)
// Parent ID can be nil (for now)
if m["parentId"] != nil {
b.ParentID = m["parentId"].(string)
}
// Allow nil type for imports
if m["type"] != nil {
b.Type = m["type"].(string)
}
if m["createAt"] != nil {
b.CreateAt = int64(m["createAt"].(float64))
}
if m["updateAt"] != nil {
b.UpdateAt = int64(m["updateAt"].(float64))
}
if m["deleteAt"] != nil {
b.DeleteAt = int64(m["deleteAt"].(float64))
}
return b
}
func getBlocksWithParentAndType(parentID string, blockType string) []string {
func (s *SQLStore) getBlocksWithParentAndType(parentID string, blockType string) []string {
query := `WITH latest AS
(
SELECT * FROM
@ -120,7 +116,7 @@ func getBlocksWithParentAndType(parentID string, blockType string) []string {
FROM latest
WHERE delete_at = 0 and parent_id = $1 and type = $2`
rows, err := db.Query(query, parentID, blockType)
rows, err := s.db.Query(query, parentID, blockType)
if err != nil {
log.Printf(`getBlocksWithParentAndType ERROR: %v`, err)
panic(err)
@ -129,7 +125,7 @@ func getBlocksWithParentAndType(parentID string, blockType string) []string {
return blocksFromRows(rows)
}
func getBlocksWithParent(parentID string) []string {
func (s *SQLStore) getBlocksWithParent(parentID string) []string {
query := `WITH latest AS
(
SELECT * FROM
@ -146,7 +142,7 @@ func getBlocksWithParent(parentID string) []string {
FROM latest
WHERE delete_at = 0 and parent_id = $1`
rows, err := db.Query(query, parentID)
rows, err := s.db.Query(query, parentID)
if err != nil {
log.Printf(`getBlocksWithParent ERROR: %v`, err)
panic(err)
@ -155,7 +151,7 @@ func getBlocksWithParent(parentID string) []string {
return blocksFromRows(rows)
}
func getBlocksWithType(blockType string) []string {
func (s *SQLStore) getBlocksWithType(blockType string) []string {
query := `WITH latest AS
(
SELECT * FROM
@ -172,7 +168,7 @@ func getBlocksWithType(blockType string) []string {
FROM latest
WHERE delete_at = 0 and type = $1`
rows, err := db.Query(query, blockType)
rows, err := s.db.Query(query, blockType)
if err != nil {
log.Printf(`getBlocksWithParentAndType ERROR: %v`, err)
panic(err)
@ -181,7 +177,7 @@ func getBlocksWithType(blockType string) []string {
return blocksFromRows(rows)
}
func getSubTree(blockID string) []string {
func (s *SQLStore) getSubTree(blockID string) []string {
query := `WITH latest AS
(
SELECT * FROM
@ -200,7 +196,7 @@ func getSubTree(blockID string) []string {
AND (id = $1
OR parent_id = $1)`
rows, err := db.Query(query, blockID)
rows, err := s.db.Query(query, blockID)
if err != nil {
log.Printf(`getSubTree ERROR: %v`, err)
panic(err)
@ -209,7 +205,7 @@ func getSubTree(blockID string) []string {
return blocksFromRows(rows)
}
func getAllBlocks() []string {
func (s *SQLStore) getAllBlocks() []string {
query := `WITH latest AS
(
SELECT * FROM
@ -226,7 +222,7 @@ func getAllBlocks() []string {
FROM latest
WHERE delete_at = 0`
rows, err := db.Query(query)
rows, err := s.db.Query(query)
if err != nil {
log.Printf(`getAllBlocks ERROR: %v`, err)
panic(err)
@ -255,7 +251,7 @@ func blocksFromRows(rows *sql.Rows) []string {
return results
}
func getParentID(blockID string) string {
func (s *SQLStore) getParentID(blockID string) string {
statement :=
`WITH latest AS
(
@ -274,7 +270,7 @@ func getParentID(blockID string) string {
WHERE delete_at = 0
AND id = $1`
row := db.QueryRow(statement, blockID)
row := s.db.QueryRow(statement, blockID)
var parentID string
err := row.Scan(&parentID)
@ -285,19 +281,19 @@ func getParentID(blockID string) string {
return parentID
}
func insertBlock(block Block, json string) {
func (s *SQLStore) insertBlock(block Block, json string) {
statement := `INSERT INTO blocks(id, parent_id, type, json, create_at, update_at, delete_at) VALUES($1, $2, $3, $4, $5, $6, $7)`
_, err := db.Exec(statement, block.ID, block.ParentID, block.Type, json, block.CreateAt, block.UpdateAt, block.DeleteAt)
_, err := s.db.Exec(statement, block.ID, block.ParentID, block.Type, json, block.CreateAt, block.UpdateAt, block.DeleteAt)
if err != nil {
panic(err)
}
}
func deleteBlock(blockID string) {
func (s *SQLStore) deleteBlock(blockID string) {
now := time.Now().Unix()
json := fmt.Sprintf(`{"id":"%s","updateAt":%d,"deleteAt":%d}`, blockID, now, now)
statement := `INSERT INTO blocks(id, json, update_at, delete_at) VALUES($1, $2, $3, $4)`
_, err := db.Exec(statement, blockID, json, now, now)
_, err := s.db.Exec(statement, blockID, json, now, now)
if err != nil {
panic(err)
}

25
src/client/block.ts
View file

@ -3,6 +3,7 @@ import { Utils } from "./utils"
class Block implements IBlock {
id: string = Utils.createGuid()
schema: number
parentId: string
type: string
title: string
@ -10,6 +11,7 @@ class Block implements IBlock {
url?: string
order: number
properties: Record<string, string> = {}
fields: Record<string, any> = {}
createAt: number = Date.now()
updateAt: number = 0
deleteAt: number = 0
@ -31,26 +33,35 @@ class Block implements IBlock {
const now = Date.now()
this.id = block.id || Utils.createGuid()
this.schema = 1
this.parentId = block.parentId
this.type = block.type
this.fields = block.fields ? { ...block.fields } : {}
this.title = block.title
this.icon = block.icon
this.url = block.url
this.order = block.order
this.createAt = block.createAt || now
this.updateAt = block.updateAt || now
this.deleteAt = block.deleteAt || 0
if (Array.isArray(block.properties)) {
// HACKHACK: Port from old schema
this.properties = {}
for (const property of block.properties) {
if (property.id) {
this.properties[property.id] = property.value
if (block.schema !== 1) {
if (Array.isArray(block.properties)) {
// HACKHACK: Port from old schema
this.properties = {}
for (const property of block.properties) {
if (property.id) {
this.properties[property.id] = property.value
}
}
} else {
this.properties = { ...block.properties || {} }
}
} else {
this.properties = { ...block.properties || {} }
this.properties = { ...block.properties } // Shallow copy here. Derived classes must make deep copies of their known properties in their constructors.
}
}
}

23
src/client/board.ts
View file

@ -16,24 +16,37 @@ interface IPropertyTemplate {
}
class Board extends Block {
cardProperties: IPropertyTemplate[] = []
get cardProperties(): IPropertyTemplate[] { return this.fields.cardProperties as IPropertyTemplate[] }
set cardProperties(value: IPropertyTemplate[]) { this.fields.cardProperties = value }
constructor(block: any = {}) {
super(block)
this.type = "board"
if (block.cardProperties) {
// Deep clone of properties and their options
this.cardProperties = block.cardProperties.map((o: IPropertyTemplate) => {
if (block.fields?.cardProperties) {
// Deep clone of card properties and their options
this.cardProperties = block.fields?.cardProperties.map((o: IPropertyTemplate) => {
return {
id: o.id,
name: o.name,
type: o.type,
options: o.options ? o.options.map(option => ({...option})): []
options: o.options ? o.options.map(option => ({ ...option })) : []
}
})
} else {
this.cardProperties = []
}
if (block.schema !== 1) {
this.cardProperties = block.cardProperties?.map((o: IPropertyTemplate) => {
return {
id: o.id,
name: o.name,
type: o.type,
options: o.options ? o.options.map(option => ({ ...option })) : []
}
}) || []
}
}
}

39
src/client/boardView.ts
View file

@ -5,21 +5,40 @@ type IViewType = "board" | "table" | "calendar" | "list" | "gallery"
type ISortOption = { propertyId: "__name" | string, reversed: boolean }
class BoardView extends Block {
viewType: IViewType
groupById?: string
sortOptions: ISortOption[]
visiblePropertyIds: string[]
filter?: FilterGroup
get viewType(): IViewType { return this.fields.viewType }
set viewType(value: IViewType) { this.fields.viewType = value }
get groupById(): string | undefined { return this.fields.groupById }
set groupById(value: string | undefined) { this.fields.groupById = value }
get sortOptions(): ISortOption[] { return this.fields.sortOptions }
set sortOptions(value: ISortOption[]) { this.fields.sortOptions = value }
get visiblePropertyIds(): string[] { return this.fields.visiblePropertyIds }
set visiblePropertyIds(value: string[]) { this.fields.visiblePropertyIds = value }
get filter(): FilterGroup | undefined { return this.fields.filter }
set filter(value: FilterGroup | undefined) { this.fields.filter = value }
constructor(block: any = {}) {
super(block)
this.type = "view"
this.viewType = block.viewType || "board"
this.groupById = block.groupById
this.sortOptions = block.sortOptions ? block.sortOptions.map((o: ISortOption) => ({...o})) : [] // Deep clone
this.visiblePropertyIds = block.visiblePropertyIds ? block.visiblePropertyIds.slice() : []
this.filter = new FilterGroup(block.filter)
this.sortOptions = block.properties?.sortOptions?.map((o: ISortOption) => ({ ...o })) || [] // Deep clone
this.visiblePropertyIds = block.properties?.visiblePropertyIds?.slice() || []
this.filter = new FilterGroup(block.properties?.filter)
// TODO: Remove this fixup code
if (block.schema !== 1) {
this.viewType = block.viewType || "board"
this.groupById = block.groupById
this.sortOptions = block.sortOptions ? block.sortOptions.map((o: ISortOption) => ({ ...o })) : [] // Deep clone
this.visiblePropertyIds = block.visiblePropertyIds ? block.visiblePropertyIds.slice() : []
this.filter = new FilterGroup(block.filter)
}
if (!this.viewType) { this.viewType = "board" }
}
}

52
src/client/components/boardComponent.tsx
View file

@ -5,8 +5,9 @@ import { BlockIcons } from "../blockIcons"
import { IPropertyOption } from "../board"
import { BoardTree } from "../boardTree"
import { CardFilter } from "../cardFilter"
import ViewMenu from "../components/viewMenu"
import { Constants } from "../constants"
import { Menu } from "../menu"
import { Menu as OldMenu } from "../menu"
import { Mutator } from "../mutator"
import { IBlock } from "../octoTypes"
import { OctoUtils } from "../octoUtils"
@ -30,6 +31,7 @@ type State = {
isHoverOnCover: boolean
isSearching: boolean
shownCard: IBlock | null
viewMenu: boolean
}
class BoardComponent extends React.Component<Props, State> {
@ -39,7 +41,7 @@ class BoardComponent extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), shownCard: null }
this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false, shownCard: null }
}
componentDidUpdate(prevPros: Props, prevState: State) {
@ -98,7 +100,21 @@ class BoardComponent extends React.Component<Props, State> {
<div className="octo-board">
<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, showView) }}><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}
showView={showView}
/>}
<div className="imageDropdown"></div>
</div>
<div className="octo-spacer"></div>
<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
<div className="octo-button" id="groupByButton" onClick={(e) => { this.groupByClicked(e) }}>
@ -212,11 +228,11 @@ class BoardComponent 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")
@ -227,7 +243,7 @@ class BoardComponent extends React.Component<Props, State> {
break
}
}
Menu.shared.showAtElement(e.target as HTMLElement)
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
async addCard(groupByValue?: string) {
@ -251,12 +267,12 @@ class BoardComponent extends React.Component<Props, State> {
async valueOptionClicked(e: React.MouseEvent<HTMLElement>, option: IPropertyOption) {
const { mutator, boardTree } = this.props
Menu.shared.options = [
OldMenu.shared.options = [
{ id: "delete", name: "Delete" },
{ id: "", name: "", type: "separator" },
...Constants.menuColors
]
Menu.shared.onMenuClicked = async (optionId: string, type?: string) => {
OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
switch (optionId) {
case "delete":
console.log(`Delete property value: ${option.value}`)
@ -270,7 +286,7 @@ class BoardComponent extends React.Component<Props, State> {
}
}
}
Menu.shared.showAtElement(e.target as HTMLElement)
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
private filterClicked(e: React.MouseEvent) {
@ -280,13 +296,13 @@ class BoardComponent extends React.Component<Props, State> {
private async optionsClicked(e: React.MouseEvent) {
const { boardTree } = this.props
Menu.shared.options = [
OldMenu.shared.options = [
{ id: "exportBoardArchive", name: "Export board archive" },
{ id: "testAdd100Cards", name: "TEST: Add 100 cards" },
{ id: "testAdd1000Cards", name: "TEST: Add 1,000 cards" },
]
Menu.shared.onMenuClicked = async (id: string) => {
OldMenu.shared.onMenuClicked = async (id: string) => {
switch (id) {
case "exportBoardArchive": {
Archiver.exportBoardTree(boardTree)
@ -300,7 +316,7 @@ class BoardComponent extends React.Component<Props, State> {
}
}
}
Menu.shared.showAtElement(e.target as HTMLElement)
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
private async testAddCards(count: number) {
@ -328,12 +344,12 @@ class BoardComponent 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}`)
@ -346,20 +362,20 @@ class BoardComponent 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 async groupByClicked(e: React.MouseEvent) {
const { mutator, boardTree } = this.props
const selectProperties = boardTree.board.cardProperties.filter(o => o.type === "select")
Menu.shared.options = selectProperties.map((o) => { return { id: o.id, name: o.name } })
Menu.shared.onMenuClicked = async (command: string) => {
OldMenu.shared.options = selectProperties.map((o) => { return { id: o.id, name: o.name } })
OldMenu.shared.onMenuClicked = async (command: string) => {
if (boardTree.activeView.groupById === command) { return }
await mutator.changeViewGroupById(boardTree.activeView, command)
}
Menu.shared.showAtElement(e.target as HTMLElement)
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
async addGroupClicked() {

60
src/client/components/rootPortal.tsx
View file

@ -1,44 +1,44 @@
// Copyright (c) 2020-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
type Props = {
children: React.ReactNode
children: React.ReactNode
}
export default class RootPortal extends React.PureComponent<Props> {
el: HTMLDivElement
el: HTMLDivElement
static propTypes = {
children: PropTypes.node,
}
static propTypes = {
children: PropTypes.node,
}
constructor(props: Props) {
super(props);
this.el = document.createElement('div');
}
constructor(props: Props) {
super(props)
this.el = document.createElement('div')
}
componentDidMount() {
const rootPortal = document.getElementById('root-portal');
if (rootPortal) {
rootPortal.appendChild(this.el);
}
}
componentDidMount() {
const rootPortal = document.getElementById('root-portal')
if (rootPortal) {
rootPortal.appendChild(this.el)
}
}
componentWillUnmount() {
const rootPortal = document.getElementById('root-portal');
if (rootPortal) {
rootPortal.removeChild(this.el);
}
}
componentWillUnmount() {
const rootPortal = document.getElementById('root-portal')
if (rootPortal) {
rootPortal.removeChild(this.el)
}
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
)
}
}

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 } from "../octoTypes"
import { OctoUtils } from "../octoUtils"
@ -28,6 +29,7 @@ type State = {
isHoverOnCover: boolean
isSearching: boolean
shownCard: IBlock | null
viewMenu: boolean
}
class TableComponent extends React.Component<Props, State> {
@ -38,7 +40,7 @@ class TableComponent extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), shownCard: null }
this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false, shownCard: null }
}
componentDidUpdate(prevPros: Props, prevState: State) {
@ -94,7 +96,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, showView) }}><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}
showView={showView}
/>}
<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>
@ -206,11 +222,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")
@ -221,7 +237,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) {
@ -229,12 +245,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}`)
@ -247,7 +263,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) {
@ -257,12 +273,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)
@ -274,7 +290,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) {
@ -295,8 +311,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 = [
@ -349,7 +365,7 @@ class TableComponent extends React.Component<Props, State> {
}
}
}
Menu.shared.showAtElement(e.target as HTMLElement)
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
focusOnCardTitle(cardId: string) {

84
src/client/components/viewMenu.tsx Normal file
View file

@ -0,0 +1,84 @@
import React from "react"
import { Board } from "../board"
import { BoardTree } from "../boardTree"
import { BoardView } from "../boardView"
import { Mutator } from "../mutator"
import { Utils } from "../utils"
import Menu from "../widgets/menu"
type Props = {
mutator: Mutator,
boardTree?: BoardTree
board: Board,
showView: (id: string) => void
onClose: () => void,
}
export default class ViewMenu extends React.Component<Props> {
handleDeleteView = async (id: string) => {
const { board, boardTree, mutator, showView } = this.props
Utils.log(`deleteView`)
const view = boardTree.activeView
const nextView = boardTree.views.find(o => o !== view)
await mutator.deleteBlock(view, "delete view")
showView(nextView.id)
}
handleViewClick = (id: string) => {
const { boardTree, showView } = this.props
Utils.log(`view ` + id)
const view = boardTree.views.find(o => o.id === id)
showView(view.id)
}
handleAddViewBoard = async (id: string) => {
const { board, boardTree, mutator, showView } = 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 () => { showView(view.id) },
async () => { showView(oldViewId) })
}
handleAddViewTable = async (id: string) => {
const { board, boardTree, mutator, showView } = 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 () => { showView(view.id) },
async () => { showView(oldViewId) })
}
render() {
const { onClose, boardTree } = 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>
)
}
}

2
src/client/octoTypes.ts
View file

@ -3,12 +3,14 @@ interface IBlock {
id: string
parentId: string
schema: number
type: string
title?: string
url?: string // TODO: Move to properties (_url)
icon?: string
order: number
properties: Record<string, string>
fields: Record<string, any>
createAt: number
updateAt: number

69
src/client/octoUtils.tsx
View file

@ -9,75 +9,6 @@ import { IBlock } from "./octoTypes"
import { Utils } from "./utils"
class OctoUtils {
static async showViewMenu(e: React.MouseEvent, mutator: Mutator, boardTree: BoardTree, showView: (id: string) => void) {
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")
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 () => { showView(view.id) },
async () => { 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 () => { showView(view.id) },
async () => { showView(oldViewId) })
break
}
default: {
const view = boardTree.views.find(o => o.id === optionId)
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) {

159
src/client/widgets/menu.tsx Normal file
View file

@ -0,0 +1,159 @@
import React from 'react';
type MenuOptionProps = {
id: string,
name: string,
onClick?: (id: string) => void,
}
function SeparatorOption() {
return (<div className="MenuOption MenuSeparator menu-separator"></div>)
}
type SubMenuOptionProps = MenuOptionProps & {
}
type SubMenuState = {
isOpen: boolean;
}
class SubMenuOption extends React.Component<SubMenuOptionProps, SubMenuState> {
state = {
isOpen: false
}
handleMouseEnter = () => {
this.setState({isOpen: true});
}
close = () => {
this.setState({isOpen: false});
}
render() {
return (
<div
className='MenuOption SubMenuOption menu-option'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.close}
>
<div className='name menu-name'>{this.props.name}</div>
<div className="imageSubmenuTriangle" style={{float: 'right'}}></div>
{this.state.isOpen &&
<Menu onClose={this.close}>
{this.props.children}
</Menu>
}
</div>
)
}
}
type ColorOptionProps = MenuOptionProps & {
icon?: "checked" | "sortUp" | "sortDown" | undefined,
}
class ColorOption extends React.Component<ColorOptionProps> {
render() {
const {name, icon} = this.props;
return (
<div className='MenuOption ColorOption menu-option'>
<div className='name'>{name}</div>
{icon && <div className={'icon ' + icon}></div>}
<div className='menu-colorbox'></div>
</div>
)
}
}
type SwitchOptionProps = MenuOptionProps & {
isOn: boolean,
icon?: "checked" | "sortUp" | "sortDown" | undefined,
}
class SwitchOption extends React.Component<SwitchOptionProps> {
handleOnClick = () => {
this.props.onClick(this.props.id)
}
render() {
const {name, icon, isOn} = this.props;
return (
<div className='MenuOption SwitchOption menu-option'>
<div className='name'>{name}</div>
{icon && <div className={`icon ${icon}`}></div>}
<div className={isOn ? "octo-switch on" : "octo-switch"}>
<div
className="octo-switch-inner"
onClick={this.handleOnClick}
></div>
</div>
</div>
);
}
}
type TextOptionProps = MenuOptionProps & {
icon?: "checked" | "sortUp" | "sortDown" | undefined,
}
class TextOption extends React.Component<TextOptionProps> {
handleOnClick = () => {
this.props.onClick(this.props.id)
}
render() {
const {name, icon} = this.props;
return (
<div className='MenuOption TextOption menu-option' onClick={this.handleOnClick}>
<div className='name'>{name}</div>
{icon && <div className={`icon ${icon}`}></div>}
</div>
);
}
}
type MenuProps = {
children: React.ReactNode
onClose: () => void
}
export default class Menu extends React.Component<MenuProps> {
static Color = ColorOption
static SubMenu = SubMenuOption
static Switch = SwitchOption
static Separator = SeparatorOption
static Text = TextOption
onBodyClick = (e: MouseEvent) => {
this.props.onClose()
}
onBodyKeyDown = (e: KeyboardEvent) => {
// Ignore keydown events on other elements
if (e.target !== document.body) { return }
if (e.keyCode === 27) {
// ESC
this.props.onClose()
e.stopPropagation()
}
}
componentDidMount() {
document.addEventListener("click", this.onBodyClick)
document.addEventListener("keydown", this.onBodyKeyDown)
}
componentWillUnmount() {
document.removeEventListener("click", this.onBodyClick)
document.removeEventListener("keydown", this.onBodyKeyDown)
}
render() {
return (
<div className="Menu menu noselect">
<div className="menu-options">
{this.props.children}
</div>
</div>
)
}
}