From 93bbc1343aa2c8a202a360b66f450c3f39e48379 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Fri, 23 Oct 2020 15:16:15 -0700
Subject: [PATCH] Hide board columns

---
 webapp/src/components/boardComponent.tsx | 51 +++++++++++++++++++++---
 webapp/src/viewModel/boardTree.ts        | 16 +++++---
 webapp/src/widgets/menuWrapper.scss      |  3 ++
 webapp/src/widgets/menuWrapper.tsx       |  2 +
 webapp/static/main.css                   |  8 ++++
 5 files changed, 70 insertions(+), 10 deletions(-)
 create mode 100644 webapp/src/widgets/menuWrapper.scss

diff --git a/webapp/src/components/boardComponent.tsx b/webapp/src/components/boardComponent.tsx
index cda06fb04..946b59af4 100644
--- a/webapp/src/components/boardComponent.tsx
+++ b/webapp/src/components/boardComponent.tsx
@@ -104,6 +104,8 @@ class BoardComponent extends React.Component<Props, State> {
         const visiblePropertyTemplates = board.cardProperties.filter((template) => activeView.visiblePropertyIds.includes(template.id))
         const hasFilter = activeView.filter && activeView.filter.filters?.length > 0
         const hasSort = activeView.sortOptions.length > 0
+        const visibleGroups = boardTree.groups.filter(group => !group.isHidden)
+        const hiddenGroups = boardTree.groups.filter(group => group.isHidden)
 
         return (
             <div
@@ -281,7 +283,9 @@ class BoardComponent extends React.Component<Props, State> {
                                 ><div className='imageAdd'/></Button>
                             </div>
 
-                            {boardTree.groups.map((group) =>
+                            {/* Visible column headers */}
+
+                            {visibleGroups.map((group) =>
                                 (<div
                                     key={group.option.id}
                                     className='octo-board-header-cell'
@@ -319,11 +323,11 @@ class BoardComponent extends React.Component<Props, State> {
                                     <MenuWrapper>
                                         <Button><div className='imageOptions'/></Button>
                                         <Menu>
-                                            {/* <Menu.Text
+                                            <Menu.Text
                                                 id='hide'
                                                 name='Hide'
                                                 onClick={() => mutator.hideViewColumn(activeView, group.option.id)}
-                                            /> */}
+                                            />
                                             <Menu.Text
                                                 id='delete'
                                                 name='Delete'
@@ -348,7 +352,15 @@ class BoardComponent extends React.Component<Props, State> {
                                 </div>),
                             )}
 
-                            <div className='octo-board-header-cell'>
+                            {/* Hidden column header */}
+
+                            {(() => {
+                                if (hiddenGroups.length > 0) {
+                                    return <div className='octo-board-header-cell narrow'>Hidden columns</div>
+                                }
+                            })()}
+
+                            <div className='octo-board-header-cell narrow'>
                                 <Button
                                     onClick={(e) => {
                                         this.addGroupClicked()
@@ -397,7 +409,7 @@ class BoardComponent extends React.Component<Props, State> {
 
                             {/* Columns */}
 
-                            {boardTree.groups.map((group) =>
+                            {visibleGroups.map((group) =>
                                 (<BoardColumn
                                     onDrop={(e) => {
                                         this.onDropToColumn(group.option)
@@ -428,6 +440,35 @@ class BoardComponent extends React.Component<Props, State> {
                                     >+ New</Button>
                                 </BoardColumn>),
                             )}
+
+                            {/* Hidden columns */}
+
+                            {(() => {
+                                if (hiddenGroups.length > 0) {
+                                    return(
+                                        <div className='octo-board-column narrow'>
+                                            {hiddenGroups.map((group) =>
+                                                <MenuWrapper key={group.option.id}>
+                                                    <div
+                                                        key={group.option.id}
+                                                        className={`octo-label ${group.option.color}`}
+                                                    >
+                                                        {group.option.value}
+                                                    </div>
+                                                <Menu>
+                                                    <Menu.Text
+                                                        id='show'
+                                                        name='Show'
+                                                        onClick={() => mutator.unhideViewColumn(activeView, group.option.id)}
+                                                    />
+                                                </Menu>
+                                            </MenuWrapper>
+                                            )}
+                                        </div>
+                                    )
+                                }
+                            })()}
+
                         </div>
                     </div>
                 </div>
diff --git a/webapp/src/viewModel/boardTree.ts b/webapp/src/viewModel/boardTree.ts
index 826ca6046..ba7c82bb8 100644
--- a/webapp/src/viewModel/boardTree.ts
+++ b/webapp/src/viewModel/boardTree.ts
@@ -9,7 +9,11 @@ import {IBlock, IMutableBlock} from '../blocks/block'
 import {OctoUtils} from '../octoUtils'
 import {Utils} from '../utils'
 
-type Group = { option: IPropertyOption, cards: Card[] }
+type Group = {
+    option: IPropertyOption
+    cards: Card[]
+    isHidden: boolean
+}
 
 interface BoardTree {
     readonly board: Board
@@ -58,13 +62,13 @@ class MutableBoardTree implements BoardTree {
         this.ensureMinimumSchema()
     }
 
-    private async ensureMinimumSchema() {
+    private ensureMinimumSchema(): boolean {
         const {board} = this
 
         let didChange = false
 
         // At least one select property
-        const selectProperties = board.cardProperties.find((o) => o.type === 'select')
+        const selectProperties = board?.cardProperties.find((o) => o.type === 'select')
         if (!selectProperties) {
             const newBoard = new MutableBoard(board)
             const property: IPropertyTemplate = {
@@ -81,8 +85,8 @@ class MutableBoardTree implements BoardTree {
         // At least one view
         if (this.views.length < 1) {
             const view = new MutableBoardView()
-            view.parentId = board.id
-            view.groupById = board.cardProperties.find((o) => o.type === 'select')?.id
+            view.parentId = board?.id
+            view.groupById = board?.cardProperties.find((o) => o.type === 'select')?.id
             this.views.push(view)
             didChange = true
         }
@@ -218,9 +222,11 @@ class MutableBoardTree implements BoardTree {
                     return optionId && optionId === option.id
                 })
 
+            const isHidden = this.activeView.hiddenColumnIds.includes(option.id)
             const group: Group = {
                 option,
                 cards,
+                isHidden
             }
 
             this.groups.push(group)
diff --git a/webapp/src/widgets/menuWrapper.scss b/webapp/src/widgets/menuWrapper.scss
new file mode 100644
index 000000000..c94f2a541
--- /dev/null
+++ b/webapp/src/widgets/menuWrapper.scss
@@ -0,0 +1,3 @@
+.MenuWrapper {
+    cursor: pointer;
+}
diff --git a/webapp/src/widgets/menuWrapper.tsx b/webapp/src/widgets/menuWrapper.tsx
index 90eabafa8..0e066d7ee 100644
--- a/webapp/src/widgets/menuWrapper.tsx
+++ b/webapp/src/widgets/menuWrapper.tsx
@@ -3,6 +3,8 @@
 
 import React from 'react'
 
+import './menuWrapper.scss'
+
 type Props = {
     children?: React.ReactNode;
     onToggle?: (open: boolean) => void;
diff --git a/webapp/static/main.css b/webapp/static/main.css
index de0dee79b..97b4a7eab 100644
--- a/webapp/static/main.css
+++ b/webapp/static/main.css
@@ -204,6 +204,10 @@ hr {
 	vertical-align: middle;
 }
 
+.octo-board-header-cell.narrow {
+	width: 220px;
+}
+
 .octo-board-header-cell > div {
 	margin-right: 5px;
 }
@@ -225,6 +229,10 @@ hr {
 	margin-right: 15px;
 }
 
+.octo-board-column.narrow {
+    width: 220px;
+}
+
 .dragover {
 	background-color: rgba(128, 192, 255, 0.4);
 }