326 lines
11 KiB
TypeScript
326 lines
11 KiB
TypeScript
// /* eslint-disable react-hooks/exhaustive-deps */
|
|
// /* eslint-disable @typescript-eslint/no-explicit-any */
|
|
// import { ChangeEvent, useEffect, useState } from 'react';
|
|
// import api from '../../utils/api';
|
|
// import Button from '../Button';
|
|
// import IProject from '../../types/IProject';
|
|
// import useModalStore from '../../stores/useModalStore';
|
|
// import { format, parseISO } from 'date-fns';
|
|
// import Close2Icon from '../icons/Close2Icon';
|
|
|
|
// interface EditProjectModalProps {
|
|
// projectId: string;
|
|
// }
|
|
|
|
// function EditProjectModal({ projectId }: EditProjectModalProps) {
|
|
// const [project, setProject] = useState<IProject>({
|
|
// title: '',
|
|
// company: '',
|
|
// city: '',
|
|
// image: '',
|
|
// releaseDate: '2023-01-01',
|
|
// devices: [],
|
|
// });
|
|
|
|
// const [file, setFile] = useState<File>();
|
|
// const [previewFile, setPreviewFile] = useState<string>();
|
|
// const [setModal] = useModalStore((state) => [state.setModal]);
|
|
|
|
// function handleChangeFile(e: ChangeEvent<HTMLInputElement>) {
|
|
// if (!e.target.files) return;
|
|
|
|
// const targetFile = e.target.files[0];
|
|
|
|
// setFile(targetFile);
|
|
// setPreviewFile(URL.createObjectURL(targetFile));
|
|
// }
|
|
|
|
// async function uploadFile() {
|
|
// if (!file) return;
|
|
|
|
// const formData = new FormData();
|
|
// formData.append('file', file);
|
|
|
|
// try {
|
|
// const { file }: { file: string } = await api
|
|
// .post('upload', { body: formData })
|
|
// .json();
|
|
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// image: file,
|
|
// }));
|
|
// } catch (error) {
|
|
// if (error instanceof Error) {
|
|
// alert(`Error: ${error.message}`);
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// async function updateProject() {
|
|
// try {
|
|
// await api.put(`projects/${projectId}`, { json: { ...project } });
|
|
// } catch (error) {
|
|
// if (error instanceof Error) {
|
|
// alert(`Error: ${error.message}`);
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// async function handleSubmit(e: ChangeEvent<HTMLFormElement>) {
|
|
// e.preventDefault();
|
|
|
|
// await updateProject();
|
|
// setModal(null);
|
|
// window.location.reload();
|
|
// }
|
|
|
|
// async function getProject() {
|
|
// try {
|
|
// const project: IProject = await api.get(`projects/${projectId}`).json();
|
|
// project.releaseDate = format(parseISO(project.releaseDate), 'yyyy-MM-dd');
|
|
|
|
// setProject(project);
|
|
// } catch (error) {
|
|
// if (error instanceof Error) {
|
|
// alert(`Error: ${error.message}`);
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// uploadFile();
|
|
// }, [file]);
|
|
|
|
// useEffect(() => {
|
|
// getProject();
|
|
// }, []);
|
|
|
|
// return (
|
|
// <div className='flex flex-col gap-4 p-8 text-black bg-white shadow-lg rounded-xl'>
|
|
// <div className='flex justify-between items-center border-b border-[#ccc] pb-4 gap-4'>
|
|
// <p className='text-xl'>Редактирование проекта</p>
|
|
// <button
|
|
// onClick={() => setModal(null)}
|
|
// className='p-2 transition-colors rounded-full hover:bg-white hover:bg-opacity-10'
|
|
// >
|
|
// <Close2Icon />
|
|
// </button>
|
|
// </div>
|
|
// <form
|
|
// onSubmit={handleSubmit}
|
|
// className='grid grid-cols-2 gap-4 w-[512px]'
|
|
// >
|
|
// <div className='flex flex-col gap-1'>
|
|
// <label className='text-sm'>Название</label>
|
|
// <input
|
|
// autoFocus
|
|
// required
|
|
// type='text'
|
|
// placeholder='Название'
|
|
// className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
|
|
// value={project.title}
|
|
// onChange={(e) =>
|
|
// setProject((prev) => ({ ...prev, title: e.target.value }))
|
|
// }
|
|
// />
|
|
// </div>
|
|
|
|
// <div className='flex flex-col gap-1'>
|
|
// <label className='text-sm'>Компания</label>
|
|
// <input
|
|
// required
|
|
// type='text'
|
|
// placeholder='Компания'
|
|
// className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
|
|
// value={project.company}
|
|
// onChange={(e) =>
|
|
// setProject((prev) => ({ ...prev, company: e.target.value }))
|
|
// }
|
|
// />
|
|
// </div>
|
|
|
|
// <div className='flex flex-col gap-1'>
|
|
// <label className='text-sm'>Город</label>
|
|
// <input
|
|
// required
|
|
// type='text'
|
|
// placeholder='Город'
|
|
// className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
|
|
// value={project.city}
|
|
// onChange={(e) =>
|
|
// setProject((prev) => ({ ...prev, city: e.target.value }))
|
|
// }
|
|
// />
|
|
// </div>
|
|
|
|
// <label className='relative flex flex-col gap-2 px-3 py-2 border border-dashed rounded-lg cursor-pointer border-neutral-500 hover:bg-opacity-10 hover:bg-black'>
|
|
// <input
|
|
// type='file'
|
|
// accept='image/*'
|
|
// className='absolute opacity-0'
|
|
// onChange={handleChangeFile}
|
|
// />
|
|
// <p className='truncate'>
|
|
// {file ? file.name : 'Выберите изображение'}
|
|
// </p>
|
|
|
|
// {previewFile ? (
|
|
// <img src={previewFile} alt='' />
|
|
// ) : (
|
|
// project.image && (
|
|
// <img
|
|
// src={`${import.meta.env.VITE_API_URL}/upload/${project.image}`}
|
|
// alt=''
|
|
// />
|
|
// )
|
|
// )}
|
|
// </label>
|
|
|
|
// <div className='flex flex-col gap-1'>
|
|
// <label className='text-sm'>Стадия</label>
|
|
// <select
|
|
// required
|
|
// value={project.stage || ''}
|
|
// className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
|
|
// onChange={(e) =>
|
|
// setProject((prev) => ({ ...prev, stage: +e.target.value }))
|
|
// }
|
|
// >
|
|
// <option value='' disabled>
|
|
// Выберите стадию
|
|
// </option>
|
|
// <option value={1}>1</option>
|
|
// <option value={2}>2</option>
|
|
// <option value={3}>3</option>
|
|
// <option value={4}>4</option>
|
|
// <option value={5}>5</option>
|
|
// <option value={6}>6</option>
|
|
// </select>
|
|
// </div>
|
|
|
|
// <div className='flex flex-col gap-1'>
|
|
// <label className='text-sm'>Дата релиза</label>
|
|
// <input
|
|
// type='date'
|
|
// required
|
|
// value={project.releaseDate}
|
|
// onChange={(e) =>
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// releaseDate: e.target.value,
|
|
// }))
|
|
// }
|
|
// className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
|
|
// />
|
|
// </div>
|
|
|
|
// <div className='flex flex-col gap-1'>
|
|
// <p className='text-sm'>Девайсы</p>
|
|
// <div className=''>
|
|
// <label className='flex items-center gap-2'>
|
|
// <input
|
|
// type='checkbox'
|
|
// checked={project.devices!.includes('stream')}
|
|
// onChange={(e) => {
|
|
// if (e.target.checked) {
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// devices: [...prev.devices!, 'stream'],
|
|
// }));
|
|
// } else {
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// devices: prev.devices!.filter(
|
|
// (device) => device !== 'stream'
|
|
// ),
|
|
// }));
|
|
// }
|
|
// }}
|
|
// />
|
|
// <span>Stream</span>
|
|
// </label>
|
|
|
|
// <label className='flex items-center gap-2'>
|
|
// <input
|
|
// type='checkbox'
|
|
// checked={project.devices!.includes('touch')}
|
|
// onChange={(e) => {
|
|
// if (e.target.checked) {
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// devices: [...prev.devices!, 'touch'],
|
|
// }));
|
|
// } else {
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// devices: prev.devices!.filter(
|
|
// (device) => device !== 'touch'
|
|
// ),
|
|
// }));
|
|
// }
|
|
// }}
|
|
// />
|
|
// <span>Touch</span>
|
|
// </label>
|
|
|
|
// <label className='flex items-center gap-2'>
|
|
// <input
|
|
// type='checkbox'
|
|
// checked={project.devices!.includes('mobile')}
|
|
// onChange={(e) => {
|
|
// if (e.target.checked) {
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// devices: [...prev.devices!, 'mobile'],
|
|
// }));
|
|
// } else {
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// devices: prev.devices!.filter(
|
|
// (device) => device !== 'mobile'
|
|
// ),
|
|
// }));
|
|
// }
|
|
// }}
|
|
// />
|
|
// <span>Mobile</span>
|
|
// </label>
|
|
|
|
// <label className='flex items-center gap-2'>
|
|
// <input
|
|
// type='checkbox'
|
|
// checked={project.devices!.includes('vr')}
|
|
// onChange={(e) => {
|
|
// if (e.target.checked) {
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// devices: [...prev.devices!, 'vr'],
|
|
// }));
|
|
// } else {
|
|
// setProject((prev) => ({
|
|
// ...prev,
|
|
// devices: prev.devices!.filter(
|
|
// (device) => device !== 'vr'
|
|
// ),
|
|
// }));
|
|
// }
|
|
// }}
|
|
// />
|
|
// <span>VR</span>
|
|
// </label>
|
|
// </div>
|
|
// </div>
|
|
|
|
// <div className='flex justify-end col-span-full'>
|
|
// <Button className='text-white outline-none'>
|
|
// Сохранить изменения
|
|
// </Button>
|
|
// </div>
|
|
// </form>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
// export default EditProjectModal;
|