danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

crism

Browse Source
This commit is contained in:
hamid zarghami
2025-01-27 20:36:14 +03:30
parent 22482aa20a
commit ce0019fde0
18 changed files with 523 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/service/AddService.tsx
+70 -70
View File
@@ -1,20 +1,23 @@
import { FC, useEffect } from 'react'
import { FC, useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Select from '../../components/Select'
import Quill from 'quill';
import SwitchComponent from '../../components/Switch';
import CheckBoxComponent from '../../components/CheckBoxComponent';
import UploadBoxDraggble from '../../components/UploadBoxDraggble';
import Button from '../../components/Button';
import { TickCircle } from 'iconsax-react';
import { useFormik } from 'formik';
import { CreateServiceType } from './types/ServiceTypes';
import DatePickerComponent from '../../components/DatePicker';
import AddServiceSidebar from './components/AddServiceSidebar';
import * as Yup from 'yup'
const AddService: FC = () => {
const { t } = useTranslation('global')
const editorRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
new Quill('#editor', {
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: [
@@ -27,8 +30,45 @@ const AddService: FC = () => {
]
}
});
quill.on('text-change', () => {
const html = editorRef.current?.querySelector('.ql-editor')?.innerHTML || '';
formik.setFieldValue('metaDescription', html);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const formik = useFormik<CreateServiceType>({
initialValues: {
author: '',
categoryId: '',
description: '',
icon: '',
images: [],
isDanakSuggest: false,
link: '',
metaDescription: '',
name: '',
serviceLanguage: '',
softwareLanguage: '',
userCount: 0,
createDate: ''
},
validationSchema: Yup.object({
name: Yup.string().required(t('errors.required')),
description: Yup.string().required(t('errors.required')),
author: Yup.string().required(t('errors.required')),
createDate: Yup.date().required(t('errors.required')),
userCount: Yup.number().required(t('errors.required')),
serviceLanguage: Yup.string().required(t('errors.required')),
metaDescription: Yup.string().required(t('errors.required')),
link: Yup.string().required(t('errors.required')),
}),
onSubmit(values) {
console.log(values);
},
})
return (
<div className='w-full mt-4'>
<div className='flex w-full justify-between items-center'>
@@ -38,6 +78,7 @@ const AddService: FC = () => {
<div>
<Button
className='px-5'
onClick={() => formik.handleSubmit()}
>
<div className='flex gap-2'>
<TickCircle
@@ -56,25 +97,41 @@ const AddService: FC = () => {
<div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
<Input
label={t('service.service_name')}
name='name'
onChange={formik.handleChange}
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
/>
<div className='mt-8'>
<Input
label={t('service.description_short')}
name='description'
onChange={formik.handleChange}
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
/>
</div>
<div className='mt-8 rowTwoInput'>
<Input
label={t('service.company_developed')}
name='author'
onChange={formik.handleChange}
error_text={formik.touched.author && formik.errors.author ? formik.errors.author : ''}
/>
<Input
<DatePickerComponent
label={t('service.year_make')}
onChange={(d) => formik.setFieldValue('createDate', d)}
placeholder={t('select')}
error_text={formik.touched.createDate && formik.errors.createDate ? formik.errors.createDate : ''}
/>
</div>
<div className='mt-8 rowTwoInput'>
<Input
label={t('service.user_count')}
name='userCount'
onChange={formik.handleChange}
error_text={formik.touched.userCount && formik.errors.userCount ? formik.errors.userCount : ''}
/>
<Select
@@ -86,78 +143,21 @@ const AddService: FC = () => {
}
]}
placeholder={t('select')}
name='serviceLanguage'
onChange={formik.handleChange}
error_text={formik.touched.serviceLanguage && formik.errors.serviceLanguage ? formik.errors.serviceLanguage : ''}
/>
</div>
<div className='mt-8'>
<div id='editor' style={{ minHeight: '120px' }}></div>
<div ref={editorRef} id='editor' style={{ minHeight: '120px' }}></div>
</div>
</div>
</div>
<div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
<div className='flex justify-between'>
<div className='text-sm'>
{t('service.service_status')}
</div>
<div className='flex gap-1'>
<SwitchComponent active onChange={() => null} />
</div>
</div>
<div className='mt-8 items-center flex '>
<CheckBoxComponent
checked
onChange={() => null}
/>
<div>{t('service.special_danak')}</div>
</div>
<div className='mt-8'>
<Input
label={t('service.service_link')}
/>
</div>
<div className='mt-8'>
<div>{t('service.category')}</div>
<div className='mt-2 border border-border rounded-xl p-4'>
<div className='flex items-center'>
<CheckBoxComponent
checked
onChange={() => null}
/>
<div>لورم ایپسوم</div>
</div>
<div className='flex items-center'>
<CheckBoxComponent
checked
onChange={() => null}
/>
<div>لورم ایپسوم</div>
</div>
</div>
</div>
<div className='mt-8'>
<div>{t('service.service_icon')}</div>
<div className='mt-2'>
<UploadBoxDraggble
label={t('service.upload_icon_service')}
onChange={() => null}
/>
</div>
</div>
<div className='mt-8'>
<div>{t('service.service_images')}</div>
<div className='mt-2'>
<UploadBoxDraggble
label={t('service.upload_images_service')}
onChange={() => null}
/>
</div>
</div>
</div>
<AddServiceSidebar
formik={formik}
/>
</div>
</div>
)