Skip to content

Commit

Permalink
fix: Darken the background when configuring plugins.
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexanderson1993
alexanderson1993 committed Feb 9, 2023
1 parent 64fa3d6 commit d20f426
Show file tree
Hide file tree
Showing 6 changed files with 356 additions and 294 deletions.
112 changes: 62 additions & 50 deletions client/src/pages/Config/Inventory/InventoryList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,24 @@ import Menubar from "@thorium/ui/Menubar";
import Button from "@thorium/ui/Button";
import {toast} from "client/src/context/ToastContext";
import SearchableList from "@thorium/ui/SearchableList";
import {Fragment} from "react";
import {Fragment, Suspense} from "react";
import {q} from "@client/context/AppContext";

export function InventoryList() {
const {pluginId} = useParams() as {
pluginId: string;
};
return (
<div className="h-full">
<Menubar backTo={`/config/${pluginId}/list`}></Menubar>
<Suspense>
<InventoryListInner />
</Suspense>
</div>
);
}

function InventoryListInner() {
const {pluginId, inventoryId} = useParams() as {
pluginId: string;
inventoryId?: string;
Expand All @@ -16,61 +30,59 @@ export function InventoryList() {
const prompt = usePrompt();
const [data] = q.plugin.inventory.all.useNetRequest({pluginId});
const inventory = data.find(d => d.name === inventoryId);

return (
<div className="h-full">
<Menubar backTo={`/config/${pluginId}/list`}></Menubar>
<div className="p-8 h-[calc(100%-2rem)]">
<h1 className="font-bold text-white text-3xl mb-4">Inventory Config</h1>
<div className="flex gap-8 h-[calc(100%-3rem)]">
<div className="flex flex-col w-80 h-full">
<Button
className="btn-success btn-sm w-full"
onClick={async () => {
const name = await prompt({
header: "Enter inventory item name",
<div className="p-8 h-[calc(100%-2rem)]">
<h1 className="font-bold text-white text-3xl mb-4">Inventory Config</h1>
<div className="flex gap-8 h-[calc(100%-3rem)]">
<div className="flex flex-col w-80 h-full">
<Button
className="btn-success btn-sm w-full"
onClick={async () => {
const name = await prompt({
header: "Enter inventory item name",
});
if (typeof name !== "string") return;
try {
const result = await q.plugin.inventory.create.netSend({
name,
pluginId,
});
if (typeof name !== "string") return;
try {
const result = await q.plugin.inventory.create.netSend({
name,
pluginId,
navigate(`${result.inventoryId}`);
} catch (err) {
if (err instanceof Error) {
toast({
title: "Error creating inventory item",
body: err.message,
color: "error",
});
navigate(`${result.inventoryId}`);
} catch (err) {
if (err instanceof Error) {
toast({
title: "Error creating inventory item",
body: err.message,
color: "error",
});
return;
}
return;
}
}}
>
New Inventory Item
</Button>
}
}}
>
New Inventory Item
</Button>

<SearchableList
items={data.map(d => ({
id: d.name,
name: d.name,
description: d.description,
}))}
searchKeys={["name"]}
selectedItem={inventoryId || null}
setSelectedItem={({id}) => navigate(`${id}`)}
renderItem={c => (
<div className="flex justify-between items-center" key={c.id}>
<div>{c.name}</div>
</div>
)}
/>
</div>
<Fragment key={inventory?.name}>
<Outlet />
</Fragment>
<SearchableList
items={data.map(d => ({
id: d.name,
name: d.name,
description: d.description,
}))}
searchKeys={["name"]}
selectedItem={inventoryId || null}
setSelectedItem={({id}) => navigate(`${id}`)}
renderItem={c => (
<div className="flex justify-between items-center" key={c.id}>
<div>{c.name}</div>
</div>
)}
/>
</div>
<Fragment key={inventory?.name}>
<Outlet />
</Fragment>
</div>
</div>
);
Expand Down
131 changes: 69 additions & 62 deletions client/src/pages/Config/PluginEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,80 +13,87 @@ import {toast} from "@client/context/ToastContext";
import {q} from "@client/context/AppContext";

export default function PluginEdit() {
return (
<div className="h-full">
<Menubar></Menubar>
<Suspense>
<PluginEditInner />
</Suspense>
</div>
);
}

function PluginEditInner() {
const {pluginId} = useParams() as {pluginId: string};
const [plugins] = q.plugin.all.useNetRequest();
const navigate = useNavigate();
const prompt = usePrompt();

return (
<div className="h-full">
<Menubar></Menubar>
<div className="p-8 h-[calc(100%-2rem)]">
<h1 className="font-bold text-white text-3xl mb-4">Plugin Config</h1>
<div className="p-8 h-[calc(100%-2rem)]">
<h1 className="font-bold text-white text-3xl mb-4">Plugin Config</h1>

<div className="flex gap-8 h-[calc(100%-3rem)]">
<div className="flex flex-col w-80 h-full">
<Button
className="w-full btn-sm btn-success"
onClick={async () => {
const name = await prompt({header: "Enter plugin name"});
if (typeof name !== "string") return;
try {
const result = await q.plugin.create.netSend({name});
navigate(`/config/${result.pluginId}`);
} catch (err) {
if (err instanceof Error) {
toast({
title: "Error creating plugin",
body: err.message,
color: "error",
});
}
<div className="flex gap-8 h-[calc(100%-3rem)]">
<div className="flex flex-col w-80 h-full">
<Button
className="w-full btn-sm btn-success"
onClick={async () => {
const name = await prompt({header: "Enter plugin name"});
if (typeof name !== "string") return;
try {
const result = await q.plugin.create.netSend({name});
navigate(`/config/${result.pluginId}`);
} catch (err) {
if (err instanceof Error) {
toast({
title: "Error creating plugin",
body: err.message,
color: "error",
});
}
}}
>
New Plugin
</Button>
}
}}
>
New Plugin
</Button>

<SearchableList
items={plugins.map(d => ({
id: d.id,
name: d.name,
description: d.description,
tags: d.tags,
author: d.author,
active: d.active,
}))}
searchKeys={["name", "author", "tags"]}
selectedItem={pluginId || null}
setSelectedItem={({id}) => navigate(`/config/${id}`)}
renderItem={c => (
<div className="flex justify-between items-center" key={c.id}>
<SearchableList
items={plugins.map(d => ({
id: d.id,
name: d.name,
description: d.description,
tags: d.tags,
author: d.author,
active: d.active,
}))}
searchKeys={["name", "author", "tags"]}
selectedItem={pluginId || null}
setSelectedItem={({id}) => navigate(`/config/${id}`)}
renderItem={c => (
<div className="flex justify-between items-center" key={c.id}>
<div>
{c.name}
{c.active ? (
""
) : (
<span className="text-red-600"> (inactive)</span>
)}
<div>
{c.name}
{c.active ? (
""
) : (
<span className="text-red-600"> (inactive)</span>
)}
<div>
<small>{c.author}</small>
</div>
<small>{c.author}</small>
</div>
<NavLink
{...{to: `/config/${c.id}/list`}}
onClick={e => e.stopPropagation()}
>
<FaEdit />
</NavLink>
</div>
)}
/>
</div>
<Suspense fallback={<PluginDetails />}>
<PluginDetails />
</Suspense>
<NavLink
{...{to: `/config/${c.id}/list`}}
onClick={e => e.stopPropagation()}
>
<FaEdit />
</NavLink>
</div>
)}
/>
</div>
<Suspense fallback={<PluginDetails />}>
<PluginDetails />
</Suspense>
</div>
</div>
);
Expand Down
Loading

0 comments on commit d20f426

Please sign in to comment.