-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
28 changed files
with
747 additions
and
170 deletions.
There are no files selected for viewing
104 changes: 104 additions & 0 deletions
104
src/components/VacancyCard/EditVacancyForm/EditActionButtons.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Button } from '../../../ui'; | ||
| import DeleteIcon from '../../../images/DeleteIcon/DeleteIcon'; | ||
| import { updateVacancy, deleteVacancy } from '../../../modules/ShelterVacancies/components/AddVacancyForm/components/vacanciesAPI'; | ||
|
|
||
| const EditActionButtons = ({ formData, isSubmitButtonDisabled, onDelete, onClose, onSubmitSuccess, isLoading }) => { | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
|
|
||
| const handleSubmit = async () => { | ||
| try { | ||
| const token = localStorage.getItem('access'); | ||
|
|
||
| const getFormattedValue = (value) => { | ||
| if (Array.isArray(value)) { | ||
| return value.join(''); | ||
| } | ||
| if (typeof value === 'object' && value !== null) { | ||
| return value.slug || ''; | ||
| } | ||
| return value || ''; | ||
| }; | ||
|
|
||
| const formattedSchedule = formData.schedule.map((item) => { | ||
| if (typeof item === 'object' && item !== null && item.slug) { | ||
| return item.slug; | ||
| } | ||
| return item; | ||
| }); | ||
|
|
||
| const updateFormData = { | ||
| id: formData.id, | ||
| position: formData.title, | ||
| salary: formData.salary, | ||
| is_ndfl: getFormattedValue(formData.is_ndfl), | ||
| schedule: formattedSchedule, | ||
| education: getFormattedValue(formData.education), | ||
| description: formData.description, | ||
| }; | ||
| await updateVacancy(token, updateFormData, updateFormData.id); | ||
| onSubmitSuccess(); | ||
| onClose(); | ||
| } catch (error) { | ||
| throw new Error('Network response was not ok'); | ||
| } | ||
| }; | ||
|
|
||
| const handleDelete = async () => { | ||
| try { | ||
| const isDeleted = await deleteVacancy(formData.id); | ||
| if (isDeleted) { | ||
| onDelete(formData.id); | ||
| } | ||
| } catch (error) { | ||
| throw new Error('Ошибка при удалении вакансии'); | ||
| } finally { | ||
| setIsModalOpen(false); | ||
| onClose(); | ||
| } | ||
| }; | ||
|
|
||
| if (isLoading) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className='shelter-form__submit-buttons'> | ||
| <div className='btn-edit'> | ||
| <Button className='btn-edit__buttons' disabled={isSubmitButtonDisabled} onClick={handleSubmit}> | ||
| Сохранить изменения | ||
| </Button> | ||
| <Button className='btn-edit__buttons' theme='transparent' onClick={() => { setIsModalOpen(true); }}> | ||
| Удалить вакансию | ||
| </Button> | ||
| </div> | ||
|
|
||
| {isModalOpen && ( | ||
| <div className='modal-overlay'> | ||
| <div className='wrapper wrapper__del'> | ||
| <div className='modal modal__del'> | ||
| <div className='modal__del-text'> | ||
| <div className='modal__title modal__del-title standard-font standard-font_type_h3'>Вы уверены, что хотите удалить вакансию?</div> | ||
| <div className='modal__descr modal__del-descr standard-font standard-font_type_h3'>Все данные о вакансии будут удалены</div> | ||
| </div> | ||
| <div className='modal__btn-del'> | ||
| <Button className='modal__btn-del-left' theme='accent' onClick={handleDelete}> | ||
| <DeleteIcon /> | ||
| Да, удалить вакансию | ||
| </Button> | ||
| <Button theme='transparent' onClick={() => { setIsModalOpen(false); }}>Отменить удаление</Button> | ||
| </div> | ||
| <button | ||
| type='button' | ||
| className='modal__esc' | ||
| onClick={() => { setIsModalOpen(false); }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default EditActionButtons; |
127 changes: 127 additions & 0 deletions
127
src/components/VacancyCard/EditVacancyForm/EditVacancyForm.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import '../../../modules/ShelterVacancies/components/AddVacancyForm/AddVacancyForm.scss'; | ||
| import { Button } from '../../../ui'; | ||
| import DeclarationInput from '../../../ui/DeclarationInput/DeclarationInput'; | ||
| import Select from '../../../ui/Select/Select'; | ||
| import FormTextarea from '../../../modules/ShelterVacancies/components/AddVacancyForm/components/FormTextarea'; | ||
| import useInput from '../../../hooks/useInput'; | ||
| import EditActionButtons from './EditActionButtons'; | ||
| import * as regex from '../../../utils/regex'; | ||
| import * as errorMessage from '../../../utils/errorMessage'; | ||
| import { getEducationOptions, getShiftOptions, getSalaryOptions } from '../../../modules/ShelterVacancies/components/AddVacancyForm/constants'; | ||
|
|
||
| // eslint-disable-next-line | ||
| const EditVacancyForm = ({ id, title, salary, education, schedule, is_ndfl, description, onDelete, onClose, onSubmitSuccess, isLoading }) => { | ||
| const [formData, setFormData] = useState({ | ||
| id: id || '', | ||
| title: title || '', | ||
| salary: salary || '', | ||
| education: education || '', | ||
| schedule: schedule || '', | ||
| // eslint-disable-next-line | ||
| is_ndfl: is_ndfl || '', | ||
| description: description || '', | ||
| }); | ||
|
|
||
| const [educationOptions, setEducationOptions] = useState([]); | ||
| const [shiftOptions, setShiftOptions] = useState([]); | ||
| const [salaryOptions, setSalaryOptions] = useState([]); | ||
|
|
||
| const jobDescriptionInput = useInput('', { notEmpty: true, maxLength: 3000, regex: regex.TEXT }, errorMessage.VACANCY_DESCRIPTION); | ||
|
|
||
| const handleInputChange = (field, value) => { | ||
| // eslint-disable-next-line | ||
| setFormData((prevData) => ({ | ||
| ...prevData, | ||
| [field]: value, | ||
| })); | ||
| }; | ||
|
|
||
| const handleDescriptionChange1 = (evt) => { | ||
| jobDescriptionInput.onChange(evt); | ||
|
|
||
| setFormData((prevData) => { | ||
| return { | ||
| ...prevData, | ||
| description: evt.target.value, | ||
| }; | ||
| }); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const fetchOptions = async () => { | ||
| const shiftOpts = await getShiftOptions(); | ||
| const educationOpts = await getEducationOptions(); | ||
| const salaryOpts = getSalaryOptions(); | ||
| if (shiftOpts) { | ||
| setShiftOptions(shiftOpts); | ||
| } | ||
| if (educationOpts) { | ||
| setEducationOptions(educationOpts); | ||
| } | ||
| if (salaryOpts) { | ||
| setSalaryOptions(salaryOpts); | ||
| } | ||
| }; | ||
| fetchOptions(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <form className='vacancy-form'> | ||
| <div className='vacancy-form__edit' > | ||
| <button | ||
| type='button' | ||
| className='vacancy-form__edit-btn' | ||
| onClick={onClose} | ||
| /> | ||
| <Button theme='tertiary' onClick={onClose}>Отменить редактирование вакансии</Button> | ||
| </div> | ||
| <DeclarationInput | ||
| caption='Название вакансии*' | ||
| inputState={{ value: formData.title, onChange: (e) => { handleInputChange('title', e.target.value); } }} | ||
| type='text' name='position' required /> | ||
|
|
||
| <div className='vacancy-form__container'> | ||
| <DeclarationInput | ||
| caption='Заработная плата*' | ||
| inputState={{ value: formData.salary, onChange: (e) => { handleInputChange('salary', e.target.value); } }} | ||
| type='number' name='salaryInput' required placeholder='₽' | ||
| /> | ||
| <Select | ||
| label='Тип оплаты*' | ||
| onChange={handleInputChange} | ||
| options={salaryOptions} | ||
| id='is_ndfl' | ||
| isMulti={false} | ||
| initialValues={formData.is_ndfl} | ||
| /> | ||
| </div> | ||
| <div className='vacancy-form__container'> | ||
| <Select | ||
| label='График работы*' | ||
| id='schedule' | ||
| isMulti | ||
| onChange={handleInputChange} | ||
| options={shiftOptions} | ||
| initialValues={formData.schedule} | ||
| /> | ||
| <Select | ||
| label='Образование*' | ||
| id='education' | ||
| isMulti={false} | ||
| onChange={handleInputChange} | ||
| options={educationOptions} | ||
| initialValues={formData.education} | ||
| /> | ||
| </div> | ||
| <FormTextarea | ||
| jobDescriptionInput={jobDescriptionInput} | ||
| handleDescriptionChange={handleDescriptionChange1} | ||
| initialValues={formData.description} | ||
| /> | ||
| <EditActionButtons formData={formData} onDelete={onDelete} onSubmitSuccess={onSubmitSuccess} onClose={onClose} isLoading={isLoading} /> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default EditVacancyForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.