162 lines
9.3 KiB
JavaScript
162 lines
9.3 KiB
JavaScript
import {useId, useState, useEffect, useMemo} from 'react';
|
|
import 'react-phone-number-input/style.css'
|
|
import NavBar from '../../components/NavBar';
|
|
import { useRouter } from 'next/router'
|
|
import Link from 'next/link'
|
|
|
|
|
|
export default function SchoolSlug() {
|
|
const router = useRouter();
|
|
|
|
const [school, setSchool] = useState({});
|
|
|
|
useEffect(()=>{
|
|
if(router.query.school && router.query.school>0 ){
|
|
console.log(router.query);
|
|
fetch(`/api/getSchoolDetails?school=${router.query.school}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
console.log(data);
|
|
setSchool(data[0])
|
|
// console.log(school)
|
|
})
|
|
}
|
|
|
|
}, [router.query.school]);
|
|
|
|
const updateSchoolData = async (event) => {
|
|
event.preventDefault()
|
|
const data = {
|
|
schoolId: router.query.school,
|
|
sname: event.target.sname.value,
|
|
status: event.target.status.value,
|
|
country: event.target.country.value,
|
|
state: event.target.state.value,
|
|
city: event.target.city.value,
|
|
annual: event.target.annual.value,
|
|
toddlers: event.target.toddlers.value,
|
|
early_start_programme: event.target.early_start_programme.value,
|
|
interakto: event.target.interakto.value,
|
|
agg_expiry: event.target.agg_expiry.value,
|
|
usage_expiry: event.target.usage_expiry.value,
|
|
phone: event.target.phone.value,
|
|
email: event.target.email.value,
|
|
}
|
|
const JSONdata = JSON.stringify(data)
|
|
console.log(data)
|
|
const endpoint = '/api/editSchool'
|
|
const options = {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSONdata,
|
|
}
|
|
const response = await fetch(endpoint, options)
|
|
|
|
const result = await response.json()
|
|
// alert(`Is this your full name: ${result.data}`)
|
|
alert(`User data updated`)
|
|
|
|
}
|
|
|
|
return (
|
|
<main>
|
|
<div>
|
|
<NavBar/>
|
|
<section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
|
|
<div
|
|
className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
|
|
<div className='inline-flex p-4 '>
|
|
<Link href="/add-school-form" className="m-2 inline-flex place-items-center justify-center p-2 pl-4 pr-4 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
|
|
<img src="/img/4.svg" alt="" />
|
|
List Users Under This School
|
|
</Link>
|
|
<div className="place-items-center justify-center m-2 p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
|
|
<span className="text-small">CSV Upload </span>
|
|
<input type="file" />
|
|
</div>
|
|
{/* <img src="/img/2.svg" alt=""/> */}
|
|
|
|
</div>
|
|
<p className='text-2xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information </p>
|
|
<form onSubmit={updateSchoolData} action="" className='w-full px-6 md:px-20'>
|
|
<div className='flex flex-col w-full pt-4'>
|
|
<label htmlFor="sname" className='text-xl font-bold'>School Name</label>
|
|
<input value={school.sname} onChange={e => setSchool(e.target.value)} type="text" name="sname" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full pt-4'>
|
|
<label htmlFor="status" className='text-xl font-bold'>Status</label>
|
|
<input value={school.status} onChange={e => setSchool(e.target.value)} type="text" name="status" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="phone" className='text-xl font-bold'>School contact Number</label>
|
|
<input value={school.phone} onChange={e => setSchool(e.target.value)} type="text" name="phone" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="email" className='text-xl font-bold'> School contact Email ID</label>
|
|
<input value={school.email} onChange={e => setSchool(e.target.value)} type="text" name="email" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
|
<input value={school.country} onChange={e => setSchool(e.target.value)} type="text" name="country" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="state" className='text-xl font-bold'>State</label>
|
|
<input value={school.state} onChange={e => setSchool(e.target.value)} type="text" name="state" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="city" className='text-xl font-bold'>Cities</label>
|
|
<input value={school.city} onChange={e => setSchool(e.target.value)} type="text" name="city" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="annual" className='text-xl font-bold'>Annual</label>
|
|
<input value={school.annual} onChange={e => setSchool(e.target.value)} type="text" name="annual" placeholder='' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
|
|
<input value={school.toddlers} onChange={e => setSchool(e.target.value)} type="text" name="toddlers" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
|
|
<input value={school.early_start_programme} onChange={e => setSchool(e.target.value)} type="text" name="early_start_programme" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
|
|
<input value={school.interakto} onChange={e => setSchool(e.target.value)} type="text" name="interakto" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="usage_expiry" className='text-xl font-bold'> Usage Expiry Date: (YYYY-MM-DD)</label>
|
|
<input value={school.usage_expiry} onChange={e => setSchool(e.target.value)} type="text" name="usage_expiry" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="agg_expiry" className='text-xl font-bold'> Agreement Expiry Date: (YYYY-MM-DD)</label>
|
|
<input value={school.agg_expiry} onChange={e => setSchool(e.target.value)} type="text" name="agg_expiry" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
</div>
|
|
<div className='flex justify-center pt-8'>
|
|
<button type="submit"
|
|
className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Update
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="agreement_documents" className='text-xl font-bold'>Upload Agreement Document's</label>
|
|
<input onChange={e => setSchool(e.target.value)} type="file" name="agreement_documents" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
<div className='flex justify-end pt-2'>
|
|
<button className=' bg-[#FE4501] px-4 py-1.5 rounded-lg text-white'>Download Agreement</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
|