Fix search page sorting

MayGo · Jan 17, 2022 · 5e6360e · 5e6360e
1 parent 12577a2
commit 5e6360e
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 30 deletions.
diff --git a/client/src/components/SearchResults/SearchResults.tsx b/client/src/components/SearchResults/SearchResults.tsx
@@ -45,29 +45,21 @@ const extraColumns = [
         maxWidth: 20,
     },
 ];
-const SearchResultsPlain = ({ searchResult, changePaging, pageIndex, total }) => {
+
+const SearchResultsPlain = ({ searchResult, fetchData, pageIndex, total }) => {
     return (
         <ItemsTable
             data={searchResult.results || []}
             isOneDay={false}
             isSearchTable
-            changePaging={changePaging}
+            fetchData={fetchData}
             pageCount={searchResult.total}
             pageIndex={pageIndex}
             extraColumns={extraColumns}
             total={total}
+            manualSortBy
         />
     );
-
-    /* return (
-        <Td>
-        <Tooltip placement="left" label="Select date and go to timeline view">
-            <AiOutlineUnorderedList
-                onClick={() => goToTimelinePage({ beginDate, endDate })}
-            />
-        </Tooltip>
-    </Td>
-    );*/
 };
 
 export const SearchResults = memo(SearchResultsPlain);
diff --git a/client/src/components/TrackItemTable/ItemsTable.tsx b/client/src/components/TrackItemTable/ItemsTable.tsx
@@ -27,9 +27,10 @@ interface ItemsTableProps {
     isSearchTable: boolean;
     pageCount?: number;
     pageIndex?: number;
-    changePaging?: any;
+    fetchData?: any;
     extraColumns?: any[];
     total: number;
+    manualSortBy: boolean;
 }
 
 export const ItemsTable = ({
@@ -39,9 +40,10 @@ export const ItemsTable = ({
     isSearchTable,
     pageCount: controlledPageCount,
     pageIndex: controlledPageIndex,
-    changePaging,
+    fetchData,
     extraColumns = [],
     total,
+    manualSortBy = false,
 }: ItemsTableProps) => {
     const dateToValue = ({ value }) => {
         return <Moment format={isOneDay ? TIME_FORMAT : DATE_TIME_FORMAT}>{value}</Moment>;
@@ -100,6 +102,7 @@ export const ItemsTable = ({
             },
             {
                 Header: 'Duration',
+                disableSortBy: manualSortBy,
                 accessor: (record) => diffAndFormatShort(record.beginDate, record.endDate),
                 width: 80,
                 minWidth: 80,
@@ -155,13 +158,14 @@ export const ItemsTable = ({
         setAllFilters,
         setSortBy,
         selectedFlatRows,
-        state: { pageIndex, pageSize, selectedRowIds },
+        state: { pageIndex, pageSize, selectedRowIds, sortBy },
     } = useTable(
         {
             columns,
             defaultColumn,
             filterTypes,
             data,
+            manualSortBy,
             ...pagingProps,
         },
         useFilters,
@@ -195,12 +199,19 @@ export const ItemsTable = ({
 
     useEffect(() => {
         if (isSearchTable) {
-            console.info('Change paging', { pageIndex, pageSize });
-            changePaging({ pageIndex, pageSize });
+            console.info('Change paging', { pageIndex, pageSize, sortBy });
+            fetchData({ pageIndex, pageSize, sortBy });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [pageIndex, pageSize]);
 
+    useEffect(() => {
+        if (manualSortBy) {
+            fetchData({ pageIndex, pageSize, sortBy });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fetchData, sortBy, manualSortBy]);
+
     const subTotal = useMemo(() => calculateTotal(data), [data]);
 
     return (

diff --git a/client/src/routes/SearchPage.tsx b/client/src/routes/SearchPage.tsx
@@ -43,17 +43,17 @@ export function SearchPage() {
             to,
             taskName,
             searchStr,
-            paging: searchPaging,
+            paging: {},
             sumTotal: true,
         });
 
+        console.info('Sum data', sum);
         const sumColumn = 'sum(endDate-beginDate)';
 
-        setTotal(sum.results.length > 0 ? sum.results[0][sumColumn] : 0);
         // Only update the data if this is the latest fetch
         if (fetchId === fetchIdRef.current) {
             setSearchResult(items);
-
+            setTotal(sum.results.length > 0 ? sum.results[0][sumColumn] : 0);
             console.info('searching with paging', searchPaging, timerange, items);
         }
 
@@ -62,8 +62,16 @@ export function SearchPage() {
         return;
     };
 
-    const changePaging = useCallback(({ pageSize, pageIndex }) => {
-        setSearchPaging({ ...searchPaging, pageSize, pageIndex });
+    const fetchData = useCallback(({ pageSize, pageIndex, sortBy }) => {
+        const pageProps = { pageSize, pageIndex };
+        if (sortBy && sortBy.length > 0) {
+            const [sort] = sortBy;
+
+            pageProps['sortByKey'] = sort.id;
+            pageProps['sortByOrder'] = sort.desc ? 'desc' : 'asc';
+        }
+
+        setSearchPaging(pageProps);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -124,7 +132,7 @@ export function SearchPage() {
                         </HStack>
                         <SearchResults
                             searchResult={searchResult}
-                            changePaging={changePaging}
+                            fetchData={fetchData}
                             pageIndex={searchPaging.pageIndex}
                             total={total}
                         />

diff --git a/electron/src/services/track-item-service.ts b/electron/src/services/track-item-service.ts
@@ -94,12 +94,8 @@ export class TrackItemService {
         return true;
     }
     findAllItems(from, to, taskName, searchStr, paging, sumTotal) {
-        let order = paging.order || 'beginDate';
-        let orderSort = paging.orderSort || 'asc';
-        if (order.startsWith('-')) {
-            order = order.substring(1);
-            orderSort = 'desc';
-        }
+        let sortByKey = paging.sortByKey || 'beginDate';
+        let sortByOrder = paging.sortByOrder || 'asc';
 
         let pageSize = paging.pageSize || 10;
         // Objections.js uses 0 based paging
@@ -110,7 +106,7 @@ export class TrackItemService {
             .where('endDate', '>=', from)
             .where('endDate', '<', to)
             .page(pageIndex, pageSize)
-            .orderBy(order, orderSort);
+            .orderBy(sortByKey, sortByOrder);
 
         if (searchStr) {
             query.where(function () {