Merge pull request #29 from danial117/admin_dev_8

update

.github/workflows/main.yml

@@ -5,9 +5,7 @@ on:
     branches:
       - admin
 
-  pull_request:
-    branches:
-      - admin
+
 
 jobs:
   ssh-folder-management:

package.json

@@ -18,6 +18,7 @@
     "ra-data-json-server": "^4.16.17",
     "react": "^18.2.0",
     "react-admin": "^4.16.0",
+    "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-router-dom": "^6.23.1",

src/Data Lists/Products/ProductsCreate.jsx

@@ -1,7 +1,7 @@
 
-import { Create, SimpleForm, TextInput, NumberInput,ImageInput, ImageField, useRecordContext } from 'react-admin';
+import { Create, SimpleForm, TextInput,ImageInput, ImageField } from 'react-admin';
 import { useState } from 'react';
-
+import CustomObjectArrayInput from '../../utils/CustomObjectArray';
 
 
 
@@ -12,7 +12,14 @@ const ProductCreate = (props) =>
 
     const [dietaryRestrictions, setDietaryRestrictions] = useState([]);
     const [dietaryRestrictionInput, setDietaryRestrictionInput] = useState('');
-
+    const [options, setOptions] = useState([]);
+
+    const handleOptionsChange = (updatedArray) => {
+
+        setOptions(updatedArray);
+    };
+
+
 
     const handleDietaryRestrictionsInputChange = (event) => {
         setDietaryRestrictionInput(event.target.value);
@@ -72,10 +79,21 @@ const ProductCreate = (props) =>
         if (data.name) formData.append('name', data.name);
         if (data.productImage) formData.append('file', data.productImage.rawFile);
         if (data.brand) formData.append('brand', data.brand);
-        if (data.price) formData.append('price', Number(data.price).toFixed(2));
-        if (data.options) formData.append('options', data.options);
+
+        if (options && options.length > 0) {
+            console.log(options)
+            options.forEach((option, index) => {
+                console.log(option)
+                formData.append(`options[${index}][option]`, option.option);
+                formData.append(`options[${index}][price]`, option.price.toString());
+            });
+        }
 
         // Append category if it exists and is not empty
+
+
+
+
         if (data.category && data.category.length > 0) {
            categories.forEach((cat, index) => {
                 formData.append(`category[${index}]`, cat);
@@ -120,8 +138,9 @@ return(
             <div className=' flex flex-col'>
             <TextInput  source="name" label="Name" />
             <TextInput  source="brand" label="Brand" />
+            <CustomObjectArrayInput onChange={handleOptionsChange} source='options' />
 
-            <NumberInput className='' source="price" label="Price" />
+
             <div className=''>
             <ImageInput  source="productImage" label="Upload Image">
               <ImageField source="src" title="title" />
@@ -131,11 +150,17 @@ return(
             <TextInput multiline className='' source="details.Warnings" label="Warnings" />
             <TextInput multiline className='' source="details.More" label="More" />
 
-            <TextInput  source="options" label="Options" />
+
             </div>
 
             <div className='w-full'>
 
+
+
+
+
+
+
                 <div>
                 <TextInput  multiline className='w-full'  value={categoriesInput} source="category" onChange={handleCategoriesInputChange}  label="Categories" />
                 <button type='button' className='bg-black text-white font-Abel py-2 px-4' onClick={handleAddCategories}>Enter</button>

src/Data Lists/Products/ProductsEdit.jsx

@@ -2,11 +2,12 @@ import { Edit, SimpleForm, TextInput, NumberInput,SaveButton,Toolbar, DeleteButt
 import CustomArrayInput from '../../utils/CustomArray';
 import { useState } from 'react';
 import CustomImageUpload from '../../utils/CustomImageupload';
-
+import CustomObjectArrayInput from '../../utils/CustomObjectArray';
 const ProductEdit = (props) => {
     const [dietaryRestrictions, setDietaryRestrictions] = useState([]);
     const [certifications, setCertifications] = useState([]);
     const [categories, setCategories] = useState([]);
+    const [options, setOptions] = useState([]);
     const [imageFile, setImageFile] = useState(null);
 
 
@@ -19,6 +20,10 @@ const ProductEdit = (props) => {
         setCertifications(updatedArray);
     };
 
+    const handleOptionsChange = (updatedArray) => {
+        setOptions(updatedArray);
+    };
+
     const handleCategoriesChange = (updatedArray) => {
         setCategories(updatedArray);
 
@@ -42,7 +47,30 @@ const ProductEdit = (props) => {
         if (data.name) formData.append('name', data.name);
         if (data.brand) formData.append('brand', data.brand);
         if (data.price) formData.append('price', Number(data.price).toFixed(2));
-        if (data.options) formData.append('options', data.options);
+
+        if (Array.isArray(options) && options.length > 0) {
+            options.forEach((option, index) => {
+                // Append each property of the option object with a unique key
+                formData.append(`options[${index}][option]`, option.option);
+                formData.append(`options[${index}][price]`, option.price);
+
+
+
+
+
+
+
+
+
+            });
+        }
+
+
+
+
+
+
+
 
         // Append category if it exists and is not empty
         if (data.category && categories.length > 0 ) {
@@ -97,15 +125,17 @@ const ProductEdit = (props) => {
                 <TextInput className='w-[50%]' source="name" />
                 <TextInput className='w-[50%]' source="brand" />
                 <NumberInput className='w-[50%]' source="price" />
-                <TextInput className='w-[50%]' source="options" />
-
+
+               
                 <TextInput multiline className='w-[50%]' source="details.Description" />
                 <TextInput multiline className='w-[50%]' source="details.Warnings" />
                 <TextInput multiline className='w-[50%]' source="details.More" />
-
+
+                <CustomObjectArrayInput source="options" label="Options" onChange={handleOptionsChange} />
                 <CustomArrayInput source="details.DietaryRestrictions" label="Dietary Restrictions" onChange={handleDietaryRestrictionsChange} />
                 <CustomArrayInput source="details.Certifications" label="Certificates" onChange={handleCertificationsChange} />
                 <CustomArrayInput source="category" label="Categories" onChange={handleCategoriesChange} />
+
 
             </SimpleForm>
         </Edit>

src/Data Lists/Products/ProductsList.jsx

@@ -7,50 +7,79 @@ import { List, Datagrid, TextField, useRecordContext, useResourceContext,CreateB
     TopToolbar,
     SearchInput,
     ShowButton,FilterForm,TextInput } from 'react-admin';
-
+    import { UploadFileRounded, AddPhotoAlternateRounded } from '@mui/icons-material';
+    import { useState } from 'react';
      import { Stack } from '@mui/material';
+     import CsvMenu from '../../utils/CSVFileHandling';
+     import FolderUploadMenu from '../../utils/uploadImagesFolder';
 
     const ImageField = ({ source }) => {
         const record = useRecordContext();
 
         if (!record ) return null;
-        return <img src={`${process.env.VITE_API_URL}/assets/products/sm/${record.productImage.small}`} alt="" style={{ maxWidth: '200px', height: '100px' }} />;
+        return <img src={`${process.env.VITE_API_URL}/assets/products/sm/${record.productImage?.small}`} alt="" style={{ maxWidth: '200px', height: '100px' }} />;
     };
 
 
     const postFilters = [
 
         <TextInput label="Product Name" source="name" defaultValue="" />,
         <TextInput label="Product Brand" source="brand" defaultValue="" />,
-        <TextInput label="Product Price" source="price" defaultValue="" />,
-        <TextInput label="Product Options" source="option" defaultValue="" />
-
 
+
+    ];
+
+
 
 
+    const ListToolbar = () => {
+
+        const [anchorEl, setAnchorEl] = useState(null);
+        const [anchorE2, setAnchorE2] = useState(null);
+
+        const handleClick = (event) => {
+            setAnchorEl(event.currentTarget);
+        };
+
 
+        const handleClose = () => {
+            setAnchorEl(null);
+        };
+
+        const FolderMenuClick = (event) => {
+            setAnchorE2(event.currentTarget);
+        };
+
 
+        const FolderMenuClose = () => {
+            setAnchorE2(null);
+        };
 
 
-
-
-
-
-
-    ];
-
-    const ListToolbar = () => (
-        <Stack direction="column"  >
+       return( <Stack direction="column"  >
             <FilterForm filters={postFilters} />
             <div >
                 <FilterButton filters={postFilters} />
                 <ExportButton/>
                 <CreateButton />
+
+                <UploadFileRounded
+                    style={{ margin: '4px', color: 'blue', cursor: 'pointer',fontSize:35 }}
+                    onClick={handleClick}
+                />
+                 <CsvMenu anchorEl={anchorEl} handleClose={handleClose} />
+                 <AddPhotoAlternateRounded
+                  style={{ margin: '4px', color: 'blue', cursor: 'pointer',fontSize:35 }}
+                  onClick={FolderMenuClick}
+                 />
+                 <FolderUploadMenu anchorE2={anchorE2} handleClose={FolderMenuClose}  />
+
 
 
             </div>
         </Stack>
     )
+}
 
 
 
@@ -64,7 +93,7 @@ const ProductsList = (props) =>{
             <ImageField />
             <TextField source="name" />
             <TextField source="brand" />
-            <TextField source="price" />
+
             <ShowButton />
 
 

src/Data Lists/contact/ContactShow.jsx

@@ -9,7 +9,9 @@ export const ContactShow = (props) => (
  <SimpleShowLayout>
 
             <TextField label='ID:' source="id" />
-            <TextField label='Brand Name:' source="name" />
+            <TextField label='User Name:' source="name" />
+            <TextField label='User Email:' source="email" />
+            <TextField label='User Message:' source="message" />
 
 
 

src/Login/loginPage.jsx

@@ -4,20 +4,27 @@ import BackgroundImage from '../assets/form.jpg'
 import {LockRounded} from '@mui/icons-material'
 import { useMediaQuery } from '@mui/material';
 import OtpPage from '../componenets/OTP_Validation';
+import SpinnerRotating from '../skeletons/spinner';
+
+
 
 const MyLoginPage = ({  }) => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [otp,setOtp]=useState(false)
     const apiUrl=process.env.VITE_API_URL
-
+    const [pending,setPending]=useState(false)
+
     const login = useLogin();
     const notify = useNotify();
     const md = useMediaQuery('(max-width:768px)');
     const lg = useMediaQuery('(max-width:1400px)');
+
+
 
     const handleSubmit = e => {
         e.preventDefault();
+        setPending(true)
         fetch(`${apiUrl}/admin/login`,{
             method:'POST',
             headers:{'Content-Type':'application/json'},
@@ -32,7 +39,10 @@ const MyLoginPage = ({  }) => {
             }
         }).catch(() =>
             notify('Invalid email or password')
-        );
+        ).finally(()=>{
+                setPending(false)
+        })
+        ;
     };
 
 
@@ -53,7 +63,7 @@ const MyLoginPage = ({  }) => {
           <OtpPage />)
         :
       (  <div style={{width:'100%',height:'100vh',backgroundImage: `linear-gradient(to right,rgba(0,0,0,0.5), rgba(0,0,0,0.1)), url(${BackgroundImage})`,backgroundPosition:'center',backgroundSize:'cover',display:'flex'}}>
-
+         {pending && <SpinnerRotating />}
 
         <form style={{background:'white', width:md?'60%':'40%',display:'flex',flexDirection:'column',gap:'20px',margin:'auto',padding:'2rem' }} onSubmit={handleSubmit}>