Add Navigation Buttons

MGP6775 · Nov 24, 2024 · 9f3dc08 · 9f3dc08
1 parent f8b5e6c
commit 9f3dc08
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 41 deletions.
diff --git a/pages/music/main.ts b/pages/music/main.ts
@@ -6,13 +6,15 @@ import "./pages/unpublishedDrops.ts";
 
 /// <reference types="npm:@types/dom-navigation/index.d.ts" />
 
-import { activeUser, RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts";
+import { RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts";
+import { Navigation } from "shared/navigation.ts";
 import { API, stupidErrorAlert } from "shared/restSpec.ts";
-import { activeRoute, appendBody, Box, Content, createRoute, css, DialogContainer, FullWidthSection, Grid, Label, menuList, PageRouter, PrimaryButton, ref, SecondaryButton, StartRouting, WebGenTheme } from "webgen/mod.ts";
+import { activeRoute, appendBody, Box, Content, createRoute, css, DialogContainer, FullWidthSection, PrimaryButton, StartRouting, WebGenTheme } from "webgen/mod.ts";
 import "../../assets/css/main.css";
 import "../../assets/css/music.css";
 import { DynaNavigation } from "../../components/nav.ts";
 import { DropType } from "../../spec/music.ts";
+import { artistsPage } from "./pages/artists.ts";
 import { draftsDropsPage } from "./pages/draftDrops.ts";
 import { publishedDrops } from "./pages/publishedDrops.ts";
 
@@ -34,44 +36,6 @@ createRoute({
     },
 });
 
-export function Navigation() {
-    return Box(
-        Content(
-            Grid(
-                Label(ref`Hi ${activeUser.username} 👋`)
-                    .setFontWeight("bold")
-                    .setTextSize("4xl"),
-                Grid(
-                    menuList
-                        .map((item) =>
-                            item
-                                .filter((item) => item.route.entry.patternUrl.startsWith("/c/music?list="))
-                                .map((item) =>
-                                    Box(activeRoute.map((activeRoute) =>
-                                        (activeRoute == item.route.entry ? PrimaryButton(item.label) : SecondaryButton(item.label))
-                                            .onPromiseClick(async () => {
-                                                await window.navigation.navigate(item.route.entry.patternUrl).finished;
-                                            })
-                                    ))
-                                )
-                        ),
-                )
-                    .setGap(".8rem")
-                    .setAutoFlow("column")
-                    .setAutoColumn("max-content"),
-            )
-                .setGap("1rem")
-                .setMargin("4rem 0 1rem"),
-        )
-            .addStyle(css`
-                :host {
-                    --wg-button-border-radius: var(--wg-radius-large);
-                }
-            `),
-        PageRouter,
-    );
-}
-
 appendBody(
     WebGenTheme(
         DialogContainer(sheetStack.visible(), sheetStack),
@@ -80,7 +44,23 @@ appendBody(
                 DynaNavigation("Music"),
             ),
         ),
-        Navigation(),
+        Navigation(
+            Box(
+                activeRoute.map((route) => route === artistsPage.route.entry)
+                    .map((isArtistsRoute) =>
+                        isArtistsRoute
+                            ? PrimaryButton("Create new Artist")
+                                .onClick(() => {
+                                    // createArtistSheet().then(async () => menuState.artists = await API.music.artists.list().then(stupidErrorAlert))
+                                })
+                            : PrimaryButton("Create new Drop")
+                                .onPromiseClick(async () => {
+                                    const { id } = await API.music.drops.create().then(stupidErrorAlert);
+                                    location.href = `/c/music/new-drop?id=${id}`;
+                                })
+                    ),
+            ),
+        ),
     )
         .addStyle(css`
             :host {

diff --git a/pages/music/pages/draftDrops.ts b/pages/music/pages/draftDrops.ts
@@ -9,6 +9,7 @@ const source = data.map((data) => data === "loading" ? [] : data);
 export const draftsDropsPage = createPage(
     {
         label: "Drafts",
+        weight: 0,
         route: createRoute({
             path: "/c/music?list=drafts",
             events: {

diff --git a/pages/shared/navigation.ts b/pages/shared/navigation.ts
@@ -1,3 +1,55 @@
+import { activeUser } from "shared/helper.ts";
+import { activeRoute, Box, Component, Content, css, Empty, Grid, Label, menuList, PageRouter, PrimaryButton, ref, SecondaryButton } from "webgen/mod.ts";
+
+export function Navigation(actions?: Component) {
+    return Box(
+        Content(
+            Grid(
+                Grid(
+                    Label(ref`Hi ${activeUser.username} 👋`)
+                        .setFontWeight("bold")
+                        .setTextSize("4xl"),
+                    Grid(
+                        menuList
+                            .map((item) =>
+                                item
+                                    .filter((item) => item.weight !== undefined)
+                                    .map((item) =>
+                                        Box(
+                                            activeRoute
+                                                .map((activeRoute) => activeRoute == item.route.entry)
+                                                .map((active) =>
+                                                    (active ? PrimaryButton(item.label) : SecondaryButton(item.label))
+                                                        .onPromiseClick(async () => {
+                                                            await window.navigation.navigate(item.route.entry.patternUrl).finished;
+                                                        })
+                                                ),
+                                        )
+                                    )
+                            ),
+                    )
+                        .setGap(".8rem")
+                        .setAutoFlow("column")
+                        .setAutoColumn("max-content")
+                        .setPadding("7px 0")
+                        .setCssStyle("overflow", "auto"),
+                )
+                    .setGap("1rem")
+                    .setMargin("4rem 0 1rem"),
+                actions ?? Empty(),
+            )
+                .setTemplateColumns("auto max-content")
+                .setAlignItems("center"),
+        )
+            .addStyle(css`
+                :host {
+                    --wg-button-border-radius: var(--wg-radius-large);
+                }
+            `),
+        PageRouter,
+    );
+}
+
 // import { assert } from "@std/assert";
 // import { alwaysRef, asRef, Box, Component, Empty, Entry, Grid, isMobile, isRef, Label, Refable, Reference } from "webgen/mod.ts";
 // import "./navigation.css";