UI/Header: move header into subpages & fix general layout
This commit is contained in:
Johannes Kirschbauer
@@ -1,33 +1,13 @@
|
||||
import { createQuery } from "@tanstack/solid-query";
|
||||
import { activeURI } from "../App";
|
||||
import { callApi } from "../api";
|
||||
import { Accessor, Show } from "solid-js";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
|
||||
import Icon from "../components/icon";
|
||||
import { Button } from "../components/button";
|
||||
import { JSX } from "solid-js";
|
||||
import { Typography } from "../components/Typography";
|
||||
|
||||
interface HeaderProps {
|
||||
clan_dir: Accessor<string | null>;
|
||||
title: string;
|
||||
toolbar?: JSX.Element;
|
||||
}
|
||||
export const Header = (props: HeaderProps) => {
|
||||
const { clan_dir } = props;
|
||||
const navigate = useNavigate();
|
||||
|
||||
const query = createQuery(() => ({
|
||||
queryKey: [clan_dir(), "meta"],
|
||||
queryFn: async () => {
|
||||
const curr = clan_dir();
|
||||
if (curr) {
|
||||
const result = await callApi("show_clan_meta", { uri: curr });
|
||||
if (result.status === "error") throw new Error("Failed to fetch data");
|
||||
return result.data;
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
return (
|
||||
<div class="navbar">
|
||||
<div class="navbar border-b px-6 py-4 border-def-3">
|
||||
<div class="flex-none">
|
||||
<span class="tooltip tooltip-bottom lg:hidden" data-tip="Menu">
|
||||
<label
|
||||
@@ -38,19 +18,13 @@ export const Header = (props: HeaderProps) => {
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex-none">
|
||||
<Show when={activeURI()}>
|
||||
{(d) => (
|
||||
<span class="tooltip tooltip-bottom" data-tip="Clan Settings">
|
||||
<Button
|
||||
variant="light"
|
||||
onClick={() => navigate(`/clans/${window.btoa(d())}`)}
|
||||
startIcon={<Icon icon="Settings" />}
|
||||
></Button>
|
||||
</span>
|
||||
)}
|
||||
</Show>
|
||||
<div class="flex-1">
|
||||
<Typography hierarchy="title" size="m" weight="medium">
|
||||
{props.title}
|
||||
</Typography>
|
||||
</div>
|
||||
<div class="flex-none items-center justify-center gap-3">
|
||||
{props.toolbar}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
import { Component, createEffect, Show } from "solid-js";
|
||||
import { Header } from "./header";
|
||||
import { Component, createEffect } from "solid-js";
|
||||
import { Sidebar } from "@/src/components/Sidebar";
|
||||
import { activeURI, clanList } from "../App";
|
||||
import { clanList } from "../App";
|
||||
import { RouteSectionProps, useNavigate } from "@solidjs/router";
|
||||
|
||||
export const Layout: Component<RouteSectionProps> = (props) => {
|
||||
const navigate = useNavigate();
|
||||
createEffect(() => {
|
||||
console.log("Layout props", props.location);
|
||||
console.log(
|
||||
"empty ClanList, redirect to welcome page",
|
||||
clanList().length === 0,
|
||||
clanList().length === 0
|
||||
);
|
||||
if (clanList().length === 0) {
|
||||
navigate("/welcome");
|
||||
@@ -25,10 +23,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
|
||||
type="checkbox"
|
||||
class="drawer-toggle hidden"
|
||||
/>
|
||||
<div class="drawer-content overflow-x-hidden overflow-y-scroll p-2">
|
||||
<Show when={props.location.pathname !== "welcome"}>
|
||||
<Header clan_dir={activeURI} />
|
||||
</Show>
|
||||
<div class="drawer-content my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
|
||||
{props.children}
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -14,6 +14,7 @@ import { createQuery, useQueryClient } from "@tanstack/solid-query";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { Button } from "@/src/components/button";
|
||||
import Icon from "@/src/components/icon";
|
||||
import { Header } from "@/src/layout/header";
|
||||
|
||||
type MachinesModel = Extract<
|
||||
OperationResponse<"list_inventory_machines">,
|
||||
@@ -65,96 +66,124 @@ export const MachineListView: Component = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="tooltip tooltip-bottom" data-tip="Open Clan"></div>
|
||||
<div class="tooltip tooltip-bottom" data-tip="Refresh">
|
||||
<Button
|
||||
variant="light"
|
||||
onClick={() => refresh()}
|
||||
startIcon={<Icon icon="Reload" />}
|
||||
></Button>
|
||||
</div>
|
||||
<>
|
||||
<Header
|
||||
title="Your Machines"
|
||||
toolbar={
|
||||
<>
|
||||
<span class="tooltip tooltip-bottom" data-tip="Reload">
|
||||
<Button
|
||||
variant="light"
|
||||
size="s"
|
||||
onClick={() => refresh()}
|
||||
startIcon={<Icon icon="Reload" />}
|
||||
></Button>
|
||||
</span>
|
||||
|
||||
<div class="tooltip tooltip-bottom" data-tip="Create machine">
|
||||
<Button
|
||||
variant="light"
|
||||
onClick={() => navigate("create")}
|
||||
startIcon={<Icon icon="Plus" />}
|
||||
></Button>
|
||||
</div>
|
||||
{/* <Show when={filter()}> */}
|
||||
<div class="my-1 flex w-full gap-2 p-2">
|
||||
<div class="size-6 p-1">
|
||||
<Icon icon="Filter" />
|
||||
</div>
|
||||
<For each={filter().tags.sort()}>
|
||||
{(tag) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setFilter((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
tags: prev.tags.filter((t) => t !== tag),
|
||||
};
|
||||
})
|
||||
}
|
||||
>
|
||||
<span class="rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
|
||||
{tag}
|
||||
<div class="border border-def-3">
|
||||
<span class="tooltip tooltip-bottom" data-tip="List View">
|
||||
<Button
|
||||
variant="dark"
|
||||
size="s"
|
||||
startIcon={<Icon icon="List" />}
|
||||
></Button>
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
{/* </Show> */}
|
||||
<Switch>
|
||||
<Match when={inventoryQuery.isLoading}>
|
||||
{/* Loading skeleton */}
|
||||
<div>
|
||||
<div class="card card-side m-2 bg-base-100 shadow-lg">
|
||||
<figure class="pl-2">
|
||||
<div class="skeleton size-12"></div>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<div class="skeleton h-12 w-80"></div>
|
||||
</h2>
|
||||
<div class="skeleton h-8 w-72"></div>
|
||||
<span class="tooltip tooltip-bottom" data-tip="Grid View">
|
||||
<Button
|
||||
variant="light"
|
||||
size="s"
|
||||
startIcon={<Icon icon="Grid" />}
|
||||
></Button>
|
||||
</span>
|
||||
</div>
|
||||
<span class="tooltip tooltip-bottom" data-tip="New Machine">
|
||||
<Button
|
||||
onClick={() => navigate("create")}
|
||||
size="s"
|
||||
variant="light"
|
||||
startIcon={<Icon icon="Plus" />}
|
||||
>
|
||||
New Machine
|
||||
</Button>
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
{/* <Show when={filter()}> */}
|
||||
<div class="my-1 flex w-full gap-2 p-2">
|
||||
<div class="size-6 p-1">
|
||||
<Icon icon="Filter" />
|
||||
</div>
|
||||
<For each={filter().tags.sort()}>
|
||||
{(tag) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setFilter((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
tags: prev.tags.filter((t) => t !== tag),
|
||||
};
|
||||
})
|
||||
}
|
||||
>
|
||||
<span class="rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
|
||||
{tag}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
{/* </Show> */}
|
||||
<Switch>
|
||||
<Match when={inventoryQuery.isLoading}>
|
||||
{/* Loading skeleton */}
|
||||
<div>
|
||||
<div class="card card-side m-2 bg-base-100 shadow-lg">
|
||||
<figure class="pl-2">
|
||||
<div class="skeleton size-12"></div>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<div class="skeleton h-12 w-80"></div>
|
||||
</h2>
|
||||
<div class="skeleton h-8 w-72"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Match>
|
||||
<Match
|
||||
when={!inventoryQuery.isLoading && inventoryMachines().length === 0}
|
||||
>
|
||||
<div class="mt-8 flex w-full flex-col items-center justify-center gap-2">
|
||||
<span class="text-lg text-neutral">
|
||||
No machines defined yet. Click below to define one.
|
||||
</span>
|
||||
<Button
|
||||
variant="light"
|
||||
class="size-28 overflow-hidden p-2"
|
||||
onClick={() => navigate("/machines/create")}
|
||||
>
|
||||
<span class="material-icons text-6xl font-light">add</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Match>
|
||||
<Match when={!inventoryQuery.isLoading}>
|
||||
<ul>
|
||||
<For each={inventoryMachines()}>
|
||||
{([name, info]) => (
|
||||
<MachineListItem
|
||||
name={name}
|
||||
info={info}
|
||||
setFilter={setFilter}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
</Match>
|
||||
<Match
|
||||
when={!inventoryQuery.isLoading && inventoryMachines().length === 0}
|
||||
>
|
||||
<div class="mt-8 flex w-full flex-col items-center justify-center gap-2">
|
||||
<span class="text-lg text-neutral">
|
||||
No machines defined yet. Click below to define one.
|
||||
</span>
|
||||
<Button
|
||||
variant="light"
|
||||
class="size-28 overflow-hidden p-2"
|
||||
onClick={() => navigate("/machines/create")}
|
||||
>
|
||||
<span class="material-icons text-6xl font-light">add</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Match>
|
||||
<Match when={!inventoryQuery.isLoading}>
|
||||
<ul>
|
||||
<For each={inventoryMachines()}>
|
||||
{([name, info]) => (
|
||||
<MachineListItem
|
||||
name={name}
|
||||
info={info}
|
||||
setFilter={setFilter}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user