feat: add react dsv import

Author: openscript

apps/frontend/package.json

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

apps/frontend/src/routeTree.gen.ts

@@ -38,6 +38,7 @@ import { Route as AuthQuestionnaireQuestionnaireNewImport } from "./routes/_auth
 import { Route as AuthAdministrationUsersNewImport } from "./routes/_auth/administration/users/new";
 import { Route as AuthAdministrationStudiesNewImport } from "./routes/_auth/administration/studies/new";
 import { Route as AuthAdministrationParticipantsNewImport } from "./routes/_auth/administration/participants/new";
+import { Route as AuthAdministrationParticipantsImportImport } from "./routes/_auth/administration/participants/import";
 import { Route as AuthAdministrationLanguagesNewImport } from "./routes/_auth/administration/languages/new";
 import { Route as AuthAdministrationCarersNewImport } from "./routes/_auth/administration/carers/new";
 import { Route as AuthQuestionnaireQuestionnaireIdRemarksImport } from "./routes/_auth/questionnaire/_questionnaire/$id/remarks";
@@ -230,6 +231,13 @@ const AuthAdministrationParticipantsNewRoute =
     getParentRoute: () => AuthAdministrationParticipantsRoute,
   } as any);
 
+const AuthAdministrationParticipantsImportRoute =
+  AuthAdministrationParticipantsImportImport.update({
+    id: "/import",
+    path: "/import",
+    getParentRoute: () => AuthAdministrationParticipantsRoute,
+  } as any);
+
 const AuthAdministrationLanguagesNewRoute =
   AuthAdministrationLanguagesNewImport.update({
     id: "/new",
@@ -437,6 +445,13 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof AuthAdministrationLanguagesNewImport;
       parentRoute: typeof AuthAdministrationLanguagesImport;
     };
+    "/_auth/administration/participants/import": {
+      id: "/_auth/administration/participants/import";
+      path: "/import";
+      fullPath: "/administration/participants/import";
+      preLoaderRoute: typeof AuthAdministrationParticipantsImportImport;
+      parentRoute: typeof AuthAdministrationParticipantsImport;
+    };
     "/_auth/administration/participants/new": {
       id: "/_auth/administration/participants/new";
       path: "/new";
@@ -649,13 +664,16 @@ const AuthAdministrationLanguagesRouteWithChildren =
   );
 
 interface AuthAdministrationParticipantsRouteChildren {
+  AuthAdministrationParticipantsImportRoute: typeof AuthAdministrationParticipantsImportRoute;
   AuthAdministrationParticipantsNewRoute: typeof AuthAdministrationParticipantsNewRoute;
   AuthAdministrationParticipantsIndexRoute: typeof AuthAdministrationParticipantsIndexRoute;
   AuthAdministrationParticipantsEditIdRoute: typeof AuthAdministrationParticipantsEditIdRoute;
 }
 
 const AuthAdministrationParticipantsRouteChildren: AuthAdministrationParticipantsRouteChildren =
   {
+    AuthAdministrationParticipantsImportRoute:
+      AuthAdministrationParticipantsImportRoute,
     AuthAdministrationParticipantsNewRoute:
       AuthAdministrationParticipantsNewRoute,
     AuthAdministrationParticipantsIndexRoute:
@@ -826,6 +844,7 @@ export interface FileRoutesByFullPath {
   "/questionnaire/": typeof AuthQuestionnaireIndexRoute;
   "/administration/carers/new": typeof AuthAdministrationCarersNewRoute;
   "/administration/languages/new": typeof AuthAdministrationLanguagesNewRoute;
+  "/administration/participants/import": typeof AuthAdministrationParticipantsImportRoute;
   "/administration/participants/new": typeof AuthAdministrationParticipantsNewRoute;
   "/administration/studies/new": typeof AuthAdministrationStudiesNewRoute;
   "/administration/users/new": typeof AuthAdministrationUsersNewRoute;
@@ -857,6 +876,7 @@ export interface FileRoutesByTo {
   "/administration": typeof AuthAdministrationIndexRoute;
   "/administration/carers/new": typeof AuthAdministrationCarersNewRoute;
   "/administration/languages/new": typeof AuthAdministrationLanguagesNewRoute;
+  "/administration/participants/import": typeof AuthAdministrationParticipantsImportRoute;
   "/administration/participants/new": typeof AuthAdministrationParticipantsNewRoute;
   "/administration/studies/new": typeof AuthAdministrationStudiesNewRoute;
   "/administration/users/new": typeof AuthAdministrationUsersNewRoute;
@@ -900,6 +920,7 @@ export interface FileRoutesById {
   "/_auth/questionnaire/": typeof AuthQuestionnaireIndexRoute;
   "/_auth/administration/carers/new": typeof AuthAdministrationCarersNewRoute;
   "/_auth/administration/languages/new": typeof AuthAdministrationLanguagesNewRoute;
+  "/_auth/administration/participants/import": typeof AuthAdministrationParticipantsImportRoute;
   "/_auth/administration/participants/new": typeof AuthAdministrationParticipantsNewRoute;
   "/_auth/administration/studies/new": typeof AuthAdministrationStudiesNewRoute;
   "/_auth/administration/users/new": typeof AuthAdministrationUsersNewRoute;
@@ -943,6 +964,7 @@ export interface FileRouteTypes {
     | "/questionnaire/"
     | "/administration/carers/new"
     | "/administration/languages/new"
+    | "/administration/participants/import"
     | "/administration/participants/new"
     | "/administration/studies/new"
     | "/administration/users/new"
@@ -973,6 +995,7 @@ export interface FileRouteTypes {
     | "/administration"
     | "/administration/carers/new"
     | "/administration/languages/new"
+    | "/administration/participants/import"
     | "/administration/participants/new"
     | "/administration/studies/new"
     | "/administration/users/new"
@@ -1014,6 +1037,7 @@ export interface FileRouteTypes {
     | "/_auth/questionnaire/"
     | "/_auth/administration/carers/new"
     | "/_auth/administration/languages/new"
+    | "/_auth/administration/participants/import"
     | "/_auth/administration/participants/new"
     | "/_auth/administration/studies/new"
     | "/_auth/administration/users/new"
@@ -1129,6 +1153,7 @@ export const routeTree = rootRoute
       "filePath": "_auth/administration/participants.tsx",
       "parent": "/_auth/administration",
       "children": [
+        "/_auth/administration/participants/import",
         "/_auth/administration/participants/new",
         "/_auth/administration/participants/",
         "/_auth/administration/participants/edit/$id"
@@ -1188,6 +1213,10 @@ export const routeTree = rootRoute
       "filePath": "_auth/administration/languages/new.tsx",
       "parent": "/_auth/administration/languages"
     },
+    "/_auth/administration/participants/import": {
+      "filePath": "_auth/administration/participants/import.tsx",
+      "parent": "/_auth/administration/participants"
+    },
     "/_auth/administration/participants/new": {
       "filePath": "_auth/administration/participants/new.tsx",
       "parent": "/_auth/administration/participants"

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

@@ -0,0 +1,25 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ColumnType, DSVImport } from "react-dsv-import";
+
+type BasicType = { forename: string; surname: string; email: string };
+
+const columns: ColumnType<BasicType>[] = [
+  { key: "forename", label: "Forename" },
+  { key: "surname", label: "Surname" },
+  { key: "email", label: "Email" },
+];
+
+function AdministrationParticipantsImport() {
+  return (
+    <div>
+      <DSVImport<BasicType> columns={columns}>
+        <DSVImport.TextareaInput />
+        <DSVImport.TablePreview />
+      </DSVImport>
+    </div>
+  );
+}
+
+export const Route = createFileRoute("/_auth/administration/participants/import")({
+  component: AdministrationParticipantsImport,
+});

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

@@ -14,6 +14,9 @@ function AdministrationParticipantsIndex() {
       <Button variant="default" renderRoot={(props) => <Link to="/administration/participants/new" {...props} />}>
         New participant
       </Button>
+      <Button variant="default" renderRoot={(props) => <Link to="/administration/participants/import" {...props} />}>
+        Import participants
+      </Button>
       <Table>
         <Table.Thead>
           <Table.Tr>

libs/ui/package.json

@@ -33,7 +33,8 @@
     "@tabler/icons-react": "3.25.0",
     "dayjs": "^1.11.13",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-dsv-import": "^0.4.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

libs/ui/src/index.ts

@@ -86,3 +86,6 @@ export {
   IconMapSearch,
   IconMinus,
 } from "@tabler/icons-react";
+
+export { DSVImport } from "react-dsv-import";
+export type { ColumnType } from "react-dsv-import";

libs/ui/vite.config.ts

@@ -26,7 +26,9 @@ export default defineConfig({
           "@mantine/core": "mantineCore",
           "@mantine/dates": "mantineDates",
           "@mantine/hooks": "mantineHooks",
+          "@mantine/form": "mantineForm",
           "@tabler/icons-react/dist/esm/icons/index.mjs": "tablerIconsReact",
+          "react-dsv-import": "reactDsvImport",
         },
       },
     },