fix sort and search issues, remove unused view button

pepfar-datim · Aug 3, 2021 · 99e68ac · 99e68ac
1 parent e2fc00f
commit 99e68ac
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 49 deletions.
diff --git a/src/components/Selection/SelectQuery.js b/src/components/Selection/SelectQuery.js
@@ -1,7 +1,6 @@
 import { DataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Button, CircularLoader, IconView24 } from '@dhis2/ui'
-import PropTypes from 'prop-types'
+import { CircularLoader } from '@dhis2/ui'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import CustomTable from '../Table/CustomTable'
@@ -15,18 +14,6 @@ const sqlViewsQuery = {
     },
 }
 
-const ViewQueryButton = ({ id }) => (
-    <Link to={`/view/${id}`}>
-        <Button small icon={<IconView24 />}>
-            View
-        </Button>
-    </Link>
-)
-
-ViewQueryButton.propTypes = {
-    id: PropTypes.string,
-}
-
 const SelectQuery = () => {
     const selectHeaders = [{ name: i18n.t('name') }]
 
@@ -45,20 +32,28 @@ const SelectQuery = () => {
                                 searchable={true}
                                 tableData={data.sql.sqlViews.map(d => {
                                     return [
-                                        <div key={`${d.id}_view`}>
-                                            <Link
-                                                to={`/view/${d.id}`}
-                                                style={{
-                                                    textDecoration: 'none',
-                                                }}
-                                            >
-                                                <span
-                                                    style={{ color: 'black' }}
-                                                >
-                                                    {d.displayName}
-                                                </span>
-                                            </Link>
-                                        </div>,
+                                        {
+                                            display: (
+                                                <div key={`${d.id}_view`}>
+                                                    <Link
+                                                        to={`/view/${d.id}`}
+                                                        style={{
+                                                            textDecoration:
+                                                                'none',
+                                                        }}
+                                                    >
+                                                        <span
+                                                            style={{
+                                                                color: 'black',
+                                                            }}
+                                                        >
+                                                            {d.displayName}
+                                                        </span>
+                                                    </Link>
+                                                </div>
+                                            ),
+                                            text: d.displayName,
+                                        },
                                     ]
                                 })}
                                 tableColumns={selectHeaders}

diff --git a/src/components/Table/CustomTable.js b/src/components/Table/CustomTable.js
@@ -24,7 +24,7 @@ const CustomTable = ({
                     datim.filter(i =>
                         i === null
                             ? false
-                            : i
+                            : (i.text || i)
                                   .toString()
                                   .toLowerCase()
                                   .indexOf(searchTerm.toLowerCase()) >= 0

diff --git a/src/components/Table/CustomTableBody.js b/src/components/Table/CustomTableBody.js
@@ -28,16 +28,21 @@ const CustomTableRow = ({ row }) => (
             if (d === null) {
                 return <TableCell key={randomKey} />
             }
-            if (isValidElement(d)) {
-                return <TableCell key={randomKey}>{d}</TableCell>
+
+            const displayItem = d.display || d
+
+            if (isValidElement(displayItem)) {
+                return <TableCell key={randomKey}>{displayItem}</TableCell>
             }
-            if (typeof d === 'object') {
+            if (typeof displayItem === 'object') {
                 return (
-                    <TableCell key={randomKey}>{JSON.stringify(d)}</TableCell>
+                    <TableCell key={randomKey}>
+                        {JSON.stringify(displayItem)}
+                    </TableCell>
                 )
             }
 
-            return <TableCell key={randomKey}>{d}</TableCell>
+            return <TableCell key={randomKey}>{displayItem}</TableCell>
         })}
     </TableRow>
 )
@@ -61,31 +66,26 @@ const CustomTableBody = ({ maxRows, pagePosition, rows, headers }) => {
         }
     }
 
-    // move
+    const performSort = (a, b) => {
+        const searchSettings = { numeric: true, sensitivity: 'base' }
+        if (a === null || a === '') return 1
+        a = a.text || a
+        if (b === null || b === '') return -1
+        b = b.text || b
+        return a.toString().localeCompare(b, undefined, searchSettings)
+    }
     const sortRows = rows => {
         if (!sortedColumn.column) {
             return rows
         }
 
-        const searchSettings = { numeric: true, sensitivity: 'base' }
-
         const rowsToSort = [...rows]
         const i = headers.map(h => h.name).indexOf(sortedColumn.column)
         if (sortedColumn.up) {
-            return rowsToSort.sort((a, b) =>
-                b[i] === null || b[i] === ''
-                    ? -1
-                    : a[i]
-                          .toString()
-                          .localeCompare(b[i], undefined, searchSettings)
-            )
+            return rowsToSort.sort((a, b) => performSort(a[i], b[i]))
         }
         // if using, rewrite as function to avoid duplication
-        return rowsToSort.sort((a, b) =>
-            b[i] === null || b[i] === ''
-                ? -1
-                : b[i].toString().localeCompare(a[i], undefined, searchSettings)
-        )
+        return rowsToSort.sort((a, b) => performSort(b[i], a[i]))
     }
 
     return (