diff --git a/src/pages/edit-school.jsx b/src/pages/edit-school.jsx index 905c281..ef230da 100644 --- a/src/pages/edit-school.jsx +++ b/src/pages/edit-school.jsx @@ -27,11 +27,13 @@ export default function addSchoolForm() { fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`) .then(res => res.json()) .then(data => { - console.log(router.query.school); setSchool(data.data) + // console.log(router.query.school); + setSchool(data.data) }) } - + }, [router.query.school]); + // console.log(setSchool) const handleSubmit = async (event) => { event.preventDefault() @@ -77,7 +79,7 @@ export default function addSchoolForm() {
-

School Registration Form

+

Update School Information

@@ -90,38 +92,38 @@ export default function addSchoolForm() {
- setSchool(e.target.value)} name="country" /> + setSchool(e.target.value)} name="country" />
- setSchool(e.target.value)} name="state" /> + setSchool(e.target.value)} name="state" className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
- setSchool(e.target.value)} name="cities" /> + setSchool(e.target.value)} name="cities" className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
- setSchool(e.target.value)} name="school_contact_number" /> + setSchool(e.target.value)} name="school_contact_number" className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
- setSchool(e.target.value)} /> + setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
- setSchool(e.target.value)} /> + setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
- setSchool(e.target.value)} /> + setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
- setSchool(e.target.value)} /> + setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
diff --git a/src/pages/edit-user.jsx b/src/pages/edit-user.jsx new file mode 100644 index 0000000..46d6eba --- /dev/null +++ b/src/pages/edit-user.jsx @@ -0,0 +1,402 @@ +// https://management.beanstalkedu.com/items/school +// import React from 'react'; +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' +import NavBar from '../components/NavBar'; +import { useRouter } from 'next/router' +// import { Inter } from 'next/font/google' + +const typeParent = "parent" + +export default function addUserForm() { + + const router = useRouter(); + + const [allLanguage, setLanguage] = useState([ + {lang: "Assamese", value: false}, + {lang: "Bengali", value: false}, + {lang: "English", value: false}, + {lang: "Hindi", value: false}, + {lang: "Telegu", value: false}, + {lang: "Punjabi", value: false}, + {lang: "Malayalam", value: false}, + {lang: "Tamil", value: false}, + {lang: "Kannada", value: false}, + {lang: "Gujrati", value: false}, + ]) + // console.log(allLanguage) + const [currentType, setCurrentType] = useState(typeParent) + const [countryValue, setCountryValue] = useState('') + const options = useMemo(() => countryList().getData(), []) + const [phoneValue, setphoneValue] = useState() + let [individualValue = true, setindividualValue] = 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) + } + + const individual = (event) => { + // console.log(event.target.schoolID.value) + + setindividualValue(individualValue = false) + } + const [school, setSchool] = useState(null); + useEffect(() => { + fetch(`https://management.beanstalkedu.com/items/school`) + .then(res => res.json()) + .then(data => { + setSchool(data) + + }) + }, []) + + const [user, setUser] = useState({}); + + useEffect(()=>{ + if(router.query.user && router.query.user>1){ + fetch(`/api/listUsers/${router.query.user}`) + .then(res => res.json()) + .then(data => { + setUser(data) + } + ) + } + }, + [router.query.user]); + console.log(user) + + const handleFormsubmit = async (event) => { + event.preventDefault() + console.log(event.target.lang.checked) + const data = { + "status": "published", + type: event.target.type.value, + uname: event.target.uname.value, + country: event.target.country.value, + state: event.target.state.value ? event.target.state.value:"", + city: event.target.city.value ? event.target.city.value:"", + phone: event.target.phone.value, + email: event.target.email.value, + school: event.target.schoolID.value, + klas: event.target.klas.value, + lang: allLanguage, + start_month: event.target.start_month.value, + start_date: event.target.start_date.value, + end_date: event.target.end_date.value, + anual: event.target.anual.value, + early_start_programme: event.target.early_start_programme.value, + toddlers: event.target.toddlers.value, + interakto: event.target.interakto.value, + } + const JSONdata = JSON.stringify(data) + const endpoint = '/api/addUsers' + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSONdata, + } + const response = await fetch(endpoint, options) + const result = await response.json() + // console.log(result) + // alert(`Is this your full name: ${result}`) + } + const handleOnLanguageChange = (e, v) => { + let idx = allLanguage.findIndex(o => o.lang === e.target.value); + let newAllLang = [...allLanguage] + newAllLang[idx].value = true + // console.log(newAllLang) + + if ([typeParent, "teacher"].includes(currentType)) { + let counter = 0 + newAllLang.forEach((n, idx) => { + if (n.value) { + counter++ + } + }) + if (counter >= 2) { + newAllLang.forEach((n, idx) => { + newAllLang[idx].disabled = true + }) + } + } + setLanguage(newAllLang) + } + const handleTypeOnChange = (e) => { + let newAllLang = [...allLanguage] + newAllLang.forEach((n, idx) => { + newAllLang[idx].value = false + newAllLang[idx].disabled = false + }) + const { name, checked } = e.target; + setLanguage({ ...allLanguage, [name]: checked }); + + // setLanguage(newAllLang) + setCurrentType(e.target.value) + } + return ( +
+
+ +
+
+
+ +

Update User Information

+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
} + { + allCities && allCities.length > 0 && +
+ + + + {school && school.data.map(data => + + )} + +
+
+ + +
+ {individualValue && +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+ {/*  
+  
+  
+  
+  
+  
+  
+  
+  
+  
*/} + {allLanguage && allLanguage.length && allLanguage.map(n => { + return ( +
+   + +
+ ) + })} +
+
+
+ + +
+
+ + +
+
+ + +
+
+ } +
+ + {/* */} +
+ +
+
+
+
+ ) +} diff --git a/src/pages/school-list/index.jsx b/src/pages/school-list/index.jsx index be8d64f..ae841e9 100644 --- a/src/pages/school-list/index.jsx +++ b/src/pages/school-list/index.jsx @@ -52,7 +52,8 @@ const fetchData = async () => { {data.toddlers} {data.interakto} {data.status} - Edit + + )} diff --git a/src/pages/user-list.jsx b/src/pages/user-list.jsx index de65963..964870e 100644 --- a/src/pages/user-list.jsx +++ b/src/pages/user-list.jsx @@ -8,7 +8,7 @@ export default function Modal() { const fetchData = async () => { const response = await fetch("/api/listUsers"); const data = await response.json(); - console.log(data) + // console.log(data) return setUser(data); } // console.log(user) @@ -32,31 +32,54 @@ const fetchData = async () => { - + + + - + - + {/* */} {/* */} + - {user.map(data=> - - - - - - - - {/* */} - - - - )} + {user.map + (data=> + + + + + + + + + {/* */} + {/* */} + + + + + ) + }
user NameNameMobileEmail School Name User TypePlanAnnual ClassLanguageLanguageYearStart Date End DateAction
{data.user}{data.school}{data.type}{data.plan}{data.class}{data.lang}{data.year}{data.start_date}{data.end_date}
{data.uname}{data.phone}{data.email}{data.school}{data.type}{data.anual}{data.klas}{data.lang}{data.year}{data.start_date}{data.end_date} +
+ +
+ +
+
+