feat: custom import components

Author: openscript

apps/frontend/package.json

@@ -30,8 +30,7 @@
     "openapi-fetch": "0.13.3",
     "openapi-react-query": "0.2.8",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-dsv-import": "^0.4.6"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@tanstack/router-devtools": "^1.90.0",

apps/frontend/src/routes/_auth/administration/participants/import.tsx

@@ -1,20 +1,19 @@
+import { ColumnType, DSVImport, ImportInput, ImportPreview } from "@quassel/ui";
 import { createFileRoute } from "@tanstack/react-router";
-import { ColumnType, DSVImport } from "react-dsv-import";
 
-type BasicType = { forename: string; surname: string; email: string };
+type BasicType = { childId: string; birthday: string };
 
 const columns: ColumnType<BasicType>[] = [
-  { key: "forename", label: "Forename" },
-  { key: "surname", label: "Surname" },
-  { key: "email", label: "Email" },
+  { key: "childId", label: "Child ID" },
+  { key: "birthday", label: "Birthday" },
 ];
 
 function AdministrationParticipantsImport() {
   return (
     <div>
       <DSVImport<BasicType> columns={columns}>
-        <DSVImport.TextareaInput />
-        <DSVImport.TablePreview />
+        <ImportInput />
+        <ImportPreview />
       </DSVImport>
     </div>
   );

docs/setup.md

@@ -115,7 +115,7 @@ The following steps describe how to set up the application system:
       - `SESSION_SALT` to a 8byte random hex string with `openssl rand -hex 8`
       - `DATABASE_PASSWORD` set a more secure password for the database
    - **frontend**:
-      - `API_URL` point to the API endpoint (e.g. "https://api.test.example.com")
+      - `API_URL` point to the API endpoint (e.g. "<https://api.test.example.com>")
 1. Run application system
 
    ```bash

libs/ui/package.json

@@ -30,11 +30,11 @@
     "@mantine/dates": "7.14.3",
     "@mantine/form": "7.14.3",
     "@mantine/hooks": "7.14.3",
-    "@tabler/icons-react": "3.25.0",
+    "@tabler/icons-react": "3.26.0",
     "dayjs": "^1.11.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-dsv-import": "^0.4.6"
+    "react-dsv-import": "^0.4.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

libs/ui/src/components/ImportInput.tsx

@@ -0,0 +1,12 @@
+import { Textarea } from "@mantine/core";
+import { useDSVImport } from "react-dsv-import";
+
+export function ImportInput() {
+  const [, dispatch] = useDSVImport();
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    dispatch({ type: "setRaw", raw: event.target.value });
+  };
+
+  return <Textarea rows={15} onChange={handleChange} />;
+}

libs/ui/src/components/ImportPreview.tsx

@@ -0,0 +1,13 @@
+import { Table, TableData } from "@mantine/core";
+import { useDSVImport } from "react-dsv-import";
+
+export function ImportPreview() {
+  const [context] = useDSVImport();
+
+  const data: TableData = {
+    head: context.columns.map((c) => c.label),
+    body: context.parsed?.map((r) => context.columns.map((c) => r[c.key])),
+  };
+
+  return <Table data={data} />;
+}

libs/ui/src/index.ts

@@ -37,6 +37,8 @@ export { formatDate, getTime, getDateFromTimeAndWeekday, getNext } from "./utils
 
 // custom components
 export { Brand } from "./components/Brand";
+export { ImportInput } from "./components/ImportInput";
+export { ImportPreview } from "./components/ImportPreview";
 export { MonthPicker } from "./components/MonthPicker";
 
 // external components