102 lines
2.9 KiB
Plaintext
102 lines
2.9 KiB
Plaintext
---
|
|
import Form from "../components/Form.astro";
|
|
import Field from "../components/Field.astro";
|
|
import ComponentLayout from "../layouts/ComponentLayout.astro";
|
|
---
|
|
|
|
<ComponentLayout class="wr:p-4">
|
|
<Form
|
|
title="Create Project"
|
|
description="Fields marked * are required."
|
|
columns={2}
|
|
schemaName="schema"
|
|
onSubmit="submit"
|
|
submitLabel="Create Project"
|
|
submitIcon="mdi:check"
|
|
resetOnSubmit
|
|
>
|
|
<Field
|
|
name="name"
|
|
label="Project name"
|
|
value="Test"
|
|
required
|
|
placeholder="Acme CRM"
|
|
prefixText="Prefix"
|
|
description="Description"
|
|
/>
|
|
<Field
|
|
name="email"
|
|
label="Contact email"
|
|
placeholder="Enter an personal email"
|
|
kind="email"
|
|
required
|
|
iconLeft="lets-icons:check-ring-duotone"
|
|
/>
|
|
<Field
|
|
name="teamSize"
|
|
label="Team size"
|
|
placeholder="how many members are in the team"
|
|
kind="number"
|
|
required
|
|
iconRight="lets-icons:check-ring-duotone"
|
|
/>
|
|
<Field name="startDate" label="Start date" kind="date" required />
|
|
<Field
|
|
name="desc"
|
|
label="Description"
|
|
kind="textarea"
|
|
placeholder="Enter the description"
|
|
value="YESY"
|
|
rows={5}
|
|
class="wr:sm:col-span-2"
|
|
/>
|
|
<Field
|
|
name="channel"
|
|
label="Default channel"
|
|
kind="radio"
|
|
value="email"
|
|
class="wr:sm:col-span-2"
|
|
options={[
|
|
{ value: "email", label: "Email" },
|
|
{ value: "sms", label: "SMS" },
|
|
{ value: "whatsapp", label: "WhatsApp" },
|
|
]}
|
|
/>
|
|
<Field
|
|
name="agree"
|
|
label="I agree to the Terms"
|
|
kind="checkbox"
|
|
class="wr:sm:col-span-2"
|
|
/>
|
|
</Form>
|
|
</ComponentLayout>
|
|
|
|
<script>
|
|
import { z } from "zod";
|
|
|
|
window.schema = z.object({
|
|
name: z.string().min(3, "Please enter at least 3 characters."),
|
|
email: z.string().email("Enter a valid email address."),
|
|
teamSize: z.coerce
|
|
.number()
|
|
.int()
|
|
.min(1, "Team size must be at least 1."),
|
|
startDate: z.string().min(1, "Start date is required."),
|
|
desc: z
|
|
.string()
|
|
.max(500, "Description must be under 500 characters.")
|
|
.optional()
|
|
.or(z.literal("")),
|
|
channel: z.enum(["email", "sms", "whatsapp"], {
|
|
required_error: "Select a channel.",
|
|
}),
|
|
agree: z.literal(true, {
|
|
errorMap: () => ({ message: "You must accept the terms." }),
|
|
}),
|
|
});
|
|
|
|
window.submit = async (data: any, form: any) => {
|
|
console.log("Validated data:", data);
|
|
};
|
|
</script>
|