Clan create: add template url field

This commit is contained in:
Johannes Kirschbauer
2024-07-10 18:08:52 +02:00
parent 060f020d83
commit 1e4a761c53
2 changed files with 103 additions and 73 deletions

View File

@@ -3,3 +3,9 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html {
overflow-x: hidden;
overflow-y: scroll;
}

View File

@@ -8,7 +8,12 @@ import {
createEffect, createEffect,
createSignal, createSignal,
} from "solid-js"; } from "solid-js";
import { SubmitHandler, createForm, required } from "@modular-forms/solid"; import {
SubmitHandler,
createForm,
required,
custom,
} from "@modular-forms/solid";
import toast from "solid-toast"; import toast from "solid-toast";
import { setCurrClanURI, setRoute } from "@/src/App"; import { setCurrClanURI, setRoute } from "@/src/App";
import { isValidHostname } from "@/util"; import { isValidHostname } from "@/util";
@@ -21,14 +26,21 @@ interface ClanFormProps {
actions: JSX.Element; actions: JSX.Element;
} }
type CreateForm = Meta & {
template_url: string;
};
export const ClanForm = (props: ClanFormProps) => { export const ClanForm = (props: ClanFormProps) => {
const { actions } = props; const { actions } = props;
const [formStore, { Form, Field }] = createForm<ClanMeta>({ const [formStore, { Form, Field }] = createForm<CreateForm>({
initialValues: {}, initialValues: {
template_url: "git+https://git.clan.lol/clan/clan-core#templates.minimal",
},
}); });
const handleSubmit: SubmitHandler<ClanMeta> = (values, event) => { const handleSubmit: SubmitHandler<CreateForm> = (values, event) => {
console.log("submit", values); console.log("submit", values);
const { template_url, ...meta } = values;
pyApi.open_file.dispatch({ pyApi.open_file.dispatch({
file_request: { file_request: {
mode: "save", mode: "save",
@@ -70,7 +82,7 @@ export const ClanForm = (props: ClanFormProps) => {
}); });
pyApi.create_clan.dispatch({ pyApi.create_clan.dispatch({
options: { directory: target_dir, meta: values }, options: { directory: target_dir, meta, template_url },
op_key: "create_clan", op_key: "create_clan",
}); });
}), }),
@@ -84,7 +96,7 @@ export const ClanForm = (props: ClanFormProps) => {
}; };
return ( return (
<div class="card card-compact w-96 bg-base-100 shadow-xl"> <div class="card card-normal">
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<Field name="icon"> <Field name="icon">
{(field, props) => ( {(field, props) => (
@@ -110,14 +122,13 @@ export const ClanForm = (props: ClanFormProps) => {
</> </>
)} )}
</Field> </Field>
<div class="card-body">
<div class="card-body"> <div class="card-body">
<Field <Field
name="name" name="name"
validate={[required("Please enter a unique name for the clan.")]} validate={[required("Please enter a unique name for the clan.")]}
> >
{(field, props) => ( {(field, props) => (
<label class="form-control w-full max-w-xs"> <label class="form-control w-full">
<div class="label"> <div class="label">
<span class="label-text block after:ml-0.5 after:text-primary after:content-['*']"> <span class="label-text block after:ml-0.5 after:text-primary after:content-['*']">
Name Name
@@ -128,7 +139,7 @@ export const ClanForm = (props: ClanFormProps) => {
{...props} {...props}
required required
placeholder="Clan Name" placeholder="Clan Name"
class="input w-full max-w-xs" class="input input-bordered"
classList={{ "input-error": !!field.error }} classList={{ "input-error": !!field.error }}
value={field.value} value={field.value}
/> />
@@ -142,7 +153,7 @@ export const ClanForm = (props: ClanFormProps) => {
</Field> </Field>
<Field name="description"> <Field name="description">
{(field, props) => ( {(field, props) => (
<label class="form-control w-full max-w-xs"> <label class="form-control w-full">
<div class="label"> <div class="label">
<span class="label-text">Description</span> <span class="label-text">Description</span>
</div> </div>
@@ -152,7 +163,7 @@ export const ClanForm = (props: ClanFormProps) => {
required required
type="text" type="text"
placeholder="Some words about your clan" placeholder="Some words about your clan"
class="input w-full max-w-xs" class="input input-bordered"
classList={{ "input-error": !!field.error }} classList={{ "input-error": !!field.error }}
value={field.value || ""} value={field.value || ""}
/> />
@@ -164,26 +175,40 @@ export const ClanForm = (props: ClanFormProps) => {
</label> </label>
)} )}
</Field> </Field>
{actions} <Field name="template_url" validate={[required("This is required")]}>
{(field, props) => (
<div class="collapse collapse-arrow" tabindex="0">
<input type="checkbox" />
<div class="collapse-title link font-medium ">Advanced</div>
<div class="collapse-content">
<label class="form-control w-full">
<div class="label ">
<span class="label-text after:ml-0.5 after:text-primary after:content-['*']">
Template to use
</span>
</div> </div>
<input
{...props}
required
type="text"
placeholder="Template to use"
class="input input-bordered"
classList={{ "input-error": !!field.error }}
value={field.value}
/>
</label>
</div>
</div>
)}
</Field>
{actions}
</div> </div>
</Form> </Form>
</div> </div>
); );
}; };
// export const EditMetaFields = (props: MetaFieldsProps) => { type Meta = Extract<
// const { meta, editable, actions, directory } = props;
// const [editing, setEditing] = createSignal<
// keyof MetaFieldsProps["meta"] | null
// >(null);
// return (
// );
// };
type ClanMeta = Extract<
OperationResponse<"show_clan_meta">, OperationResponse<"show_clan_meta">,
{ status: "success" } { status: "success" }
>["data"]; >["data"];
@@ -198,7 +223,7 @@ export const ClanDetails = (props: ClanDetailsProps) => {
>["errors"] >["errors"]
| null | null
>(null); >(null);
const [data, setData] = createSignal<ClanMeta>(); const [data, setData] = createSignal<Meta>();
const loadMeta = () => { const loadMeta = () => {
pyApi.show_clan_meta.dispatch({ uri: directory }); pyApi.show_clan_meta.dispatch({ uri: directory });
@@ -226,7 +251,6 @@ export const ClanDetails = (props: ClanDetailsProps) => {
const meta = data(); const meta = data();
return ( return (
<ClanForm <ClanForm
meta={meta}
actions={ actions={
<div class="card-actions justify-between"> <div class="card-actions justify-between">
<button class="btn btn-link" onClick={() => loadMeta()}> <button class="btn btn-link" onClick={() => loadMeta()}>