Merge branch 'image-list-resized' of MERMS/MermsPanelReactJS into master

src/component/product/settingsTab/TemplateConfigure.jsx

@@ -1,15 +1,22 @@
-import React, {memo} from 'react'
+import React, {memo, useState} from 'react'
 import getImage from "../../../utils/getImage";
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
 import queryKeys from '../../../services/queryKeys';
 import {
     getTemplateConfig,
+    uploadFile,
 } from '../../../services/services';
 import {Link} from "react-router-dom";
 import siteLinks from "../../../links/siteLinks";
 
 const TemplateConfigure = ({productData}) => {
 
+    const [selectedFile, setSelectedFile] = useState({id: '', img: ''});
+
+    const handleFileChange = (event) => {
+        setSelectedFile({id: event.target.id, img:event.target.files[0]});
+    };
+
     // /panel/myproduct/template-config
 
     const queryClient = useQueryClient()
@@ -35,6 +42,45 @@ const TemplateConfigure = ({productData}) => {
     // const color_styles = templateResponse?.color_styles
     // const custom_template_name = templateResponse?.custom_template_name
     //
+
+    const uploadFileMutation = useMutation({
+        mutationFn: (fields) => {
+            if(!fields.file){
+                throw({message: 'Please select a file first!'})
+            }
+            // return uploadFile(fields)
+            setTimeout(()=>{
+                uploadFileMutation.reset()
+            }, 3000)
+        },
+        onSuccess: (res) => {
+            // console.log('res', res.data)
+            // if(res.data.resultCode != '0' || !res?.data?.pending_uid){
+            //     throw({message: res?.data?.resultDescription})
+            // }
+            setSelectedFile({id: '', img: ''})
+            // queryClient.refetchQueries({
+            //     queryKey: [...queryKeys.my_files],
+            //     type: 'active',
+            //     exact: true,
+            // })
+        },
+        onSettled: () => {
+            setTimeout(()=>{
+                uploadFileMutation.reset()
+            }, 3000)
+        }
+    })
+
+    const handleUpload = () => {
+        let reqData = {
+            token: localStorage.getItem("token"), // USER TOKEN
+            member_uid: localStorage.getItem("uid"), // USER UID
+            file: selectedFile?.img
+        };
+        uploadFileMutation.mutate(reqData)
+    }
+
     return <>
         <div className="card card-statistics">
             {isFetching ?
@@ -84,9 +130,10 @@ const TemplateConfigure = ({productData}) => {
                                                                 margin: '2px',
                                                                 maxHeight: '150px'
                                                             }}>
-                                                                <div style={{width: '50%', padding: '2px'}}>
+                                                                <div style={{padding: '2px'}}>
                                                                     <img className="mr-5 mb-3 mb-xxs-0 img-fluid"
-                                                                         src={currImage} alt="image"/>
+                                                                    style={{width: 'auto', height: '100px',}}
+                                                                         src={(selectedFile?.img && selectedFile?.id == item?.id) ? URL.createObjectURL(selectedFile?.img) : currImage} alt="image"/>
                                                                 </div>
 
                                                                 <div className="media-body" style={{padding: '2px'}}>
@@ -95,13 +142,25 @@ const TemplateConfigure = ({productData}) => {
                                                                         flexDirection: 'column'
                                                                     }}>
                                                                         <div style={{textAlign: 'right',width: '100%'}}></div>
-                                                                        [Change Image]
+                                                                        {/* [Change Image] */}
+                                                                        <label htmlFor={item?.id}>[Change Image]</label>
+                                                                        <input id={item?.id} name={item?.id} className="d-none form-control form-control-sm" type="file" onChange={handleFileChange}/>
                                                                         <div>
                                                                             <h5 className="mt-0 mb-1">{item?.name}</h5>
                                                                             {item?.description}
                                                                         </div>
                                                                     </div>
-
+                                                                    {(selectedFile.img && selectedFile?.id == item?.id) &&
+                                                                    <div style={{width: '100%', textAlign: 'right'}}>
+                                                                        <button
+                                                                            className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0"
+                                                                            onClick={handleUpload} 
+                                                                            disabled={!selectedFile?.img || uploadFileMutation.isPending || uploadFileMutation.isSuccess}
+                                                                        >
+                                                                            {uploadFileMutation.isPending ? 'Loading' : uploadFileMutation.isSuccess ? 'Uploaded' : 'Upload'}
+                                                                        </button>
+                                                                    </div>
+                                                                    }
                                                                 </div>
                                                             </div>