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

Merge pull request 'Webview: migrate create clan form to async api' (#1757) from hsjobeki/clan-core:hsjobeki-main into main

Browse Source
This commit is contained in:
clan-bot
2024-07-15 18:44:32 +00:00
parent 4c392a8cca 69f0a27079
commit f1f6b3c94c
5 changed files with 111 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pkgs/webview-ui/app/src/Routes.tsx
View File

@@ -7,6 +7,7 @@ import { BlockDevicesView } from "./routes/blockdevices/view";
import { Flash } from "./routes/flash/view";
import { Settings } from "./routes/settings";
import { Welcome } from "./routes/welcome";
import { Deploy } from "./routes/deploy";
export type Route = keyof typeof routes;
@@ -51,6 +52,11 @@ export const routes = {
label: "welcome",
icon: "settings",
},
deploy: {
child: Deploy,
label: "deploy",
icon: "content_copy",
},
};
interface RouterProps {

26
pkgs/webview-ui/app/src/layout/header.tsx
View File

@@ -1,6 +1,21 @@
import { createQuery } from "@tanstack/solid-query";
import { activeURI, setRoute } from "../App";
import { callApi } from "../api";
import { Show } from "solid-js";
export const Header = () => {
const { isLoading, data } = createQuery(() => ({
queryKey: [`${activeURI()}:meta`],
queryFn: async () => {
const currUri = activeURI();
if (currUri) {
const result = await callApi("show_clan_meta", { uri: currUri });
if (result.status === "error") throw new Error("Failed to fetch data");
return result.data;
}
},
}));
return (
<div class="navbar bg-base-100">
<div class="flex-none">
@@ -14,7 +29,16 @@ export const Header = () => {
</span>
</div>
<div class="flex-1">
<a class="text-xl">{activeURI()}</a>
<div class="tooltip tooltip-right" data-tip={data?.name || activeURI()}>
<div class="avatar placeholder online mx-4">
<div class="w-10 rounded-full bg-slate-700 text-neutral-content">
<span class="text-xl">C</span>
<Show when={data?.name}>
{(name) => <span class="text-xl">{name()}</span>}
</Show>
</div>
</div>
</div>
</div>
<div class="flex-none">
<span class="tooltip tooltip-bottom" data-tip="Settings">

102
pkgs/webview-ui/app/src/routes/clan/clanDetails.tsx
View File

@@ -1,26 +1,14 @@
import { OperationResponse, pyApi } from "@/src/api";
import {
For,
JSX,
Match,
Show,
Switch,
createEffect,
createSignal,
} from "solid-js";
import { OperationResponse, callApi, pyApi } from "@/src/api";
import { Show } from "solid-js";
import {
SubmitHandler,
createForm,
required,
custom,
reset,
} from "@modular-forms/solid";
import toast from "solid-toast";
import { setActiveURI, setRoute } from "@/src/App";
interface ClanDetailsProps {
directory: string;
}
type CreateForm = Meta & {
template_url: string;
};
@@ -28,69 +16,44 @@ type CreateForm = Meta & {
export const ClanForm = () => {
const [formStore, { Form, Field }] = createForm<CreateForm>({
initialValues: {
name: "",
description: "",
template_url: "git+https://git.clan.lol/clan/clan-core#templates.minimal",
},
});
const handleSubmit: SubmitHandler<CreateForm> = async (values, event) => {
const { template_url, ...meta } = values;
pyApi.open_file.dispatch({
file_request: {
mode: "save",
},
op_key: "create_clan",
const response = await callApi("open_file", {
file_request: { mode: "save" },
});
// await new Promise<void>((done) => {
// pyApi.open_file.receive((r) => {
// if (r.op_key !== "create_clan") {
// done();
// return;
// }
// if (r.status !== "success") {
// toast.error("Cannot select clan directory");
// done();
// return;
// }
// const target_dir = r?.data;
// if (!target_dir) {
// toast.error("Cannot select clan directory");
// done();
// return;
// }
if (response.status !== "success") {
toast.error("Cannot select clan directory");
return;
}
const target_dir = response?.data;
if (!target_dir) {
toast.error("Cannot select clan directory");
return;
}
// console.log({ formStore });
// toast.promise(
// new Promise<void>((resolve, reject) => {
// pyApi.create_clan.receive((r) => {
// done();
// if (r.status === "error") {
// reject();
// console.error(r.errors);
// return;
// }
// resolve();
// // Navigate to the new clan
// setCurrClanURI(target_dir);
// setRoute("machines");
// });
// pyApi.create_clan.dispatch({
// options: { directory: target_dir, meta, template_url },
// op_key: "create_clan",
// });
// }),
// {
// loading: "Creating clan...",
// success: "Clan Successfully Created",
// error: "Failed to create clan",
// }
// );
// });
// });
await toast.promise(
(async () => {
await callApi("create_clan", {
options: { directory: target_dir, meta, template_url },
});
setActiveURI(target_dir);
setRoute("machines");
})(),
{
loading: "Creating clan...",
success: "Clan Successfully Created",
error: "Failed to create clan",
}
);
reset(formStore);
};
return (
@@ -135,6 +98,7 @@ export const ClanForm = () => {
<input
{...props}
disabled={formStore.submitting}
required
placeholder="Clan Name"
class="input input-bordered"
@@ -158,6 +122,7 @@ export const ClanForm = () => {
<input
{...props}
disabled={formStore.submitting}
required
type="text"
placeholder="Some words about your clan"
@@ -188,6 +153,7 @@ export const ClanForm = () => {
<input
{...props}
required
disabled={formStore.submitting}
type="text"
placeholder="Template to use"
class="input input-bordered"

6
pkgs/webview-ui/app/src/routes/deploy/index.tsx Normal file
View File

@@ -0,0 +1,6 @@
import { callApi } from "@/src/api";
import { createQuery } from "@tanstack/solid-query";
export const Deploy = () => {
return <div>Deloy view</div>;
};

69
pkgs/webview-ui/app/src/routes/flash/view.tsx
View File

@@ -1,6 +1,7 @@
import { route } from "@/src/App";
import { OperationArgs, OperationResponse, pyApi } from "@/src/api";
import { OperationArgs, OperationResponse, callApi, pyApi } from "@/src/api";
import { SubmitHandler, createForm, required } from "@modular-forms/solid";
import { createQuery } from "@tanstack/solid-query";
import { For, createSignal } from "solid-js";
import { effect } from "solid-js/web";
@@ -28,36 +29,35 @@ type BlockDevices = Extract<
export const Flash = () => {
const [formStore, { Form, Field }] = createForm<FlashFormValues>({});
const [devices, setDevices] = createSignal<BlockDevices>([]);
// pyApi.show_block_devices.receive((r) => {
// console.log("block devices", r);
// if (r.status === "success") {
// setDevices(r.data.blockdevices);
// }
// });
const {
data: devices,
refetch: loadDevices,
isFetching,
} = createQuery(() => ({
queryKey: ["TanStack Query"],
queryFn: async () => {
const result = await callApi("show_block_devices", {});
if (result.status === "error") throw new Error("Failed to fetch data");
return result.data;
},
staleTime: 1000 * 60 * 1, // 1 minutes
}));
const handleSubmit: SubmitHandler<FlashFormValues> = (values, event) => {
// pyApi.open_file.dispatch({ file_request: { mode: "save" } });
// pyApi.open_file.receive((r) => {
// if (r.status === "success") {
// if (r.data) {
// pyApi.create_clan.dispatch({
// options: { directory: r.data, meta: values },
// });
// }
// return;
// }
const handleSubmit = async (values: FlashFormValues) => {
// TODO: Rework Flash machine API
// Its unusable in its current state
// await callApi("flash_machine", {
// machine: {
// name: "",
// },
// disks: {values.disk },
// dry_run: true,
// });
console.log("submit", values);
};
// effect(() => {
// if (route() === "flash") {
// pyApi.show_block_devices.dispatch({});
// }
// });
return (
<div class="">
<div class="px-2">
<Form onSubmit={handleSubmit}>
<Field
name="machine.flake"
@@ -70,7 +70,7 @@ export const Flash = () => {
<input
type="text"
class="grow"
placeholder="Clan URI"
placeholder="machine.flake"
required
{...props}
/>
@@ -96,7 +96,7 @@ export const Flash = () => {
<input
type="text"
class="grow"
placeholder="Machine Name"
placeholder="machine.name"
required
{...props}
/>
@@ -115,9 +115,15 @@ export const Flash = () => {
{(field, props) => (
<>
<label class="form-control input-bordered flex w-full items-center gap-2">
<select required class="select w-full" {...props}>
<select
required
class="select select-bordered w-full"
{...props}
>
{/* <span class="material-icons">devices</span> */}
<For each={devices()}>
<option disabled>Select a disk</option>
<For each={devices?.blockdevices}>
{(device) => (
<option value={device.name}>
{device.name} / {device.size} bytes
@@ -126,6 +132,11 @@ export const Flash = () => {
</For>
</select>
<div class="label">
{isFetching && (
<span class="label-text-alt">
<span class="loading loading-bars"></span>
</span>
)}
{field.error && (
<span class="label-text-alt font-bold text-error">
{field.error}