|
1 | | -import { NoteType } from "@/logic/note/note"; |
| 1 | +import { Note, NoteType } from "@/logic/note/note"; |
2 | 2 | import { NoteSortFunction, NoteSorts } from "@/logic/note/sort"; |
3 | | -import { Table } from "@mantine/core"; |
4 | | -import { useEventListener } from "@mantine/hooks"; |
5 | | -import { IconCards } from "@tabler/icons-react"; |
6 | | -import { t } from "i18next"; |
7 | | -import { useEffect } from "react"; |
8 | | -import EmptyNotice from "../../components/EmptyNotice"; |
9 | | -import { Note } from "../../logic/note/note"; |
| 3 | +import clsx from "clsx"; |
| 4 | +import { DataTable, DataTableSortStatus } from "mantine-datatable"; |
| 5 | +import { useEffect, useState } from "react"; |
10 | 6 | import classes from "./NoteTable.module.css"; |
11 | | -import NoteTableHeadItem from "./NoteTableHeadItem"; |
12 | | -import { NoteTableItem } from "./NoteTableItem"; |
| 7 | +import { useMediaQuery } from "@mantine/hooks"; |
13 | 8 |
|
14 | 9 | interface CardTableProps { |
15 | 10 | noteSet: Note<NoteType>[]; |
16 | | - selectedIndex: number; |
17 | | - setSelectedIndex: (index: number) => void; |
18 | | - selectedNote: Note<NoteType> | undefined; |
19 | | - setSelectedNote: (card: Note<NoteType>) => void; |
20 | 11 | sort: [NoteSortFunction, boolean]; |
21 | 12 | setSort: (sort: [NoteSortFunction, boolean]) => void; |
| 13 | + openedNote: Note<NoteType> | undefined; |
| 14 | + setOpenedNote: (note: Note<NoteType> | undefined) => void; |
| 15 | + openModal: () => void; |
22 | 16 | } |
23 | 17 |
|
24 | 18 | function NoteTable({ |
25 | 19 | noteSet, |
26 | | - selectedIndex, |
27 | | - setSelectedIndex, |
28 | | - selectedNote, |
29 | | - setSelectedNote, |
30 | | - sort, |
| 20 | + openedNote, |
| 21 | + setOpenedNote, |
31 | 22 | setSort, |
| 23 | + openModal, |
32 | 24 | }: CardTableProps) { |
33 | | - const ref = useEventListener("keydown", (event) => { |
34 | | - if (event.key === "ArrowDown") { |
35 | | - setSelectedIndex( |
36 | | - selectedIndex !== undefined |
37 | | - ? Math.min(selectedIndex + 1, noteSet.length - 1) |
38 | | - : 0 |
39 | | - ); |
40 | | - } else if (event.key === "ArrowUp") { |
41 | | - setSelectedIndex( |
42 | | - selectedIndex !== undefined |
43 | | - ? Math.max(selectedIndex - 1, 0) |
44 | | - : noteSet.length - 1 |
45 | | - ); |
46 | | - } |
| 25 | + const [selectedNotes, setSelectedNotes] = useState<Note<NoteType>[]>([]); |
| 26 | + |
| 27 | + const [sortStatus, setSortStatus] = useState<DataTableSortStatus<Note<NoteType>>>({ |
| 28 | + columnAccessor: 'sortField', |
| 29 | + sortKey: 'bySortField', |
| 30 | + direction: 'asc', |
47 | 31 | }); |
48 | 32 |
|
49 | | - //Set the selected index to 0 if there is no selected index (i.e. on page load) |
50 | 33 | useEffect(() => { |
51 | | - if (selectedIndex === -1) { |
52 | | - setSelectedIndex(0); |
53 | | - } |
54 | | - }, [selectedIndex]); |
| 34 | + setSort([NoteSorts[sortStatus.sortKey as keyof typeof NoteSorts], sortStatus.direction === 'asc']); |
| 35 | + }, [sortStatus]); |
| 36 | + |
| 37 | + |
| 38 | + const isTouch = useMediaQuery('(pointer: coarse)'); |
| 39 | + const isMobile = useMediaQuery('(max-width: 50em)'); |
55 | 40 |
|
56 | 41 | return ( |
57 | | - <Table.ScrollContainer |
58 | | - minWidth="500px" |
59 | | - type="native" |
60 | | - className={classes.tableScrollContainer} |
61 | | - > |
62 | | - <Table |
63 | | - className={classes.table} |
64 | | - highlightOnHover |
65 | | - withRowBorders={false} |
66 | | - withColumnBorders={false} |
67 | | - striped |
68 | | - stickyHeader |
69 | | - ref={ref} |
70 | | - tabIndex={0} |
71 | | - > |
72 | | - <Table.Thead> |
73 | | - <Table.Tr className={classes.tr}> |
74 | | - <NoteTableHeadItem |
75 | | - name={"Name"} |
76 | | - sortFunction={NoteSorts.bySortField} |
77 | | - sort={sort} |
78 | | - setSort={setSort} |
79 | | - /> |
80 | | - <NoteTableHeadItem |
81 | | - name={"Type"} |
82 | | - sortFunction={NoteSorts.byType} |
83 | | - sort={sort} |
84 | | - setSort={setSort} |
85 | | - /> |
86 | | - <NoteTableHeadItem |
87 | | - name={"Deck"} |
88 | | - sortFunction={NoteSorts.byDeckName} |
89 | | - sort={sort} |
90 | | - setSort={setSort} |
91 | | - /> |
92 | | - <NoteTableHeadItem |
93 | | - name={"Creation Date"} |
94 | | - sortFunction={NoteSorts.byCreationDate} |
95 | | - sort={sort} |
96 | | - setSort={setSort} |
97 | | - /> |
98 | | - </Table.Tr> |
99 | | - </Table.Thead> |
100 | | - <Table.Tbody> |
101 | | - {noteSet.map((note, index) => ( |
102 | | - <NoteTableItem |
103 | | - note={note} |
104 | | - key={note.id} |
105 | | - index={index} |
106 | | - selectedIndex={selectedIndex} |
107 | | - setSelectedIndex={setSelectedIndex} |
108 | | - selectedNote={selectedNote} |
109 | | - setSelectedNote={setSelectedNote} |
110 | | - /> |
111 | | - ))} |
112 | | - </Table.Tbody> |
113 | | - </Table> |
114 | | - {noteSet.length === 0 && ( |
115 | | - <EmptyNotice |
116 | | - icon={IconCards} |
117 | | - description={t("manage-cards.table.no-cards-found")} |
118 | | - hideTitle |
119 | | - p="xl" |
120 | | - /> |
121 | | - )} |
122 | | - </Table.ScrollContainer> |
| 42 | + <DataTable |
| 43 | + className={classes.table} |
| 44 | + records={noteSet} |
| 45 | + columns={[ |
| 46 | + { |
| 47 | + accessor: "sortField", |
| 48 | + title: "Name", |
| 49 | + ellipsis: true, |
| 50 | + width: 200, |
| 51 | + resizable: true, |
| 52 | + filtering: true, |
| 53 | + sortable: true, |
| 54 | + sortKey: "bySortField", |
| 55 | + }, |
| 56 | + { |
| 57 | + accessor: "creationDate", |
| 58 | + title: "Creation Date", |
| 59 | + render: (note) => note.creationDate.toLocaleDateString(), |
| 60 | + resizable: true, |
| 61 | + sortable: true, |
| 62 | + sortKey: "byCreationDate", |
| 63 | + }, |
| 64 | + { |
| 65 | + accessor: "content.type", |
| 66 | + title: "Note Type", |
| 67 | + resizable: true, |
| 68 | + sortable: true, |
| 69 | + sortKey: "byType", |
| 70 | + }, |
| 71 | + ]} |
| 72 | + withTableBorder={false} |
| 73 | + withRowBorders={false} |
| 74 | + highlightOnHover |
| 75 | + borderRadius="md" |
| 76 | + striped="odd" |
| 77 | + height="100%" |
| 78 | + textSelectionDisabled={isTouch} |
| 79 | + selectionCheckboxProps={{ size: isMobile ? "sm" : "xs" }} |
| 80 | + selectedRecords={selectedNotes} |
| 81 | + onSelectedRecordsChange={setSelectedNotes} |
| 82 | + sortStatus={sortStatus} |
| 83 | + onSortStatusChange={setSortStatus} |
| 84 | + rowClassName={(record) => |
| 85 | + clsx({ |
| 86 | + [classes.selected]: record.id === openedNote?.id, |
| 87 | + [classes.row]: true, |
| 88 | + }) |
| 89 | + } |
| 90 | + onRowClick={(row) => { |
| 91 | + setOpenedNote(row.record); |
| 92 | + if(isMobile) { |
| 93 | + openModal(); |
| 94 | + } |
| 95 | + }} |
| 96 | + onRowDoubleClick={(row) => { |
| 97 | + setOpenedNote(row.record); |
| 98 | + openModal(); |
| 99 | + }} |
| 100 | + /> |
123 | 101 | ); |
124 | 102 | } |
125 | 103 |
|
|
0 commit comments