first
This commit is contained in:
karimaldeen
parent
f3001671b6
commit
bde37704eb
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
pnpm-lock.ymal
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-lock.yaml
|
||||||
12
.vscode/settings.json
vendored
Normal file
12
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"cSpell.words": [
|
||||||
|
"aldeen",
|
||||||
|
"antd",
|
||||||
|
"Datepicker",
|
||||||
|
"formik",
|
||||||
|
"Karim",
|
||||||
|
"queryqlent",
|
||||||
|
"szhsin",
|
||||||
|
"Viewelement"
|
||||||
|
]
|
||||||
|
}
|
||||||
76
db.json
Normal file
76
db.json
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
{
|
||||||
|
"example": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "ibrahim",
|
||||||
|
"email": "ibrahim@gmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "gregr",
|
||||||
|
"email": "ibrahimgmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"name": "mhmad",
|
||||||
|
"email": "mhmad@gmial.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"name": "soso",
|
||||||
|
"email": "soso@gmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"name": "few",
|
||||||
|
"email": "jfpwrej"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 6,
|
||||||
|
"name": "sos",
|
||||||
|
"email": "fdwf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"name": "sos",
|
||||||
|
"email": "fdwf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 8,
|
||||||
|
"name": "sos",
|
||||||
|
"email": "fdwf"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"test2":[
|
||||||
|
|
||||||
|
|
||||||
|
{
|
||||||
|
"id":1,
|
||||||
|
"email":"admin@adamin.com"
|
||||||
|
}
|
||||||
|
,
|
||||||
|
{
|
||||||
|
"id":1,
|
||||||
|
"email":"admin@adamin.com"
|
||||||
|
}
|
||||||
|
,
|
||||||
|
{
|
||||||
|
"id":1,
|
||||||
|
"email":"admin@adamin.com"
|
||||||
|
}
|
||||||
|
|
||||||
|
, {
|
||||||
|
"id":1,
|
||||||
|
"email":"admin@adamin.com"
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
"users": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"email": "admin@adamin.com",
|
||||||
|
"password": "password",
|
||||||
|
"token": "token"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
18
index.html
Normal file
18
index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<title>E-Menu - App</title>
|
||||||
|
</head>
|
||||||
|
<script type="module" src="/src/index.tsx"></script>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
72
package.json
Normal file
72
package.json
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
{
|
||||||
|
"name": "my-app",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^4.8.3",
|
||||||
|
"@types/node": "^16.18.97",
|
||||||
|
"@types/react": "^18.3.3",
|
||||||
|
"@types/react-dom": "^18.3.0",
|
||||||
|
"antd": "^5.17.4",
|
||||||
|
"apexcharts": "^3.49.1",
|
||||||
|
"axios": "^1.7.2",
|
||||||
|
"bootstrap": "^5.3.3",
|
||||||
|
"chart.js": "^4.4.3",
|
||||||
|
"dayjs": "^1.11.11",
|
||||||
|
"formik": "^2.4.6",
|
||||||
|
"i18next": "^23.11.5",
|
||||||
|
"leaflet": "^1.9.4",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-apexcharts": "^1.4.1",
|
||||||
|
"react-bootstrap": "^2.10.2",
|
||||||
|
"react-bootstrap-sweetalert": "^5.2.0",
|
||||||
|
"react-confirm-alert": "^3.0.6",
|
||||||
|
"react-data-table-component": "^7.6.2",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-i18next": "^13.5.0",
|
||||||
|
"react-icons": "^4.12.0",
|
||||||
|
"react-leaflet": "^4.2.1",
|
||||||
|
"react-number-format": "^5.4.0",
|
||||||
|
"react-player": "^2.16.0",
|
||||||
|
"react-query": "^3.39.3",
|
||||||
|
"react-router-dom": "^6.23.1",
|
||||||
|
"react-select": "^5.8.0",
|
||||||
|
"react-tabs": "^6.0.2",
|
||||||
|
"react-toastify": "^9.1.3",
|
||||||
|
"reactstrap": "^9.2.2",
|
||||||
|
"sass": "^1.77.4",
|
||||||
|
"typescript": "^4.9.5",
|
||||||
|
"web-vitals": "^2.1.4",
|
||||||
|
"xlsx": "^0.18.5",
|
||||||
|
"yup": "^1.4.0",
|
||||||
|
"zustand": "^4.5.2"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "vite",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/leaflet": "^1.9.12",
|
||||||
|
"@types/react-toggle": "^4.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/Layout/LoginBg.jpg
Normal file
BIN
public/Layout/LoginBg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/Layout/images.png
Normal file
BIN
public/Layout/images.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/Logo.png
Normal file
BIN
public/Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
public/Logo_2.png
Normal file
BIN
public/Logo_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
1
public/language/ar.svg
Normal file
1
public/language/ar.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
1
public/language/de.svg
Normal file
1
public/language/de.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.2 38.4"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M3.03 0h49.13c1.67 0 3.03 1.36 3.03 3.03v32.33c0 1.66-1.36 3.02-3.02 3.03H3.02C1.36 38.4 0 37.03 0 35.37V3.03C0 1.36 1.36 0 3.03 0z"/><path d="M0 12.8h55.2v22.57c0 1.67-1.36 3.03-3.03 3.03H3.03C1.36 38.4 0 37.04 0 35.37V12.8z" fill="#d00"/><path d="M0 25.6h55.2v9.77c0 1.66-1.36 3.02-3.02 3.03H3.03A3.04 3.04 0 010 35.37V25.6z" fill="#ffce00"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 470 B |
1
public/language/en.svg
Normal file
1
public/language/en.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="42.67" height="32" viewBox="0 0 640 480"><defs><clipPath id="flagUm4x30"><path fill-opacity=".7" d="M0 0h682.7v512H0z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#flagUm4x30)" transform="scale(.9375)"><g stroke-width="1pt"><path fill="#bd3d44" d="M0 0h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8V197H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8V512H0z"/><path fill="#fff" d="M0 39.4h972.8v39.4H0zm0 78.8h972.8v39.3H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0z"/></g><path fill="#192f5d" d="M0 0h389.1v275.7H0z"/><path fill="#fff" d="M32.4 11.8L36 22.7h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H29zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9H177l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9H242l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.2-6.7h11.4zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zM64.9 39.4l3.5 10.9h11.5L70.6 57L74 67.9l-9-6.7l-9.3 6.7L59 57l-9-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.3 6.7L124 57l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.7l-9.3 6.7l3.5-10.9l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5L330 57l3.5 10.9l-9.2-6.7l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zM32.4 66.9L36 78h11.4l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.3-6.7H29zm64.9 0l3.5 11h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7h11.4zm64.8 0l3.6 11H177l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.3-6.7h11.5zm64.9 0l3.5 11H242l-9.3 6.7l3.6 10.9l-9.3-6.8l-9.3 6.8l3.6-11l-9.3-6.7h11.4zm64.8 0l3.6 11h11.4l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.2-6.7h11.4zm64.9 0l3.5 11h11.5l-9.3 6.7l3.6 10.9l-9.3-6.8l-9.3 6.8l3.6-11l-9.3-6.7h11.5zM64.9 94.5l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zM32.4 122.1L36 133h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H29zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.7l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9H177l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9H242l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.2-6.7h11.4zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zM64.9 149.7l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 10.9l-9.3-6.8l-9.3 6.8l3.6-11l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7h11.4zM32.4 177.2l3.6 11h11.4l-9.2 6.7l3.5 10.8l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.3-6.7H29zm64.9 0l3.5 11h11.5l-9.3 6.7l3.6 10.8l-9.3-6.7l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 11H177l-9.2 6.7l3.5 10.8l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.3-6.7h11.5zm64.9 0l3.5 11H242l-9.3 6.7l3.6 10.8l-9.3-6.7l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 11h11.4l-9.2 6.7l3.5 10.8l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.2-6.7h11.4zm64.9 0l3.5 11h11.5l-9.3 6.7l3.6 10.8l-9.3-6.7l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zM64.9 204.8l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zM32.4 232.4l3.6 10.9h11.4l-9.2 6.7l3.5 10.9l-9.3-6.7l-9.2 6.7l3.5-11l-9.3-6.7H29zm64.9 0l3.5 10.9h11.5L103 250l3.6 10.9l-9.3-6.7l-9.3 6.7l3.6-11l-9.3-6.7h11.4zm64.8 0l3.6 10.9H177l-9 6.7l3.5 10.9l-9.3-6.7l-9.2 6.7l3.5-11l-9.3-6.7h11.5zm64.9 0l3.5 10.9H242l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.3 6.7l3.6-11l-9.3-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 10.9l-9.3-6.7l-9.2 6.7l3.5-11l-9.2-6.7h11.4zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.3 6.7l3.6-11l-9.3-6.7h11.5z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 4.5 KiB |
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo512.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
BIN
public/test.mp4
Normal file
BIN
public/test.mp4
Normal file
Binary file not shown.
69
src/App.tsx
Normal file
69
src/App.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
import { Fragment, lazy, Suspense } from 'react';
|
||||||
|
import { Route, Routes } from 'react-router-dom'
|
||||||
|
import Loading from './Components/Utils/Loading/Loading';
|
||||||
|
import { RoutesLinks } from './Routes';
|
||||||
|
import Layout from './Layout/app/Layout';
|
||||||
|
import Auth from './Pages/Auth/Page';
|
||||||
|
const Page404 = lazy(() => import("./Layout/app/NotFoundPage"))
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Routes >
|
||||||
|
{/* 404 Page */}
|
||||||
|
<Route path="*" element={<Suspense fallback={<Loading />}> <Page404 /></Suspense>} />
|
||||||
|
{/* Login Page */}
|
||||||
|
<Route path="/auth" element={<Suspense fallback={<Loading />}> <Auth /></Suspense>} />
|
||||||
|
|
||||||
|
{/* route not in navigation */}
|
||||||
|
|
||||||
|
|
||||||
|
{/* All Routes */}
|
||||||
|
{RoutesLinks?.map((item: any, index: number) => (
|
||||||
|
|
||||||
|
<Fragment key={index}>
|
||||||
|
|
||||||
|
|
||||||
|
if(item?.element){
|
||||||
|
<Route
|
||||||
|
key={index}
|
||||||
|
path={item.href}
|
||||||
|
element={
|
||||||
|
<Suspense fallback={<Loading />} >
|
||||||
|
<Layout>
|
||||||
|
{item?.element ?? "Please Add Element Props in Routes"}
|
||||||
|
</Layout>
|
||||||
|
</Suspense>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}else{
|
||||||
|
item?.children?.map((item:any)=>{
|
||||||
|
return(
|
||||||
|
<Route
|
||||||
|
path={item.href}
|
||||||
|
element={
|
||||||
|
<Suspense fallback={<Loading />} >
|
||||||
|
<Layout>
|
||||||
|
{item?.element ?? "Please Add Element Props in Routes"}
|
||||||
|
</Layout>
|
||||||
|
</Suspense>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</Fragment>
|
||||||
|
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</Routes>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
85
src/Components/Columns/ColumnsImage.tsx
Normal file
85
src/Components/Columns/ColumnsImage.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
import {
|
||||||
|
DownloadOutlined,
|
||||||
|
RotateLeftOutlined,
|
||||||
|
RotateRightOutlined,
|
||||||
|
SwapOutlined,
|
||||||
|
ZoomInOutlined,
|
||||||
|
ZoomOutOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import React from 'react';
|
||||||
|
import { Image, Space } from 'antd';
|
||||||
|
import { ImageBaseURL } from '../../api/config';
|
||||||
|
import useImageError from '../../Hooks/useImageError';
|
||||||
|
|
||||||
|
|
||||||
|
const ColumnsImage= ({src}:any) => {
|
||||||
|
const ErrorImage = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/832px-No-Image-Placeholder.svg.png"
|
||||||
|
|
||||||
|
const imageUrl = ImageBaseURL + src || ErrorImage;
|
||||||
|
|
||||||
|
const handleError = useImageError;
|
||||||
|
// or you can download flipped and rotated image
|
||||||
|
// https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp
|
||||||
|
const onDownload = () => {
|
||||||
|
fetch(src)
|
||||||
|
.then((response) => response.blob())
|
||||||
|
.then((blob) => {
|
||||||
|
const url = URL.createObjectURL(new Blob([blob]));
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = 'image.png';
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
link.remove();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Image
|
||||||
|
width={45}
|
||||||
|
height={45}
|
||||||
|
src={imageUrl }
|
||||||
|
className='p-1 mb-1 columnImage '
|
||||||
|
preview={{
|
||||||
|
toolbarRender: (
|
||||||
|
_,
|
||||||
|
{
|
||||||
|
transform: { scale },
|
||||||
|
actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },
|
||||||
|
},
|
||||||
|
) => (
|
||||||
|
<Space size={12} className="toolbar-wrapper">
|
||||||
|
<DownloadOutlined onClick={onDownload} />
|
||||||
|
<SwapOutlined rotate={90} onClick={onFlipY} />
|
||||||
|
<SwapOutlined onClick={onFlipX} />
|
||||||
|
<RotateLeftOutlined onClick={onRotateLeft} />
|
||||||
|
<RotateRightOutlined onClick={onRotateRight} />
|
||||||
|
<ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
|
||||||
|
<ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
onError={handleError}
|
||||||
|
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ColumnsImage;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// {
|
||||||
|
// name: t("image"),
|
||||||
|
// center: "true",
|
||||||
|
// cell: (row: any) => {
|
||||||
|
// return (
|
||||||
|
// <ColumnsImage src={row?.image} />
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
// },
|
||||||
42
src/Components/Columns/ColumnsSwitch.tsx
Normal file
42
src/Components/Columns/ColumnsSwitch.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { Switch } from 'antd'
|
||||||
|
import React from 'react'
|
||||||
|
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
|
||||||
|
import { useFormikContext } from 'formik';
|
||||||
|
export interface ColumnsSwitchProps {
|
||||||
|
name: string;
|
||||||
|
Front?: string;
|
||||||
|
Back?: string;
|
||||||
|
onChange?: (checked:any,event:any) => any;
|
||||||
|
icon?: boolean
|
||||||
|
Checked?:boolean
|
||||||
|
|
||||||
|
}
|
||||||
|
const ColumnsSwitch = (props: ColumnsSwitchProps) => {
|
||||||
|
const { name, Front, Back, icon, onChange } = props;
|
||||||
|
const formik = useFormikContext<any>();
|
||||||
|
const onSwitchChange = (checked: boolean, event: Event) => {
|
||||||
|
// formik.setFieldValue("status", checked)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Switch
|
||||||
|
checkedChildren={icon ? <CheckOutlined /> : Front}
|
||||||
|
unCheckedChildren={icon ? <CloseOutlined /> : Back}
|
||||||
|
onChange={ (checked:any,event:any)=> onChange ? onChange(checked,event) : onSwitchChange(checked,event)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ColumnsSwitch
|
||||||
|
|
||||||
|
|
||||||
|
ColumnsSwitch.defaultProps = {
|
||||||
|
Front: "Front",
|
||||||
|
Back: "Back",
|
||||||
|
onChange: undefined,
|
||||||
|
icon: false,
|
||||||
|
Checked:false
|
||||||
|
|
||||||
|
};
|
||||||
50
src/Components/Ui/Alert.tsx
Normal file
50
src/Components/Ui/Alert.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
import React from "react";
|
||||||
|
import { confirmAlert } from "react-confirm-alert";
|
||||||
|
import SweetAlert from "react-bootstrap-sweetalert";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
export default function CustomConfirmAlert(options : any) {
|
||||||
|
confirmAlert({
|
||||||
|
customUI: ({ onClose }) => <CustomUI onClose={onClose} options={options} />,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
type CustomUIProps ={
|
||||||
|
onClose :()=> void
|
||||||
|
options:{
|
||||||
|
title?:string
|
||||||
|
confirmBtnText:string
|
||||||
|
cancelBtnText:string
|
||||||
|
body:string
|
||||||
|
onConfirm:()=>void
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function CustomUI({ onClose, options }:CustomUIProps) {
|
||||||
|
|
||||||
|
|
||||||
|
const [t] = useTranslation()
|
||||||
|
return (
|
||||||
|
<div className="">
|
||||||
|
<SweetAlert
|
||||||
|
title={options.title || t(`delete_are_you_sure`)}
|
||||||
|
customClass="SweetAlert"
|
||||||
|
warning
|
||||||
|
show={true}
|
||||||
|
showCancel
|
||||||
|
reverseButtons
|
||||||
|
cancelBtnBsStyle="danger"
|
||||||
|
confirmBtnText={options.confirmBtnText || t("yes_delete_it")}
|
||||||
|
cancelBtnText={options.cancelBtnText || t("cancel")}
|
||||||
|
onConfirm={() => {
|
||||||
|
options.onConfirm();
|
||||||
|
onClose();
|
||||||
|
}}
|
||||||
|
onCancel={onClose}
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
49
src/Components/Ui/CheckboxesVuexy.tsx
Normal file
49
src/Components/Ui/CheckboxesVuexy.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface CheckBoxesVuexyProps {
|
||||||
|
className?: string;
|
||||||
|
color: string;
|
||||||
|
defaultChecked?: boolean;
|
||||||
|
checked?: boolean;
|
||||||
|
value?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
onClick?: () => void;
|
||||||
|
onChange?: () => void;
|
||||||
|
size?: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CheckBoxesVuexy: React.FC<CheckBoxesVuexyProps> = ({
|
||||||
|
className = '',
|
||||||
|
color,
|
||||||
|
defaultChecked,
|
||||||
|
checked,
|
||||||
|
value,
|
||||||
|
disabled,
|
||||||
|
onClick,
|
||||||
|
onChange,
|
||||||
|
size = 'md',
|
||||||
|
icon,
|
||||||
|
label,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={`vx-checkbox-con ${className} vx-checkbox-${color}`}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
defaultChecked={defaultChecked}
|
||||||
|
checked={checked}
|
||||||
|
value={value}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={onClick}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
<span className={`vx-checkbox vx-checkbox-${size}`}>
|
||||||
|
<span className="vx-checkbox--check">{icon}</span>
|
||||||
|
</span>
|
||||||
|
<span>{label}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CheckBoxesVuexy;
|
||||||
27
src/Components/Ui/FileInput.tsx
Normal file
27
src/Components/Ui/FileInput.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import React from 'react'
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
import { Input } from 'reactstrap';
|
||||||
|
import { useFormikContext } from 'formik';
|
||||||
|
|
||||||
|
type FileInputProps = {
|
||||||
|
name:string,
|
||||||
|
label:string,
|
||||||
|
accept:string,
|
||||||
|
onChange:any
|
||||||
|
}
|
||||||
|
function FileInput({name , accept="image/*" ,label , onChange} :FileInputProps) {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="custom-file-input">
|
||||||
|
<label className="custom-file-label" htmlFor="inputGroupFile01">
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
<Input accept={accept} id="inputGroupFile01" name={name} onChange={onChange}
|
||||||
|
type="file" className="custom-file-input" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FileInput
|
||||||
37
src/Components/Ui/HovarableImage.tsx
Normal file
37
src/Components/Ui/HovarableImage.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Tooltip } from "reactstrap";
|
||||||
|
|
||||||
|
const tooltipStyle = {
|
||||||
|
backgroundColor: "white",
|
||||||
|
border: "2px solid lightgrey",
|
||||||
|
maxWidth: "400px",
|
||||||
|
};
|
||||||
|
|
||||||
|
const HovarableImage = ({ id, src, imgPreviewProps = {}, ...props }:any) => {
|
||||||
|
const [isOpen, setIsOpen] = React.useState(false);
|
||||||
|
const ID = `image_hover_tooltip_${id}`;
|
||||||
|
const toggleTooltip = React.useCallback(() => setIsOpen((prev) => !prev), []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{marginInline:"20px"}}>
|
||||||
|
<img id={ID} src={src} alt={props.alt} {...props} style={{ maxWidth:"300px", maxHeight:'50px'}}/>
|
||||||
|
<Tooltip
|
||||||
|
placement="left"
|
||||||
|
isOpen={isOpen}
|
||||||
|
target={ID}
|
||||||
|
toggle={toggleTooltip}
|
||||||
|
style={tooltipStyle}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style={{ maxWidth:"300px", maxHeight:'150px'}}
|
||||||
|
src={src}
|
||||||
|
alt={props.alt}
|
||||||
|
{...imgPreviewProps}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HovarableImage;
|
||||||
|
|
||||||
34
src/Components/Ui/ImagePreview.tsx
Normal file
34
src/Components/Ui/ImagePreview.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
const ImagePreview = ({ preview, height = 200 }:any) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: "1px solid lightgray",
|
||||||
|
height: `${height}px`,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{preview ? (
|
||||||
|
<img
|
||||||
|
className="p-1"
|
||||||
|
style={{
|
||||||
|
maxWidth: "100%",
|
||||||
|
}}
|
||||||
|
height={height}
|
||||||
|
src={preview}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div>{t("image_preview")}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ImagePreview;
|
||||||
13
src/Components/Ui/LoadingButton.tsx
Normal file
13
src/Components/Ui/LoadingButton.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Button, Spinner } from "reactstrap";
|
||||||
|
|
||||||
|
const LoadingButton = ({ isLoading = false, ...props }) => {
|
||||||
|
return (
|
||||||
|
<Button className="btn-primary" disabled={isLoading} {...props}>
|
||||||
|
{isLoading ? <Spinner style={{ marginRight: "10px" }} size="sm" /> : null}
|
||||||
|
<span >{props.children}</span>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { LoadingButton };
|
||||||
10
src/Components/Ui/LoadingSpinner.tsx
Normal file
10
src/Components/Ui/LoadingSpinner.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { Spin } from 'antd'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
function LoadingSpinner() {
|
||||||
|
return (
|
||||||
|
<Spin className='primary' />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoadingSpinner
|
||||||
57
src/Components/Ui/PasswordField/PasswordField.tsx
Normal file
57
src/Components/Ui/PasswordField/PasswordField.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import React, { FC, useState } from "react";
|
||||||
|
import { ErrorMessage, useField, Field } from "formik";
|
||||||
|
import { FormGroup } from "reactstrap";
|
||||||
|
// import PropTypes from "prop-types";
|
||||||
|
import { Eye, EyeOff } from "react-feather";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
interface PasswordFieldProps {
|
||||||
|
name: string;
|
||||||
|
label?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PasswordField: FC<PasswordFieldProps> = ({ name, label, ...props }) => {
|
||||||
|
const [field, meta] = useField({ name, ...props });
|
||||||
|
const [showPassword, setShowPassword] = useState<boolean>(false);
|
||||||
|
const EyeIcon = showPassword ? Eye : EyeOff;
|
||||||
|
|
||||||
|
const toggleShow = () => {
|
||||||
|
setShowPassword((prev) => !prev);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{label && <label className="change_password_body" htmlFor={name}>{label}</label>}
|
||||||
|
<FormGroup className={"position-relative has-icon-left"}>
|
||||||
|
<Field
|
||||||
|
className={
|
||||||
|
|
||||||
|
"form-control " + (meta.touched && meta.error ? "is-invalid" : "")
|
||||||
|
}
|
||||||
|
name={name}
|
||||||
|
type={showPassword ? "text" : "password"}
|
||||||
|
autoComplete="new-password"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
<div className="form-control-position">
|
||||||
|
<EyeIcon
|
||||||
|
fontSize={12}
|
||||||
|
onClick={toggleShow}
|
||||||
|
className="cursor-pointer change_password_body"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ErrorMessage
|
||||||
|
className="field-error text-danger"
|
||||||
|
component="div"
|
||||||
|
name={field.name}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// PasswordField.propTypes = {
|
||||||
|
// name: PropTypes.string.isRequired,
|
||||||
|
// };
|
||||||
|
|
||||||
|
export { PasswordField };
|
||||||
10
src/Components/Ui/PasswordField/index.css
Normal file
10
src/Components/Ui/PasswordField/index.css
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
.back-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
padding-left: 0.8rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
24
src/Components/Ui/ProgressBar.tsx
Normal file
24
src/Components/Ui/ProgressBar.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Progress } from "reactstrap";
|
||||||
|
|
||||||
|
const ProgressBar = ({ value,isLoading, isSuccess, isError }:any) => {
|
||||||
|
|
||||||
|
|
||||||
|
let color = "";
|
||||||
|
if (!isLoading && isSuccess) {
|
||||||
|
color = "success";
|
||||||
|
}
|
||||||
|
if (!isLoading && isError) {
|
||||||
|
color = "danger";
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="my-1">
|
||||||
|
<Progress color={color} style={{ height: "1rem" }} className=" mt-4" value={value}>
|
||||||
|
{value}%
|
||||||
|
</Progress>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default ProgressBar;
|
||||||
29
src/Components/Ui/SelectField.tsx
Normal file
29
src/Components/Ui/SelectField.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
import React from "react";
|
||||||
|
import Select from "react-select";
|
||||||
|
import { ValidatedField } from "./ValidatedField";
|
||||||
|
import { useFormikContext } from "formik";
|
||||||
|
|
||||||
|
const SelectField = ({ label, name, options, ...props }:any) => {
|
||||||
|
const formik = useFormikContext<any>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ValidatedField
|
||||||
|
CustomField={Select}
|
||||||
|
label={label}
|
||||||
|
name={name}
|
||||||
|
className="React"
|
||||||
|
classNamePrefix="select"
|
||||||
|
options={options || []}
|
||||||
|
value={options?.find((opt:any) => opt.value === formik?.values[name]) || ""}
|
||||||
|
onChange={(opt:any) => formik.setFieldValue(name, opt.value)}
|
||||||
|
onBlur={() => formik.setFieldTouched(name)}
|
||||||
|
key={name}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default SelectField;
|
||||||
|
|
||||||
|
|
||||||
58
src/Components/Ui/StaticsCard/StaticCard.tsx
Normal file
58
src/Components/Ui/StaticsCard/StaticCard.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Card, CardBody } from "reactstrap";
|
||||||
|
import { ChartTypeEnum } from "../../../enums/ChartTypeEnum";
|
||||||
|
import { history } from "../../../ProviderContainer";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
interface StatisticsCardProps {
|
||||||
|
className?: string;
|
||||||
|
iconLeft?: boolean;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
count?: string;
|
||||||
|
CardTitle?: string;
|
||||||
|
CardContent?: string;
|
||||||
|
height?: number;
|
||||||
|
pathWhenClick :string ;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const StatisticsCard = (props :StatisticsCardProps) => {
|
||||||
|
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const {
|
||||||
|
className,
|
||||||
|
iconLeft = false ,
|
||||||
|
icon,
|
||||||
|
count,
|
||||||
|
CardTitle,
|
||||||
|
CardContent,
|
||||||
|
pathWhenClick,
|
||||||
|
height,
|
||||||
|
...rest
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="p-4 gomecards" {...rest} onClick={()=>navigate(pathWhenClick )}>
|
||||||
|
<CardBody
|
||||||
|
className={`${
|
||||||
|
className ? className : "stats-card-body"
|
||||||
|
} d-flex justify-content-center flex-column text-center pb-2 pt-2 primary `}
|
||||||
|
>
|
||||||
|
<div className="icon-section">
|
||||||
|
<div
|
||||||
|
className={`avatar avatar-stats p-50 m-0 ${ "bg-rgba-primary"}`}
|
||||||
|
>
|
||||||
|
{/* <p className="mb-0 text-bold-700">{CardTitle}</p> */}
|
||||||
|
<div className="avatar-content ">{icon}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={"title-section " + (iconLeft ? "ml-2" : "")}>
|
||||||
|
{/* <h2 className="text-bold-600 mb-25 ">{count}</h2> */}
|
||||||
|
<p className="mb-2 Content">{CardContent}</p>
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StatisticsCard;
|
||||||
17
src/Components/Ui/StatusBadge.tsx
Normal file
17
src/Components/Ui/StatusBadge.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { Badge } from "reactstrap";
|
||||||
|
|
||||||
|
const StatusBadge = ({ status }:any) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Badge color={status ? "success" : "danger"}>
|
||||||
|
{status ? t("active") : t("inacticve")}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default StatusBadge;
|
||||||
38
src/Components/Ui/TableActions.tsx
Normal file
38
src/Components/Ui/TableActions.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import React , {ReactNode} from "react";
|
||||||
|
import confirmAlert from "./Alert";
|
||||||
|
import { FaEdit, FaTrash } from "react-icons/fa";
|
||||||
|
|
||||||
|
type TableActionsProps = {
|
||||||
|
onDelete: () => any;
|
||||||
|
onEdit: () => void;
|
||||||
|
showEdit?: boolean;
|
||||||
|
showDelete?: boolean;
|
||||||
|
children?: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const TableActions = ({ onDelete , onEdit,showEdit=true,showDelete=true, children }:TableActionsProps) => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="data-list-action TableActions">
|
||||||
|
{showEdit && <FaEdit onClick={onEdit} className="cursor-pointer m-1" size={20} />}
|
||||||
|
{showDelete && (
|
||||||
|
<FaTrash
|
||||||
|
onClick={() =>
|
||||||
|
confirmAlert({
|
||||||
|
onConfirm: () => {
|
||||||
|
onDelete();
|
||||||
|
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="cursor-pointer"
|
||||||
|
size={20}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default TableActions;
|
||||||
31
src/Components/Ui/ThreeSwitchState/TripleSwitch.tsx
Normal file
31
src/Components/Ui/ThreeSwitchState/TripleSwitch.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
import React from 'react';
|
||||||
|
import type { RadioChangeEvent } from 'antd';
|
||||||
|
import { Radio } from 'antd';
|
||||||
|
|
||||||
|
const onChange = (e: RadioChangeEvent) => {
|
||||||
|
console.log(`radio checked:${e.target.value}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<>
|
||||||
|
|
||||||
|
|
||||||
|
<Radio.Group onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
|
||||||
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
||||||
|
<Radio.Button value="b" disabled>
|
||||||
|
Shanghai
|
||||||
|
</Radio.Button>
|
||||||
|
<Radio.Button value="c">Beijing</Radio.Button>
|
||||||
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
||||||
|
</Radio.Group>
|
||||||
|
|
||||||
|
<Radio.Group disabled onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
|
||||||
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
||||||
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
||||||
|
<Radio.Button value="c">Beijing</Radio.Button>
|
||||||
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
||||||
|
</Radio.Group>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
39
src/Components/Ui/ToggleStatus.tsx
Normal file
39
src/Components/Ui/ToggleStatus.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
import React from "react";
|
||||||
|
import Toggle from "react-toggle";
|
||||||
|
import "react-toggle/style.css";
|
||||||
|
import StatusBadge from "./StatusBadge";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
interface ToggleStatusProps {
|
||||||
|
|
||||||
|
}
|
||||||
|
export const ToggleStatus = ({ object, handleSwitch, toggleMutation, ...props }:any) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
// const handleSwitch = () => {
|
||||||
|
// toggleMutation.mutate({
|
||||||
|
// id: object.id,
|
||||||
|
// new_status: !object.is_active,
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="p-0">
|
||||||
|
<p
|
||||||
|
className="mb-0 p-0"
|
||||||
|
style={{ whiteSpace: "nowrap", textAlign: "center" }}
|
||||||
|
>
|
||||||
|
{object.is_active ? t("active") : t("inactive")}
|
||||||
|
</p>
|
||||||
|
<Toggle
|
||||||
|
{...props}
|
||||||
|
className="custom-switch"
|
||||||
|
disabled={toggleMutation.isLoading}
|
||||||
|
onChange={handleSwitch}
|
||||||
|
checked={object.is_active}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
64
src/Components/Ui/ValidatedField.tsx
Normal file
64
src/Components/Ui/ValidatedField.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
import React from "react";
|
||||||
|
import { ErrorMessage, useField, Field } from "formik";
|
||||||
|
import { FormGroup } from "reactstrap";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
const ValidatedField = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
CustomField,
|
||||||
|
icon: Icon,
|
||||||
|
optional,
|
||||||
|
labelIcon = null,
|
||||||
|
formProps,
|
||||||
|
isRequired,
|
||||||
|
|
||||||
|
...props
|
||||||
|
}:any) => {
|
||||||
|
|
||||||
|
const [field, meta] = useField({ name, ...props });
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
let Wrapper = Field;
|
||||||
|
|
||||||
|
if (CustomField) {
|
||||||
|
Wrapper = CustomField;
|
||||||
|
}
|
||||||
|
const fieldProps = props.type === "file" ? {} : { ...field };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{label && (
|
||||||
|
<label htmlFor={name}>
|
||||||
|
{label} {props.required || isRequired ? "*" : ""} {labelIcon}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<FormGroup
|
||||||
|
className={Icon ? "position-relative has-icon-left" : ""}
|
||||||
|
{...formProps}
|
||||||
|
>
|
||||||
|
<Wrapper
|
||||||
|
className={
|
||||||
|
"form-control " + (meta.touched && meta.error ? "is-invalid" : "")
|
||||||
|
}
|
||||||
|
{...fieldProps}
|
||||||
|
required={props.isRequired}
|
||||||
|
{...props}
|
||||||
|
|
||||||
|
|
||||||
|
/>
|
||||||
|
{Icon && (
|
||||||
|
<div className="form-control-position">
|
||||||
|
<Icon size={15} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<ErrorMessage name={field.name}>
|
||||||
|
{(msg) => <span className="field-error text-danger">{t(msg)}</span>}
|
||||||
|
</ErrorMessage>
|
||||||
|
</FormGroup>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export { ValidatedField };
|
||||||
17
src/Components/Ui/index.tsx
Normal file
17
src/Components/Ui/index.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import Checkbox from './CheckboxesVuexy'
|
||||||
|
import ImagePreview from './ImagePreview'
|
||||||
|
import SelectField from './SelectField'
|
||||||
|
import { useImagePreview } from './useImagePreview'
|
||||||
|
import {ValidatedField} from './ValidatedField'
|
||||||
|
import StatusBadge from './StatusBadge'
|
||||||
|
import HovarableImage from './HovarableImage'
|
||||||
|
|
||||||
|
export {
|
||||||
|
Checkbox,
|
||||||
|
ImagePreview,
|
||||||
|
SelectField,
|
||||||
|
useImagePreview,
|
||||||
|
ValidatedField,
|
||||||
|
StatusBadge,
|
||||||
|
HovarableImage
|
||||||
|
}
|
||||||
58
src/Components/Ui/tables/Actions.tsx
Normal file
58
src/Components/Ui/tables/Actions.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
import React , {ReactNode} from "react";
|
||||||
|
import { FaEdit, FaEye, FaTrash } from "react-icons/fa";
|
||||||
|
import CustomConfirmAlert from "../Alert";
|
||||||
|
import { usePageState } from "../../../lib/statemangment/LayoutPagestate";
|
||||||
|
|
||||||
|
type TableActionsProps = {
|
||||||
|
onDelete?: () => any;
|
||||||
|
onEdit?: () => any;
|
||||||
|
onView?:() => any;
|
||||||
|
showView?: boolean;
|
||||||
|
showEdit?: boolean;
|
||||||
|
showDelete?: boolean;
|
||||||
|
children?: ReactNode;
|
||||||
|
objectToEdit:any
|
||||||
|
className?:string
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const TableActions = ({ onDelete=()=>{} , objectToEdit,onEdit=()=>{},onView,showEdit=true,showDelete=true,showView=true,children,className }:TableActionsProps) => {
|
||||||
|
// const TableActions = ({ onDelete=()=>{} , objectToEdit,onEdit=()=>{},onView,showEdit=true,showDelete=true,showView=true,children }:TableActionsProps) => {
|
||||||
|
|
||||||
|
// console.log(objectToEdit);
|
||||||
|
|
||||||
|
const {setObjectToEdit , setIsOpenEditModel} = usePageState()
|
||||||
|
return (
|
||||||
|
<div className={`data-list-action TableActions ${className}`}>
|
||||||
|
{showEdit && <FaEdit onClick={()=>{
|
||||||
|
setObjectToEdit(objectToEdit)
|
||||||
|
setIsOpenEditModel()
|
||||||
|
onEdit()
|
||||||
|
|
||||||
|
}} className="cursor-pointer m-2" size={20} />}
|
||||||
|
{showView && <FaEye onClick={onView} className="cursor-pointer m-2" size={25} />}
|
||||||
|
|
||||||
|
|
||||||
|
{showDelete && (
|
||||||
|
<FaTrash
|
||||||
|
onClick={() =>
|
||||||
|
CustomConfirmAlert({
|
||||||
|
onConfirm: () => {
|
||||||
|
|
||||||
|
|
||||||
|
onDelete();
|
||||||
|
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="cursor-pointer"
|
||||||
|
size={20}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default TableActions;
|
||||||
40
src/Components/Ui/tables/ConfirmAlert.tsx
Normal file
40
src/Components/Ui/tables/ConfirmAlert.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
import React from "react";
|
||||||
|
import { confirmAlert } from "react-confirm-alert";
|
||||||
|
import SweetAlert from "react-bootstrap-sweetalert";
|
||||||
|
|
||||||
|
interface CustomUIProps {
|
||||||
|
onClose: () => void;
|
||||||
|
options: {
|
||||||
|
title?: string;
|
||||||
|
confirmBtnText?: string;
|
||||||
|
cancelBtnText?: string;
|
||||||
|
onConfirm: () => void;
|
||||||
|
body?: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CustomConfirmAlert(options: any) {
|
||||||
|
confirmAlert({
|
||||||
|
customUI: ({ onClose }) => <CustomUI onClose={onClose} options={options} />,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function CustomUI({ onClose, options }: CustomUIProps) {
|
||||||
|
const sweetAlertProps: any = {
|
||||||
|
title: options.title || `DELETE, Are you sure?`,
|
||||||
|
warning: true,
|
||||||
|
show: true,
|
||||||
|
showCancel: true,
|
||||||
|
reverseButtons: true,
|
||||||
|
cancelBtnBsStyle: "danger",
|
||||||
|
confirmBtnText: options.confirmBtnText || "Yes, delete it!",
|
||||||
|
cancelBtnText: options.cancelBtnText || "Cancel",
|
||||||
|
onConfirm: () => {
|
||||||
|
options.onConfirm();
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
onCancel: onClose,
|
||||||
|
};
|
||||||
|
|
||||||
|
return <SweetAlert {...sweetAlertProps}>{options.body || "You won't be able to revert this!"}</SweetAlert>;
|
||||||
|
}
|
||||||
24
src/Components/Ui/useImagePreview.tsx
Normal file
24
src/Components/Ui/useImagePreview.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
export const useImagePreview = (defaultValue:any = null) => {
|
||||||
|
const [preview, setPreview] = useState(defaultValue || null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
URL.revokeObjectURL(preview);
|
||||||
|
|
||||||
|
};
|
||||||
|
}, [preview]);
|
||||||
|
|
||||||
|
const handleImageChange = (event:any) => {
|
||||||
|
|
||||||
|
setPreview(URL.createObjectURL(event.target.files[0]));
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
preview,
|
||||||
|
handleImageChange,
|
||||||
|
setPreview,
|
||||||
|
};
|
||||||
|
};
|
||||||
62
src/Components/Utils/BlockModal.tsx
Normal file
62
src/Components/Utils/BlockModal.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { BsExclamationCircle } from 'react-icons/bs';
|
||||||
|
import { Button, Card, CardBody, Input, Label, Modal, ModalHeader } from 'reactstrap';
|
||||||
|
import { useCommonModelState } from '../../lib/statemangment/driver&customer/ModelState';
|
||||||
|
import { LoadingButton } from '../Ui/LoadingButton';
|
||||||
|
|
||||||
|
interface BlockModelProps {
|
||||||
|
Mutation:any,
|
||||||
|
type :'customer' |'driver'
|
||||||
|
}
|
||||||
|
|
||||||
|
const BlockModel: React.FC<BlockModelProps> = ({Mutation ,type}) => {
|
||||||
|
const {t} = useTranslation();
|
||||||
|
const key_to_api = type == t('customer') ? t('customer_id') : t("driver_id")
|
||||||
|
|
||||||
|
const {isOpenBlock:isOpen , objectID , setIsopenBlock:setIsOpen} = useCommonModelState()
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
const blockInput = document.getElementById('block_input') as HTMLInputElement;
|
||||||
|
if (blockInput) {
|
||||||
|
Mutation.mutate({ [key_to_api]: objectID, block_timer: blockvalue });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (Mutation.isSuccess) {
|
||||||
|
setIsOpen();
|
||||||
|
}
|
||||||
|
}, [Mutation.isSuccess, setIsOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} centered size='md'>
|
||||||
|
<ModalHeader toggle={() => setIsOpen()}>
|
||||||
|
{t("al")}{type}{t('_block_page')}
|
||||||
|
</ModalHeader>
|
||||||
|
<Card>
|
||||||
|
<CardBody>
|
||||||
|
<div style={{ width: '100%', display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
|
||||||
|
<h1 className='modal_info' style={{ fontWeight: 'bold' }}> {t('blocking_')}{type}</h1>
|
||||||
|
<BsExclamationCircle className='modal_info' style={{ fontSize: '100px', color: '#f8be86', margin: '20px 0' }} />
|
||||||
|
<div className=''>
|
||||||
|
<Label for='block_input'>{t('date_blocking')}</Label>
|
||||||
|
<Input id='block_input' placeholder={t('date_blocking')} type='date' />
|
||||||
|
<div style={{ marginTop: 20 }}>
|
||||||
|
<Button color='danger' style={{ marginInline: 10 }} onClick={() => setIsOpen()}>
|
||||||
|
{t('cancel')}
|
||||||
|
</Button>
|
||||||
|
<LoadingButton color='primary' onClick={handleSubmit} isLoading={Mutation.isLoading} type='submit'>
|
||||||
|
{t('add_block_for_')}{type}
|
||||||
|
</LoadingButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BlockModel;
|
||||||
63
src/Components/Utils/GiftModal.tsx
Normal file
63
src/Components/Utils/GiftModal.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { BsExclamationCircle } from 'react-icons/bs';
|
||||||
|
import { Button, Card, CardBody, Col, Input, Label, Modal, ModalHeader, Row } from 'reactstrap';
|
||||||
|
import { useCommonModelState } from '../../lib/statemangment/driver&customer/ModelState';
|
||||||
|
import { LoadingButton } from '../Ui/LoadingButton';
|
||||||
|
|
||||||
|
|
||||||
|
interface GiftModalProps {
|
||||||
|
Mutation:any,
|
||||||
|
type :'customer' |'driver'
|
||||||
|
}
|
||||||
|
|
||||||
|
const GiftModal: React.FC<GiftModalProps> = ({Mutation ,type }) => {
|
||||||
|
const {t} = useTranslation();
|
||||||
|
|
||||||
|
const {isOpenGift:isOpen , objectID , setIsopenGift:setIsOpen} = useCommonModelState()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (Mutation.isSuccess) {
|
||||||
|
setIsOpen();
|
||||||
|
}
|
||||||
|
}, [Mutation.isSuccess, setIsOpen]);
|
||||||
|
|
||||||
|
const handleGift = () => {
|
||||||
|
const enterCodesInput = document.getElementById('enter_codes') as HTMLInputElement;
|
||||||
|
if (enterCodesInput && enterCodesvalue) {
|
||||||
|
Mutation.mutate({ type, id: objectID, value: enterCodesvalue });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} centered size='md'>
|
||||||
|
<ModalHeader toggle={() => setIsOpen()}>
|
||||||
|
{t("al")}{type} {t('_gift_page')}
|
||||||
|
</ModalHeader>
|
||||||
|
<Card>
|
||||||
|
<CardBody>
|
||||||
|
<Row>
|
||||||
|
<Col className='' style={{ width: 300 }}>
|
||||||
|
<Label for='enter_codes' className='modal_info'>{t('value')}</Label>
|
||||||
|
<Input id='enter_codes' placeholder={t('value')} type='number' />
|
||||||
|
<Col style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between' }}>
|
||||||
|
<Button color='danger' onClick={() => setIsOpen()}>
|
||||||
|
{t('cancel')}
|
||||||
|
</Button>
|
||||||
|
<LoadingButton
|
||||||
|
color='primary'
|
||||||
|
onClick={handleGift}
|
||||||
|
type='submit'
|
||||||
|
isLoading={Mutation.isLoading}>
|
||||||
|
{t('give')}
|
||||||
|
</LoadingButton>
|
||||||
|
</Col>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GiftModal;
|
||||||
93
src/Components/Utils/Loading/Loading.scss
Normal file
93
src/Components/Utils/Loading/Loading.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
.Loading{
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
width: 200px;
|
||||||
|
height: 60px;
|
||||||
|
position: relative;
|
||||||
|
left: 40%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--primary);
|
||||||
|
left: 15%;
|
||||||
|
transform-origin: 50%;
|
||||||
|
animation: circle7124 .5s alternate infinite ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circle7124 {
|
||||||
|
0% {
|
||||||
|
top: 60px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 50px 50px 25px 25px;
|
||||||
|
transform: scaleX(1.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle:nth-child(2) {
|
||||||
|
left: 45%;
|
||||||
|
animation-delay: .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle:nth-child(3) {
|
||||||
|
left: auto;
|
||||||
|
right: 15%;
|
||||||
|
animation-delay: .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
width: 20px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(0,0,0,0.9);
|
||||||
|
position: absolute;
|
||||||
|
top: 62px;
|
||||||
|
transform-origin: 50%;
|
||||||
|
z-index: -1;
|
||||||
|
left: 15%;
|
||||||
|
filter: blur(1px);
|
||||||
|
animation: shadow046 .5s alternate infinite ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shadow046 {
|
||||||
|
0% {
|
||||||
|
transform: scaleX(1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
transform: scaleX(1);
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scaleX(.2);
|
||||||
|
opacity: .4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow:nth-child(4) {
|
||||||
|
left: 45%;
|
||||||
|
animation-delay: .2s
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow:nth-child(5) {
|
||||||
|
left: auto;
|
||||||
|
right: 15%;
|
||||||
|
animation-delay: .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
19
src/Components/Utils/Loading/Loading.tsx
Normal file
19
src/Components/Utils/Loading/Loading.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import React from 'react'
|
||||||
|
import './Loading.scss'
|
||||||
|
const Loading = () => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="Loading">
|
||||||
|
<div className="wrapper">
|
||||||
|
<div className="circle"></div>
|
||||||
|
<div className="circle"></div>
|
||||||
|
<div className="circle"></div>
|
||||||
|
<div className="shadow"></div>
|
||||||
|
<div className="shadow"></div>
|
||||||
|
<div className="shadow"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Loading
|
||||||
43
src/Components/Utils/SearchBar/SearchBar.scss
Normal file
43
src/Components/Utils/SearchBar/SearchBar.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
.SearchBar{
|
||||||
|
.group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
max-width: 190px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 1rem;
|
||||||
|
padding-left: 2.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
outline: none;
|
||||||
|
font-weight: 500;
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--bg);
|
||||||
|
border: none;
|
||||||
|
box-shadow: 2px 2px 7px 0 var(--primary);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.input::placeholder {
|
||||||
|
color: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 1rem;
|
||||||
|
fill: var(--bg);
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
14
src/Components/Utils/SearchBar/SearchBar.tsx
Normal file
14
src/Components/Utils/SearchBar/SearchBar.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react'
|
||||||
|
import './SearchBar.scss'
|
||||||
|
const SearchBar = () => {
|
||||||
|
return (
|
||||||
|
<div className='SearchBar'>
|
||||||
|
<div className="group">
|
||||||
|
<svg className="icon" viewBox="0 0 24 24"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
|
||||||
|
<input placeholder="Search" type="search" className="input"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SearchBar
|
||||||
84
src/Components/Utils/Theme.tsx
Normal file
84
src/Components/Utils/Theme.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
import { Menu, MenuItem, MenuButton } from '@szhsin/react-menu';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { usePageState } from '../../lib/statemangment/LayoutPagestate';
|
||||||
|
import { BsFillMoonStarsFill, BsFillSunFill, BsSunglasses } from 'react-icons/bs';
|
||||||
|
|
||||||
|
|
||||||
|
let What_the_Theme = localStorage.getItem('theme') ?? "light";
|
||||||
|
|
||||||
|
if (What_the_Theme === "dark") {
|
||||||
|
|
||||||
|
document.body.classList.add('dark')}
|
||||||
|
else if (What_the_Theme === "glass") {
|
||||||
|
|
||||||
|
document.body.classList.add('glass')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function Theme() {
|
||||||
|
const {t} = useTranslation();
|
||||||
|
|
||||||
|
const {setThemChange} = usePageState()
|
||||||
|
|
||||||
|
const changeTheme = (newTheme : any) => {
|
||||||
|
|
||||||
|
|
||||||
|
if(newTheme === "dark"){
|
||||||
|
document.body.classList.remove('glass');
|
||||||
|
document.body.classList.add('dark');localStorage.setItem("theme", "dark");
|
||||||
|
What_the_Theme = "dark"
|
||||||
|
}
|
||||||
|
else if(newTheme === "light"){
|
||||||
|
document.body.classList.remove('glass');
|
||||||
|
document.body.classList.remove('dark');localStorage.setItem("theme", "light");
|
||||||
|
What_the_Theme = "light"
|
||||||
|
|
||||||
|
}
|
||||||
|
else if(newTheme === "glass"){
|
||||||
|
document.body.classList.remove('dark'); document.body.classList.add('glass'); localStorage.setItem("theme", "glass");
|
||||||
|
What_the_Theme = "glass"
|
||||||
|
|
||||||
|
}
|
||||||
|
setThemChange()
|
||||||
|
};
|
||||||
|
/// BsSunglasses BsFillSunFill BsFillMoonStarsFill
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='Theme'>
|
||||||
|
<Menu menuButton={<MenuButton>
|
||||||
|
{(What_the_Theme === "light") ?
|
||||||
|
<>
|
||||||
|
<BsFillSunFill/>
|
||||||
|
{t("light")}
|
||||||
|
</>
|
||||||
|
|
||||||
|
: (What_the_Theme === "dark") ?
|
||||||
|
<>
|
||||||
|
<BsFillMoonStarsFill/>
|
||||||
|
{t("dark")}
|
||||||
|
</>
|
||||||
|
:
|
||||||
|
<>
|
||||||
|
<BsSunglasses/>
|
||||||
|
{t("glass")}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</MenuButton>} transition>
|
||||||
|
<MenuItem onClick={() => changeTheme('light')}>
|
||||||
|
<BsFillSunFill/>
|
||||||
|
{t("light")}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={() => changeTheme('dark')}>
|
||||||
|
<BsFillMoonStarsFill/>
|
||||||
|
{t("dark")} </MenuItem>
|
||||||
|
<MenuItem onClick={() => changeTheme('glass')}>
|
||||||
|
<BsSunglasses/>
|
||||||
|
{t("glass")} </MenuItem>
|
||||||
|
</Menu>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
42
src/Components/Utils/Translate.tsx
Normal file
42
src/Components/Utils/Translate.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Menu, Dropdown } from 'antd';
|
||||||
|
import { useLanguage, useLanguageMenu } from '../../Hooks/useChangeLanguage';
|
||||||
|
import i18next from 'i18next';
|
||||||
|
import type { MenuProps } from 'antd';
|
||||||
|
|
||||||
|
export default function Translate() {
|
||||||
|
const { changeLanguage } = useLanguage();
|
||||||
|
const { languageOptions } = useLanguageMenu();
|
||||||
|
|
||||||
|
const handleLanguageChange = (newLanguage:string) => {
|
||||||
|
changeLanguage(newLanguage);
|
||||||
|
};
|
||||||
|
|
||||||
|
const items : MenuProps['items'] = languageOptions.map((option:any,index:number) => ({
|
||||||
|
key: index,
|
||||||
|
label: (
|
||||||
|
<div className='MenuPropsItem' onClick={() => handleLanguageChange(option.code)}>
|
||||||
|
<img alt='' src={option.icon} width={20} height={20} />
|
||||||
|
{option.label}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='Translate'>
|
||||||
|
<Dropdown menu={{items}} placement="bottomLeft">
|
||||||
|
<button className="ant-dropdown-link" onClick={e => e.preventDefault()}>
|
||||||
|
{languageOptions.map((option:any,index:number) => (
|
||||||
|
option.code === i18next.language ?
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<img alt='' src={option.icon} width={20} height={20} /> {option.label}
|
||||||
|
</React.Fragment>
|
||||||
|
: null
|
||||||
|
))}
|
||||||
|
</button>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
60
src/Components/Utils/UnBlockModal.tsx
Normal file
60
src/Components/Utils/UnBlockModal.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import { BsExclamationCircle } from 'react-icons/bs';
|
||||||
|
import { Button, Card, CardBody, Input, Label, Modal, ModalHeader } from 'reactstrap';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { LoadingButton } from '../Ui/LoadingButton';
|
||||||
|
import { useCommonModelState } from '../../lib/statemangment/driver&customer/ModelState';
|
||||||
|
import { CiLock } from "react-icons/ci";
|
||||||
|
|
||||||
|
interface UnBlockModalProps {
|
||||||
|
|
||||||
|
Mutation:any,
|
||||||
|
type :'customer' |'driver'
|
||||||
|
}
|
||||||
|
|
||||||
|
const UnBlockModal: React.FC<UnBlockModalProps> = ({Mutation ,type }) => {
|
||||||
|
const {t} = useTranslation();
|
||||||
|
|
||||||
|
const key_to_api = type == t('customer') ? t('customer_id') : t("driver_id")
|
||||||
|
|
||||||
|
const {isOpenUnBlock:isOpen , objectID , setIsopenUnBlock:setIsopen} = useCommonModelState()
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
Mutation.mutate({ [key_to_api]: objectID });
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (Mutation.isSuccess) {
|
||||||
|
setIsopen();
|
||||||
|
}
|
||||||
|
}, [Mutation.isSuccess, setIsopen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} centered size='md'>
|
||||||
|
<ModalHeader toggle={() => setIsopen()}>
|
||||||
|
{t("al")}{type} {t('un_block_page')}
|
||||||
|
</ModalHeader>
|
||||||
|
<Card>
|
||||||
|
<CardBody>
|
||||||
|
<div style={{ width: '100%', display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
|
||||||
|
<h1 className='modal_info' style={{ fontWeight: 'bold' }}> {t('un_blocking_')}{type}</h1>
|
||||||
|
<CiLock className='modal_info' style={{ fontSize: '100px', color: 'black', margin: '20px 0' }} />
|
||||||
|
<div className=''>
|
||||||
|
<div style={{ marginTop: 20 }}>
|
||||||
|
<Button color='danger' style={{ marginInline: 10 }} onClick={() => setIsopen()}>
|
||||||
|
{t('cancel')}
|
||||||
|
</Button>
|
||||||
|
<LoadingButton color='primary' onClick={handleSubmit} type='submit' isLoading={Mutation.isLoading}>
|
||||||
|
{t('un_block_for_')}{type}
|
||||||
|
</LoadingButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UnBlockModal;
|
||||||
24
src/Components/ValidationField/Ui/KarimSpinner.tsx
Normal file
24
src/Components/ValidationField/Ui/KarimSpinner.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Spin } from "antd";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
loading: boolean;
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const KarimSpinner: React.FC<Props> = ({ loading, className, children }) => {
|
||||||
|
return (
|
||||||
|
<div className={className ?? ""}>
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center">
|
||||||
|
<Spin />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
children
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default KarimSpinner;
|
||||||
37
src/Components/ValidationField/Ui/SearchBar.scss
Normal file
37
src/Components/ValidationField/Ui/SearchBar.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
.SearchBar {
|
||||||
|
// margin-top: 20px;
|
||||||
|
.group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
max-width: 350px;
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 1rem;
|
||||||
|
padding-left: 2.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
outline: none;
|
||||||
|
font-weight: 500;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
border: none;
|
||||||
|
box-shadow: 2px 2px 7px 0 var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input::placeholder {
|
||||||
|
color: var(--subtext);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 1rem;
|
||||||
|
fill: var(--subtext);
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
src/Components/ValidationField/Ui/SearchBar.tsx
Normal file
45
src/Components/ValidationField/Ui/SearchBar.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import "./SearchBar.scss";
|
||||||
|
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||||
|
const SearchBar = () => {
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleChange = (event: any) => {
|
||||||
|
const { value } = event.target;
|
||||||
|
setSearchQuery(value);
|
||||||
|
updateUrlParams(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateUrlParams = (value: any) => {
|
||||||
|
navigate(`?search=${value}`, { replace: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="SearchBar">
|
||||||
|
<div className="group">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
|
className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1b5stb0 icon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
data-testid="SearchIcon"
|
||||||
|
>
|
||||||
|
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
|
||||||
|
</svg>
|
||||||
|
<input
|
||||||
|
placeholder="Search Product...."
|
||||||
|
type="search"
|
||||||
|
className="input"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SearchBar;
|
||||||
46
src/Components/ValidationField/ValidationField.tsx
Normal file
46
src/Components/ValidationField/ValidationField.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
import React from "react";
|
||||||
|
import "./utils/ValidationField.scss";
|
||||||
|
import {
|
||||||
|
Date,
|
||||||
|
Time,
|
||||||
|
File,
|
||||||
|
DataRange,
|
||||||
|
SelectField,
|
||||||
|
Default,
|
||||||
|
CheckboxField,
|
||||||
|
MaltyFile,
|
||||||
|
SearchField,
|
||||||
|
TextField,
|
||||||
|
DropFile,
|
||||||
|
} from "./View";
|
||||||
|
import { ValidationFieldProps, ValidationFieldType } from "./utils/types";
|
||||||
|
import LocalSearchField from "./View/LocalSearch";
|
||||||
|
import NumberFormate from "./View/NumberFormate";
|
||||||
|
|
||||||
|
const components: { [key: string]: React.FC<any> } = {
|
||||||
|
Select: SelectField,
|
||||||
|
Search: SearchField,
|
||||||
|
LocalSearch: LocalSearchField,
|
||||||
|
DataRange: DataRange,
|
||||||
|
TextArea: TextField,
|
||||||
|
Date: Date,
|
||||||
|
Time: Time,
|
||||||
|
File: File,
|
||||||
|
DropFile: DropFile,
|
||||||
|
MaltyFile: MaltyFile,
|
||||||
|
Checkbox: CheckboxField,
|
||||||
|
NumberFormate: NumberFormate,
|
||||||
|
};
|
||||||
|
|
||||||
|
const ValidationField: React.FC<ValidationFieldProps> = React.memo(
|
||||||
|
({ type, ...otherProps }) => {
|
||||||
|
const Component = components[type as ValidationFieldType];
|
||||||
|
|
||||||
|
if (!Component) {
|
||||||
|
return <Default {...otherProps} />;
|
||||||
|
}
|
||||||
|
return <Component {...otherProps} />;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export default ValidationField;
|
||||||
40
src/Components/ValidationField/View/CheckboxField.tsx
Normal file
40
src/Components/ValidationField/View/CheckboxField.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
import React from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { Checkbox, Form } from "antd";
|
||||||
|
|
||||||
|
const CheckboxField = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
isDisabled,
|
||||||
|
onChange,
|
||||||
|
Group,
|
||||||
|
className,
|
||||||
|
props,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { t, formik, isError, errorMsg } = useFormField(name, props);
|
||||||
|
const CheckboxhandleChange = (value: any) => {
|
||||||
|
formik.setFieldValue(name, value?.target?.checked);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className={Group ? "d-inline mt-3 Checkboxs" : ``}>
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
onChange={onChange || CheckboxhandleChange}
|
||||||
|
disabled={isDisabled}
|
||||||
|
checked={formik.values[name] ?? false}
|
||||||
|
className={className}
|
||||||
|
>
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</Checkbox>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CheckboxField;
|
||||||
64
src/Components/ValidationField/View/DataRange.tsx
Normal file
64
src/Components/ValidationField/View/DataRange.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { Form, DatePicker } from "antd";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { MdOutlineEdit } from "react-icons/md";
|
||||||
|
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
|
||||||
|
const DataRange = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
Format,
|
||||||
|
props,
|
||||||
|
onChange,
|
||||||
|
isDisabled,
|
||||||
|
placeholder,
|
||||||
|
className,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { errorMsg, isError, t, formik } = useFormField(name, props);
|
||||||
|
const onCalendarChange = (value: any) => {
|
||||||
|
formik.setFieldValue(name, value);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100 ">
|
||||||
|
{no_label ? (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
<span>empty</span>
|
||||||
|
</label>
|
||||||
|
) : label_icon ? (
|
||||||
|
<div className="LabelWithIcon">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<RangePicker
|
||||||
|
placeholder={placeholder}
|
||||||
|
size="large"
|
||||||
|
allowClear
|
||||||
|
className={`${className} w-100`}
|
||||||
|
format={Format}
|
||||||
|
onChange={onChange || onCalendarChange}
|
||||||
|
disabled={isDisabled}
|
||||||
|
defaultValue={formik.values[name]}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DataRange;
|
||||||
69
src/Components/ValidationField/View/Date.tsx
Normal file
69
src/Components/ValidationField/View/Date.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
import { Form, DatePicker } from "antd";
|
||||||
|
import React from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { MdOutlineEdit } from "react-icons/md";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
const Date = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
picker = "date",
|
||||||
|
isDisabled,
|
||||||
|
props,
|
||||||
|
onChange,
|
||||||
|
placeholder,
|
||||||
|
className,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { errorMsg, isError, t, formik } = useFormField(name, props);
|
||||||
|
|
||||||
|
const FormikValue = formik.values[name];
|
||||||
|
const onCalendarChange = (value: any) => {
|
||||||
|
formik.setFieldValue(name, value);
|
||||||
|
// console.log(value,"value ");
|
||||||
|
};
|
||||||
|
|
||||||
|
const Formater = "YYYY/MM/DD";
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100 ">
|
||||||
|
{no_label ? (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
<span>empty</span>
|
||||||
|
</label>
|
||||||
|
) : label_icon ? (
|
||||||
|
<div className="LabelWithIcon">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<DatePicker
|
||||||
|
picker={picker}
|
||||||
|
placeholder={t(`${placeholder}`)}
|
||||||
|
allowClear
|
||||||
|
className={`${className} w-100`}
|
||||||
|
value={FormikValue ? FormikValue : null}
|
||||||
|
size="large"
|
||||||
|
onChange={onChange || onCalendarChange}
|
||||||
|
disabled={isDisabled}
|
||||||
|
format={Formater}
|
||||||
|
/>
|
||||||
|
{/* <DatePicker onChange={onChange} /> */}
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Date;
|
||||||
62
src/Components/ValidationField/View/Default.tsx
Normal file
62
src/Components/ValidationField/View/Default.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
import { Form, Input } from "antd";
|
||||||
|
import React from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { MdOutlineEdit } from "react-icons/md";
|
||||||
|
import { Field } from "formik";
|
||||||
|
|
||||||
|
const Default = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder,
|
||||||
|
isDisabled,
|
||||||
|
onChange,
|
||||||
|
type,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
...props
|
||||||
|
}: any) => {
|
||||||
|
const { errorMsg, isError, t } = useFormField(name, props);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100">
|
||||||
|
{no_label ? (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
<span>empty</span>
|
||||||
|
</label>
|
||||||
|
) : label_icon ? (
|
||||||
|
<div className="LabelWithIcon">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : placeholder ? placeholder : name}`)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
as={Input}
|
||||||
|
type={type ?? "text"}
|
||||||
|
placeholder={t(
|
||||||
|
`${placeholder ? placeholder : label ? label : name}`,
|
||||||
|
)}
|
||||||
|
name={name}
|
||||||
|
disabled={isDisabled}
|
||||||
|
size="large"
|
||||||
|
{...props}
|
||||||
|
// onChange={onChange ? onChange : handleChange}
|
||||||
|
{...(type === "number" && { min: 0 })}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(Default);
|
||||||
93
src/Components/ValidationField/View/DropFile.tsx.tsx
Normal file
93
src/Components/ValidationField/View/DropFile.tsx.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
|
||||||
|
import { message, Upload } from "antd";
|
||||||
|
import type { GetProp, UploadProps } from "antd";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { ImageBaseURL } from "../../../api/config";
|
||||||
|
|
||||||
|
type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
|
||||||
|
|
||||||
|
const DropFile = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
onChange,
|
||||||
|
isDisabled,
|
||||||
|
placholder,
|
||||||
|
className,
|
||||||
|
props,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { formik, t, isError } = useFormField(name, props);
|
||||||
|
let FormikName = formik?.values[name];
|
||||||
|
|
||||||
|
const FormikValue =
|
||||||
|
typeof FormikName === "string"
|
||||||
|
? ImageBaseURL + FormikName
|
||||||
|
: FormikName instanceof File
|
||||||
|
? URL.createObjectURL(FormikName)
|
||||||
|
: "";
|
||||||
|
|
||||||
|
const [imageUrl, setImageUrl] = useState<any>(FormikValue ?? "");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setImageUrl(FormikName);
|
||||||
|
}, [FormikName]);
|
||||||
|
|
||||||
|
const getBase64 = (img: FileType, callback: (url: string) => void) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.addEventListener("load", () => callback(reader.result as string));
|
||||||
|
reader.readAsDataURL(img);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange: UploadProps["onChange"] = (info) => {
|
||||||
|
if (info.file.status === "done") {
|
||||||
|
getBase64(info.file.originFileObj as FileType, (url) => {
|
||||||
|
setImageUrl(url);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
formik.setFieldValue(name, info.file.originFileObj);
|
||||||
|
};
|
||||||
|
const customRequest = async ({ onSuccess }: any) => {
|
||||||
|
onSuccess();
|
||||||
|
};
|
||||||
|
const uploadButton = (
|
||||||
|
<button style={{ border: 0, background: "none" }} type="button">
|
||||||
|
<div className={`CustomFile ${isError ? "uploader_error" : ""} `}>
|
||||||
|
{t("drag_and_drop_or_click_here_to_select_the_file")}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label || name}`)}
|
||||||
|
</label>
|
||||||
|
<Upload
|
||||||
|
name="avatar"
|
||||||
|
listType="picture-card"
|
||||||
|
className={`avatar-uploader ${isError ? "uploader_error" : ""} ${className}`}
|
||||||
|
showUploadList={false}
|
||||||
|
customRequest={customRequest}
|
||||||
|
onChange={onChange || handleChange}
|
||||||
|
>
|
||||||
|
{imageUrl ? (
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
imageUrl instanceof File
|
||||||
|
? URL.createObjectURL(imageUrl)
|
||||||
|
: imageUrl
|
||||||
|
}
|
||||||
|
alt=""
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
uploadButton
|
||||||
|
)}
|
||||||
|
</Upload>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DropFile;
|
||||||
80
src/Components/ValidationField/View/File.tsx
Normal file
80
src/Components/ValidationField/View/File.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { Button, Upload, UploadFile } from "antd";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { UploadOutlined } from "@ant-design/icons";
|
||||||
|
import { ImageBaseURL } from "../../../api/config";
|
||||||
|
|
||||||
|
const File = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
onChange,
|
||||||
|
isDisabled,
|
||||||
|
placholder,
|
||||||
|
className,
|
||||||
|
acceptedFileType,
|
||||||
|
props,
|
||||||
|
}: any) => {
|
||||||
|
const { formik, t, isError } = useFormField(name, props);
|
||||||
|
let imageUrl = formik?.values?.[name] ?? null;
|
||||||
|
// console.log(ImageBaseURL + imageUrl);
|
||||||
|
|
||||||
|
const fileList: UploadFile[] = imageUrl
|
||||||
|
? [
|
||||||
|
typeof imageUrl === "string"
|
||||||
|
? {
|
||||||
|
uid: "-1",
|
||||||
|
name: "",
|
||||||
|
status: "done",
|
||||||
|
url: ImageBaseURL + imageUrl,
|
||||||
|
thumbUrl: ImageBaseURL + imageUrl,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
uid: imageUrl.uid || "-1",
|
||||||
|
name: imageUrl.name || "",
|
||||||
|
status: "done",
|
||||||
|
originFileObj: imageUrl,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: [];
|
||||||
|
// console.log(1);
|
||||||
|
|
||||||
|
const FilehandleChange = (value: any) => {
|
||||||
|
// console.log(value,"filevalue");
|
||||||
|
if (value.fileList.length === 0) {
|
||||||
|
formik.setFieldValue(name, null);
|
||||||
|
} else {
|
||||||
|
formik.setFieldValue(name, value?.file?.originFileObj);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
|
||||||
|
onSuccess();
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="ValidationField upload_image_button ">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label || name}`)}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<Upload
|
||||||
|
disabled={isDisabled}
|
||||||
|
listType="picture"
|
||||||
|
maxCount={1}
|
||||||
|
fileList={[...fileList]}
|
||||||
|
onChange={onChange || FilehandleChange}
|
||||||
|
customRequest={customRequest}
|
||||||
|
className={`${className} w-100`}
|
||||||
|
accept={acceptedFileType ? acceptedFileType : undefined}
|
||||||
|
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
className={isError ? "isError w-100 " : " w-100"}
|
||||||
|
icon={<UploadOutlined />}
|
||||||
|
>
|
||||||
|
{placholder ?? t("Click_to_upload_the_image")}
|
||||||
|
</Button>
|
||||||
|
<div className="Error_color"> {isError ? "required" : ""}</div>
|
||||||
|
</Upload>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default File;
|
||||||
93
src/Components/ValidationField/View/LocalSearch.tsx
Normal file
93
src/Components/ValidationField/View/LocalSearch.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
import { Form, Select } from "antd";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { MdOutlineEdit } from "react-icons/md";
|
||||||
|
import { translateOptions } from "../utils/translatedOptions";
|
||||||
|
|
||||||
|
const LocalSelectField = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder,
|
||||||
|
isDisabled,
|
||||||
|
option,
|
||||||
|
isMulti,
|
||||||
|
onChange,
|
||||||
|
className,
|
||||||
|
props,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { errorMsg, isError, t, formik } = useFormField(name, props);
|
||||||
|
|
||||||
|
// State to manage the search input value
|
||||||
|
const [searchValue, setSearchValue] = useState("");
|
||||||
|
|
||||||
|
const handleSearch = (
|
||||||
|
input: string,
|
||||||
|
option: { value: string; label: React.ReactNode | undefined },
|
||||||
|
) =>
|
||||||
|
option?.label?.toString().toLowerCase().includes(toLowerCase()) ||
|
||||||
|
option?.value?.toString().toLowerCase().includes(toLowerCase());
|
||||||
|
|
||||||
|
const SelectableChange = (value: {
|
||||||
|
value: string;
|
||||||
|
label: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
formik.setFieldValue(name, value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectChange = (value: any) => {
|
||||||
|
formik.setFieldValue(name, value);
|
||||||
|
if (onChange) onChange(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearchChange = (input: string) => {
|
||||||
|
setSearchValue(input); // Update the search input value
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100">
|
||||||
|
{no_label ? (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
<span>empty</span>
|
||||||
|
</label>
|
||||||
|
) : label_icon ? (
|
||||||
|
<div className="LabelWithIcon">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder={t(
|
||||||
|
`${placeholder ? placeholder : label ? label : name}`,
|
||||||
|
)}
|
||||||
|
disabled={isDisabled}
|
||||||
|
options={translateOptions(option, t)}
|
||||||
|
size="large"
|
||||||
|
className={`${className} ${isError ? "Select_error" : ""} w-100`}
|
||||||
|
value={formik.values[name]}
|
||||||
|
allowClear
|
||||||
|
{...(isMulti && { mode: "multiple" })}
|
||||||
|
onChange={handleSelectChange}
|
||||||
|
showSearch
|
||||||
|
filterOption={handleSearch} // Custom filter function
|
||||||
|
searchValue={searchValue} // Control the search input value
|
||||||
|
onSearch={handleSearchChange} // Update search input value on change
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(LocalSelectField);
|
||||||
85
src/Components/ValidationField/View/MaltyFile.tsx
Normal file
85
src/Components/ValidationField/View/MaltyFile.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
import { Button, Upload } from "antd";
|
||||||
|
import { UploadOutlined } from "@ant-design/icons";
|
||||||
|
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
|
||||||
|
const MaltyFile = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
onChange,
|
||||||
|
isDisabled,
|
||||||
|
placeholder,
|
||||||
|
className,
|
||||||
|
props,
|
||||||
|
}: any) => {
|
||||||
|
const { formik, t, isError } = useFormField(name, props);
|
||||||
|
let imageUrl = formik?.values?.[name] ?? null;
|
||||||
|
|
||||||
|
// Mapping formik values to fileList format
|
||||||
|
const fileList = imageUrl
|
||||||
|
? imageUrl.map((file: any, index: number) => {
|
||||||
|
// console.log(file,"file");
|
||||||
|
|
||||||
|
return file instanceof File
|
||||||
|
? {
|
||||||
|
uid: index,
|
||||||
|
name: file?.name,
|
||||||
|
status: "done",
|
||||||
|
originFileObj: file,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
uid: index,
|
||||||
|
id: file?.id,
|
||||||
|
name: file?.name,
|
||||||
|
status: "done",
|
||||||
|
url: file?.url || "",
|
||||||
|
thumbUrl: file?.url || "",
|
||||||
|
};
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const FilehandleChange = ({ fileList }: any) => {
|
||||||
|
if (fileList.length === 0) {
|
||||||
|
formik.setFieldValue(name, null);
|
||||||
|
} else {
|
||||||
|
formik.setFieldValue(
|
||||||
|
name,
|
||||||
|
fileList.map((file: any) => file?.originFileObj ?? file),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Custom request function
|
||||||
|
const customRequest = async ({ onSuccess }: any) => {
|
||||||
|
// Perform any necessary actions before onSuccess is called
|
||||||
|
onSuccess();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ValidationField upload_image_button">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label || name}`)}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<Upload
|
||||||
|
disabled={isDisabled}
|
||||||
|
listType="picture"
|
||||||
|
fileList={fileList} // Using fileList instead of defaultFileList
|
||||||
|
onChange={onChange || FilehandleChange}
|
||||||
|
customRequest={customRequest}
|
||||||
|
className={`${className} w-100`}
|
||||||
|
multiple // Allow multiple files to be selected
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
className={isError ? "isError w-100" : " w-100"}
|
||||||
|
icon={<UploadOutlined />}
|
||||||
|
|
||||||
|
>
|
||||||
|
{t(placeholder ?? t("upload_image") )}
|
||||||
|
</Button>
|
||||||
|
<div className="Error_color"> {isError ? "required" : ""}</div>
|
||||||
|
</Upload>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MaltyFile;
|
||||||
75
src/Components/ValidationField/View/NumberFormate.tsx
Normal file
75
src/Components/ValidationField/View/NumberFormate.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
import { Form, Input, InputNumber } from "antd";
|
||||||
|
import React from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { MdOutlineEdit } from "react-icons/md";
|
||||||
|
import { Field } from "formik";
|
||||||
|
|
||||||
|
const NumberFormate = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder,
|
||||||
|
isDisabled,
|
||||||
|
props,
|
||||||
|
type,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { errorMsg, isError, t, formik } = useFormField(name, props);
|
||||||
|
const SelectableChange = (value: {
|
||||||
|
value: string;
|
||||||
|
label: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
formik.setFieldValue(name, value);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100">
|
||||||
|
{no_label ? (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
<span>empty</span>
|
||||||
|
</label>
|
||||||
|
) : label_icon ? (
|
||||||
|
<div className="LabelWithIcon">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : placeholder ? placeholder : name}`)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
as={InputNumber}
|
||||||
|
formatter={(value: any) =>
|
||||||
|
`${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
||||||
|
}
|
||||||
|
parser={(value: any) =>
|
||||||
|
value?.replace(/\$\s?|(,*)/g, "") as unknown as number
|
||||||
|
}
|
||||||
|
min="0"
|
||||||
|
type={type ?? "text"}
|
||||||
|
value={formik.values[name]}
|
||||||
|
onChange={SelectableChange}
|
||||||
|
placeholder={t(
|
||||||
|
`${placeholder ? placeholder : label ? label : name}`,
|
||||||
|
)}
|
||||||
|
name={name}
|
||||||
|
disabled={isDisabled}
|
||||||
|
size="large"
|
||||||
|
|
||||||
|
|
||||||
|
// onChange={onChange ? onChange : handleChange}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(NumberFormate);
|
||||||
87
src/Components/ValidationField/View/SearchField.tsx
Normal file
87
src/Components/ValidationField/View/SearchField.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
import { Form, Select } from "antd";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { MdOutlineEdit } from "react-icons/md";
|
||||||
|
|
||||||
|
const SearchField = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder,
|
||||||
|
isDisabled,
|
||||||
|
searchBy,
|
||||||
|
option,
|
||||||
|
isMulti,
|
||||||
|
onChange,
|
||||||
|
className,
|
||||||
|
props,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { errorMsg, isError, t, formik } = useFormField(name, props);
|
||||||
|
const [searchQuery, setSearchQuery] = useState<string>("");
|
||||||
|
const navigate = useNavigate();
|
||||||
|
useEffect(() => {
|
||||||
|
const searchParams = new URLSearchParams(window?.location?.search);
|
||||||
|
setSearchQuery(searchParams?.get("search") || "");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const SelectableChange = (value: {
|
||||||
|
value: string;
|
||||||
|
label: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
formik?.setFieldValue(name, value);
|
||||||
|
};
|
||||||
|
const SearchHandleChange = (value: any) => {
|
||||||
|
navigate(`${window?.location?.pathname}?${searchBy}=${value}`, {
|
||||||
|
replace: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100 ">
|
||||||
|
{no_label ? (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
<span>empty</span>
|
||||||
|
</label>
|
||||||
|
) : label_icon ? (
|
||||||
|
<div className="LabelWithIcon">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder={t(
|
||||||
|
`${placeholder ? placeholder : label ? label : name}`,
|
||||||
|
)}
|
||||||
|
disabled={isDisabled}
|
||||||
|
options={option}
|
||||||
|
size="large"
|
||||||
|
className={`${className} w-100`}
|
||||||
|
value={formik.values[name]}
|
||||||
|
loading={option?.length < 1}
|
||||||
|
allowClear
|
||||||
|
{...(isMulti && { mode: "multiple" })}
|
||||||
|
onChange={onChange || SelectableChange}
|
||||||
|
showSearch
|
||||||
|
optionFilterProp="label"
|
||||||
|
onSearch={SearchHandleChange}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(SearchField);
|
||||||
72
src/Components/ValidationField/View/SelectField.tsx
Normal file
72
src/Components/ValidationField/View/SelectField.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
import { Form, Select } from "antd";
|
||||||
|
import React from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { MdOutlineEdit } from "react-icons/md";
|
||||||
|
import { translateOptions } from "../utils/translatedOptions";
|
||||||
|
|
||||||
|
const SelectField = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder,
|
||||||
|
isDisabled,
|
||||||
|
option,
|
||||||
|
isMulti,
|
||||||
|
onChange,
|
||||||
|
className,
|
||||||
|
props,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { errorMsg, isError, t, formik } = useFormField(name, props);
|
||||||
|
const SelectableChange = (value: {
|
||||||
|
value: string;
|
||||||
|
label: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
formik.setFieldValue(name, value);
|
||||||
|
};
|
||||||
|
// console.log(name,"Select");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100">
|
||||||
|
{no_label ? (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
<span>empty</span>
|
||||||
|
</label>
|
||||||
|
) : label_icon ? (
|
||||||
|
<div className="LabelWithIcon">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder={t(
|
||||||
|
`${placeholder ? placeholder : label ? label : name}`,
|
||||||
|
)}
|
||||||
|
disabled={isDisabled}
|
||||||
|
options={translateOptions(option, t)}
|
||||||
|
loading={option?.length < 1}
|
||||||
|
size="large"
|
||||||
|
className={`${className} ${isError ? "Select_error" : ""} w-100`}
|
||||||
|
value={formik.values[name]}
|
||||||
|
allowClear
|
||||||
|
{...(isMulti && { mode: "multiple" })}
|
||||||
|
onChange={onChange || SelectableChange}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(SelectField);
|
||||||
50
src/Components/ValidationField/View/TextAreaField.tsx
Normal file
50
src/Components/ValidationField/View/TextAreaField.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { Form, Input } from "antd";
|
||||||
|
import React from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { Field } from "formik";
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
const TextAreaField = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder,
|
||||||
|
isDisabled,
|
||||||
|
onChange,
|
||||||
|
props,
|
||||||
|
type,
|
||||||
|
}: any) => {
|
||||||
|
const { formik, isError, errorMsg, t } = useFormField(name, props);
|
||||||
|
|
||||||
|
const handleChange = (
|
||||||
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||||
|
) => {
|
||||||
|
// console.log('Change:', e.target.value);
|
||||||
|
formik.setFieldValue(name, e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
as={TextArea}
|
||||||
|
placeholder={t(`${placeholder ? placeholder : name}`)}
|
||||||
|
name={name}
|
||||||
|
disabled={isDisabled}
|
||||||
|
size="large"
|
||||||
|
onChange={onChange || handleChange}
|
||||||
|
|
||||||
|
// onChange={onChange ? onChange : handleChange}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(TextAreaField);
|
||||||
65
src/Components/ValidationField/View/TextField.tsx
Normal file
65
src/Components/ValidationField/View/TextField.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
import { Form, Input } from "antd";
|
||||||
|
import React from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { MdOutlineEdit } from "react-icons/md";
|
||||||
|
import { Field } from "formik";
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
const TextField = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder,
|
||||||
|
isDisabled,
|
||||||
|
onChange,
|
||||||
|
props,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { formik, isError, errorMsg, t } = useFormField(name, props);
|
||||||
|
const TextFieldhandleChange = (
|
||||||
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||||
|
) => {
|
||||||
|
// console.log('Change:', e.target.value);
|
||||||
|
formik.setFieldValue(name, e.target.value);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100">
|
||||||
|
{no_label ? (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
<span>empty</span>
|
||||||
|
</label>
|
||||||
|
) : label_icon ? (
|
||||||
|
<div className="LabelWithIcon">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
as={TextArea}
|
||||||
|
placeholder={t(`${placeholder ? placeholder : name}`)}
|
||||||
|
name={name}
|
||||||
|
disabled={isDisabled}
|
||||||
|
size="large"
|
||||||
|
// showCount
|
||||||
|
maxLength={1000}
|
||||||
|
onChange={onChange || TextFieldhandleChange}
|
||||||
|
style={{ height: 100, resize: "none" }}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(TextField);
|
||||||
68
src/Components/ValidationField/View/Time.tsx
Normal file
68
src/Components/ValidationField/View/Time.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
import { Form, TimePicker } from "antd";
|
||||||
|
import React from "react";
|
||||||
|
import useFormField from "../../../Hooks/useFormField";
|
||||||
|
import { MdOutlineEdit } from "react-icons/md";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
const Time = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
className,
|
||||||
|
isDisabled,
|
||||||
|
onChange,
|
||||||
|
props,
|
||||||
|
placeholder,
|
||||||
|
no_label,
|
||||||
|
label_icon,
|
||||||
|
}: any) => {
|
||||||
|
const { errorMsg, isError, t, formik } = useFormField(name, props);
|
||||||
|
const onCalendarChange = (value: any) => {
|
||||||
|
formik.setFieldValue(name, value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Formater = "H:mm";
|
||||||
|
const FormikValue = formik.values[name];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ValidationField w-100 ">
|
||||||
|
{no_label ? (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
<span>empty</span>
|
||||||
|
</label>
|
||||||
|
) : label_icon ? (
|
||||||
|
<div className="LabelWithIcon">
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label htmlFor={name} className="text">
|
||||||
|
{t(`${label ? label : name}`)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
hasFeedback
|
||||||
|
validateStatus={isError ? "error" : ""}
|
||||||
|
help={isError ? errorMsg : ""}
|
||||||
|
>
|
||||||
|
<TimePicker
|
||||||
|
allowClear
|
||||||
|
className={`${className} w-100`}
|
||||||
|
size="large"
|
||||||
|
value={FormikValue ? dayjs(FormikValue, Formater) : null}
|
||||||
|
onChange={onChange || onCalendarChange}
|
||||||
|
disabled={isDisabled}
|
||||||
|
placeholder={t(
|
||||||
|
`${placeholder ? placeholder : label ? label : name}`,
|
||||||
|
)}
|
||||||
|
format={Formater}
|
||||||
|
needConfirm={false}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Time;
|
||||||
25
src/Components/ValidationField/View/index.tsx
Normal file
25
src/Components/ValidationField/View/index.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import Time from "./Time";
|
||||||
|
import SelectField from "./SelectField";
|
||||||
|
import Date from "./Date";
|
||||||
|
import DataRange from "./DataRange";
|
||||||
|
import CheckboxField from "./CheckboxField";
|
||||||
|
import Default from "./Default";
|
||||||
|
import File from "./File";
|
||||||
|
import MaltyFile from "./MaltyFile";
|
||||||
|
import SearchField from "./SearchField";
|
||||||
|
import TextField from "./TextField";
|
||||||
|
import DropFile from "./DropFile.tsx";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Time,
|
||||||
|
SelectField,
|
||||||
|
Date,
|
||||||
|
DataRange,
|
||||||
|
CheckboxField,
|
||||||
|
Default,
|
||||||
|
File,
|
||||||
|
MaltyFile,
|
||||||
|
SearchField,
|
||||||
|
TextField,
|
||||||
|
DropFile,
|
||||||
|
};
|
||||||
16
src/Components/ValidationField/index.tsx
Normal file
16
src/Components/ValidationField/index.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { useState } from "react";
|
||||||
|
import { ErrorMessage, useField, Field, useFormikContext } from "formik";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { FaExclamationCircle } from "react-icons/fa";
|
||||||
|
import { convert_data_to_select } from "../../Layout/app/Const";
|
||||||
|
|
||||||
|
export {
|
||||||
|
useState,
|
||||||
|
ErrorMessage,
|
||||||
|
useField,
|
||||||
|
Field,
|
||||||
|
useFormikContext,
|
||||||
|
useTranslation,
|
||||||
|
FaExclamationCircle,
|
||||||
|
convert_data_to_select,
|
||||||
|
};
|
||||||
200
src/Components/ValidationField/utils/ValidationField.scss
Normal file
200
src/Components/ValidationField/utils/ValidationField.scss
Normal file
|
|
@ -0,0 +1,200 @@
|
||||||
|
.LabelWithIcon {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.ValidationField {
|
||||||
|
margin-bottom: 1.3vw;
|
||||||
|
position: relative;
|
||||||
|
> * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.text,
|
||||||
|
.ant-form-item {
|
||||||
|
margin-bottom: 7px !important;
|
||||||
|
> span {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
|
||||||
|
// border: 1px solid var(--border-color);
|
||||||
|
// }
|
||||||
|
|
||||||
|
.Select_error {
|
||||||
|
.ant-select-selector {
|
||||||
|
border: 1px solid red !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .ValidationField{
|
||||||
|
// .ant-select-selector{
|
||||||
|
// border: 1px solid var(--border-color) ;
|
||||||
|
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
> span {
|
||||||
|
margin-bottom: 0px !important;
|
||||||
|
&:focus-within {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 1px var(--primary);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&:has(.is-invalid) {
|
||||||
|
border-color: red !important ;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:-webkit-autofill,
|
||||||
|
input:-webkit-autofill:hover,
|
||||||
|
input:-webkit-autofill:focus,
|
||||||
|
input:-webkit-autofill:active {
|
||||||
|
-webkit-box-shadow: 0 0 0 30px white inset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-upload-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.Checkboxs {
|
||||||
|
padding: 4%;
|
||||||
|
}
|
||||||
|
.SearchField {
|
||||||
|
button {
|
||||||
|
background: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: var(--text);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled {
|
||||||
|
color: var(--text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isError {
|
||||||
|
outline: red 1px solid;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.Error_color {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
// input:-webkit-autofill {
|
||||||
|
// -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
|
||||||
|
// }
|
||||||
|
// input:-webkit-autofill:focus {
|
||||||
|
// -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /* Remove autofill background color on hover */
|
||||||
|
// input:-webkit-autofill:hover {
|
||||||
|
// -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
|
||||||
|
// }
|
||||||
|
// .upload_image_button {
|
||||||
|
// .ant-btn {
|
||||||
|
// min-height: 3vw !important;
|
||||||
|
// border: 0.1vw solid var(--border-color);
|
||||||
|
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
|
||||||
|
// min-height: 3vw !important;
|
||||||
|
// }
|
||||||
|
// .ant-select-multiple.ant-select-lg .ant-select-selection-overflow {
|
||||||
|
// min-height: 3vw !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ant-upload-list .ant-upload-list-item {
|
||||||
|
// // height:3vw !important;
|
||||||
|
// border: 1px solid var(--border-color) !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .TowValidationItems {
|
||||||
|
// display: flex;
|
||||||
|
// gap: 3%;
|
||||||
|
// > label {
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ant-select .ant-select-arrow {
|
||||||
|
// inset-inline-end: 1vw;
|
||||||
|
// }
|
||||||
|
// .ant-input-affix-wrapper-lg {
|
||||||
|
// padding: 0.5vw 1vw;
|
||||||
|
// font-size: 1vw;
|
||||||
|
// min-height: 3vw;
|
||||||
|
// border-radius: 0.6vw;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ant-picker-outlined {
|
||||||
|
// padding: 0.5vw 1vw;
|
||||||
|
// font-size: 1vw;
|
||||||
|
// min-height: 3vw;
|
||||||
|
// border-radius: 0.6vw;
|
||||||
|
// border: 1px solid var(--border-color);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ant-select-single.ant-select-lg .ant-select-selector {
|
||||||
|
// min-height: 3vw;
|
||||||
|
// border-radius: 0.6vw;
|
||||||
|
// }
|
||||||
|
// .ant-select-single .ant-select-selector .ant-select-selection-search-input {
|
||||||
|
// min-height: 3vw;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ant-select-outlined .ant-select-selector {
|
||||||
|
// min-height: 3vw !important;
|
||||||
|
// border-radius: 0.6vw !important;
|
||||||
|
// }
|
||||||
|
// .ant-select-single.ant-select-lg {
|
||||||
|
// min-height: 3vw;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
|
||||||
|
// width: 21.5vw;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ant-input-number-outlined {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 3vw;
|
||||||
|
// }
|
||||||
|
// .ant-input-number-lg ant-input-number-input {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 3vw;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .bigRow {
|
||||||
|
// width: 100%;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
// > *.w-100 {
|
||||||
|
// width: 48% !important;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ant-input-number-affix-wrapper-lg {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 3vw;
|
||||||
|
// border-radius: 0.6vw;
|
||||||
|
// border: 1px solid var(--border-color);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .TwoSelectGroup {
|
||||||
|
// display: flex;
|
||||||
|
// gap: 10px;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
// }
|
||||||
|
// .TwoSelectGroupbutton {
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
// }
|
||||||
11
src/Components/ValidationField/utils/ValidationState.ts
Normal file
11
src/Components/ValidationField/utils/ValidationState.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { create } from "zustand";
|
||||||
|
|
||||||
|
interface ValidationState {
|
||||||
|
Validation: any[];
|
||||||
|
setValidation: (value: any[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useValidationState = create<ValidationState>((set) => ({
|
||||||
|
Validation: [],
|
||||||
|
setValidation: (value) => set((state) => ({ Validation: value })),
|
||||||
|
}));
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export const translateOptions = (options: any, t: any) => {
|
||||||
|
return options.map((opt: any) => ({
|
||||||
|
...opt,
|
||||||
|
label: t(`${opt.label}`),
|
||||||
|
}));
|
||||||
|
};
|
||||||
171
src/Components/ValidationField/utils/types.ts
Normal file
171
src/Components/ValidationField/utils/types.ts
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
export type ValidationFieldType =
|
||||||
|
| "text"
|
||||||
|
| "Select"
|
||||||
|
| "LocalSearch"
|
||||||
|
| "Search"
|
||||||
|
| "DataRange"
|
||||||
|
| "Date"
|
||||||
|
| "Time"
|
||||||
|
| "File"
|
||||||
|
| "MaltyFile"
|
||||||
|
| "DropFile"
|
||||||
|
| "Checkbox"
|
||||||
|
| "number"
|
||||||
|
| "password"
|
||||||
|
| "email"
|
||||||
|
| "TextArea";
|
||||||
|
|
||||||
|
export interface ValidationFieldPropsText {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type: "text";
|
||||||
|
placeholder?: string;
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ValidationFieldPropsSelect {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type: "Select";
|
||||||
|
placeholder?: string;
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: any;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
option: any[];
|
||||||
|
isMulti?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ValidationFieldPropsLocalSearch {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type: "LocalSearch";
|
||||||
|
placeholder?: string;
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
option: any[];
|
||||||
|
isMulti?: boolean;
|
||||||
|
}
|
||||||
|
export interface ValidationFieldPropsSearch {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type: "Search";
|
||||||
|
placeholder?: string;
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
option: any[];
|
||||||
|
isMulti?: boolean;
|
||||||
|
searchBy: string;
|
||||||
|
}
|
||||||
|
export interface ValidationFieldPropsDataRange {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type: "DataRange";
|
||||||
|
placeholder?: string;
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM" | "YYYY-MM-DD HH:mm:ss.SSS";
|
||||||
|
}
|
||||||
|
export interface ValidationFieldPropsDate {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type: "Date";
|
||||||
|
placeholder?: string;
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
picker?: "data" | "week" | "month" | "quarter" | "year";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ValidationFieldPropsTime {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type: "Time";
|
||||||
|
label?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ValidationFieldPropsFile {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type: "File" | "MaltyFile" | "DropFile";
|
||||||
|
acceptedFileType?:string;
|
||||||
|
placeholder?: string;
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
}
|
||||||
|
export interface ValidationFieldPropsCheckbox {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type: "Checkbox";
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
Group?: boolean;
|
||||||
|
}
|
||||||
|
export interface ValidationFieldPropstext {
|
||||||
|
name: string;
|
||||||
|
no_label?: boolean;
|
||||||
|
label_icon?: boolean;
|
||||||
|
type?:
|
||||||
|
| "text"
|
||||||
|
| "number"
|
||||||
|
| "password"
|
||||||
|
| "email"
|
||||||
|
| "TextArea"
|
||||||
|
| "NumberFormate";
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
dir?: "ltr" | "rtl";
|
||||||
|
Group?: boolean;
|
||||||
|
[key: string]: any; // Index signature to allow any additional props
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ValidationFieldProps =
|
||||||
|
| ValidationFieldPropsText
|
||||||
|
| ValidationFieldPropsSelect
|
||||||
|
| ValidationFieldPropsLocalSearch
|
||||||
|
| ValidationFieldPropsDataRange
|
||||||
|
| ValidationFieldPropsDate
|
||||||
|
| ValidationFieldPropsTime
|
||||||
|
| ValidationFieldPropsFile
|
||||||
|
| ValidationFieldPropsCheckbox
|
||||||
|
| ValidationFieldPropstext
|
||||||
|
| ValidationFieldPropsSearch;
|
||||||
10
src/Components/order/OrderStatus.tsx
Normal file
10
src/Components/order/OrderStatus.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
// for write later
|
||||||
|
function OrderStatus() {
|
||||||
|
return (
|
||||||
|
<div>OrderStatus</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default OrderStatus
|
||||||
45
src/Hooks/WithDrawer.tsx
Normal file
45
src/Hooks/WithDrawer.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
import React, { useState, ReactNode } from 'react';
|
||||||
|
import type { DrawerProps } from 'antd';
|
||||||
|
import { Drawer, Space } from 'antd';
|
||||||
|
|
||||||
|
interface WithDrawerProps {
|
||||||
|
button: React.ReactNode;
|
||||||
|
children: ReactNode;
|
||||||
|
title:string;
|
||||||
|
className?:string,
|
||||||
|
iopen?:boolean,
|
||||||
|
setOpen:any
|
||||||
|
}
|
||||||
|
|
||||||
|
const WithDrawer: React.FC<WithDrawerProps> = ({ children,title ="Basic Drawer",className ,setOpen, iopen }) => {
|
||||||
|
const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
// title={title}
|
||||||
|
placement={placement}
|
||||||
|
closable={false}
|
||||||
|
onClose={() => setOpen(false)}
|
||||||
|
open={iopen}
|
||||||
|
key={placement}
|
||||||
|
>
|
||||||
|
<div className={className}>
|
||||||
|
{children}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WithDrawer;
|
||||||
|
|
||||||
|
|
||||||
|
// <WithDrawer
|
||||||
|
// button={<Button type="primary">Open</Button>}
|
||||||
|
// >
|
||||||
|
// {/* Your content goes here */}
|
||||||
|
// </WithDrawer>
|
||||||
13
src/Hooks/imageUrlToFile.tsx
Normal file
13
src/Hooks/imageUrlToFile.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
export async function fetchImage(imageUrl:any) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(imageUrl);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const blob = await response.blob();
|
||||||
|
return new File([blob], 'image.png', { type: 'image/png' });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching image:', error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
src/Hooks/isEmpty.tsx
Normal file
3
src/Hooks/isEmpty.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
export const isEmpty = (Type:any) => {
|
||||||
|
return !Type || (Array.isArray(Type) && Type.length === 0);
|
||||||
|
};
|
||||||
75
src/Hooks/useChangeLanguage.tsx
Normal file
75
src/Hooks/useChangeLanguage.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { initReactI18next, useTranslation } from 'react-i18next';
|
||||||
|
import i18n from 'i18next';
|
||||||
|
import translationEN from '../translate/en.json';
|
||||||
|
import translationAR from '../translate/ar.json';
|
||||||
|
import translationDE from '../translate/de.json';
|
||||||
|
|
||||||
|
const language = localStorage.getItem('language') ?? 'en';
|
||||||
|
|
||||||
|
i18n.use(initReactI18next).init({
|
||||||
|
resources: {
|
||||||
|
en: {
|
||||||
|
translation: translationEN
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
translation: translationAR
|
||||||
|
},
|
||||||
|
de: {
|
||||||
|
translation: translationDE
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lng: language,
|
||||||
|
interpolation: {
|
||||||
|
escapeValue: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
export function useLanguage() {
|
||||||
|
useEffect(() => {
|
||||||
|
changeLanguage(language);
|
||||||
|
}, [language]);
|
||||||
|
|
||||||
|
const changeLanguage = (newLanguage:any) => {
|
||||||
|
i18n.changeLanguage(newLanguage);
|
||||||
|
localStorage.setItem('language', newLanguage);
|
||||||
|
applyLanguageStyles(newLanguage);
|
||||||
|
};
|
||||||
|
|
||||||
|
return { changeLanguage };
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyLanguageStyles(language:any) {
|
||||||
|
if (language === 'ar') {
|
||||||
|
document.body.setAttribute('dir', 'rtl');
|
||||||
|
document.body.classList.remove('de');
|
||||||
|
document.body.classList.add('ar');
|
||||||
|
} else if (language === 'en') {
|
||||||
|
document.body.setAttribute('dir', 'ltr');
|
||||||
|
document.body.classList.remove('ar', 'de');
|
||||||
|
document.body.classList.add('en');
|
||||||
|
} else if (language === 'de') {
|
||||||
|
document.body.setAttribute('dir', 'ltr');
|
||||||
|
document.body.classList.remove('ar');
|
||||||
|
document.body.classList.add('de');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useLanguageMenu() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { changeLanguage } = useLanguage();
|
||||||
|
|
||||||
|
const languageOptions = [
|
||||||
|
{ code: 'ar', icon: '/language/ar.svg', label: t('Arabic') },
|
||||||
|
{ code: 'en', icon: '/language/en.svg', label: t('English') },
|
||||||
|
{ code: 'de', icon: '/language/de.svg', label: t('German') }
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleLanguageChange = (code:any) => {
|
||||||
|
changeLanguage(code);
|
||||||
|
};
|
||||||
|
|
||||||
|
return { languageOptions, handleLanguageChange };
|
||||||
|
}
|
||||||
16
src/Hooks/useEventListener.tsx
Normal file
16
src/Hooks/useEventListener.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
export const useEventListener = (eventType:any, callback:any, element = window) => {
|
||||||
|
const callbackRef = useRef(callback);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
callbackRef.current = callback;
|
||||||
|
}, [callback]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = (e:any) => callbackRef.current(e);
|
||||||
|
element.addEventListener(eventType, handler);
|
||||||
|
|
||||||
|
return () => element.removeEventListener(eventType, handler);
|
||||||
|
}, [eventType, element]);
|
||||||
|
};
|
||||||
16
src/Hooks/useFormField.tsx
Normal file
16
src/Hooks/useFormField.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { useField, useFormikContext } from 'formik';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Field } from 'formik';
|
||||||
|
|
||||||
|
const useFormField = (name: string, props?: any) => {
|
||||||
|
const [field, meta] = useField({ name, ...props });
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const formik = useFormikContext<any>();
|
||||||
|
const isError = meta.touched && meta.error;
|
||||||
|
|
||||||
|
const errorMsg = meta.error ? t(meta.error.toString()) : '';
|
||||||
|
|
||||||
|
return { Field, field, meta, formik, isError, errorMsg, t };
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useFormField;
|
||||||
15
src/Hooks/useFormatToSelect.tsx
Normal file
15
src/Hooks/useFormatToSelect.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
const useFormatToSelect = (Data : any) => {
|
||||||
|
const format = (data :any) => {
|
||||||
|
if (!data) return [];
|
||||||
|
|
||||||
|
return data.map((item :any) => ({
|
||||||
|
value: item?.id,
|
||||||
|
label: item?.name,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
return format(Data);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useFormatToSelect;
|
||||||
|
|
||||||
9
src/Hooks/useImageError.tsx
Normal file
9
src/Hooks/useImageError.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const useImageError = ({currentTarget}:any) => {
|
||||||
|
const ErrorImage = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/832px-No-Image-Placeholder.svg.png"
|
||||||
|
currentTarget.onerror = null;
|
||||||
|
currentTarget.src=`${ErrorImage}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useImageError
|
||||||
21
src/Hooks/useLoadingState.tsx
Normal file
21
src/Hooks/useLoadingState.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
function useLoadingState(initialValue: boolean, duration: number): [boolean, () => void] {
|
||||||
|
const [loading, setLoading] = useState<boolean>(initialValue);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timeoutId = setTimeout(() => {
|
||||||
|
setLoading(false);
|
||||||
|
}, duration);
|
||||||
|
|
||||||
|
return () => clearTimeout(timeoutId);
|
||||||
|
}, [duration]);
|
||||||
|
|
||||||
|
const resetLoading = () => {
|
||||||
|
setLoading(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return [loading, resetLoading];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useLoadingState;
|
||||||
20
src/Hooks/useNavigateOnSuccess.ts
Normal file
20
src/Hooks/useNavigateOnSuccess.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import React, { useEffect } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
|
||||||
|
|
||||||
|
function useNavigateOnSuccess(isSuccess :boolean , to_path:string , callbackAfterSuccess?:any) {
|
||||||
|
|
||||||
|
const navigate = useNavigate()
|
||||||
|
useEffect(()=>{
|
||||||
|
|
||||||
|
if(isSuccess){
|
||||||
|
if (typeof callbackAfterSuccess === 'function') {
|
||||||
|
callbackAfterSuccess()
|
||||||
|
}
|
||||||
|
navigate(to_path )
|
||||||
|
}
|
||||||
|
},[isSuccess])
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useNavigateOnSuccess
|
||||||
38
src/Hooks/usePagination.tsx
Normal file
38
src/Hooks/usePagination.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { Pagination } from "antd";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
|
||||||
|
|
||||||
|
export const PaginationBody = ({ data }: any) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
const pagination = location?.search || '';
|
||||||
|
const currentPage = parseInt(new URLSearchParams(location.search).get("page") || "1", 10);
|
||||||
|
const pageSize = parseInt(new URLSearchParams(location.search).get("per_page") || "15", 10);
|
||||||
|
|
||||||
|
const [searchParams] = useSearchParams()
|
||||||
|
const onChange = (page: number, pageSize?: number) => {
|
||||||
|
navigate(`?page=${page}&per_page=${pageSize || data?.per_page}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onShowSizeChange = (current: number, pageSize: number) => {
|
||||||
|
navigate(`?page=${current}&per_page=${pageSize}`);
|
||||||
|
};
|
||||||
|
const [t] = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Pagination
|
||||||
|
className='text-center mt-3 paginateStyle'
|
||||||
|
total={data}
|
||||||
|
showTotal={(total: any) => `${t(`Total`)} ${total} ${t(`items`)}`}
|
||||||
|
pageSize={pageSize}
|
||||||
|
pageSizeOptions={[6, 15, 22, 30]}
|
||||||
|
defaultCurrent={currentPage}
|
||||||
|
current={currentPage}
|
||||||
|
onChange={onChange}
|
||||||
|
onShowSizeChange={onShowSizeChange}
|
||||||
|
// showQuickJumper
|
||||||
|
showSizeChanger
|
||||||
|
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
18
src/Hooks/useWindowSize.tsx
Normal file
18
src/Hooks/useWindowSize.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useEventListener } from "./useEventListener";
|
||||||
|
|
||||||
|
export const useWindowSize = () => {
|
||||||
|
const [windowSize, setWindowSize] = useState({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEventListener("resize", () => {
|
||||||
|
setWindowSize({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return windowSize;
|
||||||
|
};
|
||||||
33
src/Layout/Dashboard/AddButton/AddButton.tsx
Normal file
33
src/Layout/Dashboard/AddButton/AddButton.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React from 'react'
|
||||||
|
import './Add_Button.scss'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { usePageState } from '../../../lib/statemangment/LayoutPagestate'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const AddButton = (props :any) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='Add_Button' {...props} >
|
||||||
|
<button >
|
||||||
|
<span >
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
>
|
||||||
|
<path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
|
||||||
|
</svg>{" "}
|
||||||
|
{t("Add")}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddButton
|
||||||
41
src/Layout/Dashboard/AddButton/AddButtonLayout.tsx
Normal file
41
src/Layout/Dashboard/AddButton/AddButtonLayout.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import React from 'react'
|
||||||
|
import './Add_Button.scss'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { usePageState } from '../../../lib/statemangment/LayoutPagestate'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const AddButtonLayout = ({haveAddModal}:any) => {
|
||||||
|
const { setIsOpenAddModel , setObjectToEdit } = usePageState()
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='Add_Button' onClick={()=>{
|
||||||
|
if(haveAddModal){
|
||||||
|
|
||||||
|
setIsOpenAddModel()
|
||||||
|
}
|
||||||
|
setObjectToEdit(null)
|
||||||
|
|
||||||
|
}}>
|
||||||
|
<button>
|
||||||
|
<span >
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
>
|
||||||
|
<path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
|
||||||
|
</svg>{" "}
|
||||||
|
{t("Add")}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddButtonLayout
|
||||||
77
src/Layout/Dashboard/AddButton/Add_Button.scss
Normal file
77
src/Layout/Dashboard/AddButton/Add_Button.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
.Add_Button{
|
||||||
|
button {
|
||||||
|
border: 2px solid var(--primary);
|
||||||
|
background-color: var(--primary);
|
||||||
|
border-radius: 0.5vw;
|
||||||
|
height: 40px;
|
||||||
|
width: 70px;
|
||||||
|
font-size: 1vw ;
|
||||||
|
display: flex; justify-content: center; align-items: center;
|
||||||
|
box-shadow: 2px 2px 7px 0 var(--primary);
|
||||||
|
}
|
||||||
|
button span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--bg);
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color:var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.Add_Button{
|
||||||
|
button{
|
||||||
|
font-size: 2vw !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 470px) {
|
||||||
|
.Add_Button{
|
||||||
|
button{
|
||||||
|
font-size: 3vw !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Add_Button_notification{
|
||||||
|
button {
|
||||||
|
border: 2px solid var(--primary);
|
||||||
|
background-color: var(--primary);
|
||||||
|
border-radius: 0.5vw;
|
||||||
|
height: 40px;
|
||||||
|
width: 180px;
|
||||||
|
font-size: 1vw ;
|
||||||
|
display: flex; justify-content: center; align-items: center;
|
||||||
|
box-shadow: 2px 2px 7px 0 var(--primary);
|
||||||
|
}
|
||||||
|
button span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--bg);
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color:var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.Add_Button_notification{
|
||||||
|
button{
|
||||||
|
font-size: 2vw !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 470px) {
|
||||||
|
.Add_Button_notification{
|
||||||
|
button{
|
||||||
|
font-size: 3vw !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/Layout/Dashboard/DashBody.tsx
Normal file
32
src/Layout/Dashboard/DashBody.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import { Spinner } from "reactstrap"
|
||||||
|
import { QueryStatusEnum } from "../../config/QueryStatus"
|
||||||
|
import LoadingPage from "../app/LoadingPage"
|
||||||
|
import { useTranslation } from "react-i18next"
|
||||||
|
import { BsEmojiFrown } from "react-icons/bs";
|
||||||
|
import ErrorPage from "../app/ErrorPage";
|
||||||
|
|
||||||
|
|
||||||
|
const DashBody = ({ children , status }: { children: React.ReactNode ,status?:QueryStatusEnum }) => {
|
||||||
|
const {t} = useTranslation();
|
||||||
|
|
||||||
|
// Add You Custom Loadaing Page
|
||||||
|
if(status === QueryStatusEnum.LOADING){
|
||||||
|
|
||||||
|
return <LoadingPage />
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Your Custom Error Page
|
||||||
|
if(status === QueryStatusEnum.ERROR){
|
||||||
|
return (
|
||||||
|
<ErrorPage/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='Page' >
|
||||||
|
{ children }
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DashBody
|
||||||
27
src/Layout/Dashboard/DashHeader.tsx
Normal file
27
src/Layout/Dashboard/DashHeader.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import React from "react";
|
||||||
|
import AddButtonLayout from "./AddButton/AddButtonLayout";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
interface DashHeaderProp {
|
||||||
|
title: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
showAddButton?: boolean;
|
||||||
|
haveAddModal?:boolean
|
||||||
|
}
|
||||||
|
const DashHeader = ({
|
||||||
|
children,
|
||||||
|
title,
|
||||||
|
haveAddModal= true ,
|
||||||
|
showAddButton = true,
|
||||||
|
}: DashHeaderProp) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
return (
|
||||||
|
<div className="Page_Header">
|
||||||
|
<h3>{t(`${title}`)}</h3>
|
||||||
|
{children}
|
||||||
|
{showAddButton && <AddButtonLayout haveAddModal={haveAddModal}/>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashHeader;
|
||||||
42
src/Layout/Dashboard/FormPage.tsx
Normal file
42
src/Layout/Dashboard/FormPage.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { Formik, Form } from 'formik';
|
||||||
|
import React, { ReactNode } from 'react';
|
||||||
|
import { Button } from "reactstrap";
|
||||||
|
import * as Yup from 'yup';
|
||||||
|
|
||||||
|
interface FormValues {
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormPageProps {
|
||||||
|
handleSubmit: (values: any) => void
|
||||||
|
initialValues: FormValues;
|
||||||
|
validationSchema: any;
|
||||||
|
title?: string;
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const FormPage: React.FC<FormPageProps> = ({ children, handleSubmit, initialValues, validationSchema, title = "Edit Item" }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h4 className='text-bold'>{title}</h4>
|
||||||
|
<div className="Card">
|
||||||
|
<Formik
|
||||||
|
initialValues={initialValues}
|
||||||
|
validationSchema={validationSchema}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
>
|
||||||
|
{formik => (
|
||||||
|
<Form>
|
||||||
|
{children}
|
||||||
|
<div className='w-100 d-flex justify-content-center'>
|
||||||
|
<Button type='submit' color="primary" className='mt-4 w-25 text-center'>Submit</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FormPage;
|
||||||
67
src/Layout/Dashboard/FormikForm.tsx
Normal file
67
src/Layout/Dashboard/FormikForm.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
import { Formik, Form } from 'formik';
|
||||||
|
import React, { ReactNode } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from "reactstrap";
|
||||||
|
import * as Yup from 'yup';
|
||||||
|
|
||||||
|
interface FormValues {
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormikFormProps {
|
||||||
|
handleSubmit: (values: any) => void
|
||||||
|
initialValues: FormValues;
|
||||||
|
validationSchema: any;
|
||||||
|
title?: string;
|
||||||
|
children: ReactNode;
|
||||||
|
ButtonName?:string
|
||||||
|
}
|
||||||
|
const FormikForm: React.FC<FormikFormProps> = ({ children, handleSubmit, initialValues, validationSchema, title = "Add New Item" ,ButtonName="إضافة"}) => {
|
||||||
|
const [t]= useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Formik
|
||||||
|
initialValues={initialValues}
|
||||||
|
validationSchema={validationSchema}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
>
|
||||||
|
{formik => (
|
||||||
|
<Form >
|
||||||
|
<div className="Card">
|
||||||
|
{children}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FormikForm;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{/* <FormikForm
|
||||||
|
handleSubmit={() => {
|
||||||
|
|
||||||
|
}}
|
||||||
|
initialValues={() => {
|
||||||
|
return {
|
||||||
|
id: null,
|
||||||
|
name: "",
|
||||||
|
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
validationSchema={() => {
|
||||||
|
return Yup.object().shape({
|
||||||
|
name: Yup.string().required('required'),
|
||||||
|
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
|
||||||
|
>
|
||||||
|
|
||||||
|
</FormikForm> */}
|
||||||
77
src/Layout/Dashboard/LayoutModal.tsx
Normal file
77
src/Layout/Dashboard/LayoutModal.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
import { Form, Formik } from 'formik'
|
||||||
|
import React, { useEffect } from 'react'
|
||||||
|
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'
|
||||||
|
import { usePageState } from '../../lib/statemangment/LayoutPagestate'
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { LoadingButton } from '../../Components/Ui/LoadingButton';
|
||||||
|
import { QueryStatusEnum } from '../../config/QueryStatus';
|
||||||
|
|
||||||
|
interface LayoutModalProps {
|
||||||
|
isAddModal: boolean;
|
||||||
|
headerText: string;
|
||||||
|
handleSubmit: (values: any) => void;
|
||||||
|
getInitialValues: any;
|
||||||
|
getValidationSchema: any;
|
||||||
|
children: React.ReactNode;
|
||||||
|
status?:QueryStatusEnum
|
||||||
|
}
|
||||||
|
function LayoutModal({isAddModal , headerText , handleSubmit =()=>{} , getInitialValues , getValidationSchema,status ,children}:LayoutModalProps) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const {isOpenAddModel ,setIsOpenAddModel , setIsOpenEditModel ,isOpenEditModel , objectToEdit , CloseAllModal} = usePageState(state => state)
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
if(status === QueryStatusEnum.SUCCESS){
|
||||||
|
CloseAllModal()
|
||||||
|
}
|
||||||
|
},[status , CloseAllModal])
|
||||||
|
|
||||||
|
const [t] = useTranslation()
|
||||||
|
return (
|
||||||
|
<Modal centered isOpen={isAddModal ? isOpenAddModel :isOpenEditModel} size="lg" >
|
||||||
|
<ModalHeader className='ModalHeader' toggle={() => isAddModal ?setIsOpenAddModel() : setIsOpenEditModel()} >
|
||||||
|
{t(headerText)}
|
||||||
|
</ModalHeader>
|
||||||
|
{
|
||||||
|
|
||||||
|
(( objectToEdit != null && isOpenEditModel) || isOpenAddModel) &&
|
||||||
|
<Formik
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
initialValues={getInitialValues}
|
||||||
|
validationSchema={getValidationSchema}
|
||||||
|
>
|
||||||
|
|
||||||
|
{(formik) => (
|
||||||
|
<Form>
|
||||||
|
<ModalBody>
|
||||||
|
{children}
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter>
|
||||||
|
<Button
|
||||||
|
disabled={status === QueryStatusEnum.LOADING}
|
||||||
|
onClick={() => isAddModal ?setIsOpenAddModel() : setIsOpenEditModel()}
|
||||||
|
color="danger"
|
||||||
|
>
|
||||||
|
{t("cancel")}
|
||||||
|
</Button>
|
||||||
|
<LoadingButton
|
||||||
|
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
isLoading={status === QueryStatusEnum.LOADING}
|
||||||
|
>
|
||||||
|
{t(isAddModal ? "Add" :"edit")}
|
||||||
|
</LoadingButton>
|
||||||
|
</ModalFooter>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
}
|
||||||
|
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LayoutModal
|
||||||
39
src/Layout/Dashboard/LyTable.tsx
Normal file
39
src/Layout/Dashboard/LyTable.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
|
||||||
|
import DataTable from 'react-data-table-component';
|
||||||
|
import { Card, CardBody, Spinner } from 'reactstrap';
|
||||||
|
import { PaginationBody } from '../../Hooks/usePagination';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
const LyTable = (props?: any) => {
|
||||||
|
const {t} = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='LayoutBody'>
|
||||||
|
<Card>
|
||||||
|
<CardBody>
|
||||||
|
<DataTable
|
||||||
|
columns={props?.column}
|
||||||
|
data={props?.data}
|
||||||
|
progressPending={props?.isLoading}
|
||||||
|
noDataComponent={<h6 className="my-4">{t("no_records")}</h6>}
|
||||||
|
noHeader
|
||||||
|
pagination
|
||||||
|
progressComponent={<Spinner />}
|
||||||
|
|
||||||
|
{...(props.is_pagination && {
|
||||||
|
paginationServer: true,
|
||||||
|
paginationComponent: () => <PaginationBody data={props?.total} />
|
||||||
|
})}
|
||||||
|
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default LyTable
|
||||||
36
src/Layout/Dashboard/PageStructure.tsx
Normal file
36
src/Layout/Dashboard/PageStructure.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import React, { FC } from "react";
|
||||||
|
import StatusCard from "../../Extensions/Editor/StatusCard";
|
||||||
|
import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
interface PageStructureProps {
|
||||||
|
title?: string;
|
||||||
|
isLoading: boolean;
|
||||||
|
isError: boolean;
|
||||||
|
data?: any;
|
||||||
|
children:any
|
||||||
|
}
|
||||||
|
|
||||||
|
const PageStructure: FC<PageStructureProps> = ({
|
||||||
|
title,
|
||||||
|
isLoading,
|
||||||
|
isError,
|
||||||
|
data,
|
||||||
|
children,
|
||||||
|
}) => {
|
||||||
|
const {t} = useTranslation();
|
||||||
|
|
||||||
|
if (!data) return <StatusCard isLoading={isLoading} isError={isError} />;
|
||||||
|
return (
|
||||||
|
<Card className="Information_title">
|
||||||
|
{title && (
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>{t(title)}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
)}
|
||||||
|
<CardBody>{children}</CardBody>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageStructure;
|
||||||
56
src/Layout/Dashboard/SearchField.tsx
Normal file
56
src/Layout/Dashboard/SearchField.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
import { Input } from 'antd';
|
||||||
|
import { SearchProps } from 'antd/es/input'
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
|
const { Search } = Input;
|
||||||
|
|
||||||
|
const SearchField = ({ searchBy }: any) => {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [searchParams,] = useSearchParams();
|
||||||
|
const location = useLocation()
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
|
||||||
|
const [searchValue, setSearchValue] = useState(searchParams.get(searchBy ?? "search") || "");
|
||||||
|
|
||||||
|
const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
|
||||||
|
if (value || value !== "") {
|
||||||
|
navigate(`${location?.pathname}?${searchBy ?? "search"}=${value}`);
|
||||||
|
} else {
|
||||||
|
const params = new URLSearchParams(location.search);
|
||||||
|
params.delete(searchBy ?? "search");
|
||||||
|
navigate(`${location.pathname}?${params.toString()}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onChange = (e: any) => {
|
||||||
|
const value = e.target.value
|
||||||
|
setSearchValue(e.target.value);
|
||||||
|
if (value === "") {
|
||||||
|
const params = new URLSearchParams(location.search);
|
||||||
|
params.delete(searchBy ?? "search");
|
||||||
|
navigate(`${location.pathname}?${params.toString()}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='SearchField'
|
||||||
|
>
|
||||||
|
<Search
|
||||||
|
allowClear
|
||||||
|
enterButton={t("search")}
|
||||||
|
size="middle"
|
||||||
|
placeholder={t(searchBy ?? "search")}
|
||||||
|
onSearch={onSearch}
|
||||||
|
style={{ width: 250 }}
|
||||||
|
value={searchValue}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SearchField
|
||||||
39
src/Layout/Dashboard/SelectField.tsx
Normal file
39
src/Layout/Dashboard/SelectField.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { Select } from 'antd';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useLocation, useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const SelectField = ({ selectBy, lebel, option }: any) => {
|
||||||
|
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||||
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const searchParams = new URLSearchParams(location.search);
|
||||||
|
setSearchQuery(searchParams.get('search') || '');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
|
const handleSelectChange = (value: any) => {
|
||||||
|
if (value) {
|
||||||
|
console.log(`${location.pathname}?${selectBy}=${value}`);
|
||||||
|
navigate(`${location.pathname}?${selectBy}=${value}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='SelectField'>
|
||||||
|
<Select
|
||||||
|
placeholder={t(`${lebel}`)}
|
||||||
|
options={option}
|
||||||
|
size="large"
|
||||||
|
className={`w-100`}
|
||||||
|
allowClear
|
||||||
|
onChange={handleSelectChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(SelectField);
|
||||||
52
src/Layout/Dashboard/SelectWSearchField.tsx
Normal file
52
src/Layout/Dashboard/SelectWSearchField.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
import { Select } from 'antd';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useLocation, useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const SelectWSearchField = ({ selectBy, submiteBy, lebel, option }: any) => {
|
||||||
|
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||||
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const searchParams = new URLSearchParams(location.search);
|
||||||
|
setSearchQuery(searchParams.get('search') || '');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSearchChange = (value: any) => {
|
||||||
|
if (value || value !== "") {
|
||||||
|
navigate(`${location.pathname}?${selectBy}=${value}`);
|
||||||
|
} else {
|
||||||
|
const params = new URLSearchParams(location.search);
|
||||||
|
params.delete(selectBy ?? "search");
|
||||||
|
navigate(`${location.pathname}?${params.toString()}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectChange = (value: any) => {
|
||||||
|
if (value) {
|
||||||
|
console.log(`${location.pathname}?${submiteBy}=${value}`);
|
||||||
|
|
||||||
|
navigate(`${location.pathname}?${submiteBy}=${value}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='SelectWSearchField'>
|
||||||
|
<Select
|
||||||
|
placeholder={t(`${lebel}`)}
|
||||||
|
options={option}
|
||||||
|
size="large"
|
||||||
|
className={`w-100`}
|
||||||
|
allowClear
|
||||||
|
onChange={handleSelectChange}
|
||||||
|
showSearch
|
||||||
|
optionFilterProp="label"
|
||||||
|
onSearch={handleSearchChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(SelectWSearchField);
|
||||||
80
src/Layout/Dashboard/ViewPage.tsx
Normal file
80
src/Layout/Dashboard/ViewPage.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Card, CardHeader, CardTitle, CardBody, Button } from "reactstrap";
|
||||||
|
import { Formik, Form } from "formik";
|
||||||
|
import { LoadingButton } from "../../Components/Ui/LoadingButton";
|
||||||
|
import ProgressBar from "../../Components/Ui/ProgressBar";
|
||||||
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
|
import { usePageState } from "../../lib/statemangment/LayoutPagestate";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
type TViewPage ={
|
||||||
|
children: React.ReactNode,
|
||||||
|
getInitialValues:any,
|
||||||
|
getValidationSchema:any,
|
||||||
|
handleSubmit:any,
|
||||||
|
// BarStatus:any,
|
||||||
|
IsloadingButton:boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const ViewPage: React.FC<TViewPage>= ({children,getInitialValues, getValidationSchema,handleSubmit,IsloadingButton})=> {
|
||||||
|
|
||||||
|
const {objectToEdit,setObjectToEdit} = usePageState()
|
||||||
|
const {t} = useTranslation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
// console.log(BarStatus);
|
||||||
|
|
||||||
|
const navigateToParent = () => {
|
||||||
|
navigate(-1)
|
||||||
|
if(objectToEdit){
|
||||||
|
setObjectToEdit([])
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="ViewTapPage">
|
||||||
|
<CardHeader className="CardHeader" >
|
||||||
|
<CardTitle className="View_information">
|
||||||
|
{t("View_information")}
|
||||||
|
</CardTitle>
|
||||||
|
<Button onClick={() => { navigateToParent()}}> {t("back")} </Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
{
|
||||||
|
<Formik
|
||||||
|
enableReinitialize
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
initialValues={getInitialValues(objectToEdit ?? {})}
|
||||||
|
validationSchema={getValidationSchema()}
|
||||||
|
>
|
||||||
|
{(formik) => (
|
||||||
|
<Form>
|
||||||
|
{/* <HeadTabs tabs={tabs} /> */}
|
||||||
|
{children}
|
||||||
|
{
|
||||||
|
<>
|
||||||
|
|
||||||
|
<div className="d-flex mt-4 justify-content-center align-items-center">
|
||||||
|
<LoadingButton
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
isLoading={IsloadingButton}
|
||||||
|
|
||||||
|
>
|
||||||
|
{t("save")}
|
||||||
|
</LoadingButton>
|
||||||
|
{/* <Button disabled={isLoading} type="submit" color="primary"> {t("save")} </Button> */}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
}
|
||||||
|
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default ViewPage;
|
||||||
18
src/Layout/Dashboard/useCloseModal.ts
Normal file
18
src/Layout/Dashboard/useCloseModal.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import React, { useEffect } from 'react'
|
||||||
|
import { usePageState } from '../../lib/statemangment/LayoutPagestate'
|
||||||
|
|
||||||
|
function useCloseModal(statusClose:any) {
|
||||||
|
|
||||||
|
const {CloseAllModal} = usePageState()
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
|
||||||
|
if(statusClose){
|
||||||
|
CloseAllModal()
|
||||||
|
}
|
||||||
|
},[statusClose , CloseAllModal])
|
||||||
|
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useCloseModal
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user