refactor(admin): Use Declarative UI (Menu Component)

pages/admin/admin.ts

@@ -1,18 +1,13 @@
-import { WebGen, MaterialIcons, Box, Custom, Vertical, View, ViewClass, loadingWheel } from "webgen/mod.ts";
-import { Redirect, RegisterAuthRefresh, activeUser, permCheck, renewAccessTokenIfNeeded } from "../manager/helper.ts";
+import { WebGen, MaterialIcons, Vertical, View } from "webgen/mod.ts";
+import { Redirect, RegisterAuthRefresh, permCheck, renewAccessTokenIfNeeded } from "../manager/helper.ts";
 import { changeThemeColor } from "../manager/misc/common.ts";
 import { DynaNavigation } from "../../components/nav.ts";
-import { ActionBar } from "../manager/misc/actionbar.ts";
-import { ViewState } from "../admin/types.ts";
-import { ReviewPanel } from "./reviews.ts";
 
 import '../../assets/css/main.css';
 import '../../assets/css/admin.css';
-import { loadPayouts, loadReviews, loadUsers } from "./helper.ts";
-import { UserPanel } from "./users.ts";
-import { PayoutPanel } from "./payouts.ts";
-import { OverviewPanel } from "./overview.ts";
-import { getListCount } from "../shared/listCount.ts";
+import { adminMenu } from "./views/menu.ts";
+import { refreshState } from "./loading.ts";
+import { state } from "./state.ts";
 Redirect();
 await RegisterAuthRefresh();
 
@@ -30,50 +25,8 @@ WebGen({
     }
 });
 
-const view: ViewClass<ViewState> = View<ViewState>(({ state, update }) => Vertical(
-    ActionBar(`Hi ${activeUser.username}! 👋`, [
-        {
-            title: "Overview",
-            selected: state.type == "overview",
-            onclick: () => update({ type: "overview" }),
-        },
-        {
-            title: `Reviews ${getListCount(state.reviews)}`,
-            selected: state.type == "reviews",
-            onclick: () => update({ type: "reviews" }),
-        },
-        {
-            title: `Users ${getListCount(state.users)}`,
-            selected: state.type == "users",
-            hide: !state.users,
-            onclick: () => update({ type: "users" }),
-        },
-        {
-            title: `Payouts (${state.payouts?.length})`,
-            selected: state.type == "payouts",
-            hide: !state.payouts,
-            onclick: () => update({ type: "payouts" }),
-        }
-    ]),
-    Box((() => {
-        if (state.reviews && state.reviews.length != 0 && state.type == "reviews")
-            return ReviewPanel(() => view, state);
-        if (state.users && state.users.length != 0 && state.type == "users")
-            return UserPanel(state);
-        if (state.type == "payouts")
-            return PayoutPanel(state);
-        if (state.type == "overview")
-            return OverviewPanel(state);
-        return Custom(loadingWheel() as Element as HTMLElement);
-    })()).addClass("loading"),
-))
-    .change(({ update }) => {
-        update({ type: "overview" });
-    });
+View(() => Vertical(...DynaNavigation("Admin"), adminMenu())).appendOn(document.body);
 
-View(() => Vertical(...DynaNavigation("Admin"), view.asComponent())).appendOn(document.body);
-renewAccessTokenIfNeeded().then(() => {
-    loadReviews(view);
-    loadUsers(view);
-    loadPayouts(view);
-});
+renewAccessTokenIfNeeded()
+    .then(() => refreshState())
+    .then(() => state.loaded = true);

pages/admin/helper.ts

@@ -1,28 +1,5 @@
-import { ViewClass, Component, Custom, PlainText, ReCache, Image, Box } from "webgen/mod.ts";
-import { API } from "../manager/RESTSpec.ts";
-import { ProfileData, permCheck, stringToColour } from "../manager/helper.ts";
-import { ViewState } from "./types.ts";
-
-export async function loadReviews(view: ViewClass<ViewState>) {
-    if (permCheck("/bbn/manage/drops/review")) {
-        const list = await API.music(API.getToken()).reviews.get();
-        view.viewOptions().update({ reviews: list });
-    }
-}
-
-export async function loadUsers(view: ViewClass<ViewState>) {
-    if (permCheck("/hmsys/user")) {
-        const list = await API.user(API.getToken()).list.get();
-        view.viewOptions().update({ users: list });
-    }
-}
-
-export async function loadPayouts(view: ViewClass<ViewState>) {
-    if (permCheck("/bbn/manage/drops/review")) {
-        const list = await API.music(API.getToken()).payouts.get();
-        view.viewOptions().update({ payouts: list });
-    }
-}
+import { Component, Custom, PlainText, ReCache, Image, Box } from "webgen/mod.ts";
+import { ProfileData, stringToColour } from "../manager/helper.ts";
 
 function ProfilePicture(component: Component, name: string) {
     const ele = component.draw();

pages/admin/loading.ts

@@ -0,0 +1,58 @@
+import { State, UploadFilesDialog } from "webgen/mod.ts";
+import { API } from "../manager/RESTSpec.ts";
+import { state } from "./state.ts";
+import { StreamingUploadHandler } from "../manager/upload.ts";
+import { delay } from "https://deno.land/std@0.182.0/async/delay.ts";
+
+export async function refreshState() {
+    state.reviews = State(await API.music(API.getToken()).reviews.get());
+    state.users = State(await API.user(API.getToken()).list.get());
+    state.payouts = State(await API.music(API.getToken()).payouts.get());
+}
+
+
+export function upload(type: "isrc" | "manual") {
+    if (type == "manual") {
+        UploadFilesDialog((list) => {
+            console.log(list);
+            StreamingUploadHandler(`music/payout/upload`, {
+                failure: () => {
+                    //state.loading = false;
+                    alert("Your Upload has failed. Please try a different file or try again later");
+                },
+                uploadDone: () => {
+                    console.log("Upload done");
+                },
+                credentials: () => API.getToken(),
+                backendResponse: (id) => {
+                    console.log(id);
+                },
+                onUploadTick: async (percentage) => {
+                    console.log(percentage);
+                    await delay(2);
+                }
+            }, list[ 0 ].file);
+        }, '.xlsx');
+    } else {
+        UploadFilesDialog((list) => {
+            console.log(list);
+            StreamingUploadHandler(`music/payout/isrcsync`, {
+                failure: () => {
+                    //state.loading = false;
+                    alert("Your Upload has failed. Please try a different file or try again later");
+                },
+                uploadDone: () => {
+                    console.log("Upload done");
+                },
+                credentials: () => API.getToken(),
+                backendResponse: (id) => {
+                    console.log(id);
+                },
+                onUploadTick: async (percentage) => {
+                    console.log(percentage);
+                    await delay(2);
+                }
+            }, list[ 0 ].file);
+        }, '.xlsx');
+    }
+}