wip
Subhodip Ghosh 2023-05-13 14:17:30 +05:30
parent 3d1e9cce9e
commit 090ec80c0f
6 changed files with 708 additions and 12 deletions

View File

@ -0,0 +1,216 @@
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,
anual: event.target.anual.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="anual" className='text-xl font-bold'>Anual</label>
<select name="anual" 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}
</>
);
}

View File

@ -206,10 +206,10 @@ export default function addSchoolForm() {
<label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label> <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]' /> <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>
<div className='flex flex-col w-full'> {/* <div className='flex flex-col w-full'>
<label htmlFor="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label> <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]' /> <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> */}
<div className='flex justify-center pt-8'> <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> */} {/* <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' /> <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' />

View File

@ -5,8 +5,6 @@ import Select from 'react-select'
import countryList from 'react-select-country-list' import countryList from 'react-select-country-list'
import 'react-phone-number-input/style.css' import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input' import PhoneInput from 'react-phone-number-input'
import NavBar from '../components/NavBar'; import NavBar from '../components/NavBar';
// import { Inter } from 'next/font/google' // import { Inter } from 'next/font/google'

View File

@ -0,0 +1,241 @@
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 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
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
}
})
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,
anual: event.target.anual.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`)
}
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}/>
</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="anual" className='text-xl font-bold'>Anual</label>
<select name="anual" 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>
</div>
</main>
)
}

View File

@ -1,16 +1,17 @@
// import SchoolEditForm from '../../components/SchoolEditForm'
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Image from 'next/image' import Image from 'next/image'
import { Inter } from 'next/font/google' import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] }) const inter = Inter({ subsets: ['latin'] })
import NavBar from '../components/NavBar' import NavBar from '../../components/NavBar'
export default function Modal() { export default function Modal() {
const [school, setUser] = useState<any[]>([]); const [school, setUser] = useState([]);
const fetchData = async () => { const fetchData = async () => {
const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published"); const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published");
const data = await response.json(); const data = await response.json();
return setUser(data.data); return setUser(data.data);
} }
// console.log(user) console.log(school)
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
@ -23,9 +24,7 @@ const fetchData = async () => {
<section className='container mx-auto px-4 mt-16'> <section className='container mx-auto px-4 mt-16'>
<div className="flex justify-end bg-[#FFF6F2] p-2 border-x-2 border-t-2 rounded-t-xl "> <div className="flex justify-end bg-[#FFF6F2] p-2 border-x-2 border-t-2 rounded-t-xl ">
<a href="/add-school-form" className=" inline-flex place-items-center p-2"> <a href="/add-school-form" className=" inline-flex place-items-center p-2">
<img src="/img/3.svg" alt="" /> <img src="/img/3.svg" alt="" />Add School</a>
Add School
</a>
</div> </div>
<div className='flex xl:justify-center overflow-x-scroll pb-4 w-full'> <div className='flex xl:justify-center overflow-x-scroll pb-4 w-full'>
<table className=" text-center border-x-2 border-b-2 p-2 w-full"> <table className=" text-center border-x-2 border-b-2 p-2 w-full">
@ -39,7 +38,7 @@ const fetchData = async () => {
<th className=" p-2">Toddlers</th> <th className=" p-2">Toddlers</th>
<th className=" p-2">Interakto</th> <th className=" p-2">Interakto</th>
<th className=" p-2">Status</th> <th className=" p-2">Status</th>
<th className=" p-2"> <img src="/img/3.svg" alt="" />Edit</th> <th className=" p-2 inline-flex"> <img src="/img/3.svg" alt="" />Edit</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -53,10 +52,11 @@ const fetchData = async () => {
<td className="p-2">{data.toddlers}</td> <td className="p-2">{data.toddlers}</td>
<td className="p-2">{data.interakto}</td> <td className="p-2">{data.interakto}</td>
<td className="p-2">{data.status}</td> <td className="p-2">{data.status}</td>
<td className="p-2"> <a href='"/editschool?id="{data.name}'> Edit </a> </td> <td className="p-2"><a href={'/add-school-form?school='+data.id}>Edit</a> </td>
</tr> </tr>
)} )}
</tbody> </tbody>
{/* <SchoolEditForm /> */}
</table> </table>
</div> </div>
</section> </section>

View File

@ -0,0 +1,241 @@
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 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
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
}
})
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,
anual: event.target.anual.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`)
}
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}/>
</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="anual" className='text-xl font-bold'>Anual</label>
<select name="anual" 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>
</div>
</main>
)
}