From 5ea104735673717615238b672d7abf8b45a7ce29 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 20 Jan 2026 17:15:58 +0100 Subject: [PATCH] image pop up added --- src/App.css | 7 + .../product/settingsTab/TemplateConfigure.jsx | 71 +------ .../product/settingsTab/UploadModal.jsx | 173 ++++++++++++++++++ src/services/queryKeys.js | 1 + 4 files changed, 188 insertions(+), 64 deletions(-) create mode 100644 src/component/product/settingsTab/UploadModal.jsx diff --git a/src/App.css b/src/App.css index e8c823c..d91867e 100644 --- a/src/App.css +++ b/src/App.css @@ -51,4 +51,11 @@ button{ .accordion-button, .accordion-button:not(.collapsed) { background-color: transparent!important; +} + +@media (min-width: 992px) { + .modal-50 { + min-width: 50%; + max-width: 50%; + } } \ No newline at end of file diff --git a/src/component/product/settingsTab/TemplateConfigure.jsx b/src/component/product/settingsTab/TemplateConfigure.jsx index 2ac5bc8..a02afaa 100644 --- a/src/component/product/settingsTab/TemplateConfigure.jsx +++ b/src/component/product/settingsTab/TemplateConfigure.jsx @@ -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 <>
@@ -133,7 +86,7 @@ const TemplateConfigure = ({productData}) => {
image + src={currImage} alt="image"/>
@@ -143,24 +96,13 @@ const TemplateConfigure = ({productData}) => { }}>
{/* [Change Image] */} - - + + {/* */}
{item?.name}
{item?.description}
- {(selectedFile.img && selectedFile?.id == item?.id) && -
- -
- }
@@ -179,6 +121,7 @@ const TemplateConfigure = ({productData}) => { } + } diff --git a/src/component/product/settingsTab/UploadModal.jsx b/src/component/product/settingsTab/UploadModal.jsx new file mode 100644 index 0000000..5d1bbff --- /dev/null +++ b/src/component/product/settingsTab/UploadModal.jsx @@ -0,0 +1,173 @@ +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'; + +export default function UploadModal() { + + const [selectedFiles, setSelectedFiles] = 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 modalRef = useRef(null) + + const dismissModal = () => { + const body = document.querySelector('body') + body.removeAttribute('style') + // body.classList.toggle('modal-open') + + const modalBackdrop = document.querySelectorAll('.modal-backdrop') + modalBackdrop.forEach(item => { + if (item) { + item.remove(); + } + }) + + const modal = Modal.getInstance(modalRef.current); + modal && modal.hide(); + }; + + const uploadFileMutation = useMutation({ + mutationFn: (fields) => { + if(!fields.file){ + throw({message: 'Please select a file first!'}) + } + // return uploadFile(fields) + // remember to close the modal + dismissModal() + 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) + } + + const {data, isFetching, isError, error} = useQuery({ + queryKey: queryKeys.my_files, + queryFn: () => { + let reqData = { + token: localStorage.getItem('token'), // USER TOKEN + uid: localStorage.getItem('uid') // USER UID + } + return getMediaFileList(reqData) + } + }) + + const mediaFileList = data?.data + // console.log('mediaFileList', mediaFileList) //file_list + + return ( + <> + {/* Vertical Center Modal */} +