Show message based on count (#1617)

* add reload after survey import

* put right message

* add totalCount with performance

* fix deepscan

* Update core/i18n/resources/en.js

core/i18n/resources/en.js

@@ -442,6 +442,7 @@ Thank you and enjoy **$t(common.appNameFull)**!`,
       owner: 'Owner',
       step: 'Step',
       noRecordsAdded: 'No records added',
+      noRecordsAddedForThisSearch: 'No records found',
     },
     rowNum: 'Row #',
     sort: 'Sort records',

server/modules/record/api/recordApi.js

@@ -78,9 +78,9 @@ export const init = (app) => {
 
   app.get('/survey/:surveyId/records/count', requireRecordListViewPermission, async (req, res, next) => {
     try {
-      const { surveyId, cycle } = Request.getParams(req)
+      const { surveyId, cycle, search } = Request.getParams(req)
 
-      const count = await RecordService.countRecordsBySurveyId(surveyId, cycle)
+      const count = await RecordService.countRecordsBySurveyId({ surveyId, cycle, search })
       res.json(count)
     } catch (error) {
       next(error)

server/modules/record/manager/recordManager.js

@@ -75,10 +75,24 @@ export const fetchRecordsSummaryBySurveyId = async (
   }
 }
 
+export const countRecordsBySurveyId = async ({ surveyId, cycle, search }, client = db) => {
+  const surveyInfo = await SurveyRepository.fetchSurveyById({ surveyId, draft: true }, client)
+  const nodeDefsDraft = Survey.isFromCollect(surveyInfo) && !Survey.isPublished(surveyInfo)
+
+  const nodeDefRoot = await NodeDefRepository.fetchRootNodeDef(surveyId, nodeDefsDraft, client)
+  const nodeDefKeys = await NodeDefRepository.fetchRootNodeDefKeysBySurveyId(
+    surveyId,
+    NodeDef.getUuid(nodeDefRoot),
+    nodeDefsDraft,
+    client
+  )
+
+  return RecordRepository.countRecordsBySurveyId({ surveyId, cycle, search, nodeDefKeys, nodeDefRoot }, client)
+}
+
 export {
   fetchRecordByUuid,
   fetchRecordsUuidAndCycle,
-  countRecordsBySurveyId,
   fetchRecordCreatedCountsByDates,
   insertRecordsInBatch,
 } from '../repository/recordRepository'

server/modules/record/repository/recordRepository.js

@@ -2,6 +2,7 @@ import * as R from 'ramda'
 import * as camelize from 'camelize'
 import * as toSnakeCase from 'to-snake-case'
 
+import * as A from '@core/arena'
 import { db } from '@server/db/db'
 import * as DbUtils from '@server/db/dbUtils'
 
@@ -85,15 +86,29 @@ export const insertRecordsInBatch = async ({ surveyId, records, userUuid }, clie
 }
 // ============== READ
 
-export const countRecordsBySurveyId = async (surveyId, cycle, client = db) =>
-  client.one(
+export const countRecordsBySurveyId = async (
+  {
+    surveyId,
+    cycle,
+    nodeDefRoot,
+    nodeDefKeys,
+    search = false,
+  },
+  client = db
+) => {
+  if (!A.isEmpty(search)) {
+    const recordsWithSearch = await fetchRecordsSummaryBySurveyId({ surveyId, cycle, nodeDefRoot, nodeDefKeys, search })
+    return { count: recordsWithSearch.length }
+  }
+  return client.one(
     `
-      SELECT count(*) 
-      FROM ${getSurveyDBSchema(surveyId)}.record 
-      WHERE preview = FALSE AND cycle = $1
-    `,
+        SELECT count(*) 
+        FROM ${getSurveyDBSchema(surveyId)}.record 
+        WHERE preview = FALSE AND cycle = $1
+      `,
     [cycle]
   )
