Skip to content

Commit a2c0d8b

Browse files
joshunraujoshunrau
committed
finish implementing new data table component
1 parent 7d5894a commit a2c0d8b

1 file changed

Lines changed: 43 additions & 151 deletions

File tree

‎apps/web/src/routes/_app/datahub/index.tsx‎

Lines changed: 43 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useState } from 'react';
22

33
import { toBasicISOString } from '@douglasneuroinformatics/libjs';
4-
import {
5-
ActionDropdown,
6-
Button,
7-
DataTable,
8-
Dialog,
9-
Heading,
10-
SearchBar
11-
} from '@douglasneuroinformatics/libui/components';
4+
import { ActionDropdown, Button, DataTable, Dialog, Heading } from '@douglasneuroinformatics/libui/components';
125
import type { TanstackTable } from '@douglasneuroinformatics/libui/components';
136
import { useDownload, useNotificationsStore, useTranslation } from '@douglasneuroinformatics/libui/hooks';
147
import type { InstrumentRecordsExport } from '@opendatacapture/schemas/instrument-records';
@@ -31,6 +24,8 @@ type MasterDataTableProps = {
3124
};
3225

3326
const Toggles: React.FC<{ table: TanstackTable.Table<Subject> }> = ({ table }) => {
27+
const navigate = Route.useNavigate();
28+
3429
const { t } = useTranslation();
3530

3631
const download = useDownload();
@@ -39,6 +34,21 @@ const Toggles: React.FC<{ table: TanstackTable.Table<Subject> }> = ({ table }) =
3934
const currentGroup = useAppStore((store) => store.currentGroup);
4035
const currentUser = useAppStore((store) => store.currentUser);
4136

37+
const [isLookupOpen, setIsLookupOpen] = useState(false);
38+
39+
const lookupSubject = async ({ id }: { id: string }) => {
40+
const response = await axios.get<Subject>(`/v1/subjects/${id}`, {
41+
validateStatus: (status) => status === 200 || status === 404
42+
});
43+
if (response.status === 404) {
44+
addNotification({ message: t('core.notFound'), type: 'warning' });
45+
setIsLookupOpen(false);
46+
} else {
47+
addNotification({ type: 'success' });
48+
await navigate({ to: `./${response.data.id}/table` });
49+
}
50+
};
51+
4252
const getExportRecords = async () => {
4353
const response = await axios.get<InstrumentRecordsExport>('/v1/instrument-records/export', {
4454
params: {
@@ -107,6 +117,29 @@ const Toggles: React.FC<{ table: TanstackTable.Table<Subject> }> = ({ table }) =
107117

108118
return (
109119
<>
120+
<Dialog open={isLookupOpen} onOpenChange={setIsLookupOpen}>
121+
<Dialog.Trigger asChild>
122+
<Button
123+
className="gap-1"
124+
data-spotlight-type="subject-lookup-search-button"
125+
data-testid="subject-lookup-search-button"
126+
id="subject-lookup-search-button"
127+
variant="outline"
128+
>
129+
<UserSearchIcon />{' '}
130+
{t({
131+
en: 'Subject Lookup',
132+
fr: 'Trouver un client'
133+
})}
134+
</Button>
135+
</Dialog.Trigger>
136+
<Dialog.Content data-spotlight-type="subject-lookup-modal" data-testid="datahub-subject-lookup-dialog">
137+
<Dialog.Header>
138+
<Dialog.Title>{t('datahub.index.lookup.title')}</Dialog.Title>
139+
</Dialog.Header>
140+
<IdentificationForm onSubmit={(data) => void lookupSubject(data)} />
141+
</Dialog.Content>
142+
</Dialog>
110143
<ActionDropdown
111144
widthFull
112145
className="min-w-48"
@@ -118,67 +151,6 @@ const Toggles: React.FC<{ table: TanstackTable.Table<Subject> }> = ({ table }) =
118151
/>
119152
</>
120153
);
121-
// const table = useDataTableHandle('table', true);
122-
// const columns = table.getAllColumns();
123-
// const statusColumn = columns.find((column) => column.id === 'status')!;
124-
125-
// const filterValue = statusColumn.getFilterValue() as PaymentStatus[];
126-
127-
// return (
128-
// <>
129-
// <DropdownMenu>
130-
// <DropdownMenu.Trigger asChild>
131-
// <Button className="flex items-center gap-2" variant="outline">
132-
// Columns
133-
// <ChevronDownIcon />
134-
// </Button>
135-
// </DropdownMenu.Trigger>
136-
// <DropdownMenu.Content align="end">
137-
// {columns
138-
// .filter((column) => column.getCanHide())
139-
// .map((column) => {
140-
// return (
141-
// <DropdownMenu.CheckboxItem
142-
// checked={column.getIsVisible()}
143-
// className="capitalize"
144-
// key={column.id}
145-
// onCheckedChange={(value) => column.toggleVisibility(!!value)}
146-
// >
147-
// {column.id}
148-
// </DropdownMenu.CheckboxItem>
149-
// );
150-
// })}
151-
// </DropdownMenu.Content>
152-
// </DropdownMenu>
153-
// <DropdownMenu>
154-
// <DropdownMenu.Trigger asChild>
155-
// <Button className="flex items-center gap-2" variant="outline">
156-
// Filters
157-
// <ChevronDownIcon />
158-
// </Button>
159-
// </DropdownMenu.Trigger>
160-
// <DropdownMenu.Content widthFull align="start">
161-
// {statuses.map((option) => (
162-
// <DropdownMenu.CheckboxItem
163-
// checked={filterValue.includes(option)}
164-
// className="capitalize"
165-
// key={option}
166-
// onCheckedChange={(checked) => {
167-
// statusColumn.setFilterValue((prevValue: PaymentStatus[]) => {
168-
// if (checked) {
169-
// return [...prevValue, option];
170-
// }
171-
// return prevValue.filter((item) => item !== option);
172-
// });
173-
// }}
174-
// >
175-
// {option}
176-
// </DropdownMenu.CheckboxItem>
177-
// ))}
178-
// </DropdownMenu.Content>
179-
// </DropdownMenu>
180-
// </>
181-
// );
182154
};
183155

184156
const MasterDataTable = ({ data, onSelect }: MasterDataTableProps) => {
@@ -233,45 +205,12 @@ const MasterDataTable = ({ data, onSelect }: MasterDataTableProps) => {
233205
};
234206

235207
const RouteComponent = () => {
236-
const [isLookupOpen, setIsLookupOpen] = useState(false);
237-
238208
const currentGroup = useAppStore((store) => store.currentGroup);
239-
const currentUser = useAppStore((store) => store.currentUser);
240209

241210
const { t } = useTranslation();
242211
const navigate = useNavigate();
243212

244213
const { data } = useSubjectsQuery({ params: { groupId: currentGroup?.id } });
245-
const [tableData, setTableData] = useState<Subject[]>(data ?? []);
246-
const [searchString, setSearchString] = useState('');
247-
248-
// const lookupSubject = async ({ id }: { id: string }) => {
249-
// const response = await axios.get<Subject>(`/v1/subjects/${id}`, {
250-
// validateStatus: (status) => status === 200 || status === 404
251-
// });
252-
// if (response.status === 404) {
253-
// addNotification({ message: t('core.notFound'), type: 'warning' });
254-
// setIsLookupOpen(false);
255-
// } else {
256-
// addNotification({ type: 'success' });
257-
// await navigate({ to: `./${response.data.id}/table` });
258-
// }
259-
// };
260-
261-
// useEffect(() => {
262-
// const definedTableData = data ?? [];
263-
264-
// if (!searchString) {
265-
// setTableData(definedTableData);
266-
// return;
267-
// }
268-
269-
// const filtered = data.filter((record) =>
270-
// removeSubjectIdScope(record.id).toLowerCase().includes(searchString.toLowerCase())
271-
// );
272-
273-
// setTableData(filtered);
274-
// }, [searchString, data]);
275214

276215
return (
277216
<React.Fragment>
@@ -281,55 +220,8 @@ const RouteComponent = () => {
281220
</Heading>
282221
</PageHeader>
283222
<div className="flex grow flex-col">
284-
<div className="mb-3 flex flex-col justify-between gap-3 lg:flex-row">
285-
<SearchBar
286-
className="[&>input]:text-foreground [&>input]:placeholder-foreground grow"
287-
data-testid="datahub-subject-search-bar"
288-
id="datahub-subject-search-bar"
289-
placeholder={t({
290-
en: 'Click to Search',
291-
fr: 'Cliquer pour rechercher'
292-
})}
293-
readOnly={false}
294-
value={searchString}
295-
onValueChange={(value: string) => setSearchString(value)}
296-
/>
297-
<Dialog open={isLookupOpen} onOpenChange={setIsLookupOpen}>
298-
<Dialog.Trigger asChild>
299-
<Button
300-
className="gap-1"
301-
data-spotlight-type="subject-lookup-search-button"
302-
data-testid="subject-lookup-search-button"
303-
id="subject-lookup-search-button"
304-
variant="outline"
305-
>
306-
<UserSearchIcon />{' '}
307-
{t({
308-
en: 'Subject Lookup',
309-
fr: 'Trouver un client'
310-
})}
311-
</Button>
312-
</Dialog.Trigger>
313-
<Dialog.Content data-spotlight-type="subject-lookup-modal" data-testid="datahub-subject-lookup-dialog">
314-
<Dialog.Header>
315-
<Dialog.Title>{t('datahub.index.lookup.title')}</Dialog.Title>
316-
</Dialog.Header>
317-
<IdentificationForm onSubmit={(data) => void lookupSubject(data)} />
318-
</Dialog.Content>
319-
</Dialog>
320-
<div className="flex min-w-60 gap-2 lg:shrink">
321-
{/* <ActionDropdown
322-
widthFull
323-
data-spotlight-type="export-data-dropdown"
324-
data-testid="datahub-export-dropdown"
325-
options={['CSV', 'JSON', 'Excel']}
326-
title={t('datahub.index.table.export')}
327-
onSelection={handleExportSelection}
328-
/> */}
329-
</div>
330-
</div>
331223
<MasterDataTable
332-
data={tableData}
224+
data={data}
333225
onSelect={(subject) => {
334226
void navigate({ to: `./${subject.id}/table` });
335227
}}

0 commit comments

Comments
 (0)