lint
This commit is contained in:
@@ -1,241 +1,161 @@
|
||||
import NavBar from '../../components/NavBar'
|
||||
import {useRouter} from "next/router";
|
||||
import { useId, useState, useEffect, useMemo } from 'react';
|
||||
import Select from 'react-select'
|
||||
import countryList from 'react-select-country-list'
|
||||
import {useId, useState, useEffect, useMemo} from 'react';
|
||||
import 'react-phone-number-input/style.css'
|
||||
import PhoneInput from 'react-phone-number-input'
|
||||
import NavBar from '../../components/NavBar';
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function addSchoolForm() {
|
||||
const { query } = useRouter();
|
||||
const [countryValue, setCountryValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
const [phoneValue, setphoneValue] = useState()
|
||||
const [allStates, setAllStates] = useState([])
|
||||
const [allCities, setAllCities] = useState([])
|
||||
|
||||
const handleSelectAllStates = stateCode => {
|
||||
setAllCities([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// console.log("handleSelectAllStates:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.name
|
||||
}
|
||||
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)
|
||||
})
|
||||
setAllCities(newData)
|
||||
})
|
||||
}
|
||||
const selectCountry = countryValue => {
|
||||
setAllStates([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// console.log("countryValue:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.iso2
|
||||
}
|
||||
})
|
||||
setAllStates(newData)
|
||||
setAllCities([])
|
||||
})
|
||||
setCountryValue(countryValue)
|
||||
}
|
||||
// console.log(phoneValue)
|
||||
// const selectCountry = countryValue => {
|
||||
// setCountryValue(countryValue)
|
||||
// }
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status":"published",
|
||||
name: event.target.schoolName.value,
|
||||
country: event.target.country.value,
|
||||
state: event.target.state.value,
|
||||
cities: event.target.cities.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,
|
||||
agreement_expiry_date: event.target.agreement_expiry_date.value,
|
||||
school_agreement: event.target.school_agreement.value,
|
||||
school_contact_number: event.target.school_contact_number.value,
|
||||
school_email_id: event.target.school_email_id.value,
|
||||
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
// console.log(data)
|
||||
const endpoint = 'https://management.beanstalkedu.com/items/school'
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSONdata,
|
||||
}
|
||||
const response = await fetch(endpoint, options)
|
||||
|
||||
}, [router.query.school]);
|
||||
|
||||
const result = await response.json()
|
||||
// alert(`Is this your full name: ${result.data}`)
|
||||
alert(`School Saved`)
|
||||
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 [school, setUser] = useState([]);
|
||||
const fetchData = async () => {
|
||||
const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&");
|
||||
const data = await response.json();
|
||||
return setUser(data.data[0]);
|
||||
}
|
||||
// console.log(school.name)
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
},[])
|
||||
|
||||
return (
|
||||
<main>
|
||||
<div>
|
||||
<NavBar />
|
||||
<div>
|
||||
<h1>Items page</h1>
|
||||
<p>{query.id}</p>
|
||||
<p>{query.name}</p>
|
||||
</div>
|
||||
<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='flex flex-col justify-center place-items-center'>
|
||||
<img src="/img/1.svg" alt="" />
|
||||
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className='w-full px-6 md:px-20'>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="school" className='text-xl font-bold'>School Name</label>
|
||||
<input type="text" name="schoolName"value={school.name} placeholder='School Name' 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 pt-4'>
|
||||
<label htmlFor="school_email_id" className='text-xl font-bold'> Email ID</label>
|
||||
<input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID' 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>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="country" instanceId={useId()} options={options} value={countryValue}
|
||||
onChange={selectCountry}/>
|
||||
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>
|
||||
{allStates && allStates.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="state" className='text-xl font-bold'>State</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="state" options={allStates} value={allStates[0].name}
|
||||
onChange={handleSelectAllStates}/>
|
||||
</div>}
|
||||
{
|
||||
allCities && allCities.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="cities" options={allCities} value={allCities[0].name}
|
||||
// onChange={() => {}}
|
||||
/>
|
||||
</div>}
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
|
||||
<PhoneInput className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="phone" placeholder="Enter phone number" value={phoneValue} onChange={setphoneValue}/>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="annual" className='text-xl font-bold'>annual</label>
|
||||
<select name="annual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" >-NA-</option>
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
<option value="March">March</option>
|
||||
<option value="April">April</option>
|
||||
<option value="May">May</option>
|
||||
<option value="June">June</option>
|
||||
<option value="July">July</option>
|
||||
<option value="August">August</option>
|
||||
<option value="September">September</option>
|
||||
<option value="October">October</option>
|
||||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
|
||||
<select name="toddlers" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" >-NA-</option>
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
<option value="March">March</option>
|
||||
<option value="April">April</option>
|
||||
<option value="May">May</option>
|
||||
<option value="June">June</option>
|
||||
<option value="July">July</option>
|
||||
<option value="August">August</option>
|
||||
<option value="September">September</option>
|
||||
<option value="October">October</option>
|
||||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
|
||||
<select name="early_start_programme" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" >-NA-</option>
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
<option value="March">March</option>
|
||||
<option value="April">April</option>
|
||||
<option value="May">May</option>
|
||||
<option value="June">June</option>
|
||||
<option value="July">July</option>
|
||||
<option value="August">August</option>
|
||||
<option value="September">September</option>
|
||||
<option value="October">October</option>
|
||||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
|
||||
<select name="interakto" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="na">-NA-</option>
|
||||
<option value="January"> January</option>
|
||||
<option value="February"> February</option>
|
||||
<option value="March"> March</option>
|
||||
<option value="April"> April</option>
|
||||
<option value="May"> May</option>
|
||||
<option value="June"> June</option>
|
||||
<option value="July"> July</option>
|
||||
<option value="August"> August</option>
|
||||
<option value="September"> September</option>
|
||||
<option value="November"> November</option>
|
||||
<option value="December"> December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
|
||||
<input type="date" name="agreement_expiry_date" id="agreement_expiry_date" 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="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
|
||||
<input type="file" name="school_agreement" id="school_agreement" className=' 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'>
|
||||
{/* <a href="/school-list"><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'>Submit Now</button></a> */}
|
||||
<input type="submit" value="Update" 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' />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user