Clan create: migrate to inventory

pkgs/webview-ui/app/src/Routes.tsx

@@ -1,7 +1,7 @@
 import { Accessor, For, Match, Switch } from "solid-js";
 import { MachineListView } from "./routes/machines/view";
 import { colors } from "./routes/colors/view";
-import { clan } from "./routes/clan/view";
+import { CreateClan } from "./routes/clan/view";
 import { HostList } from "./routes/hosts/view";
 import { BlockDevicesView } from "./routes/blockdevices/view";
 import { Flash } from "./routes/flash/view";
@@ -9,9 +9,9 @@ import { Flash } from "./routes/flash/view";
 export type Route = keyof typeof routes;
 
 export const routes = {
-  clan: {
-    child: clan,
-    label: "Clan",
+  createClan: {
+    child: CreateClan,
+    label: "Create Clan",
     icon: "groups",
   },
   machines: {

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

@@ -8,45 +8,49 @@ import {
   createEffect,
   createSignal,
 } from "solid-js";
-import {
-  SubmitHandler,
-  createForm,
-  email,
-  required,
-} from "@modular-forms/solid";
+import { SubmitHandler, createForm, required } from "@modular-forms/solid";
+import toast from "solid-toast";
+import { effect } from "solid-js/web";
 
 interface ClanDetailsProps {
   directory: string;
 }
 
 interface ClanFormProps {
-  directory?: string;
-  meta: ClanMeta;
   actions: JSX.Element;
-  editable?: boolean;
 }
 
 export const ClanForm = (props: ClanFormProps) => {
-  const { meta, actions, editable = true, directory } = props;
+  const { actions } = props;
   const [formStore, { Form, Field }] = createForm<ClanMeta>({
-    initialValues: meta,
+    initialValues: {},
   });
 
   const handleSubmit: SubmitHandler<ClanMeta> = (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 },
-          });
-        }
+    console.log("submit", values);
+    pyApi.open_file.dispatch({
+      file_request: { mode: "save" },
+      op_key: "create_clan",
+    });
 
+    pyApi.open_file.receive((r) => {
+      if (r.op_key !== "create_clan") {
         return;
       }
+
+      if (r.status !== "success") {
+        toast.error("Failed to create clan");
+        return;
+      }
+
+      if (r.data) {
+        pyApi.create_clan.dispatch({
+          options: { directory: r.data, meta: values },
+        });
+      }
     });
-    console.log("submit", values);
   };
+
   return (
     <div class="card card-compact w-96 bg-base-100 shadow-xl">
       <Form onSubmit={handleSubmit}>
@@ -71,20 +75,6 @@ export const ClanForm = (props: ClanFormProps) => {
                   )}
                 </Show>
               </figure>
-              <label class="form-control w-full max-w-xs">
-                <div class="label">
-                  <span class="label-text">Select icon</span>
-                </div>
-                <input
-                  type="file"
-                  class="file-input file-input-bordered w-full max-w-xs"
-                />
-                <div class="label">
-                  {field.error && (
-                    <span class="label-text-alt">{field.error}</span>
-                  )}
-                </div>
-              </label>
             </>
           )}
         </Field>
@@ -104,9 +94,8 @@ export const ClanForm = (props: ClanFormProps) => {
 
                   <input
                     {...props}
-                    type="email"
                     required
-                    placeholder="your.mail@example.com"
+                    placeholder="Clan Name"
                     class="input w-full max-w-xs"
                     classList={{ "input-error": !!field.error }}
                     value={field.value}
@@ -205,7 +194,6 @@ export const ClanDetails = (props: ClanDetailsProps) => {
           const meta = data();
           return (
             <ClanForm
-              directory={directory}
               meta={meta}
               actions={
                 <div class="card-actions justify-between">

pkgs/webview-ui/app/src/routes/clan/view.tsx

@@ -3,80 +3,24 @@ import { Match, Switch, createEffect, createSignal } from "solid-js";
 import toast from "solid-toast";
 import { ClanDetails, ClanForm } from "./clanDetails";
 
-export const clan = () => {
-  const [mode, setMode] = createSignal<"init" | "open" | "create">("init");
+export const CreateClan = () => {
+  // const [mode, setMode] = createSignal<"init" | "open" | "create">("init");
   const [clanDir, setClanDir] = createSignal<string | null>(null);
 
-  createEffect(() => {
-    console.log(mode());
-  });
+  // createEffect(() => {
+  //   console.log(mode());
+  // });
   return (
     <div>
-      <Switch fallback={"invalid"}>
-        <Match when={mode() === "init"}>
-          <div class="flex gap-2">
-            <button class="btn btn-square" onclick={() => setMode("create")}>
-              <span class="material-icons">add</span>
-            </button>
-            <button
-              class="btn btn-square"
-              onclick={() => {
-                pyApi.open_file.dispatch({
-                  file_request: {
-                    mode: "select_folder",
-                    title: "Open Clan",
-                  },
-                });
-                pyApi.open_file.receive((r) => {
-                  // There are two error cases to handle
-                  if (r.status !== "success") {
-                    console.error(r.errors);
-                    toast.error("Error opening clan");
-                    return;
-                  }
-                  // User didn't select anything
-                  if (!r.data) {
-                    setMode("init");
-                    return;
-                  }
-
-                  setClanDir(r.data);
-                  setMode("open");
-                });
-              }}
-            >
-              <span class="material-icons">folder_open</span>
+      <ClanForm
+        actions={
+          <div class="card-actions justify-end">
+            <button class="btn btn-primary" type="submit">
+              Create
             </button>
           </div>
-        </Match>
-        <Match when={mode() === "open"}>
-          <ClanDetails directory={clanDir() || ""} />
-        </Match>
-        <Match when={mode() === "create"}>
-          <ClanForm
-            actions={
-              <div class="card-actions justify-end">
-                <button
-                  class="btn btn-primary"
-                  // onClick={() => {
-                  //   pyApi.open_file.dispatch({
-                  //     file_request: { mode: "save" },
-                  //   });
-                  // }}
-                >
-                  Save
-                </button>
-              </div>
-            }
-            meta={{
-              name: "New Clan",
-              description: "nice description",
-              icon: "select icon",
-            }}
-            editable
-          />
-        </Match>
-      </Switch>
+        }
+      />
     </div>
   );
 };