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

fixed image size

Browse Source
This commit was merged in pull request #112.
This commit is contained in:
victorAnumudu
2026-01-19 19:36:21 +01:00
parent 597a45dcba
commit 6884aa19b2
1 changed files with 64 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/product/settingsTab/TemplateConfigure.jsx
+64 -5
View File
@@ -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>