From 5d1ce562f959808ce224b0803c977df98b9305e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sat, 24 Oct 2020 00:32:09 +0200
Subject: [PATCH] Moving sort menu into the new menu system

---
 webapp/src/components/boardComponent.tsx | 40 +++++++++++++++++----
 webapp/src/components/tableComponent.tsx | 44 +++++++++++++++++-------
 webapp/src/octoUtils.tsx                 | 37 ++------------------
 3 files changed, 67 insertions(+), 54 deletions(-)

diff --git a/webapp/src/components/boardComponent.tsx b/webapp/src/components/boardComponent.tsx
index 946b59af4..ee608d207 100644
--- a/webapp/src/components/boardComponent.tsx
+++ b/webapp/src/components/boardComponent.tsx
@@ -2,8 +2,10 @@
 // See LICENSE.txt for license information.
 /* eslint-disable max-lines */
 import React from 'react'
+import {FormattedMessage} from 'react-intl'
 
 import {Archiver} from '../archiver'
+import {ISortOption} from '../blocks/boardView'
 import {BlockIcons} from '../blockIcons'
 import {IPropertyOption} from '../blocks/board'
 import {Card, MutableCard} from '../blocks/card'
@@ -13,7 +15,6 @@ import ViewMenu from '../components/viewMenu'
 import {Constants} from '../constants'
 import {Menu as OldMenu} from '../menu'
 import mutator from '../mutator'
-import {OctoUtils} from '../octoUtils'
 import {Utils} from '../utils'
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
@@ -219,12 +220,37 @@ class BoardComponent extends React.Component<Props, State> {
                                     this.filterClicked(e)
                                 }}
                             >Filter</div>
