MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

image pop up added

Browse Source
This commit was merged in pull request #114.
This commit is contained in:
victorAnumudu
2026-01-20 17:15:58 +01:00
parent 9b9a7cc5da
commit 5ea1047356
4 changed files with 188 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/product/settingsTab/TemplateConfigure.jsx
+7 -64
View File
@@ -2,27 +2,19 @@ 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 {getTemplateConfig} from '../../../services/services';
import {Link} from "react-router-dom";
import siteLinks from "../../../links/siteLinks";
import UploadModal from './UploadModal';
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()
const {data: templateData, isFetching, isError, error} = useQuery({
queryKey: queryKeys.templateConfigItems,
queryKey: queryKeys.myTemplateConfig,
queryFn: () => {
let reqData = {
token: localStorage.getItem('token'), // USER TOKEN
@@ -41,45 +33,6 @@ const TemplateConfigure = ({productData}) => {
// const currentColorUID = templateResponse?.current_colorstyle_uid
// 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">
@@ -133,7 +86,7 @@ const TemplateConfigure = ({productData}) => {
<div className='d-flex justify-content-center align-items-center' style={{padding: '6px', width: '120px', height: '100px'}}>
<img className="mb-xxs-0 img-fluid"
style={{height: 'auto', maxHeight: '100px'}}
src={(selectedFile?.img && selectedFile?.id == item?.id) ? URL.createObjectURL(selectedFile?.img) : currImage} alt="image"/>
src={currImage} alt="image"/>
</div>
<div className="media-body" style={{padding: '2px'}}>
@@ -143,24 +96,13 @@ const TemplateConfigure = ({productData}) => {
}}>
<div style={{textAlign: 'right',width: '100%'}}></div>
{/* [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}/>
<label 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>
{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>
@@ -179,6 +121,7 @@ const TemplateConfigure = ({productData}) => {
} </div>
<UploadModal />
</>
}