diff --git a/src/components/SchoolEditForm.jsx b/src/components/SchoolEditForm.jsx new file mode 100644 index 0000000..b20f934 --- /dev/null +++ b/src/components/SchoolEditForm.jsx @@ -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 ( + + <> +
+ +
+ {showModal ? ( + <> +
+
+ {/*content*/} +
+ {/*header*/} + +
+
+
+

Edit Form

+ +
+
+
+ {/* */} + {/*

School Registration Form

*/} +
+
+
+ + +
+
+ + +
+
+ + +
+ {/*
+ + +
*/} +
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ {/*
+ + +
*/} +
+ {/* */} + +
+
+
+
+
+
+
+
+
+ + ) : null} + + ); +} \ No newline at end of file diff --git a/src/pages/add-school-form.jsx b/src/pages/add-school-form.jsx index dd9ae09..2fcca3b 100644 --- a/src/pages/add-school-form.jsx +++ b/src/pages/add-school-form.jsx @@ -206,10 +206,10 @@ export default function addSchoolForm() { -
+ {/*
-
+
*/}
{/* */} diff --git a/src/pages/add-user-form.jsx b/src/pages/add-user-form.jsx index 843a1ce..57352c1 100644 --- a/src/pages/add-user-form.jsx +++ b/src/pages/add-user-form.jsx @@ -5,8 +5,6 @@ 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' - - import NavBar from '../components/NavBar'; // import { Inter } from 'next/font/google' diff --git a/src/pages/school-list/[slug].jsx b/src/pages/school-list/[slug].jsx new file mode 100644 index 0000000..163272a --- /dev/null +++ b/src/pages/school-list/[slug].jsx @@ -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 ( +
+
+ +
+

Items page

+

{query.id}

+

{query.name}

+
+
+
+
+ +

Update School Information

+
+
+
+ + +
+
+ + +
+
+ + +
} + { + allCities && allCities.length > 0 && +
+ + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ {/*
+ + +
*/} +
+ {/* */} + +
+
+
+
+
+
+ ) + } \ No newline at end of file diff --git a/src/pages/school-list.tsx b/src/pages/school-list/index.jsx similarity index 83% rename from src/pages/school-list.tsx rename to src/pages/school-list/index.jsx index e613e8c..1d22ede 100644 --- a/src/pages/school-list.tsx +++ b/src/pages/school-list/index.jsx @@ -1,16 +1,17 @@ +// import SchoolEditForm from '../../components/SchoolEditForm' import React, { useEffect, useState } from "react"; import Image from 'next/image' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) -import NavBar from '../components/NavBar' +import NavBar from '../../components/NavBar' export default function Modal() { - const [school, setUser] = useState([]); + 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); } -// console.log(user) + console.log(school) useEffect(() => { fetchData(); @@ -23,9 +24,7 @@ const fetchData = async () => {
- - Add School - + Add School
@@ -39,7 +38,7 @@ const fetchData = async () => { - + @@ -53,10 +52,11 @@ const fetchData = async () => { - + )} + {/* */}
Toddlers Interakto Status Edit Edit
{data.toddlers} {data.interakto} {data.status} Edit Edit
diff --git a/src/pages/school-list/slug.jsx b/src/pages/school-list/slug.jsx new file mode 100644 index 0000000..526067a --- /dev/null +++ b/src/pages/school-list/slug.jsx @@ -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 ( +
+
+ +
+

Items page

+

{query.id}

+

{query.name}

+
+
+
+
+ +

Update School Information

+
+
+
+ + +
+
+ + +
+
+ + +
} + { + allCities && allCities.length > 0 && +
+ + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ {/*
+ + +
*/} +
+ {/* */} + +
+
+
+
+
+
+ ) + } \ No newline at end of file