271 lines
11 KiB
JavaScript
271 lines
11 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import propTypes from 'prop-types';
|
|
import MaximumLength from '@ckeditor/ckeditor5-react'
|
|
import { categories, experience_levels } from '../consts';
|
|
import styles from '../style'
|
|
import { CKEditor } from '@ckeditor/ckeditor5-react';
|
|
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
import ImageUpload from './ImageUpload';
|
|
import SkillsSelector from './SkillsSelector';
|
|
import Salary from './Salary';
|
|
import { placeholderImage } from '../assets';
|
|
import Button from './Button';
|
|
const StepTwoJoblisting = ({ nextStep, prevStep, handleChange, formData, setFormData, removeFields, skills }) => {
|
|
const [editorData, setEditorData] = useState('');
|
|
const [imageSrc, setImageSrc] = useState(placeholderImage);
|
|
const max_words = 500;
|
|
const countWords = (text) => {
|
|
return text.split(/\s/).filter(function(n) { return n != '' }).length;
|
|
}
|
|
|
|
const validateForm2 = () => {
|
|
const { name, company_name, localization, content, min_salary, max_salary, work_from_home, employment_type, image, skill_levels } = formData;
|
|
if (!name || !company_name || !localization || !content || !min_salary || !max_salary || !work_from_home || !employment_type || !image || !skill_levels) {
|
|
return true;
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
if (formData.content) {
|
|
console.log(countWords(formData.content))
|
|
if (countWords(formData.content) > max_words) {
|
|
alert('Maksymalna liczba słów wynosi 500')
|
|
}
|
|
}
|
|
|
|
}, [formData.content])
|
|
|
|
const handleNextStep = () => {
|
|
if (validateForm()) {
|
|
console.log(errors)
|
|
nextStep(); // Przejście do następnego kroku
|
|
} else {
|
|
alert('Proszę wypełnić wszystkie wymagane pola.'); // Wyświetl komunikat o błędzie
|
|
}
|
|
};
|
|
const errorStyleInput = 'border-red-600'
|
|
const [errors, setErrors] = useState({});
|
|
const validateForm = () => {
|
|
let newErrors = {};
|
|
if (countWords(formData.content) > max_words) {
|
|
newErrors.content = 'Maksymalna liczba słów wynosi 600';
|
|
}
|
|
// Sprawdź każde wymagane pole
|
|
if (!formData.name) {
|
|
newErrors.name = 'To pole jest wymagane';
|
|
}
|
|
if (!formData.company_name) {
|
|
newErrors.company_name = 'To pole jest wymagane';
|
|
}
|
|
if (!formData.localization) {
|
|
newErrors.localization = 'To pole jest wymagane';
|
|
}
|
|
if (!formData.content) {
|
|
newErrors.content = 'To pole jest wymagane';
|
|
}
|
|
console.log(formData.require_salary)
|
|
if (formData.require_salary === true)
|
|
{
|
|
console.log(formData.require_salary)
|
|
if (!formData.min_salary) {
|
|
newErrors.min_salary = 'To pole jest wymagane';
|
|
}
|
|
if (!formData.max_salary) {
|
|
newErrors.max_salary = 'To pole jest wymagane';
|
|
}
|
|
}
|
|
|
|
if (!formData.work_from_home) {
|
|
newErrors.work_from_home = 'To pole jest wymagane';
|
|
}
|
|
if (!formData.employment_type) {
|
|
newErrors.employment_type = 'To pole jest wymagane';
|
|
}
|
|
if (!formData.image) {
|
|
newErrors.image = 'To pole jest wymagane';
|
|
}
|
|
if (Object.keys(formData.skill_levels).length === 0) {
|
|
newErrors.skill_levels = 'To pole jest wymagane';
|
|
}
|
|
setErrors(newErrors);
|
|
|
|
// Zwróć true, jeśli nie ma błędów
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
return (
|
|
<>
|
|
<div className='grid grid-cols-3'>
|
|
<div className='sm:px-20 px-16 sm:pt-3 pt-6 pb-6 xl:col-span-3 col-span-3'>
|
|
<span className='justify-center'>
|
|
<p className={`${styles.heading1} text-center`}>Dodajesz ogłoszenie z izaac.pl</p>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='no-tailwindcss-base'>
|
|
<div className='mx-auto max-w-none h-[70vh] w-[60vw]'>
|
|
<form action="">
|
|
<div className='grid mb-4'>
|
|
<div className='grid grid-cols-1 sm:grid-cols-3 items-center'>
|
|
<div className={`${styles.paragraph} px-4 py-2`}>Nazwa ogłoszenia
|
|
<span className={`${styles.paragraph} text-red-700`}>*</span></div>
|
|
<input type="text"
|
|
name="name"
|
|
value={formData['name'] || ''}
|
|
required
|
|
id="name"
|
|
onChange={handleChange('name')}
|
|
placeholder='Wpisz nazwę stanowiska...'
|
|
className={`border-b-2 px-4 my-2 ${styles.paragraph}
|
|
col-span-2 ${errors.jobtitle ? errorStyleInput : ''}`}/>
|
|
|
|
<div className={`${styles.paragraph} px-4 py-2 `}>Strona internetowa</div>
|
|
<input type="text"
|
|
name="webpage"
|
|
value={formData['webpage'] || ''}
|
|
onChange={handleChange('webpage')}
|
|
id="webpage"
|
|
placeholder='Wpisz adres strony internetowej...'
|
|
className={`border-b-2 px-4 my-2 ${styles.paragraph} col-span-2`}/>
|
|
<div className={`${styles.paragraph} px-4 py-2 `}>Adres siedziby
|
|
<span className={`${styles.paragraph} text-red-700`}>*</span></div>
|
|
<input type="text"
|
|
name="localization"
|
|
required
|
|
value={formData['localization'] || ''}
|
|
onChange={handleChange('localization')}
|
|
id="localization"
|
|
placeholder='Wpisz adres siedziby...'
|
|
className={`border-b-2 px-4 my-2 ${styles.paragraph} col-span-2`}/>
|
|
<div className={`${styles.paragraph} px-4 py-2 `}>Logo firmy
|
|
<span className={`${styles.paragraph} text-red-700`}>*</span></div>
|
|
<div className='mt-6 col-span-2'>
|
|
<ImageUpload
|
|
setFormData={setFormData}
|
|
data={formData}
|
|
_setImageSrc={setImageSrc}
|
|
_imageSrc={imageSrc}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='w-full border-b-2'></div>
|
|
<div className={`${styles.paragraph} px-4 py-2`}>Treść ogłoszenia
|
|
<span className={`${styles.paragraph} text-red-700`}>*</span></div>
|
|
<CKEditor
|
|
editor={ClassicEditor}
|
|
data={formData['content'] || ''}
|
|
required
|
|
// config={{
|
|
// plugins: [WordCount],
|
|
// toolbar: ['wordCount'],
|
|
// wordCount: {
|
|
// onUpdate: stats => {
|
|
// console.log(stats.words, stats.characters)
|
|
// }
|
|
// }
|
|
|
|
// }}
|
|
onChange={(event, editor) => {
|
|
const data = editor.getData();
|
|
handleChange('content')(data); // Wywołanie zmodyfikowanej funkcji handleChange
|
|
}}
|
|
onReady={ editor => {
|
|
// You can store the "editor" and use when it is needed.
|
|
// console.log( 'Editor is ready to use!', editor );
|
|
} }
|
|
onBlur={ ( event, editor ) => {
|
|
// console.log( 'Blur.', editor );
|
|
} }
|
|
onFocus={ ( event, editor ) => {
|
|
// console.log( 'Focus.', editor );
|
|
} }
|
|
/>
|
|
<div className='grid grid-cols-3 items-center mt-4'>
|
|
<span className={`${styles.paragraph} col-span-3 px-4`}>Dodaj wybrane umiejętności <span className={`${styles.paragraph} text-red-700`}>*</span></span>
|
|
<div className='col-span-3'>
|
|
<SkillsSelector
|
|
formData={formData}
|
|
setFormData={setFormData}
|
|
skills={skills}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className='w-full border-b-2'></div>
|
|
<div className={`${styles.paragraph} px-4 py-2`}>Kategoria ogłoszenia i poziom doświadczenia
|
|
<span className={`${styles.paragraph} text-red-700`}>*</span></div>
|
|
<div className='grid grid-cols-2 items-center mt-4 mb-4 gap-6'>
|
|
|
|
<p className='font-poppins font-semibold text-slate-700 text-center text-[14px] mt-1 mb-2'>Wybierz kategorię Twojego ogłoszenia</p>
|
|
<select
|
|
value={formData['category'] || 'default' }
|
|
name='category'
|
|
onChange={handleChange('category')}
|
|
className='h-12 border-2 rounded-xl px-5 mx-4 w-full '>
|
|
<option value={'default'} disabled >Wybierz opcję</option>
|
|
{categories.map((category, index) => (
|
|
<option key={index} value={category.id}>{category.name}</option>
|
|
))}
|
|
</select>
|
|
|
|
<p className='font-poppins font-semibold text-slate-700 text-center text-[14px] mt-1 mb-2'>Poziom doświadczenia</p>
|
|
<select
|
|
value={formData['experience_level'] || 'default' }
|
|
name='experience_level'
|
|
onChange={handleChange('experience_level')}
|
|
className='h-12 border-2 rounded-xl px-5 mx-4 w-full '>
|
|
<option value={'default'} disabled >Wybierz opcję</option>
|
|
{experience_levels.map((experience_level, index) => (
|
|
<option key={index} value={experience_level.id}>{experience_level.name}</option>
|
|
))}
|
|
</select>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
<div className='w-full border-b-2'></div>
|
|
<div className={`${styles.paragraph} px-4 py-2`}>
|
|
Wynagrodzenie
|
|
<span className={`${styles.paragraph} text-red-700`}>*</span>
|
|
</div>
|
|
<div className=''>
|
|
<Salary
|
|
removeFields={removeFields}
|
|
setFormData={setFormData}
|
|
handleChange={handleChange}
|
|
formData={formData}/>
|
|
</div>
|
|
|
|
<div className={`${styles.flexCenter} py-10 gap-20`}>
|
|
<button
|
|
type="button"
|
|
onClick={prevStep}
|
|
className='h-16 md:h-12 w-80 md:w-72 rounded-xl bg-gray-700
|
|
font-poppins font-semibold text-[14px] scale-100
|
|
text-white hover:scale-125 duration-300'>
|
|
<span className='text-[18px]'>←</span>
|
|
Przejdź do poprzedniego kroku</button>
|
|
|
|
<Button
|
|
isDiasbled={validateForm2()}
|
|
nextStep={handleNextStep}
|
|
Text="Przejdź do następnego kroku"/>
|
|
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
StepTwoJoblisting.propTypes = {
|
|
nextStep: propTypes.func,
|
|
prevStep: propTypes.func,
|
|
handleChange: propTypes.func,
|
|
formData: propTypes.object,
|
|
setFormData: propTypes.func,
|
|
removeFields: propTypes.func,
|
|
skills: propTypes.array
|
|
}
|
|
|
|
export default StepTwoJoblisting |