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

UI: use FieldLayout in machine detail page

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-12-20 18:14:41 +01:00
parent ba47dfc2ec
commit 981e47bbcf
1 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
pkgs/webview-ui/app/src/routes/machines/details.tsx
View File

@@ -18,6 +18,7 @@ import toast from "solid-toast";
import { MachineAvatar } from "./avatar"; import { MachineAvatar } from "./avatar";
import { Header } from "@/src/layout/header"; import { Header } from "@/src/layout/header";
import { InputLabel } from "@/src/components/inputBase"; import { InputLabel } from "@/src/components/inputBase";
import { FieldLayout } from "@/src/Form/fields/layout";
type MachineFormInterface = MachineData & { type MachineFormInterface = MachineData & {
sshKey?: File; sshKey?: File;
@@ -308,7 +309,7 @@ const MachineForm = (props: MachineDetailsProps) => {
<div class="card-body"> <div class="card-body">
<span class="text-xl text-primary-800">General</span> <span class="text-xl text-primary-800">General</span>
<MachineAvatar name={machineName()} /> <MachineAvatar name={machineName()} />
<Form onSubmit={handleSubmit} class="grid grid-cols-12 gap-y-4"> <Form onSubmit={handleSubmit}>
<Field name="machine.name"> <Field name="machine.name">
{(field, props) => ( {(field, props) => (
<TextInput <TextInput
@@ -324,16 +325,20 @@ const MachineForm = (props: MachineDetailsProps) => {
<Field name="machine.tags" type="string[]"> <Field name="machine.tags" type="string[]">
{(field, props) => ( {(field, props) => (
<> <>
<InputLabel class="col-span-2">Tags</InputLabel> <FieldLayout
<span class="col-span-10"> label={<InputLabel>Tags</InputLabel>}
<For each={field.value}> field={
{(tag) => ( <span class="col-span-10">
<span class="mx-2 w-fit rounded-full px-3 py-1 bg-inv-4 fg-inv-1"> <For each={field.value}>
{tag} {(tag) => (
</span> <span class="mx-2 w-fit rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
)} {tag}
</For> </span>
</span> )}
</For>
</span>
}
/>
</> </>
)} )}
</Field> </Field>
@@ -351,19 +356,19 @@ const MachineForm = (props: MachineDetailsProps) => {
</Field> </Field>
<Field name="hw_config"> <Field name="hw_config">
{(field, props) => ( {(field, props) => (
<> <FieldLayout
<InputLabel class="col-span-2"> label={<InputLabel>Hardware Configuration</InputLabel>}
Hardware Configuration field={<span>{field.value || "None"}</span>}
</InputLabel> />
<span class="col-span-10">{field.value || "None"}</span>
</>
)} )}
</Field> </Field>
<Field name="disk_schema"> <Field name="disk_schema">
{(field, props) => ( {(field, props) => (
<> <>
<InputLabel class="col-span-2">Disk schema</InputLabel> <FieldLayout
<span class="col-span-10">{field.value || "None"}</span> label={<InputLabel>Disk schema</InputLabel>}
field={<span>{field.value || "None"}</span>}
/>
</> </>
)} )}
</Field> </Field>