216 lines
13 KiB
JavaScript
216 lines
13 KiB
JavaScript
import React, { useId, useEffect, useState, useMemo } from "react";
|
|
import Select from 'react-select';
|
|
import countryList from 'react-select-country-list'
|
|
import 'react-phone-number-input/style.css'
|
|
import PhoneInput from 'react-phone-number-input'
|
|
export default function Modal() {
|
|
const options = useMemo(() => countryList().getData(), [])
|
|
const [phoneValue, setphoneValue] = useState()
|
|
const [allStates, setAllStates] = useState([])
|
|
const [allCities, setAllCities] = useState([])
|
|
|
|
const [showModal, setShowModal] = React.useState(false);
|
|
const [school, setSchool] = useState([]);
|
|
const fetchData = async () => {
|
|
const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published");
|
|
const data = await response.json();
|
|
return setSchool(data.data);
|
|
}
|
|
console.log(school)
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
},[])
|
|
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)
|
|
|
|
const result = await response.json()
|
|
// alert(`Is this your full name: ${result.data}`)
|
|
alert(`School Saved`)
|
|
}
|
|
return (
|
|
|
|
<>
|
|
<div className="mt-4 items-center flex justify-center place-items-center">
|
|
<button className="block bg-[#FFF6F2] focus:ring-4 focus:outline-none focus:ring-[#FFF6F2] font-medium rounded-lg text-sm px-2 py-1.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mb-8" type="button" onClick={() => setShowModal(true)}>Edit</button>
|
|
</div>
|
|
{showModal ? (
|
|
<>
|
|
<div
|
|
className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
|
|
>
|
|
<div className="relative w-auto my-6 mx-auto max-w-3xl">
|
|
{/*content*/}
|
|
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
|
|
{/*header*/}
|
|
|
|
<div>
|
|
<section className='container-fluid'>
|
|
<div className="">
|
|
<h3 className=" font-semibold text-blue-700">Edit Form</h3>
|
|
<button className="p-1 ml-auto text-blue-700" onClick={() => setShowModal(false)}>
|
|
<span className="text-3xl text-blue-700">x</span>
|
|
</button>
|
|
</div>
|
|
<div className='flex flex-row 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'>School Registration Form</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" 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="" options="" value=""
|
|
onChange="" ></select>
|
|
</div>
|
|
{/* <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} >
|
|
|
|
</select>
|
|
</div> */}
|
|
<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="" value=""
|
|
></select>
|
|
</div>
|
|
<div className='flex flex-col w-full'>
|
|
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
|
|
</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="Save" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
|
|
</>
|
|
) : null}
|
|
</>
|
|
);
|
|
} |