Skip to content

Commit

Permalink
Simplify dashboard tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@fongsean
fongsean committed Aug 1, 2023
1 parent 579a33a commit 07630a7
Show file tree
Hide file tree
Showing 13 changed files with 238 additions and 195 deletions.
39 changes: 8 additions & 31 deletions ...src/features/dashboard/components/DashboardPages/QuestionnairePage/QuestionnaireTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import {
import useDebounce from '../../../../renderer/hooks/useDebounce.ts';
import useFetchQuestionnaires from '../../../hooks/useFetchQuestionnaires.ts';
import { createQuestionnaireTableColumns } from '../../../utils/tableColumns.ts';
import type { Questionnaire } from 'fhir/r4';
import QuestionnaireTableView from './QuestionnaireTableView.tsx';

function QuestionnaireTable() {
Expand All @@ -39,26 +38,15 @@ function QuestionnaireTable() {
const [searchInput, setSearchInput] = useState('');
const debouncedInput = useDebounce(searchInput, 300);

const {
remoteQuestionnaires,
questionnaireListItems,
fetchStatus,
fetchError,
isInitialLoading,
isFetching
} = useFetchQuestionnaires(searchInput, debouncedInput);
const { questionnaires, fetchStatus, fetchError, isInitialLoading, isFetching } =
useFetchQuestionnaires(searchInput, debouncedInput);

const columns = useMemo(() => createQuestionnaireTableColumns(), []);

const [sorting, setSorting] = useState<SortingState>([
{
id: 'date',
desc: true
}
]);
const [sorting, setSorting] = useState<SortingState>([]);

const table = useReactTable({
data: questionnaireListItems,
data: questionnaires,
columns: columns,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
Expand All @@ -70,24 +58,13 @@ function QuestionnaireTable() {
});

function handleRowClick(id: string) {
const selectedItem = questionnaireListItems.find((item) => item.id === id);
const questionnaire = questionnaires.find((questionnaire) => questionnaire.id === id);

if (selectedItem) {
if (selectedItem.id === selectedQuestionnaire?.listItem.id) {
if (questionnaire) {
if (questionnaire.id === selectedQuestionnaire?.id) {
setSelectedQuestionnaire(null);
} else {
const resource = remoteQuestionnaires?.entry?.find(
(entry) => entry.resource?.id === id
)?.resource;

if (resource) {
setSelectedQuestionnaire({
listItem: selectedItem,
resource: resource as Questionnaire
});
} else {
setSelectedQuestionnaire(null);
}
setSelectedQuestionnaire(questionnaire);
}
}
}
Expand Down
25 changes: 12 additions & 13 deletions ...features/dashboard/components/DashboardPages/QuestionnairePage/QuestionnaireTableView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,21 @@ import QuestionnaireTableRow from './TableComponents/QuestionnaireTableRow.tsx';
import QuestionnaireListFeedback from './TableComponents/QuestionnaireListFeedback.tsx';
import DashboardTablePagination from '../DashboardTablePagination.tsx';
import type { Table } from '@tanstack/react-table';
import type {
QuestionnaireListItem,
SelectedQuestionnaire
} from '../../../types/list.interface.ts';
import type { Questionnaire } from 'fhir/r4';
import { createQuestionnaireListItem } from '../../../utils/dashboard.ts';

interface QuestionnaireTableViewProps {
table: Table<QuestionnaireListItem>;
table: Table<Questionnaire>;
searchInput: string;
debouncedInput: string;
fetchStatus: 'error' | 'success' | 'loading';
isInitialLoading: boolean;
isFetching: boolean;
fetchError: unknown;
selectedQuestionnaire: SelectedQuestionnaire | null;
selectedQuestionnaire: Questionnaire | null;
onSearch: (input: string) => void;
onRowClick: (id: string) => void;
onSelectQuestionnaire: (selected: SelectedQuestionnaire | null) => void;
onSelectQuestionnaire: (selected: Questionnaire | null) => void;
}

function QuestionnaireTableView(props: QuestionnaireTableViewProps) {
Expand All @@ -64,7 +62,7 @@ function QuestionnaireTableView(props: QuestionnaireTableViewProps) {
return (
<>
<QuestionnaireListToolbar
selected={selectedQuestionnaire?.listItem}
selected={selectedQuestionnaire}
searchInput={searchInput}
onClearSelection={() => onSelectQuestionnaire(null)}
onSearch={onSearch}
Expand All @@ -74,16 +72,17 @@ function QuestionnaireTableView(props: QuestionnaireTableViewProps) {
<MuiTable stickyHeader>
<DashboardTableHead headers={headers} />
<TableBody>
{table.getRowModel().rows.map((row) => {
{table.getRowModel().rows.map((row, index) => {
const rowData = row.original;
const isSelected = selectedQuestionnaire?.listItem.id === rowData.id;
const listItem = createQuestionnaireListItem(rowData, index);
const isSelected = selectedQuestionnaire?.id === listItem.id;

return (
<QuestionnaireTableRow
key={rowData.id}
row={rowData}
key={listItem.id}
row={listItem}
isSelected={isSelected}
onRowClick={() => onRowClick(rowData.id)}
onRowClick={() => onRowClick(listItem.id)}
/>
);
})}
Expand Down
27 changes: 18 additions & 9 deletions ...nents/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,7 @@

import { alpha, styled } from '@mui/material/styles';
import { OutlinedInput, Toolbar } from '@mui/material';
import type { QuestionnaireResponse } from 'fhir/r4';
import type {
QuestionnaireListItem,
ResponseListItem,
SelectedQuestionnaire
} from '../../../../types/list.interface.ts';
import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';

export const StyledRoot = styled(Toolbar)(({ theme }) => ({
height: 80,
Expand All @@ -49,8 +44,8 @@ export const StyledSearch = styled(OutlinedInput)(({ theme }) => ({
}));

export function getResponseToolBarColors(
selected: ResponseListItem | undefined,
selectedQuestionnaire: SelectedQuestionnaire | null,
selected: QuestionnaireResponse | null,
selectedQuestionnaire: Questionnaire | null,
existingResponses: QuestionnaireResponse[]
) {
return {
Expand All @@ -68,11 +63,25 @@ export function getResponseToolBarColors(
};
}

export function getQuestionnaireToolBarColors(selected: QuestionnaireListItem | undefined) {
export function getQuestionnaireToolBarColors(selected: Questionnaire | null) {
return {
...(selected && {
color: 'primary.main',
bgcolor: 'pale.primary'
})
};
}

export function getExistingResponsesToolBarColors(selected: QuestionnaireResponse | null) {
return {
...(selected
? {
color: 'primary.main',
bgcolor: 'pale.primary'
}
: {
color: 'secondary.main',
bgcolor: 'pale.secondary'
})
};
}
6 changes: 3 additions & 3 deletions .../components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ import {
StyledRoot,
StyledSearch
} from './QuestionnaireListToolbar.styles.ts';
import type { QuestionnaireListItem } from '../../../../types/list.interface.ts';
import { StyledAlert } from '../../../../../../components/Nav/Nav.styles.ts';
import QuestionnaireListToolbarButtons from './QuestionnaireListToolbarButtons.tsx';
import type { Questionnaire } from 'fhir/r4';

interface QuestionnaireListToolbarProps {
selected: QuestionnaireListItem | undefined;
selected: Questionnaire | null;
searchInput: string;
onClearSelection: () => void;
onSearch: (searchInput: string) => void;
Expand All @@ -46,7 +46,7 @@ function QuestionnaireListToolbar(props: QuestionnaireListToolbarProps) {
return (
<StyledRoot sx={{ ...toolBarColors }}>
{selected ? (
<Typography variant="subtitle1">{selected.title} selected</Typography>
<Typography variant="subtitle1">{selected.title ?? 'Undefined title'} selected</Typography>
) : (
<StyledSearch
value={searchInput}
Expand Down
31 changes: 8 additions & 23 deletions ...rms-app/src/features/dashboard/components/DashboardPages/ResponsesPage/ResponsesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
*/

import { useMemo, useState } from 'react';
import type { SelectedResponse } from '../../../types/list.interface.ts';
import useDebounce from '../../../../renderer/hooks/useDebounce.ts';
import useFetchResponses from '../../../hooks/useFetchResponses.ts';
import { createResponseTableColumns } from '../../../utils/tableColumns.ts';
Expand All @@ -31,27 +30,22 @@ import type { QuestionnaireResponse } from 'fhir/r4';
import ResponsesTableView from './ResponsesTableView.tsx';

function ResponsesTable() {
const [selectedResponse, setSelectedResponse] = useState<SelectedResponse | null>(null);
const [selectedResponse, setSelectedResponse] = useState<QuestionnaireResponse | null>(null);
const [searchInput, setSearchInput] = useState('');

const debouncedInput = useDebounce(searchInput, 300);

const { responses, responseListItems, fetchStatus, fetchError, isFetching } = useFetchResponses(
const { responses, fetchStatus, fetchError, isFetching } = useFetchResponses(
searchInput,
debouncedInput
);

const columns = useMemo(() => createResponseTableColumns(), []);

const [sorting, setSorting] = useState<SortingState>([
{
id: 'authored',
desc: true
}
]);
const [sorting, setSorting] = useState<SortingState>([]);

const table = useReactTable({
data: responseListItems,
data: responses,
columns: columns,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
Expand All @@ -63,22 +57,13 @@ function ResponsesTable() {
});

function handleRowClick(id: string) {
const selectedItem = responseListItems.find((item) => item.id === id);
const response = responses.find((response) => response.id === id);

if (selectedItem) {
if (selectedItem.id === selectedResponse?.listItem.id) {
if (response) {
if (response.id === selectedResponse?.id) {
setSelectedResponse(null);
} else {
const resource = responses?.entry?.find((entry) => entry.resource?.id === id)?.resource;

if (resource) {
setSelectedResponse({
listItem: selectedItem,
resource: resource as QuestionnaireResponse
});
} else {
setSelectedResponse(null);
}
setSelectedResponse(response);
}
}
}
Expand Down
20 changes: 11 additions & 9 deletions ...app/src/features/dashboard/components/DashboardPages/ResponsesPage/ResponsesTableView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,21 @@ import DashboardTableHead from '../DashboardTableHead.tsx';
import ResponseTableRow from './TableComponents/ResponseTableRow.tsx';
import ResponseListFeedback from './TableComponents/ResponseListFeedback.tsx';
import DashboardTablePagination from '../DashboardTablePagination.tsx';
import type { ResponseListItem, SelectedResponse } from '../../../types/list.interface.ts';
import type { Table } from '@tanstack/react-table';
import type { QuestionnaireResponse } from 'fhir/r4';
import { createResponseListItem } from '../../../utils/dashboard.ts';

interface ResponsesTableViewProps {
table: Table<ResponseListItem>;
table: Table<QuestionnaireResponse>;
searchInput: string;
debouncedInput: string;
fetchStatus: 'error' | 'success' | 'loading';
isFetching: boolean;
fetchError: unknown;
selectedResponse: SelectedResponse | null;
selectedResponse: QuestionnaireResponse | null;
onSearch: (input: string) => void;
onRowClick: (id: string) => void;
onSelectResponse: (selected: SelectedResponse | null) => void;
onSelectResponse: (selected: QuestionnaireResponse | null) => void;
}

function ResponsesTableView(props: ResponsesTableViewProps) {
Expand Down Expand Up @@ -70,16 +71,17 @@ function ResponsesTableView(props: ResponsesTableViewProps) {
<MuiTable>
<DashboardTableHead headers={headers} />
<TableBody>
{table.getRowModel().rows.map((row) => {
{table.getRowModel().rows.map((row, index) => {
const rowData = row.original;
const isSelected = selectedResponse?.listItem.id === rowData.id;
const listItem = createResponseListItem(rowData, index);
const isSelected = selectedResponse?.id === listItem.id;

return (
<ResponseTableRow
key={rowData.id}
row={rowData}
key={listItem.id}
row={listItem}
isSelected={isSelected}
onRowClick={() => onRowClick(rowData.id)}
onRowClick={() => onRowClick(listItem.id)}
/>
);
})}
Expand Down
Loading

0 comments on commit 07630a7

Please sign in to comment.