Table updates

package.json

@@ -13,8 +13,8 @@
     "bootstrap": "yarn",
     "dev": "yarn run server:dev",
     "build": "vite build",
-    "server": "node --env-file=.env ./server/index.js",
-    "server:dev": "yarn run server",
+    "server": "node ./server/index.js",
+    "server:dev": "node --env-file=.env ./server/index.js",
     "server:prod": "NODE_ENV=production npm run server"
   },
   "workspaces": [

packages/settings/index.ts

@@ -27,6 +27,8 @@ export const mapboxAccessToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 export const apiV2Prefix =
   import.meta.env.VITE_MACROSTRAT_API_V2 ?? apiDomain + "/api/v2";
 
+export const ingestPrefix = import.meta.env.VITE_MACROSTRAT_INGEST_API;
+
 export const mapPagePrefix = "/map";
 
 export const routerBasename = import.meta.env.BASE_URL + "map";

src/pages/maps/+Page.ts

@@ -1,12 +1,18 @@
 import hyper from "@macrostrat/hyper";
+
+// Styles
+
+import "../../styles/padding.css";
+
 // Page for a list of maps
 import styles from "./main.module.sass";
 import { tempImageIndex, s3Address } from "./raster-images";
-import { Icon, IconSize } from "@blueprintjs/core";
+import { Icon, IconSize, Navbar, AnchorButton, Tooltip, Card } from "@blueprintjs/core";
 
 const h = hyper.styled(styles);
 
-export function Page({ sources }) {
+export function Page({ sources, user, url, ingest_api }) {
+
   const sources1 = sources.map((source) => {
     const { source_id } = source;
     const image = tempImageIndex[source_id];
@@ -16,11 +22,71 @@ export function Page({ sources }) {
   });
 
   return h("div", [
-    h("h1", "Maps"),
-    h(
-      "ul",
-      sources1.map((d) => h(SourceItem, { source: d, key: d.source_id }))
-    ),
+    h(Navbar, {}, [
+      h(Navbar.Group, { align: "left" }, [
+        h(Navbar.Heading, "Source Maps")
+      ]),
+      h(Navbar.Group, { align: "right" }, [
+        h(Tooltip, { content: user == undefined ? "Log In" : "Logged In", }, h(AnchorButton, {
+          icon: user == undefined ? "log-in" : "user",
+          style: {
+            margin: "0 0.5em",
+            borderRadius: "50%",
+            backgroundColor: user == undefined ? "#fdeb88" : "#90d090",
+          },
+          href: `${ingest_api}/security/login?return_url=${url}`,
+        })),
+      ])
+    ]),
+    h("div", {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        flexDirection: "column"
+      }
+    }, [
+      ...sources1.map((d) => {
+        return h("div", {style: {maxWidth: "1000px", minWidth: "50%", margin: "auto"}}, [h(SourceCard, { source: d, key: d.source_id, user: user })])
+      })
+    ])
+  ]);
+}
+
+interface Source {
+  source_id: number;
+  name: string;
+  scale: number;
+  rasterURL?: string;
+}
+
+const SourceCard = ({source, user}: {source: Source, user: any | undefined}) => {
+
+  const href = `/maps/${source.source_id}`;
+  const edit_href = `/maps/${source.source_id}/edit`;
+
+  return h(Card, {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      padding: "0.5em",
+      margin: "0.5em",
+      borderRadius: "0.5em",
+      backgroundColor: "#f0f0f0"
+    }
+  }, [
+    h("div", {}, [
+      h("h4", {style: {margin: "0px"}}, source.source_id + " " + source.name),
+      h("h6", {style: {margin: "0px"}}, source.scale),
+      h.if(source.rasterURL != null)([" ", h("span.raster", {style: {marginTop: ".5rem"}}, "Raster")]),
+    ]),
+    h("div", {}, [
+      h(AnchorButton, { href: href, icon: "map" }, "View"),
+      h.if(user !== undefined)([
+        "",
+        h(AnchorButton, { href: edit_href, icon: "edit" }, "Edit")
+      ])
+    ]),
   ]);
 }
 

src/pages/maps/+onBeforeRender.ts

@@ -1,19 +1,29 @@
-import { apiV2Prefix } from "@macrostrat-web/settings";
+import { ingestPrefix } from "@macrostrat-web/settings";
 import fetch from "node-fetch";
 
-const apiAddress = apiV2Prefix + "/defs/sources";
+const apiAddress = ingestPrefix + "/sources";
 
 export async function onBeforeRender(pageContext) {
   // `.page.server.js` files always run in Node.js; we could use SQL/ORM queries here.
-  const response = await fetch(apiAddress + "?format=json");
-  const res = await response.json();
-  let sources = res.success.data;
+  const url = new URL(apiAddress);
+  url.searchParams.set("page_size", "9999");
+
+
+
+  const response = await fetch(url.toString());
+  const sources = await response.json();
+
   sources.sort((a, b) => a.source_id - b.source_id);
 
-  const pageProps = { sources };
+  const pageProps = {
+    sources: sources,
+    user: pageContext.user,
+    url: pageContext.url,
+    ingest_api: ingestPrefix
+  };
   return {
     pageContext: {
-      pageProps,
+      pageProps
     },
   };
 }

src/pages/maps/@id/edit/+Page.ts

@@ -1,34 +1,6 @@
-import { apiV2Prefix } from "@macrostrat-web/settings";
 import h from "@macrostrat/hyper";
-import { PageContextBuiltInServer } from "vike/types";
 import { ClientOnly } from "~/renderer/client-only";
 
-const apiAddress = apiV2Prefix + "/defs/sources";
-
-export async function onBeforeRender(pageContext: PageContextBuiltInServer) {
-  const { id } = pageContext.routeParams;
-
-  const params = new URLSearchParams({
-    format: "geojson",
-    source_id: id,
-  });
-  const response = await fetch(apiAddress + "?" + params);
-  const data: any = await response.json();
-  const map = data?.success?.data?.features[0];
-
-  return {
-    pageContext: {
-      pageProps: {
-        id,
-        map,
-      },
-      documentProps: {
-        // The page's <title>
-        title: map.properties.name,
-      },
-    },
-  };
-}
 
 const EditInterface = () => import("./edit-page");
 

src/pages/maps/@id/edit/+onBeforeRender.ts

@@ -0,0 +1,29 @@
+import { apiV2Prefix } from "@macrostrat-web/settings";
+import { PageContextBuiltInServer } from "vike/types";
+
+const apiAddress = apiV2Prefix + "/defs/sources/";
+
+export async function onBeforeRender(pageContext: PageContextBuiltInServer) {
+  const { id } = pageContext.routeParams;
+
+  const params = new URLSearchParams({
+    format: "geojson",
+    source_id: id,
+  });
+  const response = await fetch(apiAddress + "?" + params);
+  const data: any = await response.json();
+  const map = data?.success?.data?.features[0];
+
+  return {
+    pageContext: {
+      pageProps: {
+        id,
+        map,
+      },
+      documentProps: {
+        // The page's <title>
+        title: map.properties.name,
+      },
+    },
+  };
+}

src/pages/maps/@id/edit/+route.ts

@@ -1 +1,21 @@
 export default "/maps/@id/edit/*";
+
+import { render, redirect } from 'vike/abort'
+
+export const guard = (pageContext) => {
+  const { user } = pageContext
+
+  if (user === undefined) {
+    // Render the login page while preserving the URL. (This is novel technique
+    // which we explain down below.)
+    throw redirect(`${import.meta.env.VITE_MACROSTRAT_INGEST_API}/security/login?return_url=${pageContext.url}`)
+    /* The more traditional way, redirect the user:
+    throw redirect('/login')
+    */
+  }
+  if (!user.groups.includes(1)) {
+    // Render the error page and show message to the user
+    return render(403, 'Only admins are allowed to access this page.')
+  }
+}
+

src/pages/maps/@id/edit/components/cell/editable-cell.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { forwardRef, useEffect } from "react";
 
-import {EditableCell2, EditableCell2Props} from "@blueprintjs/table";
+import {Cell, EditableCell2Props} from "@blueprintjs/table";
 
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
@@ -14,7 +14,51 @@ interface EditableCell extends EditableCell2Props {
   rowIndex: number
 }
 
-export const EditableCell = ({...props}: EditableCell2Props) => {
+export const EditableCell = forwardRef((props: EditableCell2Props, ref) => {
 
-  return h(EditableCell2, {...props});
-}
+  const [value, setValue] = React.useState(props.value);
+
+  useEffect(() => {
+    setValue(props.value)
+  }, [props.value])
+
+  return h(Cell,
+    {...props,
+      style: {...props.style, padding: 0},
+      truncated: false
+    },
+    [
+      h("input", {
+        ref: ref,
+        className: "editable-cell",
+        style: {
+          width: (value?.length ?? 2) + "ch"
+        },
+        value: value || "",
+        onChange: (e) => {
+          setValue(e.target.value)
+          e.target.style.width = (e.target.value.length + 8) + "ch"
+          console.log(e.target.value.length)
+        },
+        onClick: (e) => {
+          e.target.select()
+        },
+        onFocus: (e) => {
+          console.log("Focus")
+          e.target.select()
+          e.target.select()
+          e.target.select()
+          e.target.select()
+          e.preventDefault()
+          e.stopPropagation()
+
+        },
+        onBlur: (e) => {
+          if(value != props.value) {
+            props.onConfirm(value)
+          }
+        }
+      }, [])
+    ]
+  )
+})

src/pages/maps/@id/edit/components/cell/long-text.ts

@@ -0,0 +1,79 @@
+import {Button, MenuItem} from "@blueprintjs/core";
+import { Popover2 } from "@blueprintjs/popover2";
+import { Select2, ItemRenderer, ItemPredicate } from "@blueprintjs/select";
+import {EditableCell2Props, EditableCell2, Cell} from "@blueprintjs/table";
+import React, {useEffect, useMemo, forwardRef} from "react";
+
+// @ts-ignore
+import hyper from "@macrostrat/hyper";
+
+import "@blueprintjs/core/lib/css/blueprint.css"
+import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
+import styles from "../../edit-table.module.sass";
+
+
+const h = hyper.styled(styles);
+
+const LongTextCell = forwardRef((props: EditableCell2Props, forwardRef) => {
+
+  const {value, onConfirm} = props;
+
+  const [localValue, setLocalValue] = React.useState(value == null ? "" : value.toString());
+
+  useEffect(() => {
+    setLocalValue(value == null ? "" : value.toString())
+  }, [value])
+
+  return h(Cell, {
+    ...props,
+    style: {...props.style, padding: 0},
+  }, [
+    h(Popover2,
+      {
+        interactionKind: "click",
+        placement: "bottom-start",
+        minimal: true,
+        content: h("div", {style: {padding: ""}}, [
+          h("textarea", {
+            autoFocus: true,
+            onFocus: (e) => {
+              e.target.select()
+            },
+            rows: (localValue.match(/\n/g) || []).length + 2,
+            style: {width: "100%", height: "100%", border: "0", padding: "5px", marginBottom: "-5px"},
+            value: localValue,
+            onWheelCapture: (event) => event.stopPropagation(),
+            onKeyDown: (e) => {
+              if(e.key == "Enter"){
+                setLocalValue(localValue + "\n")
+              }
+            },
+            onChange: (e) => {
+              setLocalValue(e.target.value)
+              e.preventDefault()
+            }
+          })
+        ]),
+        onClose: () => {
+          onConfirm(localValue)
+        },
+        renderTarget: ({isOpen, ref, ...targetProps }) => h(Button, {
+          ...targetProps,
+          onDoubleClick: (e) => {targetProps.onClick(e); e.stopPropagation()},
+          onClick: (e) => {e.stopPropagation()},
+          elementRef: (el) => {ref(el); forwardRef(el);},
+          style: {backgroundColor: "white", fontSize: "12px", minHeight: "0px", padding: "1.7px 10px", boxShadow: "none"},
+          fill: true,
+          alignText: "left",
+          text: h("span", {style: {overflow: "hidden", textOverflow: "ellipses"}}, localValue),
+          className: "update-input-group",
+          placeholder: "Select A Filter"
+        }, [])
+      }
+
+    )
+  ])
+})
+
+
+export default LongTextCell;