moaz_dw/mns-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git.point-dev.net/moaz_dw/mns-front

Browse Source
This commit is contained in:
Moaz Dawalibi 2024-07-31 11:52:07 +03:00
commit 390bfb1678
8 changed files with 152 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html Normal file
View File

@ -0,0 +1,19 @@
<!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>Dashboard - Structure</title>
</head>
<script type="module" src="/src/index.tsx"></script>
<body>
<div id="root"></div>
</body>
</html>

11
package.json
View File

@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@ant-design/icons": "^5.4.0",
"@emotion/styled": "^11.11.0", "@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.19", "@mui/icons-material": "^5.14.19",
"@react-google-maps/api": "^2.19.2", "@react-google-maps/api": "^2.19.2",
@ -65,9 +66,9 @@
"zustand": "^4.4.5" "zustand": "^4.4.5"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "vite",
"build": "react-scripts build", "build": "vite build",
"test": "react-scripts test", "serve": "vite preview",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"g:api": "node src/Extensions/FileGenerator/generateApi.js", "g:api": "node src/Extensions/FileGenerator/generateApi.js",
"g:column": "node src/Extensions/FileGenerator/generateColumn.js", "g:column": "node src/Extensions/FileGenerator/generateColumn.js",
@ -95,6 +96,8 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@types/react-toggle": "^4.0.5" "@types/react-toggle": "^4.0.5",
"@vitejs/plugin-react": "^4.3.1",
"vite": "^5.3.5"
} }
} }

2
public/index.html
View File

@ -10,6 +10,8 @@
<title>Dashboard - Structure</title> <title>Dashboard - Structure</title>
</head> </head>
<script type="module" src="/src/index.tsx"></script>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
src.zip
View File

Binary file not shown.

1
src/Components/Columns/ColumnsImage.tsx
View File

@ -8,7 +8,6 @@ import {
} from '@ant-design/icons'; } from '@ant-design/icons';
import React from 'react'; import React from 'react';
import { Image, Space } from 'antd'; import { Image, Space } from 'antd';
import { BaseURL, BaseURL_IMAGE } from '../../api/config';
const ColumnsImage= ({src}:any) => { const ColumnsImage= ({src}:any) => {

27
src/Components/ValidationField/View/File.tsx
View File

@ -1,9 +1,16 @@
<<<<<<< HEAD
import { Button, Upload, UploadFile } from 'antd' import { Button, Upload, UploadFile } from 'antd'
import useFormField from '../../../Hooks/useFormField'; import useFormField from '../../../Hooks/useFormField';
import { UploadOutlined } from '@ant-design/icons'; import { UploadOutlined } from '@ant-design/icons';
import { BaseURL, BaseURL_IMAGE } from '../../../api/config'; import { BaseURL, BaseURL_IMAGE } from '../../../api/config';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ErrorMessage } from 'formik'; import { ErrorMessage } from 'formik';
=======
import { Button, Upload, UploadFile } from "antd";
import useFormField from "../../../Hooks/useFormField";
import React, { useMemo } from "react";
import { FaUpload } from "react-icons/fa";
>>>>>>> c6ee1f60784e6dd9e87132499ccbeb09ece51f63
const File = ({ name, label, onChange, isDisabled, accept, props }: any) => { const File = ({ name, label, onChange, isDisabled, accept, props }: any) => {
@ -43,6 +50,26 @@ const File = ({ name, label, onChange, isDisabled, accept, props }: any) => {
defaultFileList={[...fileList]} defaultFileList={[...fileList]}
onChange={onChange || FilehandleChange} onChange={onChange || FilehandleChange}
customRequest={customRequest} customRequest={customRequest}
<<<<<<< HEAD
=======
className={` w-100`}
id={name}
>
<Button
className={isError ? "isError w-100 " : " w-100"}
icon={<FaUpload />}
>
{placeholder
? t(`input.${placeholder}`)
: t("input.Click_to_upload_the_image")}
</Button>
<div className="Error_color"> {isError ? "required" : ""}</div>
{errorMsg}
</Upload>
</div>
);
};
>>>>>>> c6ee1f60784e6dd9e87132499ccbeb09ece51f63
> >
<Button className='w-100' icon={<UploadOutlined />}>{t("upload_image")}</Button> <Button className='w-100' icon={<UploadOutlined />}>{t("upload_image")}</Button>

86
src/Components/ValidationField/View/MaltyFile.tsx Normal file
View File

@ -0,0 +1,86 @@
import React, { useMemo } from "react";
import { Button, Upload } from "antd";
import useFormField from "../../../Hooks/useFormField";
import { FaUpload } from "react-icons/fa";
const MaltyFile = ({
name,
label,
onChange,
isDisabled,
placeholder,
className,
props,
}: any) => {
const { formik, t, isError } = useFormField(name, props);
let imageUrl = formik?.values?.[name] ?? null;
// Memoizing the fileList to prevent unnecessary recalculations
const fileList = useMemo(() => {
return imageUrl
? imageUrl.map((file: any, index: number) => {
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 || "",
};
})
: [];
}, [imageUrl]); // Dependency array ensures it recalculates only when imageUrl changes
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(`input.${label || name}`)}
</label>
<Upload
disabled={isDisabled}
listType="picture"
fileList={fileList} // Using memoized fileList
onChange={onChange || FilehandleChange}
customRequest={customRequest}
className={`${className} w-100`}
multiple // Allow multiple files to be selected
id={name}
>
<Button
className={isError ? "isError w-100" : "w-100"}
icon={<FaUpload />}
>
{t(`input.` + placeholder) ?? t("input.upload_image")}
</Button>
<div className="Error_color">{isError ? "required" : ""}</div>
</Upload>
</div>
);
};
export default MaltyFile;

11
vite.config.js Normal file
View File

@ -0,0 +1,11 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(() => {
return {
build: {
outDir: 'build',
},
plugins: [react()],
};
});