From 4a7811836a79bb7c6c52072e840b29fdcb188ff6 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Wed, 18 Nov 2020 11:11:51 -0800
Subject: [PATCH] Board descriptions

---
 webapp/i18n/en.json                  |  2 +
 webapp/src/blocks/board.ts           | 17 +++++++
 webapp/src/components/viewTitle.scss |  6 ++-
 webapp/src/components/viewTitle.tsx  | 69 ++++++++++++++++++++++------
 webapp/src/mutator.ts                | 16 +++++++
 5 files changed, 96 insertions(+), 14 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index a314849ea..862e983ce 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -85,9 +85,11 @@
   "ViewHeader.test-distribute-cards": "TEST: Distribute cards",
   "ViewHeader.test-randomize-icons": "TEST: Randomize icons",
   "ViewHeader.untitled": "Untitled",
+  "ViewTitle.hide-description": "hide description",
   "ViewTitle.pick-icon": "Pick Icon",
   "ViewTitle.random-icon": "Random",
   "ViewTitle.remove-icon": "Remove Icon",
+  "ViewTitle.show-description": "show description",
   "ViewTitle.untitled-board": "Untitled Board",
   "WorkspaceComponent.editing-board-template": "You're editing a board template"
 }
\ No newline at end of file
diff --git a/webapp/src/blocks/board.ts b/webapp/src/blocks/board.ts
index 5f0da1476..1b1246f97 100644
--- a/webapp/src/blocks/board.ts
+++ b/webapp/src/blocks/board.ts
@@ -37,6 +37,8 @@ interface IMutablePropertyTemplate extends IPropertyTemplate {
 
 interface Board extends IBlock {
     readonly icon: string
+    readonly description: string
+    readonly showDescription: boolean
     readonly isTemplate: boolean
     readonly cardProperties: readonly IPropertyTemplate[]
     duplicate(): MutableBoard
@@ -50,6 +52,20 @@ class MutableBoard extends MutableBlock {
         this.fields.icon = value
     }
 
+    get description(): string {
+        return this.fields.description as string
+    }
+    set description(value: string) {
+        this.fields.description = value
+    }
+
+    get showDescription(): boolean {
+        return Boolean(this.fields.showDescription)
+    }
+    set showDescription(value: boolean) {
+        this.fields.showDescription = value
+    }
+
     get isTemplate(): boolean {
         return Boolean(this.fields.isTemplate)
     }
@@ -69,6 +85,7 @@ class MutableBoard extends MutableBlock {
         this.type = 'board'
 
         this.icon = block.fields?.icon || ''
+        this.description = block.fields?.description || ''
         if (block.fields?.cardProperties) {
             // Deep clone of card properties and their options
             this.cardProperties = block.fields.cardProperties.map((o: IPropertyTemplate) => {
diff --git a/webapp/src/components/viewTitle.scss b/webapp/src/components/viewTitle.scss
index 5f05d42b0..09b007d20 100644
--- a/webapp/src/components/viewTitle.scss
+++ b/webapp/src/components/viewTitle.scss
@@ -5,7 +5,7 @@
 	align-items: center;
 
     &.add-buttons {
-        flex-direction: column;
+        flex-direction: row;
 	    min-height: 30px;
 	    color:rgba(var(--main-fg), 0.4);
 	    width: 100%;
@@ -28,4 +28,8 @@
         margin-bottom: 0px;
         flex-grow: 1;
     }
+
+    &.description > * {
+        flex-grow: 1;
+    }
 }
diff --git a/webapp/src/components/viewTitle.tsx b/webapp/src/components/viewTitle.tsx
index 0afb77e69..b9cc5d298 100644
--- a/webapp/src/components/viewTitle.tsx
+++ b/webapp/src/components/viewTitle.tsx
@@ -9,8 +9,11 @@ import mutator from '../mutator'
 import Button from '../widgets/buttons/button'
 import Editable from '../widgets/editable'
 import EmojiIcon from '../widgets/icons/emoji'
+import HideIcon from '../widgets/icons/hide'
+import ShowIcon from '../widgets/icons/show'
 
 import BlockIconSelector from './blockIconSelector'
+import {MarkdownEditor} from './markdownEditor'
 import './viewTitle.scss'
 
 type Props = {
@@ -38,19 +41,47 @@ class ViewTitle extends React.Component<Props, State> {
 
         return (
             <>
-                <div className={'ViewTitle add-buttons ' + (board.icon ? '' : 'add-visible')}>
-                    <Button
-                        onClick={() => {
-                            const newIcon = BlockIcons.shared.randomIcon()
-                            mutator.changeIcon(board, newIcon)
-                        }}
-                        icon={<EmojiIcon/>}
-                    >
-                        <FormattedMessage
-                            id='TableComponent.add-icon'
-                            defaultMessage='Add Icon'
-                        />
-                    </Button>
+                <div className='ViewTitle add-buttons add-visible'>
+                    {!board.icon &&
+                        <Button
+                            onClick={() => {
+                                const newIcon = BlockIcons.shared.randomIcon()
+                                mutator.changeIcon(board, newIcon)
+                            }}
+                            icon={<EmojiIcon/>}
+                        >
+                            <FormattedMessage
+                                id='TableComponent.add-icon'
+                                defaultMessage='Add Icon'
+                            />
+                        </Button>
+                    }
+                    {board.showDescription &&
+                        <Button
+                            onClick={() => {
+                                mutator.showDescription(board, false)
+                            }}
+                            icon={<HideIcon/>}
+                        >
+                            <FormattedMessage
+                                id='ViewTitle.hide-description'
+                                defaultMessage='hide description'
+                            />
+                        </Button>
+                    }
+                    {!board.showDescription &&
+                        <Button
+                            onClick={() => {
+                                mutator.showDescription(board, true)
+                            }}
+                            icon={<ShowIcon/>}
+                        >
+                            <FormattedMessage
+                                id='ViewTitle.show-description'
+                                defaultMessage='show description'
+                            />
+                        </Button>
+                    }
                 </div>
 
                 <div className='ViewTitle'>
@@ -66,6 +97,18 @@ class ViewTitle extends React.Component<Props, State> {
                         onCancel={() => this.setState({title: this.props.board.title})}
                     />
                 </div>
+
+                {board.showDescription &&
+                    <div className='ViewTitle description'>
+                        <MarkdownEditor
+                            text={board.description}
+                            placeholderText='Add a description...'
+                            onBlur={(text) => {
+                                mutator.changeDescription(board, text)
+                            }}
+                        />
+                    </div>
+                }
             </>
         )
     }
diff --git a/webapp/src/mutator.ts b/webapp/src/mutator.ts
index 6aabcbf3b..c36f48936 100644
--- a/webapp/src/mutator.ts
+++ b/webapp/src/mutator.ts
@@ -156,6 +156,22 @@ class Mutator {
         await this.updateBlock(newBlock, block, description)
     }
 
+    async changeDescription(block: IBlock, boardDescription: string, description = 'change description') {
+        const newBoard = new MutableBoard(block)
+        newBoard.description = boardDescription
+        await this.updateBlock(newBoard, block, description)
+    }
+
+    async showDescription(board: Board, showDescription = true, description?: string) {
+        const newBoard = new MutableBoard(board)
+        newBoard.showDescription = showDescription
+        let actionDescription = description
+        if (!actionDescription) {
+            actionDescription = showDescription ? 'show description' : 'hide description'
+        }
+        await this.updateBlock(newBoard, board, actionDescription)
+    }
+
     async changeOrder(block: IOrderedBlock, order: number, description = 'change order') {
         const newBlock = new MutableOrderedBlock(block)
         newBlock.order = order