187 lines
6.1 KiB
JavaScript
187 lines
6.1 KiB
JavaScript
|
|
|
|
|
|
import React, { useEffect, useState } from 'react'
|
|
import Button from '@material-ui/core/Button'
|
|
import { Link, useNavigate } from 'react-router-dom'
|
|
import swal from 'sweetalert'
|
|
import axios from 'axios'
|
|
import { isAutheticated } from 'src/auth'
|
|
|
|
|
|
|
|
const selectLanguage = (props) => {
|
|
const token = isAutheticated()
|
|
const navigate = useNavigate()
|
|
|
|
const { data, setData } = props.data
|
|
|
|
const { loading, setLoading } = props.loading
|
|
// const categories = props?.categories || []
|
|
|
|
const handleChange = (e) => {
|
|
if (data.language.length < 3) {
|
|
setData((prev) => ({
|
|
...prev,
|
|
language: [...data.language, e.target.value]
|
|
}))
|
|
}
|
|
else {
|
|
swal({
|
|
title: 'Warning',
|
|
text: 'please select Up to 3 languages!',
|
|
icon: 'warning',
|
|
button: 'ok',
|
|
dangerMode: true
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
// const [loading, setLoading] = useState(false)
|
|
|
|
|
|
|
|
|
|
const [LanguagesData, setLanguagesData] = useState([])
|
|
|
|
|
|
const getCategories = () => {
|
|
axios
|
|
.get(`/api/language`, {
|
|
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
|
})
|
|
.then((res) => {
|
|
|
|
setLanguagesData(res.data.data)
|
|
setLoading(false)
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
setLoading(false)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
getCategories()
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div
|
|
className="
|
|
page-title-box
|
|
d-flex
|
|
align-items-center
|
|
justify-content-between
|
|
"
|
|
>
|
|
<div style={{ fontSize: '22px' }} className="fw-bold">
|
|
Select Language
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '1rem' }}>
|
|
<h4 className="mb-0"></h4>
|
|
</div>
|
|
|
|
<div className="page-title-right">
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
style={{
|
|
fontWeight: 'bold',
|
|
marginBottom: '1rem',
|
|
textTransform: 'capitalize',
|
|
marginRight: '5px',
|
|
|
|
}}
|
|
onClick={() => props.handleView(2)}
|
|
|
|
>
|
|
Prev
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
disabled={data.purpose === ''}
|
|
style={{
|
|
fontWeight: 'bold',
|
|
marginBottom: '1rem',
|
|
textTransform: 'capitalize',
|
|
// marginRight: '5px',
|
|
}}
|
|
onClick={() => props.handleView(4)}
|
|
// disabled={loading}
|
|
// disabled={data.language.length < 0 && data.language.length > 3}
|
|
|
|
>
|
|
Next
|
|
{/* {loading ? 'Loading' : 'Next'} */}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div className="row">
|
|
<div className="col-sm-12 col-md-12 col-lg-12 my-1">
|
|
<div className="card h-100">
|
|
<div className="card-body px-5">
|
|
|
|
|
|
|
|
|
|
|
|
<div className="mb-3">
|
|
<label htmlFor="title" className="form-label">
|
|
please select Up to 3 languages
|
|
</label>
|
|
{LanguagesData.length > 0 && LanguagesData.map((item, index) =>
|
|
// <option key={index} value={item?.language} >{item?.language}</option>
|
|
<div className="d-flex">
|
|
<input className='me-2' type="checkbox" name={item?.language} id={data.language} value={item?.language} onChange={(e) => handleChange(e)}
|
|
/>
|
|
{/* {checked = { data.language.map(item => item === item?.language) }} */}
|
|
<label htmlFor="title" className="form-label">
|
|
{item?.language}
|
|
</label>
|
|
</div>
|
|
)}
|
|
{/* <select
|
|
onChange={(e) => handleChange(e)}
|
|
value={data.language}
|
|
className="form-control"
|
|
id="language"
|
|
disabled={LanguagesData.length < 1}
|
|
>
|
|
<option value="1">---select---</option>
|
|
{LanguagesData.length > 0 && LanguagesData.map((item, index) =>
|
|
<option key={index} value={item?.language} >{item?.language}</option>
|
|
|
|
)}
|
|
</select> */}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default selectLanguage |