prepare records list select all

openforis · Nov 6, 2024 · 77d4e10 · 77d4e10
1 parent fc39cf1
commit 77d4e10
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 21 deletions.
diff --git a/webapp/components/Table/Content/Content.js b/webapp/components/Table/Content/Content.js
@@ -47,6 +47,8 @@ const Content = (props) => {
     rowHeaderComponent: rowHeaderComponentParam,
     rowProps = {},
     selectedItems = [],
+    selectAllItems,
+    deselectAllItems,
     sort,
     totalCount = undefined,
   } = props
@@ -76,13 +78,24 @@ const Content = (props) => {
     )
   }
 
+  const selectedItemsCount = selectedItems.length
+
   const hasColumns = columns?.length > 0
   const rowComponent = hasColumns
     ? (_props) => <ContentRowCells {..._props} cellProps={cellProps} columns={columns} itemSelected={_props.selected} />
     : rowComponentParam
 
   const rowHeaderComponent = hasColumns
-    ? (_props) => <ContentHeaders {..._props} columns={columns} />
+    ? (_props) => (
+        <ContentHeaders
+          {..._props}
+          columns={columns}
+          selectAllItems={selectAllItems}
+          deselectAllItems={deselectAllItems}
+          selectedItemsCount={selectedItemsCount}
+          totalCount={totalCount}
+        />
+      )
     : rowHeaderComponentParam
 
   const gridTemplateColumns = hasColumns

diff --git a/webapp/components/Table/Content/ContentHeader.js b/webapp/components/Table/Content/ContentHeader.js
@@ -6,12 +6,13 @@ import { useI18n } from '@webapp/store/system'
 export const ContentHeader = (props) => {
   const i18n = useI18n()
 
-  const { column, handleSortBy, sort } = props
-  const { key, header, sortable, sortField } = column
+  const { column, deselectAllItems, handleSortBy, selectAllItems, selectedItemsCount, sort, totalCount } = props
+  const { key, header, renderHeader, sortable, sortField } = column
 
   return (
     <div key={key}>
       {sortable && <SortToggle sort={sort} handleSortBy={handleSortBy} field={sortField || key} />}
+      {renderHeader && renderHeader({ deselectAllItems, selectAllItems, selectedItemsCount, totalCount })}
       {header ? i18n.t(header) : ''}
     </div>
   )

diff --git a/webapp/components/Table/Content/ContentHeaders.js b/webapp/components/Table/Content/ContentHeaders.js
@@ -3,13 +3,18 @@ import React from 'react'
 import { ContentHeader } from './ContentHeader'
 
 export const ContentHeaders = (props) => {
-  const { columns, handleSortBy, sort } = props
+  const { columns, deselectAllItems, handleSortBy, selectedItemsCount, selectAllItems, sort, totalCount } = props
 
-  return (
-    <>
-      {columns.map((column) => (
-        <ContentHeader key={column.key} column={column} handleSortBy={handleSortBy} sort={sort} />
-      ))}
-    </>
-  )
+  return columns.map((column) => (
+    <ContentHeader
+      key={column.key}
+      column={column}
+      deselectAllItems={deselectAllItems}
+      handleSortBy={handleSortBy}
+      selectAllItems={selectAllItems}
+      selectedItemsCount={selectedItemsCount}
+      sort={sort}
+      totalCount={totalCount}
+    />
+  ))
 }
diff --git a/webapp/components/Table/Table.js b/webapp/components/Table/Table.js
@@ -59,6 +59,8 @@ const Table = (props) => {
     onRowsScroll,
     onVisibleColumnsChange,
     selectedItems,
+    selectAllItems,
+    deselectAllItems,
     visibleColumnKeys,
     visibleColumns,
   } = useTable({
@@ -126,6 +128,8 @@ const Table = (props) => {
         sort={sort}
         handleSortBy={handleSortBy}
         selectedItems={selectedItems}
+        selectAllItems={selectAllItems}
+        deselectAllItems={deselectAllItems}
       />
       {showFooter && <Footer count={count} limit={limit} list={list} module={module} offset={offset} />}
     </div>

diff --git a/webapp/components/Table/useTable.js b/webapp/components/Table/useTable.js
@@ -104,12 +104,15 @@ export const useTable = ({
 
       updateQuery(navigate)({ sort: { by: orderByField, order }, offset: null })
     },
-    [sort]
+    [navigate, sort.by, sort.order]
   )
 
-  const handleSearch = useCallback((searchText) => {
-    updateQuery(navigate)({ search: searchText, offset: null })
-  }, [])
+  const handleSearch = useCallback(
+    (searchText) => {
+      updateQuery(navigate)({ search: searchText, offset: null })
+    },
+    [navigate]
+  )
 
   // on rest params and limit update, go to first page (reset offset)
   useOnUpdate(() => {
@@ -119,12 +122,20 @@ export const useTable = ({
   // selected items
   const [selectedItems, setSelectedItems] = useState([])
 
+  const selectAllItems = useCallback(() => {
+    setSelectedItems(list)
+  }, [list])
+
+  const deselectAllItems = useCallback(() => {
+    setSelectedItems([])
+  }, [])
+
   // reset selected items on data (list) update
   useOnUpdate(() => {
     if (selectedItems.length > 0) {
-      setSelectedItems([])
+      deselectAllItems()
     }
-  }, [list])
+  }, [deselectAllItems, list])
 
   const onRowClick = useCallback(
     async (item) => {
@@ -147,7 +158,7 @@ export const useTable = ({
     (visibleColumnKeysUpdated) => {
       dispatch(TablesActions.updateVisibleColumns({ module, visibleColumns: visibleColumnKeysUpdated }))
     },
-    [module]
+    [dispatch, module]
   )
 
   return {
@@ -166,6 +177,8 @@ export const useTable = ({
     onRowClick,
     onVisibleColumnsChange,
     selectedItems,
+    selectAllItems,
+    deselectAllItems,
     visibleColumnKeys,
     visibleColumns,
   }

diff --git a/webapp/views/App/views/Data/Records/useColumns.js b/webapp/views/App/views/Data/Records/useColumns.js
@@ -21,6 +21,7 @@ import { useSurveyHasFileAttributes } from '@webapp/store/survey/hooks'
 import { RecordKeyValuesExtractor } from './recordKeyValuesExtractor'
 import { RecordDeleteButton } from './RecordDeleteButton'
 import { RecordOwnerColumn } from './RecordOwnerColumn'
+import { Checkbox } from '@webapp/components/form'
 
 export const useColumns = ({ categoryItemsByCodeDefUuid, navigateToRecord, onRecordsUpdate }) => {
   const lang = useSurveyPreferredLang()
@@ -43,10 +44,21 @@ export const useColumns = ({ categoryItemsByCodeDefUuid, navigateToRecord, onRec
     return [
       {
         key: 'selected',
+        renderHeader: ({ deselectAllItems, selectAllItems, selectedItemsCount, totalCount }) => (
+          <Checkbox
+            checked={selectedItemsCount === totalCount}
+            indeterminate={selectedItemsCount > 0 && selectedItemsCount < totalCount}
+            onChange={(value) => {
+              if (value) {
+                selectAllItems()
+              } else {
+                deselectAllItems()
+              }
+            }}
+          />
+        ),
         renderItem: ({ itemSelected }) => (
-          <div>
-            <span className={`icon icon-12px icon-action icon-checkbox-${itemSelected ? 'checked' : 'unchecked'}`} />
-          </div>
+          <span className={`icon icon-12px icon-action icon-checkbox-${itemSelected ? 'checked' : 'unchecked'}`} />
         ),
         width: '30px',
       },