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

UI: replace TextInput with simple Layout of InputBase, InputLabel, ErrorMessage

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-12-17 19:37:07 +01:00
parent 0a31552661
commit f492601d7b
11 changed files with 85 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pkgs/webview-ui/app/src/routes/clans/create.tsx
View File

@@ -8,7 +8,7 @@ import {
} from "@modular-forms/solid";
import toast from "solid-toast";
import { setActiveURI, setClanList } from "@/src/App";
import { TextInput } from "@/src/components/TextInput";
import { TextInput } from "@/src/Form/fields/TextInput";
import { useNavigate } from "@solidjs/router";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
@@ -165,7 +165,6 @@ export const CreateClan = () => {
),
position: "start",
}}
formStore={formStore}
inputProps={props}
label="Template to use"
value={field.value ?? ""}

9
pkgs/webview-ui/app/src/routes/clans/details.tsx
View File

@@ -11,7 +11,7 @@ import {
setValue,
SubmitHandler,
} from "@modular-forms/solid";
import { TextInput } from "@/src/components/TextInput";
import { TextInput } from "@/src/Form/fields/TextInput";
import toast from "solid-toast";
import { set_single_service } from "@/src/api/inventory";
import { Button } from "@/src/components/button";
@@ -215,7 +215,6 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
<Field name={`allowedKeys.${idx()}.name`}>
{(field, props) => (
<TextInput
formStore={formStore}
inputProps={props}
label={"Name"}
adornment={{
@@ -235,7 +234,6 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
{(field, props) => (
<>
<TextInput
formStore={formStore}
inputProps={props}
label={"Value"}
value={field.value ?? ""}
@@ -243,7 +241,10 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
class="col-span-6"
required
/>
<span class="tooltip mt-auto" data-tip="Select file">
<span
class="tooltip col-span-12 mt-auto"
data-tip="Select file"
>
<label
class={"form-control w-full"}
aria-disabled={formStore.submitting}

10
pkgs/webview-ui/app/src/routes/components/index.tsx
View File

@@ -41,8 +41,8 @@ export const Components = () => {
readonly={readOnly}
/>
</>
))
)
)),
),
)}
<span class="col-span-2">Input Ghost</span>
{disabled.map((disabled) =>
@@ -66,8 +66,8 @@ export const Components = () => {
readonly={readOnly}
/>
</>
))
)
)),
),
)}
<span class="col-span-2">Input Label</span>
<span>Default</span>
@@ -96,7 +96,7 @@ export const Components = () => {
<Field
name="ef"
validate={required(
"This field is required very long descriptive error message"
"This field is required very long descriptive error message",
)}
>
{(field, inputProps) => (

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

@@ -3,7 +3,7 @@ import { Button } from "@/src/components/button";
import { FileInput } from "@/src/components/FileInput";
import Icon from "@/src/components/icon";
import { SelectInput } from "@/src/components/SelectInput";
import { TextInput } from "@/src/components/TextInput";
import { TextInput } from "@/src/Form/fields/TextInput";
import { Typography } from "@/src/components/Typography";
import { Header } from "@/src/layout/header";
import {
@@ -269,7 +269,6 @@ export const Flash = () => {
>
{(field, props) => (
<TextInput
formStore={formStore}
inputProps={props}
label="SSID"
value={field.value ?? ""}
@@ -286,7 +285,6 @@ export const Flash = () => {
{(field, props) => (
<div class="relative col-span-3 w-full">
<TextInput
formStore={formStore}
inputProps={props}
type={
passwordVisibility()[index()] ? "text" : "password"
@@ -357,7 +355,6 @@ export const Flash = () => {
{(field, props) => (
<>
<TextInput
formStore={formStore}
inputProps={props}
label="Source (flake URL)"
value={String(field.value)}
@@ -377,7 +374,6 @@ export const Flash = () => {
{(field, props) => (
<>
<TextInput
formStore={formStore}
inputProps={props}
label="Image Name (attribute name)"
value={String(field.value)}

7
pkgs/webview-ui/app/src/routes/machines/create.tsx
View File

@@ -2,7 +2,7 @@ import { callApi, OperationArgs } from "@/src/api";
import { activeURI } from "@/src/App";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
import { TextInput } from "@/src/components/TextInput";
import { TextInput } from "@/src/Form/fields/TextInput";
import { Header } from "@/src/layout/header";
import { createForm, required, reset } from "@modular-forms/solid";
import { useNavigate } from "@solidjs/router";
@@ -73,7 +73,7 @@ export function CreateMachine() {
<Header title="Create Machine" />
<div class="flex w-full p-4">
<div class="mt-4 w-full self-stretch px-2">
<Form onSubmit={handleSubmit}>
<Form onSubmit={handleSubmit} class="">
<Field
name="opts.machine.name"
validate={[required("This field is required")]}
@@ -85,7 +85,6 @@ export function CreateMachine() {
</div>
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"name"}
error={field.error}
@@ -99,7 +98,6 @@ export function CreateMachine() {
{(field, props) => (
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"description"}
error={field.error}
@@ -143,7 +141,6 @@ export function CreateMachine() {
<>
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"Target"}
error={field.error}

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

@@ -3,7 +3,7 @@ import { activeURI } from "@/src/App";
import { Button } from "@/src/components/button";
import { FileInput } from "@/src/components/FileInput";
import Icon from "@/src/components/icon";
import { TextInput } from "@/src/components/TextInput";
import { TextInput } from "@/src/Form/fields/TextInput";
import { selectSshKeys } from "@/src/hooks";
import {
createForm,
@@ -17,6 +17,7 @@ import { createSignal, For, Show } from "solid-js";
import toast from "solid-toast";
import { MachineAvatar } from "./avatar";
import { Header } from "@/src/layout/header";
import { InputLabel } from "@/src/components/inputBase";
type MachineFormInterface = MachineData & {
sshKey?: File;
@@ -302,14 +303,13 @@ const MachineForm = (props: MachineDetailsProps) => {
};
return (
<>
<Form onSubmit={handleSubmit}>
<div class="card-body">
<span class="text-xl text-primary-800">General</span>
<MachineAvatar name={machineName()} />
<div class="card-body">
<span class="text-xl text-primary-800">General</span>
<MachineAvatar name={machineName()} />
<Form onSubmit={handleSubmit} class="grid grid-cols-12 gap-y-4">
<Field name="machine.name">
{(field, props) => (
<TextInput
formStore={formStore}
inputProps={props}
label="Name"
value={field.value ?? ""}
@@ -321,22 +321,23 @@ const MachineForm = (props: MachineDetailsProps) => {
</Field>
<Field name="machine.tags" type="string[]">
{(field, props) => (
<For each={field.value}>
{(tag) => (
<label class="p-1">
Tags
<span class="mx-2 w-fit rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
{tag}
</span>
</label>
)}
</For>
<>
<InputLabel class="col-span-2">Tags</InputLabel>
<span class="col-span-10">
<For each={field.value}>
{(tag) => (
<span class="mx-2 w-fit rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
{tag}
</span>
)}
</For>
</span>
</>
)}
</Field>
<Field name="machine.description">
{(field, props) => (
<TextInput
formStore={formStore}
inputProps={props}
label="Description"
value={field.value ?? ""}
@@ -348,16 +349,24 @@ const MachineForm = (props: MachineDetailsProps) => {
</Field>
<Field name="hw_config">
{(field, props) => (
<label>Hardware report: {field.value || "None"}</label>
<>
<InputLabel class="col-span-2">
Hardware Configuration
</InputLabel>
<span class="col-span-10">{field.value || "None"}</span>
</>
)}
</Field>
<Field name="disk_schema">
{(field, props) => (
<span>Disk schema: {field.value || "None"}</span>
<>
<InputLabel class="col-span-2">Disk schema</InputLabel>
<span class="col-span-10">{field.value || "None"}</span>
</>
)}
</Field>
<div class="collapse collapse-arrow" tabindex="0">
<div class="collapse collapse-arrow col-span-full" tabindex="0">
<input type="checkbox" />
<div class="collapse-title link px-0 text-xl ">
Connection Settings
@@ -366,7 +375,6 @@ const MachineForm = (props: MachineDetailsProps) => {
<Field name="machine.deploy.targetHost">
{(field, props) => (
<TextInput
formStore={formStore}
inputProps={props}
label="Target Host"
value={field.value ?? ""}
@@ -411,7 +419,7 @@ const MachineForm = (props: MachineDetailsProps) => {
</div>
{
<div class="card-actions justify-end">
<div class="card-actions col-span-full justify-end">
<Button
type="submit"
disabled={formStore.submitting || !formStore.dirty}
@@ -420,8 +428,8 @@ const MachineForm = (props: MachineDetailsProps) => {
</Button>
</div>
}
</div>
</Form>
</Form>
</div>
<div class="card-body">
<div class="divider"></div>
@@ -579,11 +587,10 @@ function WifiModule(props: MachineWifiProps) {
<span class="text-neutral">Preconfigure wireless networks</span>
<For each={nets()}>
{(_, idx) => (
<div class="flex gap-4">
<div class="grid grid-cols-2">
<Field name={`networks.${idx()}.ssid`}>
{(field, props) => (
<TextInput
formStore={formStore}
inputProps={props}
label="Name"
value={field.value ?? ""}
@@ -595,7 +602,6 @@ function WifiModule(props: MachineWifiProps) {
<Field name={`networks.${idx()}.password`}>
{(field, props) => (
<TextInput
formStore={formStore}
inputProps={props}
label="Password"
value={field.value ?? ""}

20
pkgs/webview-ui/app/src/routes/modules/details.tsx
View File

@@ -1,29 +1,13 @@
import { callApi } from "@/src/api";
import { activeURI } from "@/src/App";
import { BackButton } from "@/src/components/BackButton";
import { createModulesQuery } from "@/src/queries";
import { useParams, useNavigate } from "@solidjs/router";
import {
createEffect,
createSignal,
For,
JSX,
Match,
Show,
Switch,
} from "solid-js";
import { createEffect, For, Match, Switch } from "solid-js";
import { SolidMarkdown } from "solid-markdown";
import toast from "solid-toast";
import { ModuleInfo } from "./list";
import { createQuery } from "@tanstack/solid-query";
import { JSONSchema7 } from "json-schema";
import { TextInput } from "@/src/components/TextInput";
import {
createForm,
getValue,
setValue,
SubmitHandler,
} from "@modular-forms/solid";
import { SubmitHandler } from "@modular-forms/solid";
import { DynForm } from "@/src/Form/form";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";