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

templAte fix

Browse Source
This commit is contained in:
Olusesan Ameye
2026-05-03 13:55:52 -04:00
parent d950988e62
commit 0794dfb8e0
1 changed files with 152 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/product/settingsTab/TemplateConfigure.jsx
+103 -68
View File
@@ -1,67 +1,66 @@
import React, {useState} from 'react' import React, { useState } from "react";
//import getImage from "../../../utils/getImage"; //import getImage from "../../../utils/getImage";
import { useQuery, useQueryClient} from '@tanstack/react-query'; import { useQuery, useQueryClient } from "@tanstack/react-query";
import queryKeys from '../../../services/queryKeys'; import queryKeys from "../../../services/queryKeys";
import {getTemplateConfig} from '../../../services/services'; import { getTemplateConfig } from "../../../services/services";
//import {Link} from "react-router-dom"; //import {Link} from "react-router-dom";
//import siteLinks from "../../../links/siteLinks"; //import siteLinks from "../../../links/siteLinks";
import UploadModal from './UploadModal'; import UploadModal from "./UploadModal";
const TemplateConfigure = ({ productData }) => { const TemplateConfigure = ({ productData }) => {
const [selectedSectionDetails, setSelectedSectionDetails] = useState({});
const [selectedSectionDetails, setSelectedSectionDetails] = useState({}) const {
data: templateData,
// /panel/myproduct/template-config isFetching,
isError,
//const queryClient = useQueryClient() error,
} = useQuery({
const {data: templateData, isFetching, isError, error} = useQuery({
queryKey: queryKeys.myTemplateConfig, queryKey: queryKeys.myTemplateConfig,
queryFn: () => { queryFn: () => {
let reqData = { let reqData = {
token: localStorage.getItem('token'), // USER TOKEN token: localStorage.getItem("token"), // USER TOKEN
uid: localStorage.getItem('uid'), // USER UID uid: localStorage.getItem("uid"), // USER UID
product_id: productData?.product_id product_id: productData?.product_id,
} };
return getTemplateConfig(reqData) return getTemplateConfig(reqData);
}, },
staleTime: 0 staleTime: 0,
}) });
const templateResponse = templateData?.data const templateResponse = templateData?.data;
const templateImages = templateResponse?.template_images?.data; const templateImages = Array.isArray(templateResponse?.template_images?.data)
// debugger; ? templateResponse.template_images.data
: [];
console.log("templateResponse", templateResponse); console.log("templateResponse", templateResponse);
// const currentColorUID = templateResponse?.current_colorstyle_uid
// const color_styles = templateResponse?.color_styles
// const custom_template_name = templateResponse?.custom_template_name
return <> return (
<>
<div className="card card-statistics"> <div className="card card-statistics">
{isFetching ? {isFetching ? (
<> <>
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<p className='text-mute'>Loading...</p> <p className="text-mute">Loading...</p>
</div> </div>
</div> </div>
</> </>
: isError ? ) : isError ? (
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<p className='text-danger'>{error?.message}</p> <p className="text-danger">{error?.message}</p>
</div> </div>
</div> </div>
: ) : (
<> <>
<div className="card-header"> <div className="card-header">
<div className="card-heading"> <div className="card-heading">
<h4 className="card-title" <h4 className="card-title" style={{ textTransform: "none" }}>
style={{textTransform: 'none'}}>{templateResponse?.template_name}</h4> {templateResponse?.template_name}
</h4>
</div> </div>
</div> </div>
<div> <div>
<div className="col-12"> <div className="col-12">
<div> <div>
@@ -72,59 +71,95 @@ const TemplateConfigure = ({productData}) => {
</div> </div>
<div> <div>
<ul className="list-unstyled"> <ul className="list-unstyled">
{templateImages && templateImages.map( {templateImages &&
(item) => { templateImages.map((item) => {
const currImage = item?.default_val; const currImage = item?.default_val;
return ( return (
<li className="media"> <li className="media">
<div style={{ <div
display: 'flex', style={{
flexDirection: 'row', display: "flex",
padding: '5px', flexDirection: "row",
backgroundColor: 'aliceblue', padding: "5px",
margin: '2px', backgroundColor: "aliceblue",
maxHeight: '150px' margin: "2px",
}}> maxHeight: "150px",
<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'}} <div
src={currImage} alt="image"/> 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={currImage}
alt="image"
/>
</div> </div>
<div className="media-body" style={{padding: '2px'}}> <div
<div style={{ className="media-body"
display: 'flex', style={{ padding: "2px" }}
flexDirection: 'column' >
}}> <div
<div style={{textAlign: 'right',width: '100%'}}></div> style={{
display: "flex",
flexDirection: "column",
}}
>
<div
style={{
textAlign: "right",
width: "100%",
}}
></div>
{/* [Change Image] */} {/* [Change Image] */}
<label onClick={()=>setSelectedSectionDetails(item)} 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}/> */} {/* <input id={item?.id} name={item?.id} className="d-none form-control form-control-sm" type="file" onChange={handleFileChange}/> */}
<div> <div>
<h5 className="mt-0 mb-1">{item?.name}</h5> <h5 className="mt-0 mb-1">
{item?.name}
</h5>
{item?.description} {item?.description}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
) );
} })}
)
}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</> </>
)}{" "}
</div>
} </div> <UploadModal
<UploadModal productId={productData?.product_id} selectedSectionDetails={selectedSectionDetails} /> productId={productData?.product_id}
selectedSectionDetails={selectedSectionDetails}
/>
</> </>
} );
};
export default TemplateConfigure export default TemplateConfigure;