22 design data export interface format selection filtering

.changeset/fifty-seas-thank.md

@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": patch
+"@quassel/ui": patch
+---
+
+Add export ui

.changeset/many-snails-try.md

@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": patch
+"@quassel/ui": patch
+---
+
+Add content shell

apps/frontend/src/components/Breadcrumbs.tsx

@@ -0,0 +1,29 @@
+import { isMatch, Link, useLocation, useMatches } from "@tanstack/react-router";
+import { Anchor, Breadcrumbs } from "@quassel/ui";
+
+// Inspired by https://github.com/TanStack/router/blob/main/examples/react/kitchen-sink-file-based/src/components/Breadcrumbs.tsx
+export function BreadcrumbsNavigation() {
+  const matches = useMatches();
+  const location = useLocation();
+
+  if (matches.some((match) => match.status === "pending")) return null;
+
+  const matchesWithTitle = matches.filter((match) => isMatch(match, "context.title"));
+  const entries = matchesWithTitle.map((match) => ({ label: match.context.title, to: match.fullPath }));
+  const uniqueEntries = entries.filter((entry, index) => entries.findIndex((e) => e.label === entry.label) === index);
+
+  // Remove the last entry if it's the current page
+  if (uniqueEntries.length > 0 && uniqueEntries[uniqueEntries.length - 1].to.startsWith(location.pathname)) {
+    uniqueEntries.pop();
+  }
+
+  return (
+    <Breadcrumbs>
+      {uniqueEntries.map((e) => (
+        <Anchor key={e.label} renderRoot={(props) => <Link to={e.to} {...props} />}>
+          {e.label}
+        </Anchor>
+      ))}
+    </Breadcrumbs>
+  );
+}

apps/frontend/src/routes/__root.tsx

@@ -17,13 +17,18 @@
   Divider,
   FooterLogos,
 } from "@quassel/ui";
-import { createRootRouteWithContext, Link, Outlet, useNavigate } from "@tanstack/react-router";
+import { createRootRouteWithContext, Link, Outlet, RouteContext, useNavigate } from "@tanstack/react-router";
 import { version } from "../../package.json";
 import { $session } from "../stores/session";
 import { useStore } from "@nanostores/react";
 import { $layout } from "../stores/layout";
 import { $api } from "../stores/api";
-import { DefaultError, QueryClient, useQueryClient } from "@tanstack/react-query";
+import { DefaultError, useQueryClient } from "@tanstack/react-query";
+import { i18n } from "../stores/i18n";
+
+const messages = i18n("RootRoute", {
+  title: "Home",
+});
 
 function Root() {
   const n = useNavigate();
@@ -106,6 +111,7 @@
   );
 }
 
-export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+export const Route = createRootRouteWithContext<RouteContext>()({
+  beforeLoad: () => ({ title: messages.get().title }),
   component: Root,
 });

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

@@ -1,20 +1,32 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { createFileRoute, Outlet, useMatches } from "@tanstack/react-router";
 import { useEffect } from "react";
 import { $layout } from "../../stores/layout";
+import { i18n } from "../../stores/i18n";
+import { ContentShell } from "@quassel/ui";
+import { BreadcrumbsNavigation } from "../../components/Breadcrumbs";
+
+const messages = i18n("AdministrationRoute", {
+  title: "Administration",
+});
 
 function AdministrationLayout() {
   useEffect(() => {
     $layout.set({ admin: true });
     return () => $layout.set({ admin: false });
   }, []);
 
+  const matches = useMatches();
+  const title = matches[matches.length - 2]?.context.title;
+  const actions = matches[matches.length - 1]?.context.actions;
+
   return (
-    <>
+    <ContentShell title={title || messages.get().title} breadcrumbs={<BreadcrumbsNavigation />} actions={actions}>
       <Outlet />
-    </>
+    </ContentShell>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration")({
+  beforeLoad: () => ({ title: messages.get().title }),
   component: AdministrationLayout,
 });

apps/frontend/src/routes/_auth/administration/carers.tsx

@@ -1,17 +1,11 @@
-import { Paper, Title } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationCarers() {
-  return (
-    <>
-      <Title>Carers</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationCarersRoute", {
+  title: "Carers",
+});
 
 export const Route = createFileRoute("/_auth/administration/carers")({
-  component: AdministrationCarers,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });

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

