166 lines
6.2 KiB
React
166 lines
6.2 KiB
React
import React, { useState } from "react";
|
|
//import getImage from "../../../utils/getImage";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import queryKeys from "../../../services/queryKeys";
|
|
import { getTemplateConfig } from "../../../services/services";
|
|
//import {Link} from "react-router-dom";
|
|
//import siteLinks from "../../../links/siteLinks";
|
|
import UploadModal from "./UploadModal";
|
|
|
|
const TemplateConfigure = ({ productData }) => {
|
|
const [selectedSectionDetails, setSelectedSectionDetails] = useState({});
|
|
|
|
const {
|
|
data: templateData,
|
|
isFetching,
|
|
isError,
|
|
error,
|
|
} = useQuery({
|
|
queryKey: queryKeys.myTemplateConfig,
|
|
queryFn: () => {
|
|
let reqData = {
|
|
token: localStorage.getItem("token"), // USER TOKEN
|
|
uid: localStorage.getItem("uid"), // USER UID
|
|
product_id: productData?.product_id,
|
|
};
|
|
return getTemplateConfig(reqData);
|
|
},
|
|
staleTime: 0,
|
|
});
|
|
|
|
const templateResponse = templateData?.data;
|
|
const templateImages = Array.isArray(templateResponse?.template_images?.data)
|
|
? templateResponse.template_images.data
|
|
: [];
|
|
console.log("templateResponse", templateResponse);
|
|
|
|
return (
|
|
<>
|
|
<div className="card card-statistics">
|
|
{isFetching ? (
|
|
<>
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p className="text-mute">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : isError ? (
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p className="text-danger">{error?.message}</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="card-header">
|
|
<div className="card-heading">
|
|
<h4 className="card-title" style={{ textTransform: "none" }}>
|
|
{templateResponse?.template_name}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="col-12">
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<h4>Image List</h4>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<ul className="list-unstyled">
|
|
{templateImages &&
|
|
templateImages.map((item) => {
|
|
const currImage = item?.default_val;
|
|
return (
|
|
<li className="media">
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
padding: "5px",
|
|
backgroundColor: "aliceblue",
|
|
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",
|
|
}}
|
|
src={currImage}
|
|
alt="image"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="media-body"
|
|
style={{ padding: "2px" }}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
textAlign: "right",
|
|
width: "100%",
|
|
}}
|
|
></div>
|
|
{/* [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>
|
|
{/* <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>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}{" "}
|
|
</div>
|
|
<UploadModal
|
|
productId={productData?.product_id}
|
|
selectedSectionDetails={selectedSectionDetails}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TemplateConfigure;
|