From d1ece5373143c5325312bb993fa41fda3e1ac734 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Wed, 4 Nov 2020 11:04:30 -0800
Subject: [PATCH] Show sort indicator in table header

---
 webapp/src/components/tableComponent.scss |  7 +++++++
 webapp/src/components/tableComponent.tsx  | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/tableComponent.scss b/webapp/src/components/tableComponent.scss
index 19b24eb66..144a8733e 100644
--- a/webapp/src/components/tableComponent.scss
+++ b/webapp/src/components/tableComponent.scss
@@ -29,6 +29,13 @@
 
         &.header-cell {
             padding-right: 0;
+
+            .Icon {
+                width: 16px;
+                height: 16px;
+                vertical-align: middle;
+                margin-left: 5px;
+            }
         }
 
         &:focus-within {
diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx
index c62672fba..58caf4bf6 100644
--- a/webapp/src/components/tableComponent.tsx
+++ b/webapp/src/components/tableComponent.tsx
@@ -12,6 +12,8 @@ import mutator from '../mutator'
 import {Utils} from '../utils'
 
 import MenuWrapper from '../widgets/menuWrapper'
+import SortDownIcon from '../widgets/icons/sortDown'
+import SortUpIcon from '../widgets/icons/sortUp'
 
 import {CardDialog} from './cardDialog'
 import RootPortal from './rootPortal'
@@ -152,6 +154,12 @@ class TableComponent extends React.Component<Props, State> {
                                     filter((template) => activeView.visiblePropertyIds.includes(template.id)).
                                     map((template) => {
                                         const headerRef = React.createRef<HTMLDivElement>()
+                                        let sortIcon = undefined
+                                        const sortOption = activeView.sortOptions.find(o => o.propertyId === template.id)
+                                        if (sortOption) {
+                                            sortIcon = sortOption.reversed ? <SortUpIcon /> : <SortDownIcon />
+                                        }
+
                                         return (<div
                                             key={template.id}
                                             ref={headerRef}
@@ -182,7 +190,10 @@ class TableComponent extends React.Component<Props, State> {
                                                     onDragEnd={() => {
                                                         this.draggedHeaderTemplate = undefined
                                                     }}
-                                                >{template.name}</div>
+                                                >
+                                                    {template.name}
+                                                    {sortIcon}
+                                                </div>
                                                 <TableHeaderMenu
                                                     boardTree={boardTree}
                                                     templateId={template.id}