feat: Update profile table

visualize-admin · Oct 10, 2023 · 6b5410f · 6b5410f
1 parent 47fb8ad
commit 6b5410f
Showing 1 changed file with 54 additions and 20 deletions.
diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Link,
   Table,
   TableBody,
   TableCell,
@@ -10,7 +11,10 @@ import {
 import NextLink from "next/link";
 
 import { ParsedConfig } from "@/db/config";
+import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
+import { Icon } from "@/icons";
 import { useRootStyles } from "@/login/utils";
+import { useLocale } from "@/src";
 
 type ProfileVisualizationsTableProps = {
   userConfigs: ParsedConfig[];
@@ -28,28 +32,15 @@ export const ProfileVisualizationsTable = (
       {userConfigs.length > 0 ? (
         <Table>
           <TableHead>
-            <TableCell>Type</TableCell>
-            <TableCell>Title</TableCell>
-            <TableCell>Link</TableCell>
+            <TableCell>Chart type</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Dataset</TableCell>
+            <TableCell>Actions</TableCell>
           </TableHead>
           <TableBody>
-            {userConfigs.map((d) => {
-              return (
-                <TableRow key={d.id}>
-                  <TableCell>
-                    {d.data.chartConfigs.length > 1
-                      ? "multi"
-                      : d.data.chartConfigs[0].chartType}
-                  </TableCell>
-                  <TableCell>{d.data.meta.title.en}</TableCell>
-                  <TableCell>
-                    <NextLink href={`/v/${d.key}`} legacyBehavior>
-                      See chart
-                    </NextLink>
-                  </TableCell>
-                </TableRow>
-              );
-            })}
+            {userConfigs.map((d) => (
+              <Row key={d.key} config={d} />
+            ))}
           </TableBody>
         </Table>
       ) : (
@@ -64,3 +55,46 @@ export const ProfileVisualizationsTable = (
     </Box>
   );
 };
+
+type RowProps = {
+  config: ParsedConfig;
+};
+
+const Row = (props: RowProps) => {
+  const { config } = props;
+  const locale = useLocale();
+  const [{ data }] = useDataCubeMetadataQuery({
+    variables: {
+      iri: config.data.dataSet,
+      sourceType: config.data.dataSource.type,
+      sourceUrl: config.data.dataSource.url,
+      locale,
+    },
+  });
+
+  return (
+    <TableRow>
+      <TableCell>
+        {config.data.chartConfigs.length > 1
+          ? "multi"
+          : config.data.chartConfigs[0].chartType}
+      </TableCell>
+      <TableCell>{config.data.meta.title[locale]}</TableCell>
+      <TableCell>{data?.dataCubeByIri?.title ?? ""}</TableCell>
+      <TableCell>
+        <Box sx={{ display: "flex", gap: 2 }}>
+          <NextLink href={`/v/${config.key}`} passHref legacyBehavior>
+            <Link target="_blank">
+              <Icon name="linkExternal" size={14} />
+            </Link>
+          </NextLink>
+          <NextLink href={`/create/${config.key}`} passHref legacyBehavior>
+            <Link target="_blank">
+              <Icon name="edit" size={14} />
+            </Link>
+          </NextLink>
+        </Box>
+      </TableCell>
+    </TableRow>
+  );
+};