Merge pull request #460 from aehrc/feature/response-table

Feature/response table
aehrc · Sep 21, 2023 · 8a33889 · 8a33889
2 parents 44c4ab6 + 94f8ac0
commit 8a33889
Show file tree

Hide file tree

Showing 22 changed files with 340 additions and 232 deletions.
diff --git a/apps/smart-forms-app/src/features/dashboard/components/DashboardNav/DashboardNav.tsx b/apps/smart-forms-app/src/features/dashboard/components/DashboardNav/DashboardNav.tsx
@@ -63,7 +63,7 @@ export default function DashboardNav(props: DashboardNavProps) {
 
       <NavMiddleWrapper gap={2}>
         {isNotLaunched ? (
-          <NavErrorAlert message={'Viewing responses disabled, app not launched via SMART'} />
+          <NavErrorAlert message="Responses not available, app not launched via SMART" />
         ) : null}
         {isNotLaunched || debugModeEnabled ? <GoToPlaygroundButton /> : null}
       </NavMiddleWrapper>

diff --git a/...src/features/dashboard/components/DashboardPages/QuestionnairePage/QuestionnaireTable.tsx b/...src/features/dashboard/components/DashboardPages/QuestionnairePage/QuestionnaireTable.tsx
@@ -23,7 +23,7 @@ import {
   getSortedRowModel,
   useReactTable
 } from '@tanstack/react-table';
-import useDebounce from '../../../../renderer/hooks/useDebounce.ts';
+import { useDebounce } from 'usehooks-ts';
 import useFetchQuestionnaires from '../../../hooks/useFetchQuestionnaires.ts';
 import { createQuestionnaireTableColumns } from '../../../utils/tableColumns.ts';
 import QuestionnaireTableView from './QuestionnaireTableView.tsx';

diff --git a/...shboardPages/DashboardFeedbackMessage.tsx → ...mponents/QuestionnaireFeedbackMessage.tsx b/...shboardPages/DashboardFeedbackMessage.tsx → ...mponents/QuestionnaireFeedbackMessage.tsx
@@ -16,17 +16,15 @@
  */
 
 import { Typography } from '@mui/material';
-import GenericEmptyFeedback from './GenericEmptyFeedback.tsx';
-import ResponseEmptyFeedback from './ResponseEmptyFeedback.tsx';
+import GenericEmptyFeedback from '../../GenericEmptyFeedback.tsx';
 
-interface DashboardFeedbackMessageProps {
-  itemType: string;
+interface QuestionnaireFeedbackMessageProps {
   feedbackType: 'error' | 'empty' | 'loading';
   searchInput: string;
 }
 
-function DashboardFeedbackMessage(props: DashboardFeedbackMessageProps) {
-  const { itemType, feedbackType, searchInput } = props;
+function QuestionnaireFeedbackMessage(props: QuestionnaireFeedbackMessageProps) {
+  const { feedbackType, searchInput } = props;
 
   if (feedbackType === 'error') {
     return (
@@ -38,15 +36,10 @@ function DashboardFeedbackMessage(props: DashboardFeedbackMessageProps) {
   }
 
   if (feedbackType === 'loading') {
-    return <Typography variant="subtitle1">Loading {itemType}...</Typography>;
-  }
-
-  // Feedback type = empty
-  if (itemType === 'responses') {
-    return <ResponseEmptyFeedback searchInput={searchInput} />;
+    return <Typography variant="subtitle1">Loading questionnaires...</Typography>;
   }
 
   return <GenericEmptyFeedback searchInput={searchInput} />;
 }
 
-export default DashboardFeedbackMessage;
+export default QuestionnaireFeedbackMessage;
diff --git a/...components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListFeedback.tsx b/...components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListFeedback.tsx
@@ -16,7 +16,7 @@
  */
 
 import { Stack, TableBody, TableCell, TableRow } from '@mui/material';
-import DashboardFeedbackMessage from '../../DashboardFeedbackMessage.tsx';
+import QuestionnaireFeedbackMessage from './QuestionnaireFeedbackMessage.tsx';
 import { useSnackbar } from 'notistack';
 
 interface Props {
@@ -53,11 +53,7 @@ function QuestionnaireListFeedback(props: Props) {
       <TableRow>
         <TableCell align="center" colSpan={6}>
           <Stack rowGap={3} my={5}>
-            <DashboardFeedbackMessage
-              itemType={'questionnaires'}
-              feedbackType={feedbackType}
-              searchInput={searchInput}
-            />
+            <QuestionnaireFeedbackMessage feedbackType={feedbackType} searchInput={searchInput} />
           </Stack>
         </TableCell>
       </TableRow>

diff --git a/...nents/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts b/...nents/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts
@@ -16,6 +16,7 @@
  */
 
 import { alpha, styled } from '@mui/material/styles';
+import type { Theme } from '@mui/material';
 import { OutlinedInput, Toolbar } from '@mui/material';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 
@@ -43,6 +44,22 @@ export const StyledSearch = styled(OutlinedInput)(({ theme }) => ({
   }
 }));
 
+export function getResponseSearchStyles(theme: Theme) {
+  return {
+    transition: theme.transitions.create(['box-shadow', 'width'], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.shorter
+    }),
+    '&.Mui-focused': {
+      boxShadow: theme.customShadows.z4
+    },
+    '& fieldset': {
+      borderWidth: `1px !important`,
+      borderColor: `${alpha(theme.palette.grey[500], 0.32)} !important`
+    }
+  };
+}
+
 export function getResponseToolBarColors(
   selected: QuestionnaireResponse | null,
   selectedQuestionnaire: Questionnaire | null,

diff --git a/...mart-forms-app/src/features/dashboard/components/DashboardPages/ResponseEmptyFeedback.tsx b/...mart-forms-app/src/features/dashboard/components/DashboardPages/ResponseEmptyFeedback.tsx
@@ -17,26 +17,28 @@
 
 import { Typography } from '@mui/material';
 import EmptyListImage from '../../../../components/Logos/EmptyListImage.tsx';
+import type { Questionnaire } from 'fhir/r4';
+import { createResponseSearchOption } from '../../utils/dashboard.ts';
 
 interface ResponseEmptyFeedbackProps {
-  searchInput: string;
+  searchedQuestionnaire: Questionnaire | null;
 }
 
 function ResponseEmptyFeedback(props: ResponseEmptyFeedbackProps) {
-  const { searchInput } = props;
+  const { searchedQuestionnaire } = props;
 
   return (
     <>
       <EmptyListImage />
-      {searchInput === '' ? (
+      {searchedQuestionnaire === null ? (
         <Typography>
-          No results found.
+          No responses found.
           <br /> It doesn&apos;t seem like you have any responses yet.
         </Typography>
       ) : (
         <Typography>
-          No results found for &nbsp;
-          <strong>&quot;{searchInput}&quot;</strong>.
+          No responses found for &nbsp;
+          <strong>{createResponseSearchOption(searchedQuestionnaire)}</strong>.
           <br /> Try searching for something else.
         </Typography>
       )}

diff --git a/...rms-app/src/features/dashboard/components/DashboardPages/ResponsesPage/ResponsesTable.tsx b/...rms-app/src/features/dashboard/components/DashboardPages/ResponsesPage/ResponsesTable.tsx
@@ -16,7 +16,6 @@
  */
 
 import { useMemo, useState } from 'react';
-import useDebounce from '../../../../renderer/hooks/useDebounce.ts';
 import useFetchResponses from '../../../hooks/useFetchResponses.ts';
 import { createResponseTableColumns } from '../../../utils/tableColumns.ts';
 import type { SortingState } from '@tanstack/react-table';
@@ -26,19 +25,15 @@ import {
   getSortedRowModel,
   useReactTable
 } from '@tanstack/react-table';
-import type { QuestionnaireResponse } from 'fhir/r4';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import ResponsesTableView from './ResponsesTableView.tsx';
 
 function ResponsesTable() {
   const [selectedResponse, setSelectedResponse] = useState<QuestionnaireResponse | null>(null);
-  const [searchInput, setSearchInput] = useState('');
+  const [searchedQuestionnaire, setSearchedQuestionnaire] = useState<Questionnaire | null>(null);
 
-  const debouncedInput = useDebounce(searchInput, 300);
-
-  const { responses, fetchStatus, fetchError, isFetching } = useFetchResponses(
-    searchInput,
-    debouncedInput
-  );
+  const { responses, fetchStatus, fetchError, isFetching } =
+    useFetchResponses(searchedQuestionnaire);
 
   const columns = useMemo(() => createResponseTableColumns(), []);
 
@@ -76,15 +71,13 @@ function ResponsesTable() {
   return (
     <ResponsesTableView
       table={table}
-      searchInput={searchInput}
-      debouncedInput={debouncedInput}
+      searchedQuestionnaire={searchedQuestionnaire}
       fetchStatus={fetchStatus}
       isFetching={isFetching}
       fetchError={fetchError}
       selectedResponse={selectedResponse}
-      onSearch={(input) => {
-        table.setPageIndex(0);
-        setSearchInput(input);
+      onChangeSearchedQuestionnaire={(searched) => {
+        setSearchedQuestionnaire(searched);
       }}
       onRowClick={handleRowClick}
       onSelectResponse={setSelectedResponse}

diff --git a/...app/src/features/dashboard/components/DashboardPages/ResponsesPage/ResponsesTableView.tsx b/...app/src/features/dashboard/components/DashboardPages/ResponsesPage/ResponsesTableView.tsx
@@ -22,49 +22,46 @@ import ResponseTableRow from './TableComponents/ResponseTableRow.tsx';
 import ResponseListFeedback from './TableComponents/ResponseListFeedback.tsx';
 import DashboardTablePagination from '../DashboardTablePagination.tsx';
 import type { Table } from '@tanstack/react-table';
-import type { QuestionnaireResponse } from 'fhir/r4';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { createResponseListItem } from '../../../utils/dashboard.ts';
 
 interface ResponsesTableViewProps {
   table: Table<QuestionnaireResponse>;
-  searchInput: string;
-  debouncedInput: string;
+  searchedQuestionnaire: Questionnaire | null;
   fetchStatus: 'error' | 'success' | 'loading';
   isFetching: boolean;
   fetchError: unknown;
   selectedResponse: QuestionnaireResponse | null;
-  onSearch: (input: string) => void;
+  onChangeSearchedQuestionnaire: (searched: Questionnaire | null) => void;
   onRowClick: (id: string) => void;
   onSelectResponse: (selected: QuestionnaireResponse | null) => void;
 }
 
 function ResponsesTableView(props: ResponsesTableViewProps) {
   const {
     table,
-    searchInput,
-    debouncedInput,
+    searchedQuestionnaire,
     fetchStatus,
     isFetching,
     fetchError,
     selectedResponse,
-    onSearch,
+    onChangeSearchedQuestionnaire,
     onRowClick,
     onSelectResponse
   } = props;
 
   const headers = table.getHeaderGroups()[0].headers;
 
-  const isEmpty =
-    table.getRowModel().rows.length === 0 && !!debouncedInput && fetchStatus !== 'loading';
+  const isEmpty = table.getRowModel().rows.length === 0 && fetchStatus !== 'loading';
 
   return (
     <>
       <ResponseListToolbar
         selectedResponse={selectedResponse}
-        searchInput={searchInput}
+        searchedQuestionnaire={searchedQuestionnaire}
         isFetching={isFetching}
         onClearSelection={() => onSelectResponse(null)}
-        onSearch={onSearch}
+        onChangeSearchedQuestionnaire={onChangeSearchedQuestionnaire}
       />
 
       <TableContainer sx={{ minWidth: 575 }}>
@@ -92,7 +89,7 @@ function ResponsesTableView(props: ResponsesTableViewProps) {
             <ResponseListFeedback
               isEmpty={isEmpty}
               status={fetchStatus}
-              searchInput={searchInput}
+              searchedQuestionnaire={searchedQuestionnaire}
               error={fetchError}
             />
           ) : null}

diff --git a/...board/components/DashboardPages/ResponsesPage/TableComponents/ResponseFeedbackMessage.tsx b/...board/components/DashboardPages/ResponsesPage/TableComponents/ResponseFeedbackMessage.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Typography } from '@mui/material';
+import type { Questionnaire } from 'fhir/r4';
+import ResponseEmptyFeedback from '../../ResponseEmptyFeedback.tsx';
+
+interface ResponseFeedbackMessageProps {
+  feedbackType: 'error' | 'empty' | 'loading';
+  searchedQuestionnaire: Questionnaire | null;
+}
+
+function ResponseFeedbackMessage(props: ResponseFeedbackMessageProps) {
+  const { feedbackType, searchedQuestionnaire } = props;
+
+  if (feedbackType === 'error') {
+    return (
+      <>
+        <Typography variant="h6">Oops, an error occurred</Typography>
+        <Typography>Try again later, or try searching for something else.</Typography>
+      </>
+    );
+  }
+
+  if (feedbackType === 'loading') {
+    return <Typography variant="subtitle1">Loading responses...</Typography>;
+  }
+
+  return <ResponseEmptyFeedback searchedQuestionnaire={searchedQuestionnaire} />;
+}
+
+export default ResponseFeedbackMessage;
diff --git a/...ashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListFeedback.tsx b/...ashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListFeedback.tsx
@@ -16,18 +16,19 @@
  */
 
 import { Stack, TableBody, TableCell, TableRow } from '@mui/material';
-import DashboardFeedbackMessage from '../../DashboardFeedbackMessage.tsx';
+import ResponseFeedbackMessage from './ResponseFeedbackMessage.tsx';
 import { useSnackbar } from 'notistack';
+import type { Questionnaire } from 'fhir/r4';
 
 interface Props {
   isEmpty: boolean;
   status: 'loading' | 'error' | 'success';
-  searchInput: string;
+  searchedQuestionnaire: Questionnaire | null;
   error?: unknown;
 }
 
 function ResponseListFeedback(props: Props) {
-  const { isEmpty, status, searchInput, error } = props;
+  const { isEmpty, status, searchedQuestionnaire, error } = props;
 
   const { enqueueSnackbar } = useSnackbar();
 
@@ -53,10 +54,9 @@ function ResponseListFeedback(props: Props) {
       <TableRow>
         <TableCell align="center" colSpan={6}>
           <Stack rowGap={3} my={5}>
-            <DashboardFeedbackMessage
-              itemType={'responses'}
+            <ResponseFeedbackMessage
               feedbackType={feedbackType}
-              searchInput={searchInput}
+              searchedQuestionnaire={searchedQuestionnaire}
             />
           </Stack>
         </TableCell>

diff --git a/...dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListToolbar.tsx b/...dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListToolbar.tsx
@@ -22,19 +22,26 @@ import {
 } from '../../QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts';
 import ResponseListToolbarButtons from './ResponseListToolbarButtons.tsx';
 import type { QuestionnaireResponse } from 'fhir/r4';
+import type { Questionnaire } from 'fhir/r4';
 import ResponseListToolbarLeftSection from './ResponseListToolbarLeftSection.tsx';
 import useSelectedQuestionnaire from '../../../../hooks/useSelectedQuestionnaire.ts';
 
 interface ResponseListToolbarProps {
   selectedResponse: QuestionnaireResponse | null;
-  searchInput: string;
+  searchedQuestionnaire: Questionnaire | null;
   isFetching: boolean;
   onClearSelection: () => void;
-  onSearch: (searchInput: string) => void;
+  onChangeSearchedQuestionnaire: (searched: Questionnaire | null) => void;
 }
 
 function ResponseListToolbar(props: ResponseListToolbarProps) {
-  const { selectedResponse, searchInput, isFetching, onClearSelection, onSearch } = props;
+  const {
+    selectedResponse,
+    searchedQuestionnaire,
+    isFetching,
+    onClearSelection,
+    onChangeSearchedQuestionnaire
+  } = props;
 
   const { selectedQuestionnaire, existingResponses } = useSelectedQuestionnaire();
 
@@ -51,8 +58,8 @@ function ResponseListToolbar(props: ResponseListToolbarProps) {
           selectedResponse={selectedResponse}
           selectedQuestionnaire={selectedQuestionnaire}
           existingResponses={existingResponses}
-          searchInput={searchInput}
-          onSearch={onSearch}
+          searchedQuestionnaire={searchedQuestionnaire}
+          onChangeSearchedQuestionnaire={onChangeSearchedQuestionnaire}
         />
 
         <ResponseListToolbarButtons