@@ -12,50 +12,52 @@
   });
 
   return (
-    <>
-      <Button variant="default" renderRoot={(props) => <Link to="/administration/carers/new" {...props} />}>
-        New carer
-      </Button>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Id</Table.Th>
-            <Table.Th>Name</Table.Th>
-            <Table.Th>Color</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {carers.data?.map((c) => (
-            <Table.Tr key={c.id}>
-              <Table.Td>{c.id}</Table.Td>
-              <Table.Td>{c.name}</Table.Td>
-              <Table.Td>{c.color && <ColorSwatch color={c.color} />}</Table.Td>
-              <Table.Td>
-                <Button variant="default" renderRoot={(props) => <Link to={`/administration/carers/edit/${c.id}`} {...props} />}>
-                  Edit
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Id</Table.Th>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Color</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {carers.data?.map((c) => (
+          <Table.Tr key={c.id}>
+            <Table.Td>{c.id}</Table.Td>
+            <Table.Td>{c.name}</Table.Td>
+            <Table.Td>{c.color && <ColorSwatch color={c.color} />}</Table.Td>
+            <Table.Td>
+              <Button variant="default" renderRoot={(props) => <Link to={`/administration/carers/edit/${c.id}`} {...props} />}>
+                Edit
+              </Button>
+              {sessionStore.role === "ADMIN" && (
+                <Button
+                  variant="default"
+                  onClick={() =>
+                    deleteCarerMutation.mutate({
+                      params: { path: { id: c.id.toString() } },
+                    })
+                  }
+                >
+                  Delete
                 </Button>
-                {sessionStore.role === "ADMIN" && (
-                  <Button
-                    variant="default"
-                    onClick={() =>
-                      deleteCarerMutation.mutate({
-                        params: { path: { id: c.id.toString() } },
-                      })
-                    }
-                  >
-                    Delete
-                  </Button>
-                )}
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </>
+              )}
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration/carers/")({
+  beforeLoad: () => ({
+    actions: [
+      <Button key="new-carer" variant="default" renderRoot={(props) => <Link to="/administration/carers/new" {...props} />}>
+        New carer
+      </Button>,
+    ],
+  }),
   loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/carers")),
   component: () => <AdministrationCarersIndex />,
 });

apps/frontend/src/routes/_auth/administration/export.tsx

@@ -1,17 +1,11 @@
-import { Paper, Title } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationExport() {
-  return (
-    <>
-      <Title>Export</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationExportRoute", {
+  title: "Export",
+});
 
 export const Route = createFileRoute("/_auth/administration/export")({
-  component: AdministrationExport,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });

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

@@ -1,18 +1,61 @@
-import { Button } from "@quassel/ui";
+import { Button, Group, Radio, Select, Stack, useForm } from "@quassel/ui";
 import { createFileRoute } from "@tanstack/react-router";
 import { $api } from "../../../../stores/api";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+const messages = i18n("AdministrationExportIndexRoute", {
+  title: "Carers",
+  studyLabel: "Study",
+  studyPlaceholder: "Select a study",
+  formatLabel: "File format",
+  csvLabel: "Comma-separated values (CSV)",
+  sqlLabel: "Database export (SQL)",
+  formAction: "Download",
+});
+
+type FormValues = {
+  fileType: "csv" | "sql";
+  studyId?: string;
+};
 
 function AdministrationExportIndex() {
+  const t = useStore(messages);
+  const f = useForm<FormValues>({
+    mode: "uncontrolled",
+    initialValues: {
+      fileType: "csv",
+    },
+  });
+
+  const studies = useSuspenseQuery($api.queryOptions("get", "/studies"));
   const { isDownloading, downloadFile } = $api.useDownload("/export", "dump.sql");
   return (
-    <div>
-      <Button loading={isDownloading} onClick={() => downloadFile()}>
-        Download
-      </Button>
-    </div>
+    <form onSubmit={f.onSubmit(() => downloadFile())}>
+      <Stack>
+        <Select
+          label={t.studyLabel}
+          placeholder={t.studyPlaceholder}
+          data={studies.data.map((s) => ({ label: s.title, value: s.id.toString() }))}
+        />
+        <Radio.Group label={t.formatLabel} withAsterisk {...f.getInputProps("fileType")}>
+          <Group>
+            <Radio checked value="csv" label={t.csvLabel} />
+            <Radio value="sql" label={t.sqlLabel} />
+          </Group>
+        </Radio.Group>
+        <Button type="submit" loading={isDownloading}>
+          {t.formAction}
+        </Button>
+      </Stack>
+    </form>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration/export/")({
+  loader: ({ context: { queryClient } }) => {
+    queryClient.ensureQueryData($api.queryOptions("get", "/studies"));
+  },
   component: AdministrationExportIndex,
 });

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

@@ -1,10 +1,15 @@
-import { Title } from "@quassel/ui";
 import { createFileRoute } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-export const Route = createFileRoute("/_auth/administration/")({
-  component: Index,
+const messages = i18n("AdministrationDashboardRoute", {
+  title: "Dashboard",
 });
 
 function Index() {
-  return <Title>Welcome to the administration interface!</Title>;
+  return null;
 }
+
+export const Route = createFileRoute("/_auth/administration/")({
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Index,
+});

apps/frontend/src/routes/_auth/administration/languages.tsx

@@ -1,17 +1,11 @@
-import { Title, Paper } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationLanguages() {
-  return (
-    <>
-      <Title>Languages</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationLanguagesRoute", {
+  title: "Languages",
+});
 
 export const Route = createFileRoute("/_auth/administration/languages")({
-  component: AdministrationLanguages,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });

apps/frontend/src/routes/_auth/administration/languages/edit.$id.tsx

@@ -44,16 +44,14 @@
   }, [isSuccess, data]);
 
   return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Name" type="name" {...f.getInputProps("name")} />
-        <TextInput label="IETF BCP 47" type="text" {...f.getInputProps("ietfBcp47")} />
+    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+      <TextInput label="Name" type="name" {...f.getInputProps("name")} />
+      <TextInput label="IETF BCP 47" type="text" {...f.getInputProps("ietfBcp47")} />
 
-        <Button type="submit" fullWidth mt="xl" loading={editCarerMutation.isPending}>
-          Change
-        </Button>
-      </form>
-    </>
+      <Button type="submit" fullWidth mt="xl" loading={editCarerMutation.isPending}>
+        Change
+      </Button>
+    </form>
   );
 }