yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI: machine list toggle {list,grid} view

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-12-11 11:32:34 +01:00
parent 131ed69d53
commit e9aa6d2298
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
pkgs/webview-ui/app/src/routes/machines/list.tsx
View File

@@ -15,6 +15,7 @@ import { useNavigate } from "@solidjs/router";
import { Button } from "@/src/components/button"; import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon"; import Icon from "@/src/components/icon";
import { Header } from "@/src/layout/header"; import { Header } from "@/src/layout/header";
import { makePersisted } from "@solid-primitives/storage";
type MachinesModel = Extract< type MachinesModel = Extract<
OperationResponse<"list_inventory_machines">, OperationResponse<"list_inventory_machines">,
@@ -31,7 +32,7 @@ export const MachineListView: Component = () => {
const [filter, setFilter] = createSignal<Filter>({ tags: [] }); const [filter, setFilter] = createSignal<Filter>({ tags: [] });
const inventoryQuery = createQuery<MachinesModel>(() => ({ const inventoryQuery = createQuery<MachinesModel>(() => ({
queryKey: [activeURI(), "list_machines", "inventory"], queryKey: [activeURI(), "list_inventory_machines"],
placeholderData: {}, placeholderData: {},
enabled: !!activeURI(), enabled: !!activeURI(),
queryFn: async () => { queryFn: async () => {
@@ -65,6 +66,10 @@ export const MachineListView: Component = () => {
}); });
const navigate = useNavigate(); const navigate = useNavigate();
const [view, setView] = makePersisted(createSignal<"list" | "grid">("list"), {
name: "machines_view",
storage: localStorage,
});
return ( return (
<> <>
<Header <Header
@@ -76,21 +81,23 @@ export const MachineListView: Component = () => {
variant="light" variant="light"
size="s" size="s"
onClick={() => refresh()} onClick={() => refresh()}
startIcon={<Icon icon="Reload" />} startIcon={<Icon icon="Update" />}
></Button> ></Button>
</span> </span>
<div class="border border-def-3"> <div class="border border-def-3">
<span class="tooltip tooltip-bottom" data-tip="List View"> <span class="tooltip tooltip-bottom" data-tip="List View">
<Button <Button
variant="dark" onclick={() => setView("list")}
variant={view() == "list" ? "dark" : "light"}
size="s" size="s"
startIcon={<Icon icon="List" />} startIcon={<Icon icon="List" />}
></Button> ></Button>
</span> </span>
<span class="tooltip tooltip-bottom" data-tip="Grid View"> <span class="tooltip tooltip-bottom" data-tip="Grid View">
<Button <Button
variant="light" onclick={() => setView("grid")}
variant={view() == "grid" ? "dark" : "light"}
size="s" size="s"
startIcon={<Icon icon="Grid" />} startIcon={<Icon icon="Grid" />}
></Button> ></Button>
@@ -110,7 +117,6 @@ export const MachineListView: Component = () => {
} }
/> />
<div> <div>
{/* <Show when={filter()}> */}
<div class="my-1 flex w-full gap-2 p-2"> <div class="my-1 flex w-full gap-2 p-2">
<div class="size-6 p-1"> <div class="size-6 p-1">
<Icon icon="Filter" /> <Icon icon="Filter" />
@@ -170,7 +176,13 @@ export const MachineListView: Component = () => {
</div> </div>
</Match> </Match>
<Match when={!inventoryQuery.isLoading}> <Match when={!inventoryQuery.isLoading}>
<ul> <div
class="my-4 flex flex-wrap gap-6 px-3 py-2"
classList={{
"flex-col": view() === "list",
"": view() === "grid",
}}
>
<For each={inventoryMachines()}> <For each={inventoryMachines()}>
{([name, info]) => ( {([name, info]) => (
<MachineListItem <MachineListItem
@@ -180,7 +192,7 @@ export const MachineListView: Component = () => {
/> />
)} )}
</For> </For>
</ul> </div>
</Match> </Match>
</Switch> </Switch>
</div> </div>