admin-forms #12

Merged
christian merged 4 commits from admin-forms into main 2024-06-04 14:03:20 +00:00
5 changed files with 41 additions and 20 deletions
Showing only changes of commit a609300688 - Show all commits

View File

@ -12,7 +12,10 @@ export default async function CreateSubRegion() {
<h1 className="pt-4 text-2xl">
Fill the form to create a new Sub Region
</h1>
<CreateSubRegionForm regions={allRegions} countries={allCountries} />
<CreateSubRegionForm
allRegions={allRegions}
allCountries={allCountries}
/>
</div>
);
}

View File

@ -1,6 +1,6 @@
"use client";
import clsx from "clsx";
import { useState } from "react";
import { ChangeEvent, useEffect, useState } from "react";
import { useFormState } from "react-dom";
import { Input } from "~/components/ui/input";
import {
@ -10,7 +10,8 @@ import {
SelectTrigger,
SelectValue,
} from "~/components/ui/select";
import { addRegion } from "~/server/actions/addRegion";
import { addSubRegion } from "~/server/actions/addSubRegion";
import SubmitButton from "../SubmitButton";
type Region = {
id: string;
@ -23,12 +24,17 @@ type Country = {
};
export default function CreateSubRegionForm(props: {
regions: Region[];
countries: Country[];
allRegions: Region[];
allCountries: Country[];
}) {
const { countries, regions } = props;
const [country, setCountry] = useState<Country | undefined>(undefined);
const [formState, formActions] = useFormState(addRegion, {
const { allRegions, allCountries } = props;
const [selectCountryId, setSelectCountryId] = useState<string | undefined>(
undefined,
);
const [selectCountryRegions, setSelectCountryRegions] = useState<Region[]>(
[],
);
const [formState, formActions] = useFormState(addSubRegion, {
message: "",
errors: undefined,
fieldValues: {
@ -36,17 +42,28 @@ export default function CreateSubRegionForm(props: {
regionId: "",
},
});
useEffect(() => {
if (selectCountryId) {
const regions = allRegions.filter(
(region) => region.countryId === selectCountryId,
);
setSelectCountryRegions(regions);
}
}, [selectCountryId]);
return (
<div>
{/* country selector */}
<Select name="country">
<SelectTrigger
className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.countryId })}`}
>
<p>{selectCountryId}</p>
<Select
name="country"
onValueChange={(value) => setSelectCountryId(value)}
>
<SelectTrigger className={`w-[180px] `}>
<SelectValue placeholder="Country" />
</SelectTrigger>
<SelectContent>
{countries.map((country) => (
{allCountries.map((country) => (
<SelectItem key={country.id} value={country.id}>
{country.name}
</SelectItem>
@ -55,14 +72,14 @@ export default function CreateSubRegionForm(props: {
</Select>
<form action={formActions}>
{/* region selector */}
<Select name="subRegion">
<Select name="regionId">
<SelectTrigger
className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.countryId })}`}
className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.regionId })}`}
>
<SelectValue placeholder="Region" />
</SelectTrigger>
<SelectContent>
{regions.map((region) => (
{selectCountryRegions.map((region) => (
<SelectItem key={region.id} value={region.id}>
{region.name}
</SelectItem>
@ -75,6 +92,7 @@ export default function CreateSubRegionForm(props: {
placeholder="Name"
className={`${clsx({ "border-red-500": formState.errors?.name })}`}
/>
<SubmitButton text={"sub region"} />
</form>
</div>
);

View File

@ -20,7 +20,7 @@ export async function addCountry(prevstate: any, formData: FormData) {
name: z
.string()
.min(1, { message: "Name is required" })
.refine(() => !exists, { message: `${name} already exists` }),
.refine(() => !exists[0], { message: `${name} already exists` }),
});
//Parse the form data using the schema for validation, and check if the name already exists
try {

View File

@ -23,7 +23,7 @@ export const addRegion = async (prevstate: any, formData: FormData) => {
name: z
.string()
.min(1, "Name is required")
.refine(() => !exists, {
.refine(() => !exists[0], {
message: `${name} already exists in selected country`,
}),
});

View File

@ -8,7 +8,7 @@ import { ZodError, z } from "zod";
export const addSubRegion = async (prevstate: any, formData: FormData) => {
//assign formdaata to variables.
const name = (formData.get("name") as string).toLowerCase();
const regionId = formData.get("region") as string;
const regionId = formData.get("regionId") as string;
//check if region already exists in country
const exists = await db
@ -22,7 +22,7 @@ export const addSubRegion = async (prevstate: any, formData: FormData) => {
name: z
.string()
.min(1, "Name is required")
.refine(() => !exists, {
.refine(() => !exists[0], {
message: `${name} already exists in selected region`,
}),
});