+}
 
 export const fetchRecordsSummaryBySurveyId = async (
   {
@@ -177,7 +192,7 @@ export const fetchRecordsSummaryBySurveyId = async (
         : `r.${toSnakeCase(sortBy)}`
     } ${sortOrder}
   `,
-    [surveyId, cycle, search ],
+    [surveyId, cycle, search],
     dbTransformCallback(surveyId, false)
   )
 }

webapp/components/Table/Content/Content.js

@@ -31,7 +31,9 @@ const Content = (props) => {
     maxRows,
     module,
     noItemsLabelKey,
+    noItemsLabelForSearchKey,
     offset,
+    totalCount,
     onRowClick,
     rowHeaderComponent,
     rowComponent,
@@ -52,7 +54,7 @@ const Content = (props) => {
   if (!loading && R.isEmpty(list)) {
     return (
       <div className="table__empty-rows" data-testid={DataTestId.table.noItems}>
-        {i18n.t(noItemsLabelKey)}
+        {Number(totalCount) <= 0 ? i18n.t(noItemsLabelKey) : i18n.t(noItemsLabelForSearchKey)}
       </div>
     )
   }
@@ -109,6 +111,7 @@ Content.propTypes = {
   maxRows: PropTypes.number.isRequired,
   module: PropTypes.string.isRequired,
   noItemsLabelKey: PropTypes.string.isRequired,
+  noItemsLabelForSearchKey: PropTypes.string.isRequired,
   offset: PropTypes.number.isRequired,
   onRowClick: PropTypes.func,
   initData: PropTypes.func,

webapp/components/Table/Table.js

@@ -15,6 +15,7 @@ const Table = (props) => {
     module,
     moduleApiUri,
     noItemsLabelKey,
+    noItemsLabelForSearchKey,
     onRowClick,
     restParams,
     rowComponent,
@@ -23,13 +24,13 @@ const Table = (props) => {
     rowProps,
   } = props
 
-  const { loadingData, loadingCount, list, offset, limit, sort, search, handleSortBy, handleSearch, count, initData } = useTable({
+  const { loadingData, loadingCount, list, offset, limit, sort, search, handleSortBy, handleSearch, count, totalCount, initData } = useTable({
     moduleApiUri,
     module,
     restParams,
   })
 
-  if (loadingCount) {
+  if (loadingCount && totalCount <= 0) {
     return <LoadingBar />
   }
 
@@ -40,6 +41,7 @@ const Table = (props) => {
         list={list}
         limit={limit}
         count={count}
+        totalCount={totalCount}
         search={search}
         headerLeftComponent={headerLeftComponent}
         headerProps={headerProps}
@@ -53,7 +55,10 @@ const Table = (props) => {
         loading={loadingData}
         maxRows={limit}
         module={module}
+        count={count}
+        totalCount={totalCount}
         noItemsLabelKey={noItemsLabelKey}
+        noItemsLabelForSearchKey={noItemsLabelForSearchKey}
         offset={offset}
         onRowClick={onRowClick}
         rowComponent={rowComponent}
@@ -77,6 +82,7 @@ Table.propTypes = {
   module: PropTypes.string.isRequired,
   moduleApiUri: PropTypes.string,
   noItemsLabelKey: PropTypes.string,
+  noItemsLabelForSearchKey: PropTypes.string,
   onRowClick: PropTypes.func, // Row click handler
   restParams: PropTypes.object,
   rowComponent: PropTypes.elementType,
@@ -92,6 +98,7 @@ Table.defaultProps = {
   isRowActive: null,
   moduleApiUri: null,
   noItemsLabelKey: 'common.noItems',
+  noItemsLabelForSearchKey: 'common.noItems',
   onRowClick: null,
   restParams: {},
   rowHeaderComponent: DummyComponent,

webapp/components/Table/useTable.js

@@ -1,11 +1,12 @@
-import { useEffect, useCallback } from 'react'
+import { useEffect, useCallback, useState } from 'react'
 import { useHistory } from 'react-router'
 
 import { useSurveyId } from '@webapp/store/survey'
 import { useAsyncGetRequest, useOnUpdate } from '@webapp/components/hooks'
 import { getLimit, getOffset, getSearch, getSort, updateQuery } from '@webapp/components/Table/tableLink'
 
 export const useTable = ({ moduleApiUri, module, restParams }) => {
+  const [totalCount, setTotalCount] = useState(0)
   const history = useHistory()
   const surveyId = useSurveyId()
   const apiUri = moduleApiUri || `/api/survey/${surveyId}/${module}`
@@ -34,7 +35,10 @@ export const useTable = ({ moduleApiUri, module, restParams }) => {
     dispatch: fetchCount,
     loading: loadingCount,
   } = useAsyncGetRequest(`${apiUri}/count`, {
-    params: restParams,
+    params: {
+      search,
+      ...restParams,
+    },
   })
 
   const initData = useCallback(() => {
@@ -44,10 +48,20 @@ export const useTable = ({ moduleApiUri, module, restParams }) => {
 
   useEffect(initData, [JSON.stringify(restParams)])
 
+  useEffect(() => {
+    if (totalCount < count) {
+      setTotalCount(count)
+    }
+  }, [count, totalCount])
+
   useOnUpdate(() => {
     fetchData()
   }, [limit, offset, sort.by, sort.order, search])
 
+  useEffect(() => {
+    fetchCount()
+  }, [search])
+
   const handleSortBy = useCallback(
     (orderByField) => {
       updateQuery(history)({
@@ -58,15 +72,12 @@ export const useTable = ({ moduleApiUri, module, restParams }) => {
     [sort]
   )
 
-  const handleSearch = useCallback(
-    (searchText) => {
-      updateQuery(history)({
-        value: searchText,
-        key: 'search',
-      })
-    },
-    []
-  )
+  const handleSearch = useCallback((searchText) => {
+    updateQuery(history)({
+      value: searchText,
+      key: 'search',
+    })
+  }, [])
 
   return {
     loadingData,
@@ -79,6 +90,7 @@ export const useTable = ({ moduleApiUri, module, restParams }) => {
     handleSearch,
     handleSortBy,
     count: Number(count),
+    totalCount: Number(totalCount),
     initData,
   }
 }

webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.js

@@ -10,7 +10,7 @@ import { useSurveyInfo } from '@webapp/store/survey'
 import { RecordActions } from '@webapp/store/ui/record'
 import { DataTestId } from '@webapp/utils/dataTestId'
 
-const HeaderLeft = ({ handleSearch, search }) => {
+const HeaderLeft = ({ handleSearch, search, totalCount }) => {
   const dispatch = useDispatch()
   const history = useHistory()
   const surveyInfo = useSurveyInfo()
@@ -28,12 +28,12 @@ const HeaderLeft = ({ handleSearch, search }) => {
         {i18n.t('common.new')}
       </button>
 
-      <input
+      { totalCount > 0 && <input
         className="records__header-left__input-search"
         placeholder="search..."
         defaultValue={search}
         onChange={(e) => handleSearch(e.target.value)}
-      />
+      /> }
     </div>
   ) : (
     <div />

webapp/views/App/views/Data/Records/Records.js

@@ -34,7 +34,8 @@ const Records = () => {
       headerLeftComponent={HeaderLeft}
       rowHeaderComponent={RowHeader}
       rowComponent={Row}
-      noItemsLabelKey="dataView.records.noRecordsAdded"
+      noItemsLabelKey={"dataView.records.noRecordsAdded"}
+      noItemsLabelForSearchKey={"dataView.records.noRecordsAddedForThisSearch" }
       onRowClick={onRowClick}
     />
   )