pauload fixed

src/component/product/settingsTab/TemplateConfigure.jsx

@@ -9,6 +9,8 @@ import UploadModal from './UploadModal';
 
 const TemplateConfigure = ({productData}) => {
 
+    const [selectedSectionDetails, setSelectedSectionDetails] = useState({})
+
     // /panel/myproduct/template-config
 
     const queryClient = useQueryClient()
@@ -96,7 +98,7 @@ const TemplateConfigure = ({productData}) => {
                                                                     }}>
                                                                         <div style={{textAlign: 'right',width: '100%'}}></div>
                                                                         {/* [Change Image] */}
-                                                                        <label className='w-100 text-end' data-bs-toggle="modal" data-bs-target="#verticalCenter" style={{cursor: 'pointer'}}>[Change Image]</label>
+                                                                        <label onClick={()=>setSelectedSectionDetails(item)} className='w-100 text-end' data-bs-toggle="modal" data-bs-target="#verticalCenter" style={{cursor: 'pointer'}}>[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>
@@ -121,7 +123,7 @@ const TemplateConfigure = ({productData}) => {
 
 
             } </div>
-            <UploadModal />
+            <UploadModal productId={productData?.product_id} selectedSectionDetails={selectedSectionDetails} />
     </>
 }
 

src/component/product/settingsTab/UploadModal.jsx

@@ -2,21 +2,24 @@ import React, { useRef, useState } from 'react'
 import { Modal } from "bootstrap";
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
 import queryKeys from '../../../services/queryKeys';
-import {getMediaFileList, getTemplateConfig, uploadFile} from '../../../services/services';
+import {getMediaFileList, templateMediaSet} from '../../../services/services';
 
