issues/27: admin content CRUD promotions pattern
This commit is contained in:
Valery Petrov
committed by
Valeriy Petrov
Valeriy Petrov
parent
5aab178eb8
commit
dde8ab9ceb
@@ -0,0 +1,226 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useCreateSiteServicesMutation } from '/src/api/apiSiteServices';
|
||||
import { selectRegions } from '../store/slice/regionSlice';
|
||||
import { TextEditor } from '../components/Editors/TextEditor';
|
||||
import { LoadingComponent } from '../components/Placeholders/LoadingComponent';
|
||||
import { ErrorComponent } from '../components/Placeholders/ErrorComponent';
|
||||
import { NotFindElement } from '../components/Placeholders/NotFindElement';
|
||||
import { EditElementForm } from '../components/Forms/EditElementForm';
|
||||
import Modal from '../components/Modals/Modal';
|
||||
|
||||
export function AddSiteServicesPage() {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const navigateBack = () => navigate(`/site-services`);
|
||||
const regions = useSelector(selectRegions);
|
||||
const [createSiteServices] = useCreateSiteServicesMutation();
|
||||
const [isModalSuccess, setModalSuccess] = useState(false);
|
||||
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
active: false,
|
||||
regionId: '',
|
||||
alias: '',
|
||||
previewImg: '',
|
||||
partPrice: '',
|
||||
pokazaniya: '',
|
||||
preparation: '',
|
||||
protivopokazaniya: '',
|
||||
bannerImg: '',
|
||||
bannerImgM: '',
|
||||
bannerImgUrl: '',
|
||||
downloadFile: '',
|
||||
fullWidthBanner: '',
|
||||
kodUslug: '',
|
||||
linkPrice: '',
|
||||
photosTitle: '',
|
||||
contraindicationsList: '',
|
||||
customBlockText: '',
|
||||
customBlockText2: '',
|
||||
customBlockTitle: '',
|
||||
customBlockTitle2: '',
|
||||
indicationsList: '',
|
||||
plusList: '',
|
||||
plusText: '',
|
||||
plusTitle: '',
|
||||
prepareTitle: '',
|
||||
processText: '',
|
||||
processTitle: '',
|
||||
servicesList: '',
|
||||
servicesTitle: '',
|
||||
textUp: '',
|
||||
trainingText: '',
|
||||
whyText: '',
|
||||
whyTitle: '',
|
||||
hidePicture: '',
|
||||
linkVideoreviews: '',
|
||||
faq: '',
|
||||
hideSignBtn: '',
|
||||
quiz: '',
|
||||
tags: '',
|
||||
tagsImportant: '',
|
||||
clinics: '',
|
||||
staffUp: '',
|
||||
advantages: '',
|
||||
saleId: '',
|
||||
sortStaff: '',
|
||||
linkArticlesServices: '',
|
||||
servicesPhotos: '',
|
||||
linkFaq: '',
|
||||
linkServices: '',
|
||||
linkStaff: '',
|
||||
photos: '',
|
||||
});
|
||||
const [anons, setAnons] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
|
||||
|
||||
|
||||
const handleChange = (key) => (e) => {
|
||||
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
|
||||
setForm((f) => ({ ...f, [key]: value }));
|
||||
if (key === 'name' || key === 'alias' || key === 'regionId') setErrors((err) => ({ ...err, [key]: '' }));
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleSave = async () => {
|
||||
const newErrors = { name: '', alias: '', regionId: '' };
|
||||
let hasError = false;
|
||||
if (!String(form.name ?? '').trim()) { newErrors.name = 'Название не может быть пустым'; hasError = true; }
|
||||
if (!String(form.alias ?? '').trim()) { newErrors.alias = 'Alias не может быть пустым'; hasError = true; }
|
||||
if (form.regionId === '' || form.regionId == null) { newErrors.regionId = 'Укажите регион'; hasError = true; }
|
||||
if (hasError) { setErrors(newErrors); window.alert('Пожалуйста исправьте ошибки в форме.'); return; }
|
||||
const data = { anons, content };
|
||||
try {
|
||||
data.name = form.name === '' ? null : form.name;
|
||||
data.active = Boolean(form.active);
|
||||
data.regionId = form.regionId === '' ? null : Number(form.regionId);
|
||||
data.alias = form.alias === '' ? null : form.alias;
|
||||
data.previewImg = form.previewImg === '' ? null : form.previewImg;
|
||||
data.partPrice = form.partPrice === '' ? null : form.partPrice;
|
||||
data.pokazaniya = form.pokazaniya === '' ? null : form.pokazaniya;
|
||||
data.preparation = form.preparation === '' ? null : form.preparation;
|
||||
data.protivopokazaniya = form.protivopokazaniya === '' ? null : form.protivopokazaniya;
|
||||
data.bannerImg = form.bannerImg === '' ? null : form.bannerImg;
|
||||
data.bannerImgM = form.bannerImgM === '' ? null : form.bannerImgM;
|
||||
data.bannerImgUrl = form.bannerImgUrl === '' ? null : form.bannerImgUrl;
|
||||
data.downloadFile = form.downloadFile === '' ? null : form.downloadFile;
|
||||
data.fullWidthBanner = form.fullWidthBanner === '' ? null : form.fullWidthBanner;
|
||||
data.kodUslug = form.kodUslug === '' ? null : form.kodUslug;
|
||||
data.linkPrice = form.linkPrice === '' ? null : form.linkPrice;
|
||||
data.photosTitle = form.photosTitle === '' ? null : form.photosTitle;
|
||||
data.contraindicationsList = form.contraindicationsList === '' ? null : form.contraindicationsList;
|
||||
data.customBlockText = form.customBlockText === '' ? null : form.customBlockText;
|
||||
data.customBlockText2 = form.customBlockText2 === '' ? null : form.customBlockText2;
|
||||
data.customBlockTitle = form.customBlockTitle === '' ? null : form.customBlockTitle;
|
||||
data.customBlockTitle2 = form.customBlockTitle2 === '' ? null : form.customBlockTitle2;
|
||||
data.indicationsList = form.indicationsList === '' ? null : form.indicationsList;
|
||||
data.plusList = form.plusList === '' ? null : form.plusList;
|
||||
data.plusText = form.plusText === '' ? null : form.plusText;
|
||||
data.plusTitle = form.plusTitle === '' ? null : form.plusTitle;
|
||||
data.prepareTitle = form.prepareTitle === '' ? null : form.prepareTitle;
|
||||
data.processText = form.processText === '' ? null : form.processText;
|
||||
data.processTitle = form.processTitle === '' ? null : form.processTitle;
|
||||
data.servicesList = form.servicesList === '' ? null : form.servicesList;
|
||||
data.servicesTitle = form.servicesTitle === '' ? null : form.servicesTitle;
|
||||
data.textUp = form.textUp === '' ? null : form.textUp;
|
||||
data.trainingText = form.trainingText === '' ? null : form.trainingText;
|
||||
data.whyText = form.whyText === '' ? null : form.whyText;
|
||||
data.whyTitle = form.whyTitle === '' ? null : form.whyTitle;
|
||||
data.hidePicture = form.hidePicture === '' ? null : Number(form.hidePicture);
|
||||
data.linkVideoreviews = !form.linkVideoreviews || !String(form.linkVideoreviews).trim() ? null : JSON.parse(form.linkVideoreviews);
|
||||
data.faq = !form.faq || !String(form.faq).trim() ? null : JSON.parse(form.faq);
|
||||
data.hideSignBtn = !form.hideSignBtn || !String(form.hideSignBtn).trim() ? null : JSON.parse(form.hideSignBtn);
|
||||
data.quiz = !form.quiz || !String(form.quiz).trim() ? null : JSON.parse(form.quiz);
|
||||
data.tags = !form.tags || !String(form.tags).trim() ? null : JSON.parse(form.tags);
|
||||
data.tagsImportant = !form.tagsImportant || !String(form.tagsImportant).trim() ? null : JSON.parse(form.tagsImportant);
|
||||
data.clinics = !form.clinics || !String(form.clinics).trim() ? null : JSON.parse(form.clinics);
|
||||
data.staffUp = !form.staffUp || !String(form.staffUp).trim() ? null : JSON.parse(form.staffUp);
|
||||
data.advantages = !form.advantages || !String(form.advantages).trim() ? null : JSON.parse(form.advantages);
|
||||
data.saleId = !form.saleId || !String(form.saleId).trim() ? null : JSON.parse(form.saleId);
|
||||
data.sortStaff = !form.sortStaff || !String(form.sortStaff).trim() ? null : JSON.parse(form.sortStaff);
|
||||
data.linkArticlesServices = !form.linkArticlesServices || !String(form.linkArticlesServices).trim() ? null : JSON.parse(form.linkArticlesServices);
|
||||
data.servicesPhotos = !form.servicesPhotos || !String(form.servicesPhotos).trim() ? null : JSON.parse(form.servicesPhotos);
|
||||
data.linkFaq = !form.linkFaq || !String(form.linkFaq).trim() ? null : JSON.parse(form.linkFaq);
|
||||
data.linkServices = !form.linkServices || !String(form.linkServices).trim() ? null : JSON.parse(form.linkServices);
|
||||
data.linkStaff = !form.linkStaff || !String(form.linkStaff).trim() ? null : JSON.parse(form.linkStaff);
|
||||
data.photos = !form.photos || !String(form.photos).trim() ? null : JSON.parse(form.photos);
|
||||
} catch (e) { window.alert('Пожалуйста исправьте ошибки в форме.'); return; }
|
||||
try {
|
||||
const response = await createSiteServices({ data }).unwrap();
|
||||
setModalSuccess(true);
|
||||
window.setTimeout(() => { navigate(`/site-services/edit/${response.id}`); window.location.reload(); }, 2000);
|
||||
} catch (err) {
|
||||
console.error('Ошибка сохранения:', err);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<EditElementForm navigateBack={navigateBack} header={`Добавление: услугу`} handleSave={handleSave} handleDelete={() => {}} isAddSpecialist={true}>
|
||||
<div className="form-group"><label>Название</label><input type="text" className="form-control" value={form.name} onChange={handleChange('name')} />
|
||||
{errors.name && <small className="text-danger">{errors.name}</small>}</div>
|
||||
<div className="form-group form-check"><input type="checkbox" className="form-check-input" id="active" checked={Boolean(form.active)} onChange={handleChange('active')} /><label className="form-check-label" htmlFor="active">Активно</label></div>
|
||||
<div className="form-group"><label>Регион</label><select className="form-control" value={form.regionId === '' || form.regionId == null ? '' : String(form.regionId)} onChange={handleChange('regionId')}><option value="">—</option>{Object.entries(regions).map(([rid, name]) => (<option key={rid} value={rid}>{name}</option>))}</select>
|
||||
{errors.regionId && <small className="text-danger">{errors.regionId}</small>}</div>
|
||||
<div className="form-group"><label>Alias</label><input type="text" className="form-control" value={form.alias} onChange={handleChange('alias')} />
|
||||
{errors.alias && <small className="text-danger">{errors.alias}</small>}</div>
|
||||
<div className="form-group"><label>Анонс</label><TextEditor content={anons} setContent={setAnons} /></div>
|
||||
<div className="form-group"><label>Контент</label><TextEditor content={content} setContent={setContent} /></div>
|
||||
<div className="form-group"><label>previewImg</label><input type="text" className="form-control" value={form.previewImg} onChange={handleChange('previewImg')} /></div>
|
||||
<div className="form-group"><label>partPrice</label><input type="text" className="form-control" value={form.partPrice} onChange={handleChange('partPrice')} /></div>
|
||||
<div className="form-group"><label>pokazaniya</label><input type="text" className="form-control" value={form.pokazaniya} onChange={handleChange('pokazaniya')} /></div>
|
||||
<div className="form-group"><label>preparation</label><input type="text" className="form-control" value={form.preparation} onChange={handleChange('preparation')} /></div>
|
||||
<div className="form-group"><label>protivopokazaniya</label><input type="text" className="form-control" value={form.protivopokazaniya} onChange={handleChange('protivopokazaniya')} /></div>
|
||||
<div className="form-group"><label>bannerImg</label><input type="text" className="form-control" value={form.bannerImg} onChange={handleChange('bannerImg')} /></div>
|
||||
<div className="form-group"><label>bannerImgM</label><input type="text" className="form-control" value={form.bannerImgM} onChange={handleChange('bannerImgM')} /></div>
|
||||
<div className="form-group"><label>bannerImgUrl</label><input type="text" className="form-control" value={form.bannerImgUrl} onChange={handleChange('bannerImgUrl')} /></div>
|
||||
<div className="form-group"><label>downloadFile</label><input type="text" className="form-control" value={form.downloadFile} onChange={handleChange('downloadFile')} /></div>
|
||||
<div className="form-group"><label>fullWidthBanner</label><input type="text" className="form-control" value={form.fullWidthBanner} onChange={handleChange('fullWidthBanner')} /></div>
|
||||
<div className="form-group"><label>kodUslug</label><input type="text" className="form-control" value={form.kodUslug} onChange={handleChange('kodUslug')} /></div>
|
||||
<div className="form-group"><label>linkPrice</label><input type="text" className="form-control" value={form.linkPrice} onChange={handleChange('linkPrice')} /></div>
|
||||
<div className="form-group"><label>photosTitle</label><input type="text" className="form-control" value={form.photosTitle} onChange={handleChange('photosTitle')} /></div>
|
||||
<div className="form-group"><label>contraindicationsList</label><input type="text" className="form-control" value={form.contraindicationsList} onChange={handleChange('contraindicationsList')} /></div>
|
||||
<div className="form-group"><label>customBlockText</label><input type="text" className="form-control" value={form.customBlockText} onChange={handleChange('customBlockText')} /></div>
|
||||
<div className="form-group"><label>customBlockText2</label><input type="text" className="form-control" value={form.customBlockText2} onChange={handleChange('customBlockText2')} /></div>
|
||||
<div className="form-group"><label>customBlockTitle</label><input type="text" className="form-control" value={form.customBlockTitle} onChange={handleChange('customBlockTitle')} /></div>
|
||||
<div className="form-group"><label>customBlockTitle2</label><input type="text" className="form-control" value={form.customBlockTitle2} onChange={handleChange('customBlockTitle2')} /></div>
|
||||
<div className="form-group"><label>indicationsList</label><input type="text" className="form-control" value={form.indicationsList} onChange={handleChange('indicationsList')} /></div>
|
||||
<div className="form-group"><label>plusList</label><input type="text" className="form-control" value={form.plusList} onChange={handleChange('plusList')} /></div>
|
||||
<div className="form-group"><label>plusText</label><input type="text" className="form-control" value={form.plusText} onChange={handleChange('plusText')} /></div>
|
||||
<div className="form-group"><label>plusTitle</label><input type="text" className="form-control" value={form.plusTitle} onChange={handleChange('plusTitle')} /></div>
|
||||
<div className="form-group"><label>prepareTitle</label><input type="text" className="form-control" value={form.prepareTitle} onChange={handleChange('prepareTitle')} /></div>
|
||||
<div className="form-group"><label>processText</label><input type="text" className="form-control" value={form.processText} onChange={handleChange('processText')} /></div>
|
||||
<div className="form-group"><label>processTitle</label><input type="text" className="form-control" value={form.processTitle} onChange={handleChange('processTitle')} /></div>
|
||||
<div className="form-group"><label>servicesList</label><input type="text" className="form-control" value={form.servicesList} onChange={handleChange('servicesList')} /></div>
|
||||
<div className="form-group"><label>servicesTitle</label><input type="text" className="form-control" value={form.servicesTitle} onChange={handleChange('servicesTitle')} /></div>
|
||||
<div className="form-group"><label>textUp</label><input type="text" className="form-control" value={form.textUp} onChange={handleChange('textUp')} /></div>
|
||||
<div className="form-group"><label>trainingText</label><input type="text" className="form-control" value={form.trainingText} onChange={handleChange('trainingText')} /></div>
|
||||
<div className="form-group"><label>whyText</label><input type="text" className="form-control" value={form.whyText} onChange={handleChange('whyText')} /></div>
|
||||
<div className="form-group"><label>whyTitle</label><input type="text" className="form-control" value={form.whyTitle} onChange={handleChange('whyTitle')} /></div>
|
||||
<div className="form-group"><label>hidePicture</label><input type="number" className="form-control" value={form.hidePicture} onChange={handleChange('hidePicture')} /></div>
|
||||
<div className="form-group"><label>linkVideoreviews (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.linkVideoreviews} onChange={handleChange('linkVideoreviews')} /></div>
|
||||
<div className="form-group"><label>faq (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.faq} onChange={handleChange('faq')} /></div>
|
||||
<div className="form-group"><label>hideSignBtn (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.hideSignBtn} onChange={handleChange('hideSignBtn')} /></div>
|
||||
<div className="form-group"><label>quiz (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.quiz} onChange={handleChange('quiz')} /></div>
|
||||
<div className="form-group"><label>tags (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.tags} onChange={handleChange('tags')} /></div>
|
||||
<div className="form-group"><label>tagsImportant (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.tagsImportant} onChange={handleChange('tagsImportant')} /></div>
|
||||
<div className="form-group"><label>clinics (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.clinics} onChange={handleChange('clinics')} /></div>
|
||||
<div className="form-group"><label>staffUp (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.staffUp} onChange={handleChange('staffUp')} /></div>
|
||||
<div className="form-group"><label>advantages (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.advantages} onChange={handleChange('advantages')} /></div>
|
||||
<div className="form-group"><label>saleId (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.saleId} onChange={handleChange('saleId')} /></div>
|
||||
<div className="form-group"><label>sortStaff (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.sortStaff} onChange={handleChange('sortStaff')} /></div>
|
||||
<div className="form-group"><label>linkArticlesServices (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.linkArticlesServices} onChange={handleChange('linkArticlesServices')} /></div>
|
||||
<div className="form-group"><label>servicesPhotos (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.servicesPhotos} onChange={handleChange('servicesPhotos')} /></div>
|
||||
<div className="form-group"><label>linkFaq (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.linkFaq} onChange={handleChange('linkFaq')} /></div>
|
||||
<div className="form-group"><label>linkServices (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.linkServices} onChange={handleChange('linkServices')} /></div>
|
||||
<div className="form-group"><label>linkStaff (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.linkStaff} onChange={handleChange('linkStaff')} /></div>
|
||||
<div className="form-group"><label>photos (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.photos} onChange={handleChange('photos')} /></div>
|
||||
<Modal isOpen={isModalSuccess} title="Изменения внесены" hasButtons={false}><p className="mb-1">Изменения успешно внесены.</p></Modal>
|
||||
</EditElementForm>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user