4 Commits

31 changed files with 2934 additions and 7 deletions
+17 -2
View File
@@ -1,8 +1,17 @@
name: adminpanel-ci-cd
# CI/CD: только push git-тега (ручное тегирование на ветке prod|test|stage).
on:
workflow_dispatch:
inputs:
branch:
description: 'Ветка для прогона тестов'
required: true
default: test
type: choice
options:
- prod
- test
- stage
push:
tags:
- 'adminpanel-v*'
@@ -14,9 +23,12 @@ env:
jobs:
test:
if: github.event_name == 'workflow_dispatch' || startsWith(github.ref, 'refs/tags/adminpanel-v')
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
ref: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.branch || github.ref }}
- uses: actions/setup-node@v4
with:
node-version: '24'
@@ -26,6 +38,7 @@ jobs:
- run: npm run build
parse-tag:
if: startsWith(github.ref, 'refs/tags/adminpanel-v')
runs-on: ubuntu-latest
outputs:
full_tag: ${{ steps.meta.outputs.full_tag }}
@@ -42,6 +55,7 @@ jobs:
build-and-push:
needs: [test, parse-tag]
if: startsWith(github.ref, 'refs/tags/adminpanel-v')
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
@@ -60,6 +74,7 @@ jobs:
deploy-gitops:
needs: [build-and-push, parse-tag]
if: startsWith(github.ref, 'refs/tags/adminpanel-v')
runs-on: ubuntu-latest
steps:
- name: Bump image tag in sova-deploy
-1
View File
@@ -5,7 +5,6 @@
<link rel="icon" type="image/png" href="/src/assets/icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Admin panel</title>
<script src="/env.js"></script>
</head>
<body>
<div id="root"></div>
-3
View File
@@ -1,3 +0,0 @@
window.__ENV__ = window.__ENV__ || {
API_BASE_URL: 'http://localhost:8081',
};
+37 -1
View File
@@ -21,6 +21,24 @@ import { EditStockPage } from './pages/EditStockPage';
import { AddStockPage } from './pages/AddStockPage';
import { InfoclinicListPage } from './pages/InfoclinicListPage';
import { LostDoctorsPage } from './pages/LostDoctorsPage';
import { NewsListPage } from './pages/NewsListPage';
import { EditNewsPage } from './pages/EditNewsPage';
import { AddNewsPage } from './pages/AddNewsPage';
import { SitePromoListPage } from './pages/SitePromoListPage';
import { EditSitePromoPage } from './pages/EditSitePromoPage';
import { AddSitePromoPage } from './pages/AddSitePromoPage';
import { DiseaseListPage } from './pages/DiseaseListPage';
import { EditDiseasePage } from './pages/EditDiseasePage';
import { AddDiseasePage } from './pages/AddDiseasePage';
import { MedicalCenterListPage } from './pages/MedicalCenterListPage';
import { EditMedicalCenterPage } from './pages/EditMedicalCenterPage';
import { AddMedicalCenterPage } from './pages/AddMedicalCenterPage';
import { ArticleListPage } from './pages/ArticleListPage';
import { EditArticlePage } from './pages/EditArticlePage';
import { AddArticlePage } from './pages/AddArticlePage';
import { SiteServicesListPage } from './pages/SiteServicesListPage';
import { EditSiteServicesPage } from './pages/EditSiteServicesPage';
import { AddSiteServicesPage } from './pages/AddSiteServicesPage';
function App() {
return (
@@ -50,7 +68,25 @@ function App() {
<Route path="prices" element={<PricesListPage/>} />
<Route path="promotions" element={<StocksListPage/>} />
<Route path="promotions/edit/:id" element={<EditStockPage/>} />
<Route path="promotions/create" element={<AddStockPage/>} />
<Route path="promotions/create" element={<AddStockPage/>} />
<Route path="news" element={<NewsListPage />} />
<Route path="news/edit/:id" element={<EditNewsPage />} />
<Route path="news/create" element={<AddNewsPage />} />
<Route path="site-promo" element={<SitePromoListPage />} />
<Route path="site-promo/edit/:id" element={<EditSitePromoPage />} />
<Route path="site-promo/create" element={<AddSitePromoPage />} />
<Route path="disease" element={<DiseaseListPage />} />
<Route path="disease/edit/:id" element={<EditDiseasePage />} />
<Route path="disease/create" element={<AddDiseasePage />} />
<Route path="medical-center" element={<MedicalCenterListPage />} />
<Route path="medical-center/edit/:id" element={<EditMedicalCenterPage />} />
<Route path="medical-center/create" element={<AddMedicalCenterPage />} />
<Route path="article" element={<ArticleListPage />} />
<Route path="article/edit/:id" element={<EditArticlePage />} />
<Route path="article/create" element={<AddArticlePage />} />
<Route path="site-services" element={<SiteServicesListPage />} />
<Route path="site-services/edit/:id" element={<EditSiteServicesPage />} />
<Route path="site-services/create" element={<AddSiteServicesPage />} />
<Route path="*" element={<NotFoundPage />} />
</Route>
<Route path="*" element={<Navigate to="/" replace />} />
+55
View File
@@ -0,0 +1,55 @@
import { API, authHeader } from './apiSlice';
export const articleApi = API.injectEndpoints({
endpoints: (build) => ({
getArticleList: build.query({
query: ({ search = '', page = '' }) => {
let queryString = '?';
if (page) queryString += `page=${page}&limit=20`;
else queryString += `limit=20`;
if (search) queryString += `&search=${encodeURIComponent(search)}`;
return {
url: `/article/list${queryString}`,
};
},
refetchOnMountOrArgChange: true,
keepUnusedDataFor: 0,
}),
getArticle: build.query({
query: ({ articleId }) => ({
url: `/article/${articleId}`,
}),
}),
createArticle: build.mutation({
query: ({ data }) => ({
url: `/article/create`,
method: 'POST',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
updateArticle: build.mutation({
query: ({ articleId, data }) => ({
url: `/article/${articleId}`,
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
deleteArticle: build.mutation({
query: ({ articleId }) => ({
url: `/article/${articleId}`,
method: 'DELETE',
headers: authHeader(),
}),
}),
}),
});
export const {
useGetArticleQuery,
useGetArticleListQuery,
useCreateArticleMutation,
useUpdateArticleMutation,
useDeleteArticleMutation,
} = articleApi;
+55
View File
@@ -0,0 +1,55 @@
import { API, authHeader } from './apiSlice';
export const diseaseApi = API.injectEndpoints({
endpoints: (build) => ({
getDiseaseList: build.query({
query: ({ search = '', page = '' }) => {
let queryString = '?';
if (page) queryString += `page=${page}&perPage=20`;
else queryString += `perPage=20`;
if (search) queryString += `&search=${encodeURIComponent(search)}`;
return {
url: `/disease/list${queryString}`,
};
},
refetchOnMountOrArgChange: true,
keepUnusedDataFor: 0,
}),
getDisease: build.query({
query: ({ diseaseId }) => ({
url: `/disease/${diseaseId}`,
}),
}),
createDisease: build.mutation({
query: ({ data }) => ({
url: `/disease/create`,
method: 'POST',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
updateDisease: build.mutation({
query: ({ diseaseId, data }) => ({
url: `/disease/${diseaseId}`,
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
deleteDisease: build.mutation({
query: ({ diseaseId }) => ({
url: `/disease/${diseaseId}`,
method: 'DELETE',
headers: authHeader(),
}),
}),
}),
});
export const {
useGetDiseaseQuery,
useGetDiseaseListQuery,
useCreateDiseaseMutation,
useUpdateDiseaseMutation,
useDeleteDiseaseMutation,
} = diseaseApi;
+55
View File
@@ -0,0 +1,55 @@
import { API, authHeader } from './apiSlice';
export const medicalCenterApi = API.injectEndpoints({
endpoints: (build) => ({
getMedicalCenterList: build.query({
query: ({ search = '', page = '' }) => {
let queryString = '?';
if (page) queryString += `page=${page}&perPage=20`;
else queryString += `perPage=20`;
if (search) queryString += `&search=${encodeURIComponent(search)}`;
return {
url: `/medical-center/list${queryString}`,
};
},
refetchOnMountOrArgChange: true,
keepUnusedDataFor: 0,
}),
getMedicalCenter: build.query({
query: ({ medicalCenterId }) => ({
url: `/medical-center/${medicalCenterId}`,
}),
}),
createMedicalCenter: build.mutation({
query: ({ data }) => ({
url: `/medical-center/create`,
method: 'POST',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
updateMedicalCenter: build.mutation({
query: ({ medicalCenterId, data }) => ({
url: `/medical-center/${medicalCenterId}`,
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
deleteMedicalCenter: build.mutation({
query: ({ medicalCenterId }) => ({
url: `/medical-center/${medicalCenterId}`,
method: 'DELETE',
headers: authHeader(),
}),
}),
}),
});
export const {
useGetMedicalCenterQuery,
useGetMedicalCenterListQuery,
useCreateMedicalCenterMutation,
useUpdateMedicalCenterMutation,
useDeleteMedicalCenterMutation,
} = medicalCenterApi;
+55
View File
@@ -0,0 +1,55 @@
import { API, authHeader } from './apiSlice';
export const newsApi = API.injectEndpoints({
endpoints: (build) => ({
getNewsList: build.query({
query: ({ search = '', page = '' }) => {
let queryString = '?';
if (page) queryString += `page=${page}&perPage=20`;
else queryString += `perPage=20`;
if (search) queryString += `&search=${encodeURIComponent(search)}`;
return {
url: `/news/list${queryString}`,
};
},
refetchOnMountOrArgChange: true,
keepUnusedDataFor: 0,
}),
getNews: build.query({
query: ({ newsId }) => ({
url: `/news/${newsId}`,
}),
}),
createNews: build.mutation({
query: ({ data }) => ({
url: `/news/create`,
method: 'POST',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
updateNews: build.mutation({
query: ({ newsId, data }) => ({
url: `/news/${newsId}`,
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
deleteNews: build.mutation({
query: ({ newsId }) => ({
url: `/news/${newsId}`,
method: 'DELETE',
headers: authHeader(),
}),
}),
}),
});
export const {
useGetNewsQuery,
useGetNewsListQuery,
useCreateNewsMutation,
useUpdateNewsMutation,
useDeleteNewsMutation,
} = newsApi;
+55
View File
@@ -0,0 +1,55 @@
import { API, authHeader } from './apiSlice';
export const promoApi = API.injectEndpoints({
endpoints: (build) => ({
getSitePromoList: build.query({
query: ({ search = '', page = '' }) => {
let queryString = '?';
if (page) queryString += `page=${page}&perPage=20`;
else queryString += `perPage=20`;
if (search) queryString += `&search=${encodeURIComponent(search)}`;
return {
url: `/promo/list${queryString}`,
};
},
refetchOnMountOrArgChange: true,
keepUnusedDataFor: 0,
}),
getSitePromo: build.query({
query: ({ promoId }) => ({
url: `/promo/${promoId}`,
}),
}),
createSitePromo: build.mutation({
query: ({ data }) => ({
url: `/promo/create`,
method: 'POST',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
updateSitePromo: build.mutation({
query: ({ promoId, data }) => ({
url: `/promo/${promoId}`,
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
deleteSitePromo: build.mutation({
query: ({ promoId }) => ({
url: `/promo/${promoId}`,
method: 'DELETE',
headers: authHeader(),
}),
}),
}),
});
export const {
useGetSitePromoQuery,
useGetSitePromoListQuery,
useCreateSitePromoMutation,
useUpdateSitePromoMutation,
useDeleteSitePromoMutation,
} = promoApi;
+55
View File
@@ -0,0 +1,55 @@
import { API, authHeader } from './apiSlice';
export const siteServicesApi = API.injectEndpoints({
endpoints: (build) => ({
getSiteServicesList: build.query({
query: ({ search = '', page = '' }) => {
let queryString = '?';
if (page) queryString += `page=${page}&perPage=20`;
else queryString += `perPage=20`;
if (search) queryString += `&search=${encodeURIComponent(search)}`;
return {
url: `/site-services/list${queryString}`,
};
},
refetchOnMountOrArgChange: true,
keepUnusedDataFor: 0,
}),
getSiteServices: build.query({
query: ({ siteServicesId }) => ({
url: `/site-services/${siteServicesId}`,
}),
}),
createSiteServices: build.mutation({
query: ({ data }) => ({
url: `/site-services/create`,
method: 'POST',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
updateSiteServices: build.mutation({
query: ({ siteServicesId, data }) => ({
url: `/site-services/${siteServicesId}`,
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(data),
}),
}),
deleteSiteServices: build.mutation({
query: ({ siteServicesId }) => ({
url: `/site-services/${siteServicesId}`,
method: 'DELETE',
headers: authHeader(),
}),
}),
}),
});
export const {
useGetSiteServicesQuery,
useGetSiteServicesListQuery,
useCreateSiteServicesMutation,
useUpdateSiteServicesMutation,
useDeleteSiteServicesMutation,
} = siteServicesApi;
+6
View File
@@ -15,6 +15,12 @@ export const Navbar = () => {
{ to: '/promotions',icon: 'fas fa-percent', label: 'Акции' },
{ to: '/departments',icon: 'fas fa-stethoscope', label: 'Отделения' },
{ to: '/filials',icon: 'fas fa-building', label: 'Филиалы' },
{ to: '/news', icon: 'fas fa-newspaper', label: 'Новости' },
{ to: '/site-promo', icon: 'fas fa-bullhorn', label: 'Промо (контент)' },
{ to: '/disease', icon: 'fas fa-heartbeat', label: 'Заболевания' },
{ to: '/medical-center', icon: 'fas fa-hospital', label: 'Медцентры' },
{ to: '/article', icon: 'fas fa-file-alt', label: 'Статьи' },
{ to: '/site-services', icon: 'fas fa-concierge-bell', label: 'Услуги сайта' },
];
const [open, setOpen] = useState(false);
const toggleRef = useRef(null);
+6
View File
@@ -10,6 +10,12 @@ export const Sidebar = () => {
{ to: '/promotions',icon: 'fas fa-percent', label: 'Акции' },
{ to: '/departments',icon: 'fas fa-stethoscope', label: 'Отделения' },
{ to: '/filials',icon: 'fas fa-building', label: 'Филиалы' },
{ to: '/news', icon: 'fas fa-newspaper', label: 'Новости' },
{ to: '/site-promo', icon: 'fas fa-bullhorn', label: 'Промо (контент)' },
{ to: '/disease', icon: 'fas fa-heartbeat', label: 'Заболевания' },
{ to: '/medical-center', icon: 'fas fa-hospital', label: 'Медцентры' },
{ to: '/article', icon: 'fas fa-file-alt', label: 'Статьи' },
{ to: '/site-services', icon: 'fas fa-concierge-bell', label: 'Услуги сайта' },
];
return (
+88
View File
@@ -0,0 +1,88 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useCreateArticleMutation } from '/src/api/apiArticle';
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 AddArticlePage() {
const navigate = useNavigate();
const navigateBack = () => navigate(`/article`);
const regions = useSelector(selectRegions);
const [createArticle] = useCreateArticleMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
previewPicture: '',
doctors: '',
services: '',
});
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.previewPicture = form.previewPicture === '' ? null : form.previewPicture;
data.doctors = !form.doctors || !String(form.doctors).trim() ? null : JSON.parse(form.doctors);
data.services = !form.services || !String(form.services).trim() ? null : JSON.parse(form.services);
} catch (e) { window.alert('Пожалуйста исправьте ошибки в форме.'); return; }
try {
const response = await createArticle({ data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => { navigate(`/article/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>previewPicture</label><input type="text" className="form-control" value={form.previewPicture} onChange={handleChange('previewPicture')} /></div>
<div className="form-group"><label>doctors (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.doctors} onChange={handleChange('doctors')} /></div>
<div className="form-group"><label>services (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.services} onChange={handleChange('services')} /></div>
<Modal isOpen={isModalSuccess} title="Изменения внесены" hasButtons={false}><p className="mb-1">Изменения успешно внесены.</p></Modal>
</EditElementForm>
);
}
+127
View File
@@ -0,0 +1,127 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useCreateDiseaseMutation } from '/src/api/apiDisease';
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 AddDiseasePage() {
const navigate = useNavigate();
const navigateBack = () => navigate(`/disease`);
const regions = useSelector(selectRegions);
const [createDisease] = useCreateDiseaseMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
previewPicture: '',
hidePicture: false,
readTime: '',
diseasesName: '',
diseasesOtherName: '',
symptom: '',
staff: '',
bibliography: '',
tagsImportant: '',
tags: '',
linkServices: '',
staffList: '',
staffPost: '',
staffPostExclude: '',
linkFaq: '',
staffCheck: '',
});
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.previewPicture = form.previewPicture === '' ? null : form.previewPicture;
data.hidePicture = Boolean(form.hidePicture);
data.readTime = form.readTime === '' ? null : form.readTime;
data.diseasesName = form.diseasesName === '' ? null : form.diseasesName;
data.diseasesOtherName = form.diseasesOtherName === '' ? null : form.diseasesOtherName;
data.symptom = form.symptom === '' ? null : form.symptom;
data.staff = form.staff === '' ? null : form.staff;
data.bibliography = form.bibliography === '' ? null : form.bibliography;
data.tagsImportant = !form.tagsImportant || !String(form.tagsImportant).trim() ? null : JSON.parse(form.tagsImportant);
data.tags = !form.tags || !String(form.tags).trim() ? null : JSON.parse(form.tags);
data.linkServices = !form.linkServices || !String(form.linkServices).trim() ? null : JSON.parse(form.linkServices);
data.staffList = !form.staffList || !String(form.staffList).trim() ? null : JSON.parse(form.staffList);
data.staffPost = !form.staffPost || !String(form.staffPost).trim() ? null : JSON.parse(form.staffPost);
data.staffPostExclude = !form.staffPostExclude || !String(form.staffPostExclude).trim() ? null : JSON.parse(form.staffPostExclude);
data.linkFaq = !form.linkFaq || !String(form.linkFaq).trim() ? null : JSON.parse(form.linkFaq);
data.staffCheck = !form.staffCheck || !String(form.staffCheck).trim() ? null : JSON.parse(form.staffCheck);
} catch (e) { window.alert('Пожалуйста исправьте ошибки в форме.'); return; }
try {
const response = await createDisease({ data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => { navigate(`/disease/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>previewPicture</label><input type="text" className="form-control" value={form.previewPicture} onChange={handleChange('previewPicture')} /></div>
<div className="form-group form-check"><input type="checkbox" className="form-check-input" id="hidePicture" checked={Boolean(form.hidePicture)} onChange={handleChange('hidePicture')} /><label className="form-check-label" htmlFor="hidePicture">hidePicture</label></div>
<div className="form-group"><label>readTime</label><input type="text" className="form-control" value={form.readTime} onChange={handleChange('readTime')} /></div>
<div className="form-group"><label>diseasesName</label><input type="text" className="form-control" value={form.diseasesName} onChange={handleChange('diseasesName')} /></div>
<div className="form-group"><label>diseasesOtherName</label><input type="text" className="form-control" value={form.diseasesOtherName} onChange={handleChange('diseasesOtherName')} /></div>
<div className="form-group"><label>symptom</label><input type="text" className="form-control" value={form.symptom} onChange={handleChange('symptom')} /></div>
<div className="form-group"><label>staff</label><input type="text" className="form-control" value={form.staff} onChange={handleChange('staff')} /></div>
<div className="form-group"><label>bibliography</label><input type="text" className="form-control" value={form.bibliography} onChange={handleChange('bibliography')} /></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>tags (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.tags} onChange={handleChange('tags')} /></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>staffList (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.staffList} onChange={handleChange('staffList')} /></div>
<div className="form-group"><label>staffPost (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.staffPost} onChange={handleChange('staffPost')} /></div>
<div className="form-group"><label>staffPostExclude (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.staffPostExclude} onChange={handleChange('staffPostExclude')} /></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>staffCheck (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.staffCheck} onChange={handleChange('staffCheck')} /></div>
<Modal isOpen={isModalSuccess} title="Изменения внесены" hasButtons={false}><p className="mb-1">Изменения успешно внесены.</p></Modal>
</EditElementForm>
);
}
+148
View File
@@ -0,0 +1,148 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useCreateMedicalCenterMutation } from '/src/api/apiMedicalCenter';
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 AddMedicalCenterPage() {
const navigate = useNavigate();
const navigateBack = () => navigate(`/medical-center`);
const regions = useSelector(selectRegions);
const [createMedicalCenter] = useCreateMedicalCenterMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
mainLinkStaff: '',
plusText: '',
plusTitle: '',
processText: '',
processTitle: '',
servicesTitle: '',
trainingText: '',
trainingTextTitle: '',
whyText: '',
whyTitle: '',
hidePicture: '',
kodUslug: '',
doctors: '',
services: '',
articles: '',
txtUp: '',
contraindications: '',
indications: '',
linkSale: '',
plusList: '',
servicesList: '',
servicesPhotos: '',
sortStaff: '',
});
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.mainLinkStaff = form.mainLinkStaff === '' ? null : form.mainLinkStaff;
data.plusText = form.plusText === '' ? null : form.plusText;
data.plusTitle = form.plusTitle === '' ? null : form.plusTitle;
data.processText = form.processText === '' ? null : form.processText;
data.processTitle = form.processTitle === '' ? null : form.processTitle;
data.servicesTitle = form.servicesTitle === '' ? null : form.servicesTitle;
data.trainingText = form.trainingText === '' ? null : form.trainingText;
data.trainingTextTitle = form.trainingTextTitle === '' ? null : form.trainingTextTitle;
data.whyText = form.whyText === '' ? null : form.whyText;
data.whyTitle = form.whyTitle === '' ? null : form.whyTitle;
data.hidePicture = form.hidePicture === '' ? null : Number(form.hidePicture);
data.kodUslug = !form.kodUslug || !String(form.kodUslug).trim() ? null : JSON.parse(form.kodUslug);
data.doctors = !form.doctors || !String(form.doctors).trim() ? null : JSON.parse(form.doctors);
data.services = !form.services || !String(form.services).trim() ? null : JSON.parse(form.services);
data.articles = !form.articles || !String(form.articles).trim() ? null : JSON.parse(form.articles);
data.txtUp = !form.txtUp || !String(form.txtUp).trim() ? null : JSON.parse(form.txtUp);
data.contraindications = !form.contraindications || !String(form.contraindications).trim() ? null : JSON.parse(form.contraindications);
data.indications = !form.indications || !String(form.indications).trim() ? null : JSON.parse(form.indications);
data.linkSale = !form.linkSale || !String(form.linkSale).trim() ? null : JSON.parse(form.linkSale);
data.plusList = !form.plusList || !String(form.plusList).trim() ? null : JSON.parse(form.plusList);
data.servicesList = !form.servicesList || !String(form.servicesList).trim() ? null : JSON.parse(form.servicesList);
data.servicesPhotos = !form.servicesPhotos || !String(form.servicesPhotos).trim() ? null : JSON.parse(form.servicesPhotos);
data.sortStaff = !form.sortStaff || !String(form.sortStaff).trim() ? null : JSON.parse(form.sortStaff);
} catch (e) { window.alert('Пожалуйста исправьте ошибки в форме.'); return; }
try {
const response = await createMedicalCenter({ data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => { navigate(`/medical-center/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>mainLinkStaff</label><input type="text" className="form-control" value={form.mainLinkStaff} onChange={handleChange('mainLinkStaff')} /></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>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>servicesTitle</label><input type="text" className="form-control" value={form.servicesTitle} onChange={handleChange('servicesTitle')} /></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>trainingTextTitle</label><input type="text" className="form-control" value={form.trainingTextTitle} onChange={handleChange('trainingTextTitle')} /></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>kodUslug (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.kodUslug} onChange={handleChange('kodUslug')} /></div>
<div className="form-group"><label>doctors (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.doctors} onChange={handleChange('doctors')} /></div>
<div className="form-group"><label>services (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.services} onChange={handleChange('services')} /></div>
<div className="form-group"><label>articles (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.articles} onChange={handleChange('articles')} /></div>
<div className="form-group"><label>txtUp (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.txtUp} onChange={handleChange('txtUp')} /></div>
<div className="form-group"><label>contraindications (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.contraindications} onChange={handleChange('contraindications')} /></div>
<div className="form-group"><label>indications (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.indications} onChange={handleChange('indications')} /></div>
<div className="form-group"><label>linkSale (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.linkSale} onChange={handleChange('linkSale')} /></div>
<div className="form-group"><label>plusList (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.plusList} onChange={handleChange('plusList')} /></div>
<div className="form-group"><label>servicesList (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.servicesList} onChange={handleChange('servicesList')} /></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>sortStaff (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.sortStaff} onChange={handleChange('sortStaff')} /></div>
<Modal isOpen={isModalSuccess} title="Изменения внесены" hasButtons={false}><p className="mb-1">Изменения успешно внесены.</p></Modal>
</EditElementForm>
);
}
+103
View File
@@ -0,0 +1,103 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useCreateNewsMutation } from '/src/api/apiNews';
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 AddNewsPage() {
const navigate = useNavigate();
const navigateBack = () => navigate(`/news`);
const regions = useSelector(selectRegions);
const [createNews] = useCreateNewsMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
shortName: '',
linkElPrice: '',
timer: '',
timerBg: '',
formOrder: '',
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.shortName = form.shortName === '' ? null : form.shortName;
data.linkElPrice = form.linkElPrice === '' ? null : form.linkElPrice;
data.timer = form.timer === '' ? null : form.timer;
data.timerBg = form.timerBg === '' ? null : form.timerBg;
data.formOrder = !form.formOrder || !String(form.formOrder).trim() ? null : JSON.parse(form.formOrder);
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 createNews({ data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => { navigate(`/news/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>Короткое название</label><input type="text" className="form-control" value={form.shortName} onChange={handleChange('shortName')} /></div>
<div className="form-group"><label>Ссылка на прайс</label><input type="text" className="form-control" value={form.linkElPrice} onChange={handleChange('linkElPrice')} /></div>
<div className="form-group"><label>Таймер</label><input type="text" className="form-control" value={form.timer} onChange={handleChange('timer')} /></div>
<div className="form-group"><label>Фон таймера</label><input type="text" className="form-control" value={form.timerBg} onChange={handleChange('timerBg')} /></div>
<div className="form-group"><label>formOrder (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.formOrder} onChange={handleChange('formOrder')} /></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>
);
}
+103
View File
@@ -0,0 +1,103 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useCreateSitePromoMutation } from '/src/api/apiSitePromo';
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 AddSitePromoPage() {
const navigate = useNavigate();
const navigateBack = () => navigate(`/site-promo`);
const regions = useSelector(selectRegions);
const [createSitePromo] = useCreateSitePromoMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
shortName: '',
period: '',
timer: '',
timerBg: '',
clinics: '',
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.shortName = form.shortName === '' ? null : form.shortName;
data.period = form.period === '' ? null : form.period;
data.timer = form.timer === '' ? null : form.timer;
data.timerBg = form.timerBg === '' ? null : form.timerBg;
data.clinics = !form.clinics || !String(form.clinics).trim() ? null : JSON.parse(form.clinics);
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 createSitePromo({ data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => { navigate(`/site-promo/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>Короткое название</label><input type="text" className="form-control" value={form.shortName} onChange={handleChange('shortName')} /></div>
<div className="form-group"><label>Период</label><input type="text" className="form-control" value={form.period} onChange={handleChange('period')} /></div>
<div className="form-group"><label>Таймер</label><input type="text" className="form-control" value={form.timer} onChange={handleChange('timer')} /></div>
<div className="form-group"><label>Фон таймера</label><input type="text" className="form-control" value={form.timerBg} onChange={handleChange('timerBg')} /></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>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>
);
}
+226
View File
@@ -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>
);
}
+124
View File
@@ -0,0 +1,124 @@
import { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetArticleListQuery } from '/src/api/apiArticle';
import { selectRegions } from '../store/slice/regionSlice';
import { useOutsideClick } from '../hooks/useOutsideClick';
import { LoadingComponent } from '../components/Placeholders/LoadingComponent';
import { ErrorComponent } from '../components/Placeholders/ErrorComponent';
export const ArticleListPage = () => {
const [ searchValue, setSearchValue ] = useState( '' );
const [ currentPage, setCurrentPage ] = useState( 1 );
const [ expandedId, setExpandedId ] = useState( '' );
const navigate = useNavigate();
const regions = useSelector(selectRegions);
const tableRef = useRef( null );
useOutsideClick( tableRef, () => setExpandedId( null ));
const { data: response = {}, isFetching, error: queryError } =
useGetArticleListQuery( { search: searchValue, page: currentPage } );
const pagination = response.pagination
? response.pagination
: response.meta
? {
total_pages: response.meta.totalPages ?? 1,
current_page: response.meta.page ?? 1,
has_previous_page: (response.meta.page ?? 1) > 1,
has_next_page: (response.meta.page ?? 1) < (response.meta.totalPages ?? 1),
}
: {};
const items = response.data ? response.data : [];
const renderPagination = () => {
const total = pagination.total_pages || 1;
const current = pagination.current_page || 1;
const pages = new Set( [ 1, total ] );
for ( let page = current - 2; page <= current + 2; page += 1 ) {
if ( page > 1 && page < total ) pages.add( page );
}
const sorted = Array.from( pages ).sort( ( a, b ) => a - b );
const elements = [];
let last = 0;
sorted.forEach( page => {
if ( last && page - last > 1 ) {
elements.push(
<li key={ `dots-${last}` } className="page-item disabled">
<span className="page-link"></span>
</li>
);
}
elements.push(
<li key={ page } className={`page-item ${ page === current ? 'active' : '' }`}>
<button type="button" className="page-link" onClick={ () => page !== current && setCurrentPage( page ) }>
{ page }
</button>
</li>
);
last = page;
});
return (
<nav>
<ul className="pagination justify-content-center">
<li className={`page-item ${ !pagination.has_previous_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_previous_page && setCurrentPage(current - 1) }>&laquo;</button>
</li>
{ elements }
<li className={`page-item ${ !pagination.has_next_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_next_page && setCurrentPage(current + 1) }>&raquo;</button>
</li>
</ul>
</nav>
);
};
return (
<div className="container-fluid">
<h1 className="h3 mb-4 text-gray-800">Статьи</h1>
<div className="d-flex justify-content-between mb-3" style={{ marginRight: '0.1rem', marginLeft: '0.1rem' }}>
<div className="form-group align-self-end mr-3">
<input type="button" className="btn btn-outline-primary" value="Добавить" onClick={ e => { e.stopPropagation(); navigate(`/article/create`); } } />
</div>
<div className="form-group flex-grow-1">
<label>Поиск</label>
<input type="text" className="form-control" value={ searchValue } onChange={ e => { setSearchValue( e.target.value ); setCurrentPage( 1 ); } } />
</div>
</div>
{ isFetching ? <LoadingComponent /> : queryError ? <ErrorComponent /> : (
<>
<div className="table-responsive" ref={tableRef}>
<table className="table table-hover table-bordered">
<thead><tr>
<th>ID</th>
<th>Название</th>
<th>Alias</th>
<th>Активно</th>
</tr></thead>
<tbody>
{items.map( item => (
<>
<tr key={ item.id } className={ `cursor-pointer${ expandedId === item.id ? ' table-success' : '' }` } onClick={ () => setExpandedId( expandedId === item.id ? null : item.id ) }>
<td>{ item.id }</td>
<td>{ item.name }</td>
<td>{ item.alias }</td>
<td>{ item.active ? 'Да' : 'Нет' }</td>
</tr>
{ expandedId === item.id && (
<tr className='table-success'>
<td colSpan={ 4 }>
<input type="button" className="btn btn-outline-primary" value="Редактировать" onClick={ e => { e.stopPropagation(); navigate(`/article/edit/${item.id}`) } } />
</td>
</tr>
)}
</>
))}
</tbody>
</table>
</div>
{ renderPagination() }
</>
)}
</div>
);
};
+115
View File
@@ -0,0 +1,115 @@
import { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetDiseaseListQuery } from '/src/api/apiDisease';
import { selectRegions } from '../store/slice/regionSlice';
import { useOutsideClick } from '../hooks/useOutsideClick';
import { LoadingComponent } from '../components/Placeholders/LoadingComponent';
import { ErrorComponent } from '../components/Placeholders/ErrorComponent';
export const DiseaseListPage = () => {
const [ searchValue, setSearchValue ] = useState( '' );
const [ currentPage, setCurrentPage ] = useState( 1 );
const [ expandedId, setExpandedId ] = useState( '' );
const navigate = useNavigate();
const regions = useSelector(selectRegions);
const tableRef = useRef( null );
useOutsideClick( tableRef, () => setExpandedId( null ));
const { data: response = {}, isFetching, error: queryError } =
useGetDiseaseListQuery( { search: searchValue, page: currentPage } );
const pagination = response.pagination || {};
const items = response.data ? response.data : [];
const renderPagination = () => {
const total = pagination.total_pages || 1;
const current = pagination.current_page || 1;
const pages = new Set( [ 1, total ] );
for ( let page = current - 2; page <= current + 2; page += 1 ) {
if ( page > 1 && page < total ) pages.add( page );
}
const sorted = Array.from( pages ).sort( ( a, b ) => a - b );
const elements = [];
let last = 0;
sorted.forEach( page => {
if ( last && page - last > 1 ) {
elements.push(
<li key={ `dots-${last}` } className="page-item disabled">
<span className="page-link"></span>
</li>
);
}
elements.push(
<li key={ page } className={`page-item ${ page === current ? 'active' : '' }`}>
<button type="button" className="page-link" onClick={ () => page !== current && setCurrentPage( page ) }>
{ page }
</button>
</li>
);
last = page;
});
return (
<nav>
<ul className="pagination justify-content-center">
<li className={`page-item ${ !pagination.has_previous_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_previous_page && setCurrentPage(current - 1) }>&laquo;</button>
</li>
{ elements }
<li className={`page-item ${ !pagination.has_next_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_next_page && setCurrentPage(current + 1) }>&raquo;</button>
</li>
</ul>
</nav>
);
};
return (
<div className="container-fluid">
<h1 className="h3 mb-4 text-gray-800">Заболевания</h1>
<div className="d-flex justify-content-between mb-3" style={{ marginRight: '0.1rem', marginLeft: '0.1rem' }}>
<div className="form-group align-self-end mr-3">
<input type="button" className="btn btn-outline-primary" value="Добавить" onClick={ e => { e.stopPropagation(); navigate(`/disease/create`); } } />
</div>
<div className="form-group flex-grow-1">
<label>Поиск</label>
<input type="text" className="form-control" value={ searchValue } onChange={ e => { setSearchValue( e.target.value ); setCurrentPage( 1 ); } } />
</div>
</div>
{ isFetching ? <LoadingComponent /> : queryError ? <ErrorComponent /> : (
<>
<div className="table-responsive" ref={tableRef}>
<table className="table table-hover table-bordered">
<thead><tr>
<th>ID</th>
<th>Название</th>
<th>Alias</th>
<th>Активно</th>
</tr></thead>
<tbody>
{items.map( item => (
<>
<tr key={ item.id } className={ `cursor-pointer${ expandedId === item.id ? ' table-success' : '' }` } onClick={ () => setExpandedId( expandedId === item.id ? null : item.id ) }>
<td>{ item.id }</td>
<td>{ item.name }</td>
<td>{ item.alias }</td>
<td>{ item.active ? 'Да' : 'Нет' }</td>
</tr>
{ expandedId === item.id && (
<tr className='table-success'>
<td colSpan={ 4 }>
<input type="button" className="btn btn-outline-primary" value="Редактировать" onClick={ e => { e.stopPropagation(); navigate(`/disease/edit/${item.id}`) } } />
</td>
</tr>
)}
</>
))}
</tbody>
</table>
</div>
{ renderPagination() }
</>
)}
</div>
);
};
+113
View File
@@ -0,0 +1,113 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetArticleQuery, useUpdateArticleMutation, useDeleteArticleMutation } from '/src/api/apiArticle';
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 EditArticlePage() {
const { id } = useParams();
const navigate = useNavigate();
const navigateBack = () => navigate(`/article`);
const regions = useSelector(selectRegions);
const { data: item, isFetching, error } = useGetArticleQuery({ articleId: id });
const [updateArticle] = useUpdateArticleMutation();
const [deleteArticle] = useDeleteArticleMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
previewPicture: '',
doctors: '',
services: '',
});
const [anons, setAnons] = useState('');
const [content, setContent] = useState('');
useEffect(() => {
if (!item) return;
setForm({
name: item.name ?? '',
active: Boolean(item.active),
regionId: item.regionId ?? '',
alias: item.alias ?? '',
previewPicture: item.previewPicture ?? '',
doctors: item.doctors == null ? '' : JSON.stringify(item.doctors, null, 2),
services: item.services == null ? '' : JSON.stringify(item.services, null, 2),
});
setAnons(item.anons ?? '');
setContent(item.content ?? '');
}, [item]);
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 handleDelete = async () => {
try {
await deleteArticle({ articleId: id }).unwrap();
setModalSuccess(true);
window.setTimeout(() => navigateBack(), 2000);
} catch (err) {
console.error('Ошибка при удалении:', err);
}
};
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.previewPicture = form.previewPicture === '' ? null : form.previewPicture;
data.doctors = !form.doctors || !String(form.doctors).trim() ? null : JSON.parse(form.doctors);
data.services = !form.services || !String(form.services).trim() ? null : JSON.parse(form.services);
} catch (e) { window.alert('Пожалуйста исправьте ошибки в форме.'); return; }
try {
await updateArticle({ articleId: id, data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => window.location.reload(), 2000);
} catch (err) {
console.error('Ошибка сохранения:', err);
}
};
if (isFetching) return <LoadingComponent />;
if (error) return <ErrorComponent />;
if (!item) return <NotFindElement message={`Статья с ID=${id} не найдена.`} navigateBack={navigateBack} />;
return (
<EditElementForm navigateBack={navigateBack} header={`Редактирование: статью #${id}`} handleSave={handleSave} handleDelete={handleDelete}>
<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>previewPicture</label><input type="text" className="form-control" value={form.previewPicture} onChange={handleChange('previewPicture')} /></div>
<div className="form-group"><label>doctors (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.doctors} onChange={handleChange('doctors')} /></div>
<div className="form-group"><label>services (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.services} onChange={handleChange('services')} /></div>
<Modal isOpen={isModalSuccess} title="Изменения внесены" hasButtons={false}><p className="mb-1">Изменения успешно внесены.</p></Modal>
</EditElementForm>
);
}
+165
View File
@@ -0,0 +1,165 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetDiseaseQuery, useUpdateDiseaseMutation, useDeleteDiseaseMutation } from '/src/api/apiDisease';
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 EditDiseasePage() {
const { id } = useParams();
const navigate = useNavigate();
const navigateBack = () => navigate(`/disease`);
const regions = useSelector(selectRegions);
const { data: item, isFetching, error } = useGetDiseaseQuery({ diseaseId: id });
const [updateDisease] = useUpdateDiseaseMutation();
const [deleteDisease] = useDeleteDiseaseMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
previewPicture: '',
hidePicture: false,
readTime: '',
diseasesName: '',
diseasesOtherName: '',
symptom: '',
staff: '',
bibliography: '',
tagsImportant: '',
tags: '',
linkServices: '',
staffList: '',
staffPost: '',
staffPostExclude: '',
linkFaq: '',
staffCheck: '',
});
const [anons, setAnons] = useState('');
const [content, setContent] = useState('');
useEffect(() => {
if (!item) return;
setForm({
name: item.name ?? '',
active: Boolean(item.active),
regionId: item.regionId ?? '',
alias: item.alias ?? '',
previewPicture: item.previewPicture ?? '',
hidePicture: Boolean(item.hidePicture),
readTime: item.readTime ?? '',
diseasesName: item.diseasesName ?? '',
diseasesOtherName: item.diseasesOtherName ?? '',
symptom: item.symptom ?? '',
staff: item.staff ?? '',
bibliography: item.bibliography ?? '',
tagsImportant: item.tagsImportant == null ? '' : JSON.stringify(item.tagsImportant, null, 2),
tags: item.tags == null ? '' : JSON.stringify(item.tags, null, 2),
linkServices: item.linkServices == null ? '' : JSON.stringify(item.linkServices, null, 2),
staffList: item.staffList == null ? '' : JSON.stringify(item.staffList, null, 2),
staffPost: item.staffPost == null ? '' : JSON.stringify(item.staffPost, null, 2),
staffPostExclude: item.staffPostExclude == null ? '' : JSON.stringify(item.staffPostExclude, null, 2),
linkFaq: item.linkFaq == null ? '' : JSON.stringify(item.linkFaq, null, 2),
staffCheck: item.staffCheck == null ? '' : JSON.stringify(item.staffCheck, null, 2),
});
setAnons(item.anons ?? '');
setContent(item.content ?? '');
}, [item]);
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 handleDelete = async () => {
try {
await deleteDisease({ diseaseId: id }).unwrap();
setModalSuccess(true);
window.setTimeout(() => navigateBack(), 2000);
} catch (err) {
console.error('Ошибка при удалении:', err);
}
};
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.previewPicture = form.previewPicture === '' ? null : form.previewPicture;
data.hidePicture = Boolean(form.hidePicture);
data.readTime = form.readTime === '' ? null : form.readTime;
data.diseasesName = form.diseasesName === '' ? null : form.diseasesName;
data.diseasesOtherName = form.diseasesOtherName === '' ? null : form.diseasesOtherName;
data.symptom = form.symptom === '' ? null : form.symptom;
data.staff = form.staff === '' ? null : form.staff;
data.bibliography = form.bibliography === '' ? null : form.bibliography;
data.tagsImportant = !form.tagsImportant || !String(form.tagsImportant).trim() ? null : JSON.parse(form.tagsImportant);
data.tags = !form.tags || !String(form.tags).trim() ? null : JSON.parse(form.tags);
data.linkServices = !form.linkServices || !String(form.linkServices).trim() ? null : JSON.parse(form.linkServices);
data.staffList = !form.staffList || !String(form.staffList).trim() ? null : JSON.parse(form.staffList);
data.staffPost = !form.staffPost || !String(form.staffPost).trim() ? null : JSON.parse(form.staffPost);
data.staffPostExclude = !form.staffPostExclude || !String(form.staffPostExclude).trim() ? null : JSON.parse(form.staffPostExclude);
data.linkFaq = !form.linkFaq || !String(form.linkFaq).trim() ? null : JSON.parse(form.linkFaq);
data.staffCheck = !form.staffCheck || !String(form.staffCheck).trim() ? null : JSON.parse(form.staffCheck);
} catch (e) { window.alert('Пожалуйста исправьте ошибки в форме.'); return; }
try {
await updateDisease({ diseaseId: id, data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => window.location.reload(), 2000);
} catch (err) {
console.error('Ошибка сохранения:', err);
}
};
if (isFetching) return <LoadingComponent />;
if (error) return <ErrorComponent />;
if (!item) return <NotFindElement message={`Заболевание с ID=${id} не найдена.`} navigateBack={navigateBack} />;
return (
<EditElementForm navigateBack={navigateBack} header={`Редактирование: заболевание #${id}`} handleSave={handleSave} handleDelete={handleDelete}>
<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>previewPicture</label><input type="text" className="form-control" value={form.previewPicture} onChange={handleChange('previewPicture')} /></div>
<div className="form-group form-check"><input type="checkbox" className="form-check-input" id="hidePicture" checked={Boolean(form.hidePicture)} onChange={handleChange('hidePicture')} /><label className="form-check-label" htmlFor="hidePicture">hidePicture</label></div>
<div className="form-group"><label>readTime</label><input type="text" className="form-control" value={form.readTime} onChange={handleChange('readTime')} /></div>
<div className="form-group"><label>diseasesName</label><input type="text" className="form-control" value={form.diseasesName} onChange={handleChange('diseasesName')} /></div>
<div className="form-group"><label>diseasesOtherName</label><input type="text" className="form-control" value={form.diseasesOtherName} onChange={handleChange('diseasesOtherName')} /></div>
<div className="form-group"><label>symptom</label><input type="text" className="form-control" value={form.symptom} onChange={handleChange('symptom')} /></div>
<div className="form-group"><label>staff</label><input type="text" className="form-control" value={form.staff} onChange={handleChange('staff')} /></div>
<div className="form-group"><label>bibliography</label><input type="text" className="form-control" value={form.bibliography} onChange={handleChange('bibliography')} /></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>tags (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.tags} onChange={handleChange('tags')} /></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>staffList (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.staffList} onChange={handleChange('staffList')} /></div>
<div className="form-group"><label>staffPost (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.staffPost} onChange={handleChange('staffPost')} /></div>
<div className="form-group"><label>staffPostExclude (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.staffPostExclude} onChange={handleChange('staffPostExclude')} /></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>staffCheck (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.staffCheck} onChange={handleChange('staffCheck')} /></div>
<Modal isOpen={isModalSuccess} title="Изменения внесены" hasButtons={false}><p className="mb-1">Изменения успешно внесены.</p></Modal>
</EditElementForm>
);
}
+193
View File
@@ -0,0 +1,193 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetMedicalCenterQuery, useUpdateMedicalCenterMutation, useDeleteMedicalCenterMutation } from '/src/api/apiMedicalCenter';
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 EditMedicalCenterPage() {
const { id } = useParams();
const navigate = useNavigate();
const navigateBack = () => navigate(`/medical-center`);
const regions = useSelector(selectRegions);
const { data: item, isFetching, error } = useGetMedicalCenterQuery({ medicalCenterId: id });
const [updateMedicalCenter] = useUpdateMedicalCenterMutation();
const [deleteMedicalCenter] = useDeleteMedicalCenterMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
mainLinkStaff: '',
plusText: '',
plusTitle: '',
processText: '',
processTitle: '',
servicesTitle: '',
trainingText: '',
trainingTextTitle: '',
whyText: '',
whyTitle: '',
hidePicture: '',
kodUslug: '',
doctors: '',
services: '',
articles: '',
txtUp: '',
contraindications: '',
indications: '',
linkSale: '',
plusList: '',
servicesList: '',
servicesPhotos: '',
sortStaff: '',
});
const [anons, setAnons] = useState('');
const [content, setContent] = useState('');
useEffect(() => {
if (!item) return;
setForm({
name: item.name ?? '',
active: Boolean(item.active),
regionId: item.regionId ?? '',
alias: item.alias ?? '',
mainLinkStaff: item.mainLinkStaff ?? '',
plusText: item.plusText ?? '',
plusTitle: item.plusTitle ?? '',
processText: item.processText ?? '',
processTitle: item.processTitle ?? '',
servicesTitle: item.servicesTitle ?? '',
trainingText: item.trainingText ?? '',
trainingTextTitle: item.trainingTextTitle ?? '',
whyText: item.whyText ?? '',
whyTitle: item.whyTitle ?? '',
hidePicture: item.hidePicture ?? '',
kodUslug: item.kodUslug == null ? '' : JSON.stringify(item.kodUslug, null, 2),
doctors: item.doctors == null ? '' : JSON.stringify(item.doctors, null, 2),
services: item.services == null ? '' : JSON.stringify(item.services, null, 2),
articles: item.articles == null ? '' : JSON.stringify(item.articles, null, 2),
txtUp: item.txtUp == null ? '' : JSON.stringify(item.txtUp, null, 2),
contraindications: item.contraindications == null ? '' : JSON.stringify(item.contraindications, null, 2),
indications: item.indications == null ? '' : JSON.stringify(item.indications, null, 2),
linkSale: item.linkSale == null ? '' : JSON.stringify(item.linkSale, null, 2),
plusList: item.plusList == null ? '' : JSON.stringify(item.plusList, null, 2),
servicesList: item.servicesList == null ? '' : JSON.stringify(item.servicesList, null, 2),
servicesPhotos: item.servicesPhotos == null ? '' : JSON.stringify(item.servicesPhotos, null, 2),
sortStaff: item.sortStaff == null ? '' : JSON.stringify(item.sortStaff, null, 2),
});
setAnons(item.anons ?? '');
setContent(item.content ?? '');
}, [item]);
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 handleDelete = async () => {
try {
await deleteMedicalCenter({ medicalCenterId: id }).unwrap();
setModalSuccess(true);
window.setTimeout(() => navigateBack(), 2000);
} catch (err) {
console.error('Ошибка при удалении:', err);
}
};
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.mainLinkStaff = form.mainLinkStaff === '' ? null : form.mainLinkStaff;
data.plusText = form.plusText === '' ? null : form.plusText;
data.plusTitle = form.plusTitle === '' ? null : form.plusTitle;
data.processText = form.processText === '' ? null : form.processText;
data.processTitle = form.processTitle === '' ? null : form.processTitle;
data.servicesTitle = form.servicesTitle === '' ? null : form.servicesTitle;
data.trainingText = form.trainingText === '' ? null : form.trainingText;
data.trainingTextTitle = form.trainingTextTitle === '' ? null : form.trainingTextTitle;
data.whyText = form.whyText === '' ? null : form.whyText;
data.whyTitle = form.whyTitle === '' ? null : form.whyTitle;
data.hidePicture = form.hidePicture === '' ? null : Number(form.hidePicture);
data.kodUslug = !form.kodUslug || !String(form.kodUslug).trim() ? null : JSON.parse(form.kodUslug);
data.doctors = !form.doctors || !String(form.doctors).trim() ? null : JSON.parse(form.doctors);
data.services = !form.services || !String(form.services).trim() ? null : JSON.parse(form.services);
data.articles = !form.articles || !String(form.articles).trim() ? null : JSON.parse(form.articles);
data.txtUp = !form.txtUp || !String(form.txtUp).trim() ? null : JSON.parse(form.txtUp);
data.contraindications = !form.contraindications || !String(form.contraindications).trim() ? null : JSON.parse(form.contraindications);
data.indications = !form.indications || !String(form.indications).trim() ? null : JSON.parse(form.indications);
data.linkSale = !form.linkSale || !String(form.linkSale).trim() ? null : JSON.parse(form.linkSale);
data.plusList = !form.plusList || !String(form.plusList).trim() ? null : JSON.parse(form.plusList);
data.servicesList = !form.servicesList || !String(form.servicesList).trim() ? null : JSON.parse(form.servicesList);
data.servicesPhotos = !form.servicesPhotos || !String(form.servicesPhotos).trim() ? null : JSON.parse(form.servicesPhotos);
data.sortStaff = !form.sortStaff || !String(form.sortStaff).trim() ? null : JSON.parse(form.sortStaff);
} catch (e) { window.alert('Пожалуйста исправьте ошибки в форме.'); return; }
try {
await updateMedicalCenter({ medicalCenterId: id, data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => window.location.reload(), 2000);
} catch (err) {
console.error('Ошибка сохранения:', err);
}
};
if (isFetching) return <LoadingComponent />;
if (error) return <ErrorComponent />;
if (!item) return <NotFindElement message={`Медцентр с ID=${id} не найдена.`} navigateBack={navigateBack} />;
return (
<EditElementForm navigateBack={navigateBack} header={`Редактирование: медцентр #${id}`} handleSave={handleSave} handleDelete={handleDelete}>
<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>mainLinkStaff</label><input type="text" className="form-control" value={form.mainLinkStaff} onChange={handleChange('mainLinkStaff')} /></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>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>servicesTitle</label><input type="text" className="form-control" value={form.servicesTitle} onChange={handleChange('servicesTitle')} /></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>trainingTextTitle</label><input type="text" className="form-control" value={form.trainingTextTitle} onChange={handleChange('trainingTextTitle')} /></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>kodUslug (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.kodUslug} onChange={handleChange('kodUslug')} /></div>
<div className="form-group"><label>doctors (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.doctors} onChange={handleChange('doctors')} /></div>
<div className="form-group"><label>services (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.services} onChange={handleChange('services')} /></div>
<div className="form-group"><label>articles (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.articles} onChange={handleChange('articles')} /></div>
<div className="form-group"><label>txtUp (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.txtUp} onChange={handleChange('txtUp')} /></div>
<div className="form-group"><label>contraindications (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.contraindications} onChange={handleChange('contraindications')} /></div>
<div className="form-group"><label>indications (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.indications} onChange={handleChange('indications')} /></div>
<div className="form-group"><label>linkSale (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.linkSale} onChange={handleChange('linkSale')} /></div>
<div className="form-group"><label>plusList (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.plusList} onChange={handleChange('plusList')} /></div>
<div className="form-group"><label>servicesList (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.servicesList} onChange={handleChange('servicesList')} /></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>sortStaff (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.sortStaff} onChange={handleChange('sortStaff')} /></div>
<Modal isOpen={isModalSuccess} title="Изменения внесены" hasButtons={false}><p className="mb-1">Изменения успешно внесены.</p></Modal>
</EditElementForm>
);
}
+133
View File
@@ -0,0 +1,133 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetNewsQuery, useUpdateNewsMutation, useDeleteNewsMutation } from '/src/api/apiNews';
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 EditNewsPage() {
const { id } = useParams();
const navigate = useNavigate();
const navigateBack = () => navigate(`/news`);
const regions = useSelector(selectRegions);
const { data: item, isFetching, error } = useGetNewsQuery({ newsId: id });
const [updateNews] = useUpdateNewsMutation();
const [deleteNews] = useDeleteNewsMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
shortName: '',
linkElPrice: '',
timer: '',
timerBg: '',
formOrder: '',
linkServices: '',
linkStaff: '',
photos: '',
});
const [anons, setAnons] = useState('');
const [content, setContent] = useState('');
useEffect(() => {
if (!item) return;
setForm({
name: item.name ?? '',
active: Boolean(item.active),
regionId: item.regionId ?? '',
alias: item.alias ?? '',
shortName: item.shortName ?? '',
linkElPrice: item.linkElPrice ?? '',
timer: item.timer ?? '',
timerBg: item.timerBg ?? '',
formOrder: item.formOrder == null ? '' : JSON.stringify(item.formOrder, null, 2),
linkServices: item.linkServices == null ? '' : JSON.stringify(item.linkServices, null, 2),
linkStaff: item.linkStaff == null ? '' : JSON.stringify(item.linkStaff, null, 2),
photos: item.photos == null ? '' : JSON.stringify(item.photos, null, 2),
});
setAnons(item.anons ?? '');
setContent(item.content ?? '');
}, [item]);
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 handleDelete = async () => {
try {
await deleteNews({ newsId: id }).unwrap();
setModalSuccess(true);
window.setTimeout(() => navigateBack(), 2000);
} catch (err) {
console.error('Ошибка при удалении:', err);
}
};
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.shortName = form.shortName === '' ? null : form.shortName;
data.linkElPrice = form.linkElPrice === '' ? null : form.linkElPrice;
data.timer = form.timer === '' ? null : form.timer;
data.timerBg = form.timerBg === '' ? null : form.timerBg;
data.formOrder = !form.formOrder || !String(form.formOrder).trim() ? null : JSON.parse(form.formOrder);
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 {
await updateNews({ newsId: id, data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => window.location.reload(), 2000);
} catch (err) {
console.error('Ошибка сохранения:', err);
}
};
if (isFetching) return <LoadingComponent />;
if (error) return <ErrorComponent />;
if (!item) return <NotFindElement message={`Новость с ID=${id} не найдена.`} navigateBack={navigateBack} />;
return (
<EditElementForm navigateBack={navigateBack} header={`Редактирование: новость #${id}`} handleSave={handleSave} handleDelete={handleDelete}>
<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>Короткое название</label><input type="text" className="form-control" value={form.shortName} onChange={handleChange('shortName')} /></div>
<div className="form-group"><label>Ссылка на прайс</label><input type="text" className="form-control" value={form.linkElPrice} onChange={handleChange('linkElPrice')} /></div>
<div className="form-group"><label>Таймер</label><input type="text" className="form-control" value={form.timer} onChange={handleChange('timer')} /></div>
<div className="form-group"><label>Фон таймера</label><input type="text" className="form-control" value={form.timerBg} onChange={handleChange('timerBg')} /></div>
<div className="form-group"><label>formOrder (JSON)</label><textarea className="form-control font-monospace" rows={4} value={form.formOrder} onChange={handleChange('formOrder')} /></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>
);
}
+133
View File
@@ -0,0 +1,133 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetSitePromoQuery, useUpdateSitePromoMutation, useDeleteSitePromoMutation } from '/src/api/apiSitePromo';
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 EditSitePromoPage() {
const { id } = useParams();
const navigate = useNavigate();
const navigateBack = () => navigate(`/site-promo`);
const regions = useSelector(selectRegions);
const { data: item, isFetching, error } = useGetSitePromoQuery({ promoId: id });
const [updateSitePromo] = useUpdateSitePromoMutation();
const [deleteSitePromo] = useDeleteSitePromoMutation();
const [isModalSuccess, setModalSuccess] = useState(false);
const [errors, setErrors] = useState({ name: '', alias: '', regionId: '' });
const [form, setForm] = useState({
name: '',
active: false,
regionId: '',
alias: '',
shortName: '',
period: '',
timer: '',
timerBg: '',
clinics: '',
linkServices: '',
linkStaff: '',
photos: '',
});
const [anons, setAnons] = useState('');
const [content, setContent] = useState('');
useEffect(() => {
if (!item) return;
setForm({
name: item.name ?? '',
active: Boolean(item.active),
regionId: item.regionId ?? '',
alias: item.alias ?? '',
shortName: item.shortName ?? '',
period: item.period ?? '',
timer: item.timer ?? '',
timerBg: item.timerBg ?? '',
clinics: item.clinics == null ? '' : JSON.stringify(item.clinics, null, 2),
linkServices: item.linkServices == null ? '' : JSON.stringify(item.linkServices, null, 2),
linkStaff: item.linkStaff == null ? '' : JSON.stringify(item.linkStaff, null, 2),
photos: item.photos == null ? '' : JSON.stringify(item.photos, null, 2),
});
setAnons(item.anons ?? '');
setContent(item.content ?? '');
}, [item]);
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 handleDelete = async () => {
try {
await deleteSitePromo({ promoId: id }).unwrap();
setModalSuccess(true);
window.setTimeout(() => navigateBack(), 2000);
} catch (err) {
console.error('Ошибка при удалении:', err);
}
};
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.shortName = form.shortName === '' ? null : form.shortName;
data.period = form.period === '' ? null : form.period;
data.timer = form.timer === '' ? null : form.timer;
data.timerBg = form.timerBg === '' ? null : form.timerBg;
data.clinics = !form.clinics || !String(form.clinics).trim() ? null : JSON.parse(form.clinics);
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 {
await updateSitePromo({ promoId: id, data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => window.location.reload(), 2000);
} catch (err) {
console.error('Ошибка сохранения:', err);
}
};
if (isFetching) return <LoadingComponent />;
if (error) return <ErrorComponent />;
if (!item) return <NotFindElement message={`Промо с ID=${id} не найдена.`} navigateBack={navigateBack} />;
return (
<EditElementForm navigateBack={navigateBack} header={`Редактирование: промо #${id}`} handleSave={handleSave} handleDelete={handleDelete}>
<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>Короткое название</label><input type="text" className="form-control" value={form.shortName} onChange={handleChange('shortName')} /></div>
<div className="form-group"><label>Период</label><input type="text" className="form-control" value={form.period} onChange={handleChange('period')} /></div>
<div className="form-group"><label>Таймер</label><input type="text" className="form-control" value={form.timer} onChange={handleChange('timer')} /></div>
<div className="form-group"><label>Фон таймера</label><input type="text" className="form-control" value={form.timerBg} onChange={handleChange('timerBg')} /></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>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>
);
}
+297
View File
@@ -0,0 +1,297 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetSiteServicesQuery, useUpdateSiteServicesMutation, useDeleteSiteServicesMutation } 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 EditSiteServicesPage() {
const { id } = useParams();
const navigate = useNavigate();
const navigateBack = () => navigate(`/site-services`);
const regions = useSelector(selectRegions);
const { data: item, isFetching, error } = useGetSiteServicesQuery({ siteServicesId: id });
const [updateSiteServices] = useUpdateSiteServicesMutation();
const [deleteSiteServices] = useDeleteSiteServicesMutation();
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('');
useEffect(() => {
if (!item) return;
setForm({
name: item.name ?? '',
active: Boolean(item.active),
regionId: item.regionId ?? '',
alias: item.alias ?? '',
previewImg: item.previewImg ?? '',
partPrice: item.partPrice ?? '',
pokazaniya: item.pokazaniya ?? '',
preparation: item.preparation ?? '',
protivopokazaniya: item.protivopokazaniya ?? '',
bannerImg: item.bannerImg ?? '',
bannerImgM: item.bannerImgM ?? '',
bannerImgUrl: item.bannerImgUrl ?? '',
downloadFile: item.downloadFile ?? '',
fullWidthBanner: item.fullWidthBanner ?? '',
kodUslug: item.kodUslug ?? '',
linkPrice: item.linkPrice ?? '',
photosTitle: item.photosTitle ?? '',
contraindicationsList: item.contraindicationsList ?? '',
customBlockText: item.customBlockText ?? '',
customBlockText2: item.customBlockText2 ?? '',
customBlockTitle: item.customBlockTitle ?? '',
customBlockTitle2: item.customBlockTitle2 ?? '',
indicationsList: item.indicationsList ?? '',
plusList: item.plusList ?? '',
plusText: item.plusText ?? '',
plusTitle: item.plusTitle ?? '',
prepareTitle: item.prepareTitle ?? '',
processText: item.processText ?? '',
processTitle: item.processTitle ?? '',
servicesList: item.servicesList ?? '',
servicesTitle: item.servicesTitle ?? '',
textUp: item.textUp ?? '',
trainingText: item.trainingText ?? '',
whyText: item.whyText ?? '',
whyTitle: item.whyTitle ?? '',
hidePicture: item.hidePicture ?? '',
linkVideoreviews: item.linkVideoreviews == null ? '' : JSON.stringify(item.linkVideoreviews, null, 2),
faq: item.faq == null ? '' : JSON.stringify(item.faq, null, 2),
hideSignBtn: item.hideSignBtn == null ? '' : JSON.stringify(item.hideSignBtn, null, 2),
quiz: item.quiz == null ? '' : JSON.stringify(item.quiz, null, 2),
tags: item.tags == null ? '' : JSON.stringify(item.tags, null, 2),
tagsImportant: item.tagsImportant == null ? '' : JSON.stringify(item.tagsImportant, null, 2),
clinics: item.clinics == null ? '' : JSON.stringify(item.clinics, null, 2),
staffUp: item.staffUp == null ? '' : JSON.stringify(item.staffUp, null, 2),
advantages: item.advantages == null ? '' : JSON.stringify(item.advantages, null, 2),
saleId: item.saleId == null ? '' : JSON.stringify(item.saleId, null, 2),
sortStaff: item.sortStaff == null ? '' : JSON.stringify(item.sortStaff, null, 2),
linkArticlesServices: item.linkArticlesServices == null ? '' : JSON.stringify(item.linkArticlesServices, null, 2),
servicesPhotos: item.servicesPhotos == null ? '' : JSON.stringify(item.servicesPhotos, null, 2),
linkFaq: item.linkFaq == null ? '' : JSON.stringify(item.linkFaq, null, 2),
linkServices: item.linkServices == null ? '' : JSON.stringify(item.linkServices, null, 2),
linkStaff: item.linkStaff == null ? '' : JSON.stringify(item.linkStaff, null, 2),
photos: item.photos == null ? '' : JSON.stringify(item.photos, null, 2),
});
setAnons(item.anons ?? '');
setContent(item.content ?? '');
}, [item]);
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 handleDelete = async () => {
try {
await deleteSiteServices({ siteServicesId: id }).unwrap();
setModalSuccess(true);
window.setTimeout(() => navigateBack(), 2000);
} catch (err) {
console.error('Ошибка при удалении:', err);
}
};
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 {
await updateSiteServices({ siteServicesId: id, data }).unwrap();
setModalSuccess(true);
window.setTimeout(() => window.location.reload(), 2000);
} catch (err) {
console.error('Ошибка сохранения:', err);
}
};
if (isFetching) return <LoadingComponent />;
if (error) return <ErrorComponent />;
if (!item) return <NotFindElement message={`Услуга с ID=${id} не найдена.`} navigateBack={navigateBack} />;
return (
<EditElementForm navigateBack={navigateBack} header={`Редактирование: услугу #${id}`} handleSave={handleSave} handleDelete={handleDelete}>
<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>
);
}
+115
View File
@@ -0,0 +1,115 @@
import { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetMedicalCenterListQuery } from '/src/api/apiMedicalCenter';
import { selectRegions } from '../store/slice/regionSlice';
import { useOutsideClick } from '../hooks/useOutsideClick';
import { LoadingComponent } from '../components/Placeholders/LoadingComponent';
import { ErrorComponent } from '../components/Placeholders/ErrorComponent';
export const MedicalCenterListPage = () => {
const [ searchValue, setSearchValue ] = useState( '' );
const [ currentPage, setCurrentPage ] = useState( 1 );
const [ expandedId, setExpandedId ] = useState( '' );
const navigate = useNavigate();
const regions = useSelector(selectRegions);
const tableRef = useRef( null );
useOutsideClick( tableRef, () => setExpandedId( null ));
const { data: response = {}, isFetching, error: queryError } =
useGetMedicalCenterListQuery( { search: searchValue, page: currentPage } );
const pagination = response.pagination || {};
const items = response.data ? response.data : [];
const renderPagination = () => {
const total = pagination.total_pages || 1;
const current = pagination.current_page || 1;
const pages = new Set( [ 1, total ] );
for ( let page = current - 2; page <= current + 2; page += 1 ) {
if ( page > 1 && page < total ) pages.add( page );
}
const sorted = Array.from( pages ).sort( ( a, b ) => a - b );
const elements = [];
let last = 0;
sorted.forEach( page => {
if ( last && page - last > 1 ) {
elements.push(
<li key={ `dots-${last}` } className="page-item disabled">
<span className="page-link"></span>
</li>
);
}
elements.push(
<li key={ page } className={`page-item ${ page === current ? 'active' : '' }`}>
<button type="button" className="page-link" onClick={ () => page !== current && setCurrentPage( page ) }>
{ page }
</button>
</li>
);
last = page;
});
return (
<nav>
<ul className="pagination justify-content-center">
<li className={`page-item ${ !pagination.has_previous_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_previous_page && setCurrentPage(current - 1) }>&laquo;</button>
</li>
{ elements }
<li className={`page-item ${ !pagination.has_next_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_next_page && setCurrentPage(current + 1) }>&raquo;</button>
</li>
</ul>
</nav>
);
};
return (
<div className="container-fluid">
<h1 className="h3 mb-4 text-gray-800">Медцентры</h1>
<div className="d-flex justify-content-between mb-3" style={{ marginRight: '0.1rem', marginLeft: '0.1rem' }}>
<div className="form-group align-self-end mr-3">
<input type="button" className="btn btn-outline-primary" value="Добавить" onClick={ e => { e.stopPropagation(); navigate(`/medical-center/create`); } } />
</div>
<div className="form-group flex-grow-1">
<label>Поиск</label>
<input type="text" className="form-control" value={ searchValue } onChange={ e => { setSearchValue( e.target.value ); setCurrentPage( 1 ); } } />
</div>
</div>
{ isFetching ? <LoadingComponent /> : queryError ? <ErrorComponent /> : (
<>
<div className="table-responsive" ref={tableRef}>
<table className="table table-hover table-bordered">
<thead><tr>
<th>ID</th>
<th>Название</th>
<th>Alias</th>
<th>Активно</th>
</tr></thead>
<tbody>
{items.map( item => (
<>
<tr key={ item.id } className={ `cursor-pointer${ expandedId === item.id ? ' table-success' : '' }` } onClick={ () => setExpandedId( expandedId === item.id ? null : item.id ) }>
<td>{ item.id }</td>
<td>{ item.name }</td>
<td>{ item.alias }</td>
<td>{ item.active ? 'Да' : 'Нет' }</td>
</tr>
{ expandedId === item.id && (
<tr className='table-success'>
<td colSpan={ 4 }>
<input type="button" className="btn btn-outline-primary" value="Редактировать" onClick={ e => { e.stopPropagation(); navigate(`/medical-center/edit/${item.id}`) } } />
</td>
</tr>
)}
</>
))}
</tbody>
</table>
</div>
{ renderPagination() }
</>
)}
</div>
);
};
+117
View File
@@ -0,0 +1,117 @@
import { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetNewsListQuery } from '/src/api/apiNews';
import { selectRegions } from '../store/slice/regionSlice';
import { useOutsideClick } from '../hooks/useOutsideClick';
import { LoadingComponent } from '../components/Placeholders/LoadingComponent';
import { ErrorComponent } from '../components/Placeholders/ErrorComponent';
export const NewsListPage = () => {
const [ searchValue, setSearchValue ] = useState( '' );
const [ currentPage, setCurrentPage ] = useState( 1 );
const [ expandedId, setExpandedId ] = useState( '' );
const navigate = useNavigate();
const regions = useSelector(selectRegions);
const tableRef = useRef( null );
useOutsideClick( tableRef, () => setExpandedId( null ));
const { data: response = {}, isFetching, error: queryError } =
useGetNewsListQuery( { search: searchValue, page: currentPage } );
const pagination = response.pagination || {};
const items = response.data ? response.data : [];
const renderPagination = () => {
const total = pagination.total_pages || 1;
const current = pagination.current_page || 1;
const pages = new Set( [ 1, total ] );
for ( let page = current - 2; page <= current + 2; page += 1 ) {
if ( page > 1 && page < total ) pages.add( page );
}
const sorted = Array.from( pages ).sort( ( a, b ) => a - b );
const elements = [];
let last = 0;
sorted.forEach( page => {
if ( last && page - last > 1 ) {
elements.push(
<li key={ `dots-${last}` } className="page-item disabled">
<span className="page-link"></span>
</li>
);
}
elements.push(
<li key={ page } className={`page-item ${ page === current ? 'active' : '' }`}>
<button type="button" className="page-link" onClick={ () => page !== current && setCurrentPage( page ) }>
{ page }
</button>
</li>
);
last = page;
});
return (
<nav>
<ul className="pagination justify-content-center">
<li className={`page-item ${ !pagination.has_previous_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_previous_page && setCurrentPage(current - 1) }>&laquo;</button>
</li>
{ elements }
<li className={`page-item ${ !pagination.has_next_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_next_page && setCurrentPage(current + 1) }>&raquo;</button>
</li>
</ul>
</nav>
);
};
return (
<div className="container-fluid">
<h1 className="h3 mb-4 text-gray-800">Новости</h1>
<div className="d-flex justify-content-between mb-3" style={{ marginRight: '0.1rem', marginLeft: '0.1rem' }}>
<div className="form-group align-self-end mr-3">
<input type="button" className="btn btn-outline-primary" value="Добавить" onClick={ e => { e.stopPropagation(); navigate(`/news/create`); } } />
</div>
<div className="form-group flex-grow-1">
<label>Поиск</label>
<input type="text" className="form-control" value={ searchValue } onChange={ e => { setSearchValue( e.target.value ); setCurrentPage( 1 ); } } />
</div>
</div>
{ isFetching ? <LoadingComponent /> : queryError ? <ErrorComponent /> : (
<>
<div className="table-responsive" ref={tableRef}>
<table className="table table-hover table-bordered">
<thead><tr>
<th>ID</th>
<th>Название</th>
<th>Alias</th>
<th>Активно</th>
<th>Регион</th>
</tr></thead>
<tbody>
{items.map( item => (
<>
<tr key={ item.id } className={ `cursor-pointer${ expandedId === item.id ? ' table-success' : '' }` } onClick={ () => setExpandedId( expandedId === item.id ? null : item.id ) }>
<td>{ item.id }</td>
<td>{ item.name }</td>
<td>{ item.alias }</td>
<td>{ item.active ? 'Да' : 'Нет' }</td>
<td>{ regions[item.regionId] ?? item.regionId }</td>
</tr>
{ expandedId === item.id && (
<tr className='table-success'>
<td colSpan={ 5 }>
<input type="button" className="btn btn-outline-primary" value="Редактировать" onClick={ e => { e.stopPropagation(); navigate(`/news/edit/${item.id}`) } } />
</td>
</tr>
)}
</>
))}
</tbody>
</table>
</div>
{ renderPagination() }
</>
)}
</div>
);
};
+117
View File
@@ -0,0 +1,117 @@
import { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetSitePromoListQuery } from '/src/api/apiSitePromo';
import { selectRegions } from '../store/slice/regionSlice';
import { useOutsideClick } from '../hooks/useOutsideClick';
import { LoadingComponent } from '../components/Placeholders/LoadingComponent';
import { ErrorComponent } from '../components/Placeholders/ErrorComponent';
export const SitePromoListPage = () => {
const [ searchValue, setSearchValue ] = useState( '' );
const [ currentPage, setCurrentPage ] = useState( 1 );
const [ expandedId, setExpandedId ] = useState( '' );
const navigate = useNavigate();
const regions = useSelector(selectRegions);
const tableRef = useRef( null );
useOutsideClick( tableRef, () => setExpandedId( null ));
const { data: response = {}, isFetching, error: queryError } =
useGetSitePromoListQuery( { search: searchValue, page: currentPage } );
const pagination = response.pagination || {};
const items = response.data ? response.data : [];
const renderPagination = () => {
const total = pagination.total_pages || 1;
const current = pagination.current_page || 1;
const pages = new Set( [ 1, total ] );
for ( let page = current - 2; page <= current + 2; page += 1 ) {
if ( page > 1 && page < total ) pages.add( page );
}
const sorted = Array.from( pages ).sort( ( a, b ) => a - b );
const elements = [];
let last = 0;
sorted.forEach( page => {
if ( last && page - last > 1 ) {
elements.push(
<li key={ `dots-${last}` } className="page-item disabled">
<span className="page-link"></span>
</li>
);
}
elements.push(
<li key={ page } className={`page-item ${ page === current ? 'active' : '' }`}>
<button type="button" className="page-link" onClick={ () => page !== current && setCurrentPage( page ) }>
{ page }
</button>
</li>
);
last = page;
});
return (
<nav>
<ul className="pagination justify-content-center">
<li className={`page-item ${ !pagination.has_previous_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_previous_page && setCurrentPage(current - 1) }>&laquo;</button>
</li>
{ elements }
<li className={`page-item ${ !pagination.has_next_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_next_page && setCurrentPage(current + 1) }>&raquo;</button>
</li>
</ul>
</nav>
);
};
return (
<div className="container-fluid">
<h1 className="h3 mb-4 text-gray-800">Промо (контент)</h1>
<div className="d-flex justify-content-between mb-3" style={{ marginRight: '0.1rem', marginLeft: '0.1rem' }}>
<div className="form-group align-self-end mr-3">
<input type="button" className="btn btn-outline-primary" value="Добавить" onClick={ e => { e.stopPropagation(); navigate(`/site-promo/create`); } } />
</div>
<div className="form-group flex-grow-1">
<label>Поиск</label>
<input type="text" className="form-control" value={ searchValue } onChange={ e => { setSearchValue( e.target.value ); setCurrentPage( 1 ); } } />
</div>
</div>
{ isFetching ? <LoadingComponent /> : queryError ? <ErrorComponent /> : (
<>
<div className="table-responsive" ref={tableRef}>
<table className="table table-hover table-bordered">
<thead><tr>
<th>ID</th>
<th>Название</th>
<th>Alias</th>
<th>Активно</th>
<th>Регион</th>
</tr></thead>
<tbody>
{items.map( item => (
<>
<tr key={ item.id } className={ `cursor-pointer${ expandedId === item.id ? ' table-success' : '' }` } onClick={ () => setExpandedId( expandedId === item.id ? null : item.id ) }>
<td>{ item.id }</td>
<td>{ item.name }</td>
<td>{ item.alias }</td>
<td>{ item.active ? 'Да' : 'Нет' }</td>
<td>{ regions[item.regionId] ?? item.regionId }</td>
</tr>
{ expandedId === item.id && (
<tr className='table-success'>
<td colSpan={ 5 }>
<input type="button" className="btn btn-outline-primary" value="Редактировать" onClick={ e => { e.stopPropagation(); navigate(`/site-promo/edit/${item.id}`) } } />
</td>
</tr>
)}
</>
))}
</tbody>
</table>
</div>
{ renderPagination() }
</>
)}
</div>
);
};
+115
View File
@@ -0,0 +1,115 @@
import { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useGetSiteServicesListQuery } from '/src/api/apiSiteServices';
import { selectRegions } from '../store/slice/regionSlice';
import { useOutsideClick } from '../hooks/useOutsideClick';
import { LoadingComponent } from '../components/Placeholders/LoadingComponent';
import { ErrorComponent } from '../components/Placeholders/ErrorComponent';
export const SiteServicesListPage = () => {
const [ searchValue, setSearchValue ] = useState( '' );
const [ currentPage, setCurrentPage ] = useState( 1 );
const [ expandedId, setExpandedId ] = useState( '' );
const navigate = useNavigate();
const regions = useSelector(selectRegions);
const tableRef = useRef( null );
useOutsideClick( tableRef, () => setExpandedId( null ));
const { data: response = {}, isFetching, error: queryError } =
useGetSiteServicesListQuery( { search: searchValue, page: currentPage } );
const pagination = response.pagination || {};
const items = response.data ? response.data : [];
const renderPagination = () => {
const total = pagination.total_pages || 1;
const current = pagination.current_page || 1;
const pages = new Set( [ 1, total ] );
for ( let page = current - 2; page <= current + 2; page += 1 ) {
if ( page > 1 && page < total ) pages.add( page );
}
const sorted = Array.from( pages ).sort( ( a, b ) => a - b );
const elements = [];
let last = 0;
sorted.forEach( page => {
if ( last && page - last > 1 ) {
elements.push(
<li key={ `dots-${last}` } className="page-item disabled">
<span className="page-link"></span>
</li>
);
}
elements.push(
<li key={ page } className={`page-item ${ page === current ? 'active' : '' }`}>
<button type="button" className="page-link" onClick={ () => page !== current && setCurrentPage( page ) }>
{ page }
</button>
</li>
);
last = page;
});
return (
<nav>
<ul className="pagination justify-content-center">
<li className={`page-item ${ !pagination.has_previous_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_previous_page && setCurrentPage(current - 1) }>&laquo;</button>
</li>
{ elements }
<li className={`page-item ${ !pagination.has_next_page ? 'disabled' : '' }`}>
<button type="button" className="page-link" onClick={ () => pagination.has_next_page && setCurrentPage(current + 1) }>&raquo;</button>
</li>
</ul>
</nav>
);
};
return (
<div className="container-fluid">
<h1 className="h3 mb-4 text-gray-800">Услуги сайта</h1>
<div className="d-flex justify-content-between mb-3" style={{ marginRight: '0.1rem', marginLeft: '0.1rem' }}>
<div className="form-group align-self-end mr-3">
<input type="button" className="btn btn-outline-primary" value="Добавить" onClick={ e => { e.stopPropagation(); navigate(`/site-services/create`); } } />
</div>
<div className="form-group flex-grow-1">
<label>Поиск</label>
<input type="text" className="form-control" value={ searchValue } onChange={ e => { setSearchValue( e.target.value ); setCurrentPage( 1 ); } } />
</div>
</div>
{ isFetching ? <LoadingComponent /> : queryError ? <ErrorComponent /> : (
<>
<div className="table-responsive" ref={tableRef}>
<table className="table table-hover table-bordered">
<thead><tr>
<th>ID</th>
<th>Название</th>
<th>Alias</th>
<th>Активно</th>
</tr></thead>
<tbody>
{items.map( item => (
<>
<tr key={ item.id } className={ `cursor-pointer${ expandedId === item.id ? ' table-success' : '' }` } onClick={ () => setExpandedId( expandedId === item.id ? null : item.id ) }>
<td>{ item.id }</td>
<td>{ item.name }</td>
<td>{ item.alias }</td>
<td>{ item.active ? 'Да' : 'Нет' }</td>
</tr>
{ expandedId === item.id && (
<tr className='table-success'>
<td colSpan={ 4 }>
<input type="button" className="btn btn-outline-primary" value="Редактировать" onClick={ e => { e.stopPropagation(); navigate(`/site-services/edit/${item.id}`) } } />
</td>
</tr>
)}
</>
))}
</tbody>
</table>
</div>
{ renderPagination() }
</>
)}
</div>
);
};
+6
View File
@@ -7,6 +7,12 @@ import { API } from '../api/apiSlice';
import '../api/apiDepartment'
import '../api/apiFilial'
import '../api/apiSpecialist'
import '../api/apiNews'
import '../api/apiSitePromo'
import '../api/apiDisease'
import '../api/apiMedicalCenter'
import '../api/apiArticle'
import '../api/apiSiteServices'
export const store = configureStore({
reducer: {