-export default function UploadModal() {
+export default function UploadModal({productId, selectedSectionDetails}) {
 
-    const [selectedFiles, setSelectedFiles] = useState([])
+    const queryClient = useQueryClient()
+    
+    const [selectedFile, setSelectedFile] = useState('')
 
-    const handleSelectedFiles = (file_uid) => {
-        if(selectedFiles.length && selectedFiles.includes(file_uid)){
-            let indexOfItem = selectedFiles.indexOf(file_uid)
-            let oldFiles = [...selectedFiles]
-            oldFiles.splice(indexOfItem, 1)
-            setSelectedFiles(oldFiles)
-        }else{
-            setSelectedFiles(prev => [...prev, file_uid])
-        }
+    const handleSelectedFile = (file_uid) => {
+        // if(selectedFile.length && selectedFile.includes(file_uid)){
+        //     let indexOfItem = selectedFile.indexOf(file_uid)
+        //     let oldFiles = [...selectedFile]
+        //     oldFiles.splice(indexOfItem, 1)
+        //     setSelectedFile(oldFiles)
+        // }else{
+        //     setSelectedFile(prev => [...prev, file_uid])
+        // }
+        setSelectedFile(file_uid)
     }
 
     const modalRef = useRef(null)
@@ -37,33 +40,29 @@ export default function UploadModal() {
         modal && modal.hide();
     };
 
-    const uploadFileMutation = useMutation({
+    const changeTemplateMediaSet = useMutation({
         mutationFn: (fields) => {
-            if(!fields.file){
+            if(!fields.file_uid){
                 throw({message: 'Please select a file first!'})
             }
-            // return uploadFile(fields)
-            // remember to close the modal
-            dismissModal()
-            setTimeout(()=>{
-                uploadFileMutation.reset()
-            }, 3000)
-        },
+            return templateMediaSet(fields)
+            },
         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,
-            // })
+            if(res.data.resultCode != '0'){
+                throw({message: res?.data?.resultDescription})
+            }
+            setSelectedFile('')
+            dismissModal() // to close modal
+            queryClient.refetchQueries({
+                queryKey: [...queryKeys.myTemplateConfig],
+                // type: 'active',
+                // exact: true,
+            })
         },
         onSettled: () => {
             setTimeout(()=>{
-                uploadFileMutation.reset()
+                changeTemplateMediaSet.reset()
             }, 3000)
         }
     })
@@ -71,10 +70,13 @@ export default function UploadModal() {
     const handleUpload = () => {
         let reqData = {
             token: localStorage.getItem("token"), // USER TOKEN
-            member_uid: localStorage.getItem("uid"), // USER UID
-            // file: selectedFile?.img
+            uid: localStorage.getItem("uid"), // USER UID
+            product_id: productId,
+            file_uid: selectedFile,
+            image_id: selectedSectionDetails?.id
         };
-        uploadFileMutation.mutate(reqData)
+        // console.log('reqData', reqData)
+        changeTemplateMediaSet.mutate(reqData)
     }
 
     const {data, isFetching, isError, error} = useQuery({
@@ -121,9 +123,9 @@ export default function UploadModal() {
                                 {mediaFileList?.file_list?.map(item => {
                                     const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
                                     return(
-                                        <div onClick={()=>handleSelectedFiles(item?.file_uid)} className={`p-3 text-center col-4`} style={{cursor: 'pointer'}}>
-                                            <div className={`p-3 ${selectedFiles.includes(item?.file_uid) && 'bg-light'}`}>
-                                                <img key={item?.file_uid} className="img-fluid" src={file_url} alt='file-image' />
+                                        <div onClick={()=>handleSelectedFile(item?.file_uid)} className={`p-3 text-center col-4`} style={{cursor: 'pointer'}}>
+                                            <div className={`p-3 ${(selectedFile == item?.file_uid) && 'bg-light'}`} style={{Height: '250px'}}>
+                                                <img key={item?.file_uid} className="img-fluid" style={{}} src={file_url} alt='file-image' />
                                             </div>
                                         </div>
                                     )
@@ -135,33 +137,26 @@ export default function UploadModal() {
                                 }
                             </div>
                         }
-                        {/* <div style={{fontSize: '18px'}} className="" dangerouslySetInnerHTML={{__html: saleText}}/> */}
-                        {/* {mutation.error &&
+                        {changeTemplateMediaSet.error &&
                         <>
                             <div className="col-12">
-                            <p className='text-danger'>{mutation.error.message}</p>
+                            <p className='text-danger'>{changeTemplateMediaSet.error.message}</p>
                         </div>
                         </>
                         }
-                            {mutation.isSuccess &&
+                        {changeTemplateMediaSet.isSuccess &&
                         <>
                             <div className="col-12">
                                 <p className='text-success'>{'subscription is successful'}</p>
                             </div>
                         </>
-                        } */}
-
-                        {/* {requestStatus.message && (
-                        <div className="col-12">
-                            <p className={`p-2 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.message}</p>
-                        </div>
-                        )} */}
+                        }
 
                     </div>
                     <div className="modal-footer">
                         <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
-                        {selectedFiles.length > 0 &&
-                            <button type="button" className="btn btn-primary" disabled={uploadFileMutation?.isPending || uploadFileMutation?.isSuccess} onClick={handleUpload}>{uploadFileMutation?.isPending ? 'Upload...' : uploadFileMutation?.isSuccess ? 'Uploaded' : 'Upload'}</button>
+                        {selectedFile &&
+                            <button type="button" className="btn btn-primary" disabled={changeTemplateMediaSet?.isPending || changeTemplateMediaSet?.isSuccess} onClick={handleUpload}>{changeTemplateMediaSet?.isPending ? 'Applying...' : changeTemplateMediaSet?.isSuccess ? 'Applied' : 'Apply'}</button>
                         }
                     </div>
                 </div>

src/services/services.js

@@ -298,6 +298,14 @@ export const uploadFile = (reqData) => {
     return postAuxEnd(`/upload/webfiles`, postData, true)
 }
 
+// FUNCTION TO CHANGE TEMPLATE MEDIA SET
+export const templateMediaSet = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/template-media-set`, postData, false)
+}
+
 export const getReportsTopicsList = (reqData) => {
     let postData = {
         ...reqData,