Skip to content

Commit

Permalink
Merge pull request #53 from zwenie-tech/development/mzl
Browse files Browse the repository at this point in the history 
Development/mzl
  • Loading branch information
@Rohith272
Rohith272 authored Aug 5, 2024
2 parents 9fd5545 + 003744f commit c4d1e8d
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 52 deletions.
90 changes: 67 additions & 23 deletions src/app/dashboard/details-edit/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ const formSchoolSchema = z.object({
value: z.array(z.string()).nonempty("Please select at least one club"),
no_of_students: z.coerce.number(),
list_of_classes: z.string().min(3).max(255),
sub_category: z.string().min(3).max(255)
});

type FormSchema = z.infer<typeof formSchoolSchema>;
Expand All @@ -152,6 +153,11 @@ const formPromoterSchema = z.object({
total_team: z.coerce.number(),
});

interface subCategory {
gp_cat_id: string;
gp_cat_name: string;
}

type FormPromoterSchema = z.infer<typeof formPromoterSchema>;

const DetailsEdit: React.FC = () => {
Expand All @@ -163,6 +169,7 @@ const DetailsEdit: React.FC = () => {
const { toast } = useToast();

const [clubOptions, setClubOptions] = useState<Club[]>([]);
const [subcategoryOptions, setsubCategoryOptions] = useState<subCategory[]>([]);

const [isEditing, setIsEditing] = useState(false);
const [isGroupEditing, setgroupIsEditing] = useState(false);
Expand Down Expand Up @@ -225,6 +232,7 @@ const DetailsEdit: React.FC = () => {
value: [schoolDetails.club_names],
no_of_students: schoolDetails.no_of_students,
list_of_classes: schoolDetails.list_of_classes,
sub_category: 'try'
},
});

Expand Down Expand Up @@ -274,6 +282,13 @@ const DetailsEdit: React.FC = () => {
} catch (error) {
console.error("Error fetching clubs:", error);
}
try {
const response = await axios.get(`${apiURL}/schoolCategory`);
console.log(response.data);
setsubCategoryOptions(response.data.subCategory);
} catch (error) {
console.error("Error fetching category:", error);
}
};
fetchClubs();
}, []);
Expand Down Expand Up @@ -355,16 +370,15 @@ const DetailsEdit: React.FC = () => {
const schoolData = await schoolResponse.json();

if (schoolData.schoolDetails.length > 0) {
setSchoolDetails(schoolData.schoolDetails[0]);
const formattedClubname =
schoolData.schoolDetails[0].club_names.split(", ");
const clubset = {
value: formattedClubname,
list_of_classes: schoolData.schoolDetails[0].list_of_classes,
no_of_students: schoolData.schoolDetails[0].no_of_students,
};

multiForm.reset(clubset);
const schooldetails = schoolData.schoolDetails[0]
setSchoolDetails(schooldetails);
multiForm.reset({
value: schooldetails.club_names.split(", "),
list_of_classes: schooldetails.list_of_classes,
no_of_students: schooldetails.no_of_students,
sub_category: schooldetails.gp_cat_name

});
}}
}

Expand Down Expand Up @@ -650,8 +664,9 @@ const DetailsEdit: React.FC = () => {
clubs: selectedClubIds.toString(),
list_of_classes: values.list_of_classes,
no_of_students: values.no_of_students,
subCategoryId: subcategoryOptions.find((item) => item.gp_cat_name === values.sub_category)?.gp_cat_id
};