-                            <div
-                                className={hasSort ? 'octo-button active' : 'octo-button'}
-                                onClick={(e) => {
-                                    OctoUtils.showSortMenu(e, boardTree)
-                                }}
-                            >Sort</div>
+                            <MenuWrapper>
+                                <div className={hasSort ? 'octo-button active' : 'octo-button'}>
+                                    <FormattedMessage
+                                        id='TableComponent.sort'
+                                        defaultMessage='Sort'
+                                    />
+                                </div>
+                                <Menu>
+                                    {boardTree.board.cardProperties.map((option) => (
+                                        <Menu.Text
+                                            id={option.id}
+                                            name={option.name}
+                                            icon={(activeView.sortOptions[0]?.propertyId === option.id) ? activeView.sortOptions[0].reversed ? 'sortUp' : 'sortDown' : undefined}
+                                            onClick={(propertyId: string) => {
+                                                let newSortOptions: ISortOption[] = []
+                                                if (activeView.sortOptions[0] && activeView.sortOptions[0].propertyId === propertyId) {
+                                                    // Already sorting by name, so reverse it
+                                                    newSortOptions = [
+                                                        {propertyId, reversed: !activeView.sortOptions[0].reversed},
+                                                    ]
+                                                } else {
+                                                    newSortOptions = [
+                                                        {propertyId, reversed: false},
+                                                    ]
+                                                }
+                                                mutator.changeViewSortOptions(activeView, newSortOptions)
+                                            }}
+                                        />
+                                    ))}
+                                </Menu>
+                            </MenuWrapper>
                             {this.state.isSearching ?
                                 <Editable
                                     ref={this.searchFieldRef}
diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx
index 77ad5dad6..8232c8f24 100644
--- a/webapp/src/components/tableComponent.tsx
+++ b/webapp/src/components/tableComponent.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 import {FormattedMessage} from 'react-intl'
 
 import {Archiver} from '../archiver'
+import {ISortOption} from '../blocks/boardView'
 import {BlockIcons} from '../blockIcons'
 import {IPropertyTemplate} from '../blocks/board'
 import {Card, MutableCard} from '../blocks/card'
@@ -12,7 +13,6 @@ import ViewMenu from '../components/viewMenu'
 import {CsvExporter} from '../csvExporter'
 import {Menu as OldMenu} from '../menu'
 import mutator from '../mutator'
-import {OctoUtils} from '../octoUtils'
 import {Utils} from '../utils'
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
@@ -207,17 +207,37 @@ class TableComponent extends React.Component<Props, State> {
                                     defaultMessage='Filter'
                                 />
                             </div>
-                            <div
-                                className={hasSort ? 'octo-button active' : 'octo-button'}
-                                onClick={(e) => {
-                                    OctoUtils.showSortMenu(e, boardTree)
-                                }}
-                            >
-                                <FormattedMessage
-                                    id='TableComponent.sort'
-                                    defaultMessage='Sort'
-                                />
-                            </div>
+                            <MenuWrapper>
+                                <div className={hasSort ? 'octo-button active' : 'octo-button'}>
+                                    <FormattedMessage
+                                        id='TableComponent.sort'
+                                        defaultMessage='Sort'
+                                    />
+                                </div>
+                                <Menu>
+                                    {boardTree.board.cardProperties.map((option) => (
+                                        <Menu.Text
+                                            id={option.id}
+                                            name={option.name}
+                                            icon={(activeView.sortOptions[0]?.propertyId === option.id) ? activeView.sortOptions[0].reversed ? 'sortUp' : 'sortDown' : undefined}
+                                            onClick={(propertyId: string) => {
+                                                let newSortOptions: ISortOption[] = []
+                                                if (activeView.sortOptions[0] && activeView.sortOptions[0].propertyId === propertyId) {
+                                                    // Already sorting by name, so reverse it
+                                                    newSortOptions = [
+                                                        {propertyId, reversed: !activeView.sortOptions[0].reversed},
+                                                    ]
+                                                } else {
+                                                    newSortOptions = [
+                                                        {propertyId, reversed: false},
+                                                    ]
+                                                }
+                                                mutator.changeViewSortOptions(activeView, newSortOptions)
+                                            }}
+                                        />
+                                    ))}
+                                </Menu>
+                            </MenuWrapper>
                             {this.state.isSearching &&
                                 <FormattedMessage
                                     id='TableComponent.search-text'
diff --git a/webapp/src/octoUtils.tsx b/webapp/src/octoUtils.tsx
index 7a4ea16aa..eb2a53357 100644
--- a/webapp/src/octoUtils.tsx
+++ b/webapp/src/octoUtils.tsx
@@ -2,19 +2,17 @@
 // See LICENSE.txt for license information.
 import React from 'react'
 
-import {MutableBlock} from './blocks/block'
+import {IBlock, MutableBlock} from './blocks/block'
 import {IPropertyTemplate, MutableBoard} from './blocks/board'
-import {ISortOption, MutableBoardView} from './blocks/boardView'
+import {MutableBoardView} from './blocks/boardView'
 import {Card, MutableCard} from './blocks/card'
 import {MutableCommentBlock} from './blocks/commentBlock'
 import {MutableImageBlock} from './blocks/imageBlock'
 import {IOrderedBlock} from './blocks/orderedBlock'
 import {MutableTextBlock} from './blocks/textBlock'
-import {BoardTree} from './viewModel/boardTree'
 import {Editable} from './components/editable'
 import {Menu} from './menu'
 import mutator from './mutator'
-import {IBlock} from './blocks/block'
 import {Utils} from './utils'
 
 class OctoUtils {
@@ -154,37 +152,6 @@ class OctoUtils {
         return (block.order + nextBlock.order) / 2
     }
 
-    static showSortMenu(e: React.MouseEvent, boardTree: BoardTree) {
-        const {activeView} = boardTree
-        const {sortOptions} = activeView
-        const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
-
-        const propertyTemplates = boardTree.board.cardProperties
-        Menu.shared.options = propertyTemplates.map((o) => {
-            return {
-                id: o.id,
-                name: o.name,
-                icon: (sortOption?.propertyId === o.id) ? sortOption.reversed ? 'sortUp' : 'sortDown' : undefined,
-            }
-        })
-        Menu.shared.onMenuClicked = async (propertyId: string) => {
-            let newSortOptions: ISortOption[] = []
-            if (sortOption && sortOption.propertyId === propertyId) {
-                // Already sorting by name, so reverse it
-                newSortOptions = [
-                    {propertyId, reversed: !sortOption.reversed},
-                ]
-            } else {
-                newSortOptions = [
-                    {propertyId, reversed: false},
-                ]
-            }
-
-            await mutator.changeViewSortOptions(activeView, newSortOptions)
-        }
-        Menu.shared.showAtElement(e.target as HTMLElement)
-    }
-
     static hydrateBlock(block: IBlock): MutableBlock {
         switch (block.type) {
         case 'board': { return new MutableBoard(block) }