self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-05-13 21:37:37 +02:00
Code Issues Releases 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/marked": "^1.1.0",
"@types/react": "^16.9.49", "@types/react": "^16.9.49",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.6",
"copy-webpack-plugin": "^6.0.3", "copy-webpack-plugin": "^6.0.3",
"css-loader": "^4.3.0", "css-loader": "^4.3.0",
"file-loader": "^6.1.0", "file-loader": "^6.1.0",

92
server/main/main.go
View File

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

110
server/main/octoDatabase.go
View File

@ -10,42 +10,61 @@ import (
_ "github.com/mattn/go-sqlite3" _ "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") log.Println("connectDatabase")
var err error var err error
db, err = sql.Open(dbType, connectionString) db, err := sql.Open(dbType, connectionString)
if err != nil { if err != nil {
log.Fatal("connectDatabase: ", err) log.Fatal("connectDatabase: ", err)
panic(err) return nil, err
} }
err = db.Ping() err = db.Ping()
if err != nil { if err != nil {
log.Println(`Database Ping failed`) 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 // Block is the basic data unit
type Block struct { type Block struct {
ID string `json:"id"` ID string `json:"id"`
ParentID string `json:"parentId"` ParentID string `json:"parentId"`
Type string `json:"type"` Schema int64 `json:"schema"`
CreateAt int64 `json:"createAt"` Type string `json:"type"`
UpdateAt int64 `json:"updateAt"` Title string `json:"title"`
DeleteAt int64 `json:"deleteAt"` 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: Add update_by with the user's ID
// TODO: Consolidate insert_at and update_at, decide if the server of DB should set it // TODO: Consolidate insert_at and update_at, decide if the server of DB should set it
var query string var query string
if dbType == "sqlite3" { if s.dbType == "sqlite3" {
query = `CREATE TABLE IF NOT EXISTS blocks ( query = `CREATE TABLE IF NOT EXISTS blocks (
id VARCHAR(36), id VARCHAR(36),
insert_at DATETIME NOT NULL DEFAULT current_timestamp, 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 { if err != nil {
log.Fatal("createTablesIfNotExists: ", err) 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 { func (s *SQLStore) getBlocksWithParentAndType(parentID string, blockType string) []string {
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 {
query := `WITH latest AS query := `WITH latest AS
( (
SELECT * FROM SELECT * FROM
@ -120,7 +116,7 @@ func getBlocksWithParentAndType(parentID string, blockType string) []string {
FROM latest FROM latest
WHERE delete_at = 0 and parent_id = $1 and type = $2` 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 { if err != nil {
log.Printf(`getBlocksWithParentAndType ERROR: %v`, err) log.Printf(`getBlocksWithParentAndType ERROR: %v`, err)
panic(err) panic(err)
@ -129,7 +125,7 @@ func getBlocksWithParentAndType(parentID string, blockType string) []string {
return blocksFromRows(rows) return blocksFromRows(rows)
} }
func getBlocksWithParent(parentID string) []string { func (s *SQLStore) getBlocksWithParent(parentID string) []string {
query := `WITH latest AS query := `WITH latest AS
( (
SELECT * FROM SELECT * FROM
@ -146,7 +142,7 @@ func getBlocksWithParent(parentID string) []string {
FROM latest FROM latest
WHERE delete_at = 0 and parent_id = $1` WHERE delete_at = 0 and parent_id = $1`
rows, err := db.Query(query, parentID) rows, err := s.db.Query(query, parentID)
if err != nil { if err != nil {
log.Printf(`getBlocksWithParent ERROR: %v`, err) log.Printf(`getBlocksWithParent ERROR: %v`, err)
panic(err) panic(err)
@ -155,7 +151,7 @@ func getBlocksWithParent(parentID string) []string {
return blocksFromRows(rows) return blocksFromRows(rows)
} }
func getBlocksWithType(blockType string) []string { func (s *SQLStore) getBlocksWithType(blockType string) []string {
query := `WITH latest AS query := `WITH latest AS
( (
SELECT * FROM SELECT * FROM
@ -172,7 +168,7 @@ func getBlocksWithType(blockType string) []string {
FROM latest FROM latest
WHERE delete_at = 0 and type = $1` WHERE delete_at = 0 and type = $1`
rows, err := db.Query(query, blockType) rows, err := s.db.Query(query, blockType)
if err != nil { if err != nil {
log.Printf(`getBlocksWithParentAndType ERROR: %v`, err) log.Printf(`getBlocksWithParentAndType ERROR: %v`, err)
panic(err) panic(err)
@ -181,7 +177,7 @@ func getBlocksWithType(blockType string) []string {
return blocksFromRows(rows) return blocksFromRows(rows)
} }
func getSubTree(blockID string) []string { func (s *SQLStore) getSubTree(blockID string) []string {
query := `WITH latest AS query := `WITH latest AS
( (
SELECT * FROM SELECT * FROM
@ -200,7 +196,7 @@ func getSubTree(blockID string) []string {
AND (id = $1 AND (id = $1
OR parent_id = $1)` OR parent_id = $1)`
rows, err := db.Query(query, blockID) rows, err := s.db.Query(query, blockID)
if err != nil { if err != nil {
log.Printf(`getSubTree ERROR: %v`, err) log.Printf(`getSubTree ERROR: %v`, err)
panic(err) panic(err)
@ -209,7 +205,7 @@ func getSubTree(blockID string) []string {
return blocksFromRows(rows) return blocksFromRows(rows)
} }
func getAllBlocks() []string { func (s *SQLStore) getAllBlocks() []string {
query := `WITH latest AS query := `WITH latest AS
( (
SELECT * FROM SELECT * FROM
@ -226,7 +222,7 @@ func getAllBlocks() []string {
FROM latest FROM latest
WHERE delete_at = 0` WHERE delete_at = 0`
rows, err := db.Query(query) rows, err := s.db.Query(query)
if err != nil { if err != nil {
log.Printf(`getAllBlocks ERROR: %v`, err) log.Printf(`getAllBlocks ERROR: %v`, err)
panic(err) panic(err)
@ -255,7 +251,7 @@ func blocksFromRows(rows *sql.Rows) []string {
return results return results
} }
func getParentID(blockID string) string { func (s *SQLStore) getParentID(blockID string) string {
statement := statement :=
`WITH latest AS `WITH latest AS
( (
@ -274,7 +270,7 @@ func getParentID(blockID string) string {
WHERE delete_at = 0 WHERE delete_at = 0
AND id = $1` AND id = $1`
row := db.QueryRow(statement, blockID) row := s.db.QueryRow(statement, blockID)
var parentID string var parentID string
err := row.Scan(&parentID) err := row.Scan(&parentID)
@ -285,19 +281,19 @@ func getParentID(blockID string) string {
return parentID 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)` 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 { if err != nil {
panic(err) panic(err)
} }
} }
func deleteBlock(blockID string) { func (s *SQLStore) deleteBlock(blockID string) {
now := time.Now().Unix() now := time.Now().Unix()
json := fmt.Sprintf(`{"id":"%s","updateAt":%d,"deleteAt":%d}`, blockID, now, now) 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)` 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 { if err != nil {
panic(err) panic(err)
} }

25
src/client/block.ts
View File

@ -3,6 +3,7 @@ import { Utils } from "./utils"
class Block implements IBlock { class Block implements IBlock {
id: string = Utils.createGuid() id: string = Utils.createGuid()
schema: number
parentId: string parentId: string
type: string type: string
title: string title: string
@ -10,6 +11,7 @@ class Block implements IBlock {
url?: string url?: string
order: number order: number
properties: Record<string, string> = {} properties: Record<string, string> = {}
fields: Record<string, any> = {}
createAt: number = Date.now() createAt: number = Date.now()
updateAt: number = 0 updateAt: number = 0
deleteAt: number = 0 deleteAt: number = 0
@ -31,26 +33,35 @@ class Block implements IBlock {
const now = Date.now() const now = Date.now()
this.id = block.id || Utils.createGuid() this.id = block.id || Utils.createGuid()
this.schema = 1
this.parentId = block.parentId this.parentId = block.parentId
this.type = block.type this.type = block.type
this.fields = block.fields ? { ...block.fields } : {}
this.title = block.title this.title = block.title
this.icon = block.icon this.icon = block.icon
this.url = block.url this.url = block.url
this.order = block.order this.order = block.order
this.createAt = block.createAt || now this.createAt = block.createAt || now
this.updateAt = block.updateAt || now this.updateAt = block.updateAt || now
this.deleteAt = block.deleteAt || 0 this.deleteAt = block.deleteAt || 0
if (Array.isArray(block.properties)) { if (block.schema !== 1) {
// HACKHACK: Port from old schema if (Array.isArray(block.properties)) {
this.properties = {} // HACKHACK: Port from old schema
for (const property of block.properties) { this.properties = {}
if (property.id) { for (const property of block.properties) {
this.properties[property.id] = property.value if (property.id) {
this.properties[property.id] = property.value
}
} }
} else {
this.properties = { ...block.properties || {} }
} }
} else { } 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 { 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 = {}) { constructor(block: any = {}) {
super(block) super(block)
this.type = "board" this.type = "board"
if (block.cardProperties) {
// Deep clone of properties and their options if (block.fields?.cardProperties) {
this.cardProperties = block.cardProperties.map((o: IPropertyTemplate) => { // Deep clone of card properties and their options
this.cardProperties = block.fields?.cardProperties.map((o: IPropertyTemplate) => {
return { return {
id: o.id, id: o.id,
name: o.name, name: o.name,
type: o.type, type: o.type,
options: o.options ? o.options.map(option => ({...option})): [] options: o.options ? o.options.map(option => ({ ...option })) : []
} }
}) })
} else { } else {
this.cardProperties = [] 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 } type ISortOption = { propertyId: "__name" | string, reversed: boolean }
class BoardView extends Block { class BoardView extends Block {
viewType: IViewType get viewType(): IViewType { return this.fields.viewType }
groupById?: string set viewType(value: IViewType) { this.fields.viewType = value }
sortOptions: ISortOption[]
visiblePropertyIds: string[] get groupById(): string | undefined { return this.fields.groupById }
filter?: FilterGroup 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 = {}) { constructor(block: any = {}) {
super(block) super(block)
this.type = "view" this.type = "view"
this.viewType = block.viewType || "board"
this.groupById = block.groupById this.sortOptions = block.properties?.sortOptions?.map((o: ISortOption) => ({ ...o })) || [] // Deep clone
this.sortOptions = block.sortOptions ? block.sortOptions.map((o: ISortOption) => ({...o})) : [] // Deep clone this.visiblePropertyIds = block.properties?.visiblePropertyIds?.slice() || []
this.visiblePropertyIds = block.visiblePropertyIds ? block.visiblePropertyIds.slice() : [] this.filter = new FilterGroup(block.properties?.filter)
this.filter = new FilterGroup(block.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 { IPropertyOption } from "../board"
import { BoardTree } from "../boardTree" import { BoardTree } from "../boardTree"
import { CardFilter } from "../cardFilter" import { CardFilter } from "../cardFilter"
import ViewMenu from "../components/viewMenu"
import { Constants } from "../constants" import { Constants } from "../constants"
import { Menu } from "../menu" import { Menu as OldMenu } from "../menu"
import { Mutator } from "../mutator" import { Mutator } from "../mutator"
import { IBlock } from "../octoTypes" import { IBlock } from "../octoTypes"
import { OctoUtils } from "../octoUtils" import { OctoUtils } from "../octoUtils"
@ -30,6 +31,7 @@ type State = {
isHoverOnCover: boolean isHoverOnCover: boolean
isSearching: boolean isSearching: boolean
shownCard: IBlock | null shownCard: IBlock | null
viewMenu: boolean
} }
class BoardComponent extends React.Component<Props, State> { class BoardComponent extends React.Component<Props, State> {
@ -39,7 +41,7 @@ class BoardComponent extends React.Component<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(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) { componentDidUpdate(prevPros: Props, prevState: State) {
@ -98,7 +100,21 @@ class BoardComponent extends React.Component<Props, State> {
<div className="octo-board"> <div className="octo-board">
<div className="octo-controls"> <div className="octo-controls">
<Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} /> <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-spacer"></div>
<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div> <div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
<div className="octo-button" id="groupByButton" onClick={(e) => { this.groupByClicked(e) }}> <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 { mutator, boardTree } = this.props
const { board } = boardTree const { board } = boardTree
Menu.shared.options = [ OldMenu.shared.options = [
{ id: "random", name: "Random" }, { id: "random", name: "Random" },
{ id: "remove", name: "Remove Icon" }, { id: "remove", name: "Remove Icon" },
] ]
Menu.shared.onMenuClicked = (optionId: string, type?: string) => { OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
switch (optionId) { switch (optionId) {
case "remove": case "remove":
mutator.changeIcon(board, undefined, "remove icon") mutator.changeIcon(board, undefined, "remove icon")
@ -227,7 +243,7 @@ class BoardComponent extends React.Component<Props, State> {
break break
} }
} }
Menu.shared.showAtElement(e.target as HTMLElement) OldMenu.shared.showAtElement(e.target as HTMLElement)
} }
async addCard(groupByValue?: string) { async addCard(groupByValue?: string) {
@ -251,12 +267,12 @@ class BoardComponent extends React.Component<Props, State> {
async valueOptionClicked(e: React.MouseEvent<HTMLElement>, option: IPropertyOption) { async valueOptionClicked(e: React.MouseEvent<HTMLElement>, option: IPropertyOption) {
const { mutator, boardTree } = this.props const { mutator, boardTree } = this.props
Menu.shared.options = [ OldMenu.shared.options = [
{ id: "delete", name: "Delete" }, { id: "delete", name: "Delete" },
{ id: "", name: "", type: "separator" }, { id: "", name: "", type: "separator" },
...Constants.menuColors ...Constants.menuColors
] ]
Menu.shared.onMenuClicked = async (optionId: string, type?: string) => { OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
switch (optionId) { switch (optionId) {
case "delete": case "delete":
console.log(`Delete property value: ${option.value}`) 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) { private filterClicked(e: React.MouseEvent) {
@ -280,13 +296,13 @@ class BoardComponent extends React.Component<Props, State> {
private async optionsClicked(e: React.MouseEvent) { private async optionsClicked(e: React.MouseEvent) {
const { boardTree } = this.props const { boardTree } = this.props
Menu.shared.options = [ OldMenu.shared.options = [
{ id: "exportBoardArchive", name: "Export board archive" }, { id: "exportBoardArchive", name: "Export board archive" },
{ id: "testAdd100Cards", name: "TEST: Add 100 cards" }, { id: "testAdd100Cards", name: "TEST: Add 100 cards" },
{ id: "testAdd1000Cards", name: "TEST: Add 1,000 cards" }, { id: "testAdd1000Cards", name: "TEST: Add 1,000 cards" },
] ]
Menu.shared.onMenuClicked = async (id: string) => { OldMenu.shared.onMenuClicked = async (id: string) => {
switch (id) { switch (id) {
case "exportBoardArchive": { case "exportBoardArchive": {
Archiver.exportBoardTree(boardTree) 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) { private async testAddCards(count: number) {
@ -328,12 +344,12 @@ class BoardComponent extends React.Component<Props, State> {
const { activeView } = boardTree const { activeView } = boardTree
const selectProperties = boardTree.board.cardProperties const selectProperties = boardTree.board.cardProperties
Menu.shared.options = selectProperties.map((o) => { OldMenu.shared.options = selectProperties.map((o) => {
const isVisible = activeView.visiblePropertyIds.includes(o.id) const isVisible = activeView.visiblePropertyIds.includes(o.id)
return { id: o.id, name: o.name, type: "switch", isOn: isVisible } 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) const property = selectProperties.find(o => o.id === id)
Utils.assertValue(property) Utils.assertValue(property)
Utils.log(`Toggle property ${property.name} ${isOn}`) Utils.log(`Toggle property ${property.name} ${isOn}`)
@ -346,20 +362,20 @@ class BoardComponent extends React.Component<Props, State> {
} }
await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds) 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) { private async groupByClicked(e: React.MouseEvent) {
const { mutator, boardTree } = this.props const { mutator, boardTree } = this.props
const selectProperties = boardTree.board.cardProperties.filter(o => o.type === "select") const selectProperties = boardTree.board.cardProperties.filter(o => o.type === "select")
Menu.shared.options = selectProperties.map((o) => { return { id: o.id, name: o.name } }) OldMenu.shared.options = selectProperties.map((o) => { return { id: o.id, name: o.name } })
Menu.shared.onMenuClicked = async (command: string) => { OldMenu.shared.onMenuClicked = async (command: string) => {
if (boardTree.activeView.groupById === command) { return } if (boardTree.activeView.groupById === command) { return }
await mutator.changeViewGroupById(boardTree.activeView, command) await mutator.changeViewGroupById(boardTree.activeView, command)
} }
Menu.shared.showAtElement(e.target as HTMLElement) OldMenu.shared.showAtElement(e.target as HTMLElement)
} }
async addGroupClicked() { async addGroupClicked() {

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

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

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

@ -5,7 +5,8 @@ import { BlockIcons } from "../blockIcons"
import { IPropertyTemplate } from "../board" import { IPropertyTemplate } from "../board"
import { BoardTree } from "../boardTree" import { BoardTree } from "../boardTree"
import { CsvExporter } from "../csvExporter" import { CsvExporter } from "../csvExporter"
import { Menu } from "../menu" import ViewMenu from "../components/viewMenu"
import { Menu as OldMenu } from "../menu"
import { Mutator } from "../mutator" import { Mutator } from "../mutator"
import { IBlock } from "../octoTypes" import { IBlock } from "../octoTypes"
import { OctoUtils } from "../octoUtils" import { OctoUtils } from "../octoUtils"
@ -28,6 +29,7 @@ type State = {
isHoverOnCover: boolean isHoverOnCover: boolean
isSearching: boolean isSearching: boolean
shownCard: IBlock | null shownCard: IBlock | null
viewMenu: boolean
} }
class TableComponent extends React.Component<Props, State> { class TableComponent extends React.Component<Props, State> {
@ -38,7 +40,7 @@ class TableComponent extends React.Component<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(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) { componentDidUpdate(prevPros: Props, prevState: State) {
@ -94,7 +96,21 @@ class TableComponent extends React.Component<Props, State> {
<div className="octo-table"> <div className="octo-table">
<div className="octo-controls"> <div className="octo-controls">
<Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} /> <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-spacer"></div>
<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</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> <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 { mutator, boardTree } = this.props
const { board } = boardTree const { board } = boardTree
Menu.shared.options = [ OldMenu.shared.options = [
{ id: "random", name: "Random" }, { id: "random", name: "Random" },
{ id: "remove", name: "Remove Icon" }, { id: "remove", name: "Remove Icon" },
] ]
Menu.shared.onMenuClicked = (optionId: string, type?: string) => { OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
switch (optionId) { switch (optionId) {
case "remove": case "remove":
mutator.changeIcon(board, undefined, "remove icon") mutator.changeIcon(board, undefined, "remove icon")
@ -221,7 +237,7 @@ class TableComponent extends React.Component<Props, State> {
break break
} }
} }
Menu.shared.showAtElement(e.target as HTMLElement) OldMenu.shared.showAtElement(e.target as HTMLElement)
} }
private async propertiesClicked(e: React.MouseEvent) { private async propertiesClicked(e: React.MouseEvent) {
@ -229,12 +245,12 @@ class TableComponent extends React.Component<Props, State> {
const { activeView } = boardTree const { activeView } = boardTree
const selectProperties = boardTree.board.cardProperties const selectProperties = boardTree.board.cardProperties
Menu.shared.options = selectProperties.map((o) => { OldMenu.shared.options = selectProperties.map((o) => {
const isVisible = activeView.visiblePropertyIds.includes(o.id) const isVisible = activeView.visiblePropertyIds.includes(o.id)
return { id: o.id, name: o.name, type: "switch", isOn: isVisible } 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) const property = selectProperties.find(o => o.id === id)
Utils.assertValue(property) Utils.assertValue(property)
Utils.log(`Toggle property ${property.name} ${isOn}`) Utils.log(`Toggle property ${property.name} ${isOn}`)
@ -247,7 +263,7 @@ class TableComponent extends React.Component<Props, State> {
} }
await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds) await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
} }
Menu.shared.showAtElement(e.target as HTMLElement) OldMenu.shared.showAtElement(e.target as HTMLElement)
} }
private filterClicked(e: React.MouseEvent) { private filterClicked(e: React.MouseEvent) {
@ -257,12 +273,12 @@ class TableComponent extends React.Component<Props, State> {
private async optionsClicked(e: React.MouseEvent) { private async optionsClicked(e: React.MouseEvent) {
const { boardTree } = this.props const { boardTree } = this.props
Menu.shared.options = [ OldMenu.shared.options = [
{ id: "exportCsv", name: "Export to CSV" }, { id: "exportCsv", name: "Export to CSV" },
{ id: "exportBoardArchive", name: "Export board archive" }, { id: "exportBoardArchive", name: "Export board archive" },
] ]
Menu.shared.onMenuClicked = async (id: string) => { OldMenu.shared.onMenuClicked = async (id: string) => {
switch (id) { switch (id) {
case "exportCsv": { case "exportCsv": {
CsvExporter.exportTableCsv(boardTree) 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) { 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" }) options.push({ id: "delete", name: "Delete" })
} }
Menu.shared.options = options OldMenu.shared.options = options
Menu.shared.onMenuClicked = async (optionId: string, type?: string) => { OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
switch (optionId) { switch (optionId) {
case "sortAscending": { case "sortAscending": {
const newSortOptions = [ 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) { 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 id: string
parentId: string parentId: string
schema: number
type: string type: string
title?: string title?: string
url?: string // TODO: Move to properties (_url) url?: string // TODO: Move to properties (_url)
icon?: string icon?: string
order: number order: number
properties: Record<string, string> properties: Record<string, string>
fields: Record<string, any>
createAt: number createAt: number
updateAt: number updateAt: number

69
src/client/octoUtils.tsx
View File

@ -9,75 +9,6 @@ import { IBlock } from "./octoTypes"
import { Utils } from "./utils" import { Utils } from "./utils"
class OctoUtils { 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) { static propertyDisplayValue(block: IBlock, propertyValue: string | undefined, propertyTemplate: IPropertyTemplate) {
let displayValue: string let displayValue: string
switch (propertyTemplate.type) { 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>
)
}
}