try {
const response = await fetch(`${apiURL}/coordinator/updateSchool`, {
method: "POST",
Expand Down Expand Up @@ -776,9 +791,10 @@ const DetailsEdit: React.FC = () => {
if(additionalmode===4){
const apipromoterdata = {
cityName:values.city_name,
categoryId:category.find((item) => item.group_type === promoterDetail.group_type)?.id,
categoryId:category.find((item) => item.group_type === values.category)?.id,
totalMembers:values.total_team,
};

try {
const response = await fetch(`${apiURL}/coordinator/updatePromoter`, {
method: "POST",
Expand Down Expand Up @@ -866,7 +882,7 @@ const DetailsEdit: React.FC = () => {
<Select
onValueChange={(value) => handleSelectChange('group_type', value)}
defaultValue={field.value}
disabled={!isGroupEditing}
disabled={true}
>
<FormControl>
<SelectTrigger>
Expand Down Expand Up @@ -1251,7 +1267,7 @@ const DetailsEdit: React.FC = () => {
/>
</div>
)}
{selectedCountry && (
{schoolDetails && (
<div className="mb-3 flex justify-between gap-3">
<FormField
control={multiForm.control}
Expand All @@ -1273,7 +1289,7 @@ const DetailsEdit: React.FC = () => {
/>
</div>
)}
{selectedCountry && (
{schoolDetails && (
<div className="mb-3 flex justify-between gap-3">
<FormField
control={multiForm.control}
Expand All @@ -1294,6 +1310,34 @@ const DetailsEdit: React.FC = () => {
/>
</div>
)}

<FormField

control={multiForm.control}


name="sub_category"
render={({ field }) => (
<FormItem>
<FormLabel> Category</FormLabel>
<Select {...field} onValueChange={(value) =>field.onChange(value)} defaultValue={field.value} disabled={!isEditing}>
<FormControl className=" rounded-md px-4 border-0">
<SelectTrigger>
<SelectValue placeholder="Choose a category" />
</SelectTrigger>
</FormControl>
<SelectContent>
{subcategoryOptions.map((cat) => (
<SelectItem key={cat.gp_cat_id} value={cat.gp_cat_name}>
{cat.gp_cat_name}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>

{isEditing && (
<div className="flex justify-center">
Expand Down Expand Up @@ -1460,14 +1504,14 @@ const DetailsEdit: React.FC = () => {
name="category"
render={({ field }) => (
<FormItem>
{/* <FormLabel>Promoting Category {promoterDetail.group_type}</FormLabel> */}
<Select onValueChange={field.onChange} defaultValue={field.value} disabled={!isEditing}>
{/* <FormControl className=" rounded-md px-4 border-0"> */}
{/* <SelectTrigger>
<FormLabel>Promoting Category {promoterDetail.group_type}</FormLabel>
<Select {...field} onValueChange={field.onChange} defaultValue={field.value} disabled={!isEditing}>
<FormControl className=" rounded-md px-4 border-0">
<SelectTrigger>
<SelectValue placeholder="Choose a category" />
</SelectTrigger> */}
{/* </FormControl> */}
{/* <SelectContent>
</SelectTrigger>
</FormControl>
<SelectContent>
{category.map((category) =>
category.group_type !== "Promoter" ? (
<SelectItem key={category.id} value={category.group_type}>
Expand All @@ -1477,7 +1521,7 @@ const DetailsEdit: React.FC = () => {
""
)
)}
</SelectContent> */}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
Expand Down
84 changes: 55 additions & 29 deletions src/app/register/school-additional-details/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
} from "@/components/ui/form";
import z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { useForm, Controller } from "react-hook-form";
import { Button } from "@/components/ui/button";
import NavigationBar from "@/components/navigationBar";
import { Input } from "@/components/ui/input";
Expand All @@ -29,12 +29,14 @@ import { useToast } from "@/components/ui/use-toast";
import { apiURL } from "@/app/requestsapi/request";
import { fetchClubData } from "@/app/requestsapi/request";
import Footer from "@/components/footer";
import axios from "axios";

const formSchema = z.object({
value: z.array(z.string()).nonempty("Please select at least one club"),
no_of_students: z.coerce.number(),
total_classes: z.coerce.number().gte(1).lte(999),
list_of_classes: z.string().min(3).max(255),
category: z.string().nonempty("Please select a category"),
});

type FormSchema = z.infer<typeof formSchema>;
Expand All @@ -43,9 +45,14 @@ interface Club {
id: string;
name: string;
}
interface Category {
gp_cat_id: string;
gp_cat_name: string;
}

const MultiSelectZodForm = () => {
const [clubOptions, setClubOptions] = useState<Club[]>([]);
const [categoryOptions, setCategoryOptions] = useState<Category[]>([]);
const multiForm = useForm<FormSchema>({
resolver: zodResolver(formSchema),
defaultValues: {
Expand All @@ -61,7 +68,6 @@ const MultiSelectZodForm = () => {
useEffect(() => {
const fetchClubs = async () => {
try {

const data = await fetchClubData();
setClubOptions(data.clubs);
} catch (error) {
Expand All @@ -71,6 +77,19 @@ const MultiSelectZodForm = () => {
fetchClubs();
}, []);

useEffect(() => {
const fetchCategory = async () => {
try {
const response = await axios.get(`${apiURL}/schoolCategory`);
console.log(response.data);
setCategoryOptions(response.data.subCategory);
} catch (error) {
console.error("Error fetching category:", error);
}
};
fetchCategory();
}, []);

const onSubmit = async (data: FormSchema) => {
// Extracting values from searchParams
const groupId = searchParams.get("group_id");
Expand All @@ -80,13 +99,16 @@ const MultiSelectZodForm = () => {
.filter((club) => data.value.includes(club.name))
.map((club) => club.id);


const payload = {
groupId: parseInt(groupId!),
clubs: selectedClubIds.toString(),
list_of_classes: data.list_of_classes.toString(),
no_of_students: parseInt(data.no_of_students.toString()),
phoneNUmber: parseInt(pno!),
subCategoryId:categoryOptions.find((item) => item.gp_cat_name === data.category)?.gp_cat_id
};
console.log(payload)

try {
const response = await fetch(`${apiURL}/group/school/register`, {
Expand Down Expand Up @@ -122,24 +144,8 @@ const MultiSelectZodForm = () => {
return (
<section className="bg-green-50">
<NavigationBar />
{/*<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0 mt-8">
<div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0">
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
School - Additional details
</h1>
<Button type="submit" className="bg-green-600">
Submit
</Button>
</form>
</Form>
</div>
</div>
</div>*/}

<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white text-center">
School - Additional details
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white text-center">
School - Additional details
</h1>
<div className="mt-7 container mx-auto p-4 flex flex-col lg:flex-row items-stretch">
<div className="w-full lg:w-1/3 flex items-center justify-center">
Expand All @@ -149,10 +155,10 @@ School - Additional details
className="w-full h-full object-cover rounded-lg opacity-50"
/>
</div>
{/*form.......... */}
{/* form */}
<div className="w-full lg:w-1/3 bg-white rounded-lg shadow dark:border dark:bg-gray-800 dark:border-gray-700 flex items-center justify-center border-2">
<div className="p-6 w-full">
<Form {...multiForm}>
<Form {...multiForm}>
<form
onSubmit={multiForm.handleSubmit(onSubmit)}
className="space-y-3 grid gap-3 w-full"
Expand Down Expand Up @@ -230,11 +236,32 @@ School - Additional details
</FormItem>
)}
/>
<FormField
control={multiForm.control}
name="category"
render={({ field }) => (
<FormItem>
<FormLabel>Select Category</FormLabel>
<FormControl className="shadow-xl rounded-md px-4 py-1 border-0">
<select {...field} className="w-full px-4 py-2 border rounded-md" required>
<option value="">Select a category</option>
{categoryOptions.map((category) => (
<option key={category.gp_cat_id} value={category.gp_cat_name}>
{category.gp_cat_name}
</option>
))}
</select>
</FormControl>
<FormDescription> </FormDescription>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-center">
<Button type="submit" className="w-1/3 bg-green-600">
Submit
</Button>
</div>
<Button type="submit" className="w-1/3 bg-green-600">
Submit
</Button>
</div>
</form>
</Form>
</div>
Expand All @@ -247,16 +274,15 @@ School - Additional details
/>
</div>
</div>
<Footer/>
<Footer />
</section>
);
};


export default function MultiSelectZod() {
return (
<Suspense fallback={<div>Loading...</div>}>
<MultiSelectZodForm />
</Suspense>
);
}
}

0 comments on commit c4d1e8d

Please sign in to comment.