Merge pull request #292 from UW-Macrostrat/groups-page

Groups Page

Author: davenquinn

pages/columns/+Page.ts

@@ -1,6 +1,6 @@
 import { ContentPage } from "~/layouts";
 import {
-  AssistantLinks,
+  Link,
   DevLinkButton,
   PageBreadcrumbs,
   StickyHeader,
@@ -36,6 +36,8 @@ function ColumnListPage({ title = "Columns", linkPrefix = "/" }) {
   const [columnInput, setColumnInput] = useState("");
   const shouldFilter = columnInput.length >= 3;
 
+  console.log("columnGroups", columnGroups);
+
   const filteredGroups = shouldFilter
     ? columnGroups?.filter((group) => {
         const filteredColumns = group.columns.filter((col) => {
@@ -133,10 +135,12 @@ function ColumnGroup({ data, linkPrefix, columnInput, shouldFilter }) {
     { className: "column-group", onClick: () => setIsOpen(!isOpen) },
     [
       h("div.column-group-header", [
-        h(
-          "h2.column-group-name",
-          name + " (Group #" + filteredColumns[0].col_group_id + ")"
-        ),
+        h(Link, { href: `/columns/groups/${data.id}`, target: "_blank" }, [
+          h(
+            "h2.column-group-name",
+            name + " (Group #" + filteredColumns[0].col_group_id + ")"
+          ),
+        ]),
       ]),
       h("div.column-list", [
         h("table.column-table", [

pages/columns/groups/+Page.client.ts

@@ -0,0 +1,8 @@
+import h from "@macrostrat/hyper";
+import { Page as ColumnListPage } from "#/columns/+Page.ts";
+
+export function Page() {
+  return h(ColumnListPage, {
+    title: "Groups",
+  });
+}

pages/columns/groups/+Page.ts

@@ -0,0 +1,27 @@
+import { fetchAPIData } from "~/_utils/fetch-helpers";
+
+export async function data() {
+  const res = await fetchAPIData(`/columns`, { all: true });
+
+  const grouped = {};
+
+  for (const item of res) {
+    const key = item.col_group_id;
+
+    if (!grouped[key]) {
+      grouped[key] = {
+        name: item.col_group,
+        id: item.col_group_id,
+        columns: [],
+      };
+    }
+
+    grouped[key].columns.push(item);
+  }
+
+  const columnGroups = Object.values(grouped);
+
+  return {
+    columnGroups,
+  };
+}

pages/columns/groups/+data.ts

@@ -0,0 +1,8 @@
+import { usePageContext } from "vike-react/usePageContext";
+import { IndividualPage } from "../../../lex/index";
+
+export function Page() {
+  const pageContext = usePageContext();
+  const id = parseInt(pageContext.urlParsed.pathname.split("/")[3]);
+  return IndividualPage(id, "col_group_id", "groups");
+}

pages/columns/groups/@group/+Page.client.ts

@@ -64,7 +64,7 @@ a:hover
 
 .text
     text-align: right
-    position:absolute
+    position: absolute
     padding: 5px 20px
     z-index: 100
     background-color: rgba(0, 0, 0, 0.2)
@@ -78,7 +78,7 @@ a:hover
         color: white
 
 .back-img
-    position:absolute
+    position: absolute
     z-index: 0
     height: 30vh
     object-fit: cover

pages/columns/groups/main.module.scss

@@ -26,7 +26,7 @@ p
 
 .donate-title
   a 
-    color:white
+    color: white
   a:hover
     text-decoration: none
 
@@ -64,14 +64,14 @@ p
     text-decoration: none
 
 .donate-img
-  position:absolute
+  position: absolute
   z-index: 1
   height: 80vh
   width: 100%
   object-fit: cover
 
 .text
-  position:absolute
+  position: absolute
   z-index: 100
   padding: 0 20px
 

pages/dev/lexicon/main.styl

@@ -67,6 +67,8 @@ export function IndividualPage(id, type, header) {
       ? "lithology"
       : header === "econs"
       ? "economic"
+      : header === "groups"
+      ? "group"
       : header === "strat_name_concepts"
       ? "strat_name_concept"
       : "strat_name";

pages/donate/main.module.sass

@@ -114,6 +114,18 @@ const columnsSubtree = {
         ]);
       },
     },
+    {
+      slug: "groups",
+      name: "Groups",
+      children: [
+        {
+          param: "@id",
+          name(urlPart, ctx) {
+            return h("code", ctx.pageProps?.group?.group_id ?? urlPart);
+          },
+        },
+      ],
+    },
   ],
 };