142 lines
4.1 KiB
TypeScript
142 lines
4.1 KiB
TypeScript
'use client';
|
||
|
||
import { useRouter, useParams } from 'next/navigation';
|
||
import { useQuery, useMutation } from 'react-query';
|
||
|
||
import { Form, Input, Button, notification, Select, Spin } from 'antd';
|
||
import { ExtendedJobData, JobData } from '@/types/types';
|
||
import { useEffect } from 'react';
|
||
import { fetchJobById, updateJob } from '@/api/api';
|
||
import { Option } from 'antd/es/mentions';
|
||
import style from './EditVacancy.module.scss'
|
||
|
||
|
||
interface EditVacancyProps {
|
||
id: number;
|
||
}
|
||
|
||
|
||
|
||
const EditVacancy: React.FC<EditVacancyProps> = ({id}) => {
|
||
const router = useRouter();
|
||
const [form] = Form.useForm();
|
||
|
||
const { data, error, isLoading } = useQuery<ExtendedJobData>(
|
||
['job', id],
|
||
() => fetchJobById(Number(id)),
|
||
{
|
||
enabled: !!id,
|
||
}
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (data) {
|
||
form.setFieldsValue({
|
||
Job_name: data.Job_name || '',
|
||
Year: data.Year || '',
|
||
Qualification: data.Qualification || false,
|
||
Time: data.Time || [''],
|
||
Soft_skills: data.Soft_skills || '',
|
||
Salary: data.Salary || 0,
|
||
Email: data.Email || '',
|
||
Archive: data.Archive || false,
|
||
Responsibilities: data.Responsibilities || '',
|
||
Hardskills: ['React', 'JavaScript'],
|
||
});
|
||
}
|
||
}, [data]);
|
||
|
||
const mutation = useMutation((updatedJob: JobData) => updateJob(Number(id), updatedJob), {
|
||
onSuccess: () => {
|
||
notification.success({
|
||
message: 'Обновление прошло успешно',
|
||
description: 'Вакансия была успешно обновлена.',
|
||
});
|
||
router.push('/view'); // Перенаправление обратно на страницу списка вакансий
|
||
},
|
||
onError: () => {
|
||
notification.error({
|
||
message: 'Не удалось выполнить обновление',
|
||
description: 'Произошла ошибка при обновлении вакансии.',
|
||
});
|
||
},
|
||
});
|
||
|
||
const onFinish = (values: JobData) => {
|
||
mutation.mutate({ ...values}); // Обновление данных вакансии
|
||
};
|
||
|
||
if (isLoading) return <Spin size='large' className={style.spin} />;
|
||
if (error) return <div>Error loading job data</div>;
|
||
|
||
return (
|
||
<div style={{ maxWidth: '600px', margin: 'auto', padding: '20px' }}>
|
||
<h2 className={style.text}>Редактировать вакансию</h2>
|
||
<Form form={form} layout='vertical' onFinish={onFinish}>
|
||
<Form.Item
|
||
name='Job_name'
|
||
label='Название должности'
|
||
rules={[{ required: true }]}
|
||
>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name='Year' label='Курс' rules={[{ required: true }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name='Qualification'
|
||
label='Квалификация'
|
||
valuePropName='checked'
|
||
>
|
||
<Input type='checkbox' />
|
||
</Form.Item>
|
||
<Form.Item name='Time' label='Занятость' rules={[{ required: true }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name='Soft_skills' label='Soft Skills'>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name='Salary' label='Оклад' rules={[{ required: true }]}>
|
||
<Input type='number' />
|
||
</Form.Item>
|
||
<Form.Item name='Email' label='Email' rules={[{ required: true }]}>
|
||
<Input type='email' />
|
||
</Form.Item>
|
||
<Form.Item name='Archive' label='Archive' valuePropName='checked'>
|
||
<Input type='checkbox' />
|
||
</Form.Item>
|
||
<Form.Item name='Responsibilities' label='Обязанности'>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name='Hardskills'
|
||
label='Hardskills'
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: 'Пожалуйста, укажите свои профессиональные навыки!',
|
||
},
|
||
]}
|
||
>
|
||
<Select
|
||
mode='tags'
|
||
style={{ width: '100%' }}
|
||
placeholder='Выбрать hardskills'
|
||
>
|
||
<Option value='JavaScript'>JavaScript</Option>
|
||
<Option value='TypeScript'>TypeScript</Option>
|
||
<Option value='React'>React</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Button type='primary' htmlType='submit' loading={mutation.isLoading} className={style.edit_btn}>
|
||
Сохранить изменения
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default EditVacancy;
|