From d0c8a14be42b17915edcd5977df34d17a0e3d859 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sat, 25 Jan 2025 09:36:55 +0330 Subject: [PATCH] add service --- package-lock.json | 60 +++++++++ package.json | 1 + src/App.tsx | 1 + src/components/CheckBoxComponent.tsx | 15 +++ src/components/UploadBoxDraggble.tsx | 42 +++++++ src/index.css | 16 +++ src/langs/fa.json | 11 +- src/pages/service/AddService.tsx | 178 +++++++++++++++++++-------- 8 files changed, 275 insertions(+), 49 deletions(-) create mode 100644 src/components/CheckBoxComponent.tsx create mode 100644 src/components/UploadBoxDraggble.tsx diff --git a/package-lock.json b/package-lock.json index 004c395..dbe6129 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "formik": "^2.4.6", "i18next": "^24.2.0", "iconsax-react": "^0.0.8", + "quill": "^2.0.3", "rc-rate": "^2.13.0", "react": "^19.0.0", "react-dom": "^19.0.0", @@ -2870,6 +2871,12 @@ "node": ">=0.10.0" } }, + "node_modules/eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", + "license": "MIT" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -2877,6 +2884,12 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "license": "Apache-2.0" + }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -3588,6 +3601,18 @@ "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", "license": "MIT" }, + "node_modules/lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==", + "license": "MIT" + }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3818,6 +3843,12 @@ "dev": true, "license": "BlueOak-1.0.0" }, + "node_modules/parchment": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz", + "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==", + "license": "BSD-3-Clause" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -4142,6 +4173,35 @@ ], "license": "MIT" }, + "node_modules/quill": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.3.tgz", + "integrity": "sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==", + "license": "BSD-3-Clause", + "dependencies": { + "eventemitter3": "^5.0.1", + "lodash-es": "^4.17.21", + "parchment": "^3.0.0", + "quill-delta": "^5.1.0" + }, + "engines": { + "npm": ">=8.2.3" + } + }, + "node_modules/quill-delta": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", + "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", + "license": "MIT", + "dependencies": { + "fast-diff": "^1.3.0", + "lodash.clonedeep": "^4.5.0", + "lodash.isequal": "^4.5.0" + }, + "engines": { + "node": ">= 12.0.0" + } + }, "node_modules/rc-rate": { "version": "2.13.0", "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.13.0.tgz", diff --git a/package.json b/package.json index bdbf5d3..8510f6e 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "formik": "^2.4.6", "i18next": "^24.2.0", "iconsax-react": "^0.0.8", + "quill": "^2.0.3", "rc-rate": "^2.13.0", "react": "^19.0.0", "react-dom": "^19.0.0", diff --git a/src/App.tsx b/src/App.tsx index 2d8c835..950f6f2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import { FC, useEffect, useState } from 'react' import { BrowserRouter } from 'react-router-dom' import 'swiper/swiper-bundle.css'; import 'rc-rate/assets/index.css'; +import "quill/dist/quill.snow.css"; import i18next from 'i18next' import { I18nextProvider } from 'react-i18next' import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query' diff --git a/src/components/CheckBoxComponent.tsx b/src/components/CheckBoxComponent.tsx new file mode 100644 index 0000000..30041bc --- /dev/null +++ b/src/components/CheckBoxComponent.tsx @@ -0,0 +1,15 @@ +import { FC } from 'react' +import { Checkbox } from '@material-tailwind/react'; + +type Props = { + onChange: (e: React.ChangeEvent) => void; + checked: boolean; +} + +const CheckBoxComponent: FC = (props: Props) => { + return ( + + ) +} + +export default CheckBoxComponent \ No newline at end of file diff --git a/src/components/UploadBoxDraggble.tsx b/src/components/UploadBoxDraggble.tsx new file mode 100644 index 0000000..aaff9b6 --- /dev/null +++ b/src/components/UploadBoxDraggble.tsx @@ -0,0 +1,42 @@ +import { DocumentUpload, Gallery } from 'iconsax-react' +import { FC, useCallback } from 'react' +import { useDropzone } from 'react-dropzone'; +import { useTranslation } from 'react-i18next'; + +type Props = { + label: string; + onChange: (file: File) => void; +} + +const UploadBoxDraggble: FC = (props: Props) => { + const { t } = useTranslation('global') + + const onDrop = useCallback((acceptedFiles: File[]) => { + props.onChange(acceptedFiles[0]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + const { getRootProps, getInputProps } = useDropzone({ onDrop }) + + return ( +
+ + +
+ {props.label} +
+ +
+ +
{t('upload')}
+
+
+ ) +} + +export default UploadBoxDraggble \ No newline at end of file diff --git a/src/index.css b/src/index.css index dc00132..fb404d9 100644 --- a/src/index.css +++ b/src/index.css @@ -126,3 +126,19 @@ tbody tr { .overflowX::-webkit-scrollbar { display: none; } + +.ql-toolbar:first-child { + display: none !important; +} + +.ql-container { + @apply rounded-b-xl text-right; + font-family: irancell !important; + direction: rtl; +} +.ql-toolbar { + @apply rounded-t-xl; +} +.ql-editor { + @apply !text-right; +} diff --git a/src/langs/fa.json b/src/langs/fa.json index a9c0869..221c169 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -123,8 +123,17 @@ "add_service": "افزودن سرویس", "service_name": "نام سرویس", "description_short": "توضیح کوتاه سرویس", - "company_developed": "شرکت توسعه دهنده" + "company_developed": "شرکت توسعه دهنده", + "service_status": "وضعیت سرویس", + "special_danak": "این سرویس پیشنهاد ویژه داناک هست", + "service_link": "لینک دریافت سرویس", + "category": "دسته بندی", + "service_icon": "آیکون سرویس", + "upload_icon_service": "آیکون سرویس مورد نظر را آپلود کنید", + "service_images": "تصاویر سرویس", + "upload_images_service": "تصاویر سرویس مورد نظر را آپلود کنید" }, + "upload": "آپلود", "select": "انتخاب", "footer": { "home": "صفحه اصلی", diff --git a/src/pages/service/AddService.tsx b/src/pages/service/AddService.tsx index 01a9256..be8321b 100644 --- a/src/pages/service/AddService.tsx +++ b/src/pages/service/AddService.tsx @@ -1,64 +1,146 @@ -import { FC } from 'react' +import { FC, useEffect } 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'; const AddService: FC = () => { const { t } = useTranslation('global') + useEffect(() => { + new Quill('#editor', { + theme: 'snow', + modules: { + toolbar: [ + [{ header: '1' }, { header: '2' }, { font: [] }], + [{ list: 'ordered' }, { list: 'bullet' }], + ['bold', 'italic', 'underline'], + ['link', 'image'], + [{ align: [] }], + ['clean'] + ] + } + }); + }, []); return ( -
-
-
- {t('service.add_service')} -
- -
- -
- -
- -
- - -
- -
- - - +
+ +
+ +
+ + +
+ +
+ + + +
+ +
+
{t('service.category')}
+
+
+ null} + /> +
لورم ایپسوم
+
+
+ null} + /> +
لورم ایپسوم
+
+
+
+ +
+
{t('service.service_icon')}
+
+ null} + /> +
+
+
+
{t('service.service_images')}
+
+ null} + /> +
+
+
)