text truncated

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%;
+  }
 }

src/component/home/Products.jsx

@@ -41,22 +41,27 @@ export default function Products() {
                 </div>
                 :
                 <div className="row m-b-20">
-                    {products && products.map((product, index) => (
-                        <div key={product.uid+index} className={`col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0`}>
-                            <Link to={productPath(product?.product_id)}  >
-                                <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
-                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className={`fa ${product?.product_icon} text-primary`}></i>
+                    {products && products.map((product, index) =>
+                    {
+                        // let productName = product?.name?.length > 14 ? product?.name?.substring(0, 14) + '...' : product?.name
+                        return (
+                            <div key={product.uid+index} className={`col-12 col-lg-6 mb-2 mb-xxl-0`}>
+                                <Link to={productPath(product?.product_id)}  >
+                                    <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
+                                        <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
+                                            <i className={`fa ${product?.product_icon} text-primary`}></i>
+                                        </div>
+                                        <div className="report-details overflow-hidden">
+                                            <p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
+                                            <h4><span className='w-100 d-inline-block text-truncate' style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
+                                        </div>
                                     </div>
-                                    <div className="report-details">
-                                        <p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
-                                        <h4><span className='text-truncate' style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
-                                    </div>
-                                </div>
-                            </Link>
-
-                        </div>
-                    ))}
+                                </Link>
+    
+                            </div>
+                        )
+                    } 
+                    )}
                 </div>
             }
                 <div className="apexchart-wrapper">

src/component/mymedia/MyMedia.js

@@ -117,7 +117,7 @@ console.log('imageLink', imageLink)
 
             <div className="row">
                 <div className="col-xl-6 col-xxl-4 m-b-30">
-                    <div className="card card-statistics h-50 mb-0 widget-support-list">
+                    <div className="card card-statistics mb-0 widget-support-list">
                         <div className="card-header">
                             <div className="card-heading">
                                 <h4 className="card-title">Upload File</h4>

src/component/product/settingsTab/TemplateConfigure.jsx

@@ -2,27 +2,21 @@ 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]});
-    };
+    const [selectedSectionDetails, setSelectedSectionDetails] = useState({})
 
     // /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 +35,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">
@@ -130,10 +85,10 @@ const TemplateConfigure = ({productData}) => {
                                                                 margin: '2px',
                                                                 maxHeight: '150px'
                                                             }}>
-                                                                <div style={{padding: '2px'}}>
-                                                                    <img className="mr-5 mb-3 mb-xxs-0 img-fluid"
-                                                                    style={{width: 'auto', height: '100px',}}
-                                                                         src={(selectedFile?.img && selectedFile?.id == item?.id) ? URL.createObjectURL(selectedFile?.img) : currImage} alt="image"/>
+                                                                <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'}}>
@@ -143,24 +98,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 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>
-                                                                    {(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 +123,7 @@ const TemplateConfigure = ({productData}) => {
 
 
             } </div>
+            <UploadModal productId={productData?.product_id} selectedSectionDetails={selectedSectionDetails} />
     </>
 }
 

src/component/product/settingsTab/UploadModal.jsx

@@ -0,0 +1,168 @@
+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, templateMediaSet} from '../../../services/services';
+
+export default function UploadModal({productId, selectedSectionDetails}) {
+
+    const queryClient = useQueryClient()
+    
+    const [selectedFile, setSelectedFile] = useState('')
+
+    const handleSelectedFile = (file_uid) => {
+        // if(selectedFile.length && selectedFile.includes(file_uid)){
+        //     let indexOfItem = selectedFile.indexOf(file_uid)
+        //     let oldFiles = [...selectedFile]
+        //     oldFiles.splice(indexOfItem, 1)
+        //     setSelectedFile(oldFiles)
+        // }else{
+        //     setSelectedFile(prev => [...prev, file_uid])
+        // }
+        setSelectedFile(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 changeTemplateMediaSet = useMutation({
+        mutationFn: (fields) => {
+            if(!fields.file_uid){
+                throw({message: 'Please select a file first!'})
+            }
+            return templateMediaSet(fields)
+            },
+        onSuccess: (res) => {
+            // console.log('res', res.data)
+            if(res.data.resultCode != '0'){
+                throw({message: res?.data?.resultDescription})
+            }
+            setSelectedFile('')
+            dismissModal() // to close modal
+            queryClient.refetchQueries({
+                queryKey: [...queryKeys.myTemplateConfig],
+                // type: 'active',
+                // exact: true,
+            })
+        },
+        onSettled: () => {
+            setTimeout(()=>{
+                changeTemplateMediaSet.reset()
+            }, 3000)
+        }
+    })
+
+    const handleUpload = () => {
+        let reqData = {
+            token: localStorage.getItem("token"), // USER TOKEN
+            uid: localStorage.getItem("uid"), // USER UID
+            product_id: productId,
+            file_uid: selectedFile,
+            image_id: selectedSectionDetails?.id
+        };
+        // console.log('reqData', reqData)
+        changeTemplateMediaSet.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 */}
+        <div ref={modalRef} className="modal fade" id="verticalCenter" tabIndex="-1" role="dialog" aria-hidden="false">
+            <div className="modal-50 modal-dialog modal-dialog-centered modal-50" role="document">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h5 className="modal-title" style={{fontSize: '18px'}} id="verticalCenterTitle">Select New Picture</h5>
+                        <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div className="modal-body">
+                        {isFetching ? 
+                            <>
+                                <div className="col-12">
+                                    <p className='text-mute'>Loading...</p>
+                                </div>
+                            </>
+                            : isError ?
+                            <div className="col-12">
+                                <p className='text-danger'>{error?.message}</p>
+                            </div>
+                            :
+                            <div className='row g-5 justify-content-center'>
+                                {mediaFileList?.file_list?.length ?
+                                <>
+                                {mediaFileList?.file_list?.map(item => {
+                                    const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
+                                    return(
+                                        <div onClick={()=>handleSelectedFile(item?.file_uid)} className={`p-3 text-center col-4`} style={{cursor: 'pointer'}}>
+                                            <div className={`p-3 ${(selectedFile == item?.file_uid) && 'bg-light'}`} style={{Height: '250px'}}>
+                                                <img key={item?.file_uid} className="img-fluid" style={{}} src={file_url} alt='file-image' />
+                                            </div>
+                                        </div>
+                                    )
+                                    }) 
+                                }
+                                </>
+                                :
+                                <p>No File(s) found!</p>
+                                }
+                            </div>
+                        }
+                        {changeTemplateMediaSet.error &&
+                        <>
+                            <div className="col-12">
+                            <p className='text-danger'>{changeTemplateMediaSet.error.message}</p>
+                        </div>
+                        </>
+                        }
+                        {changeTemplateMediaSet.isSuccess &&
+                        <>
+                            <div className="col-12">
+                                <p className='text-success'>{'subscription is successful'}</p>
+                            </div>
+                        </>
+                        }
+
+                    </div>
+                    <div className="modal-footer">
+                        <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
+                        {selectedFile &&
+                            <button type="button" className="btn btn-primary" disabled={changeTemplateMediaSet?.isPending || changeTemplateMediaSet?.isSuccess} onClick={handleUpload}>{changeTemplateMediaSet?.isPending ? 'Applying...' : changeTemplateMediaSet?.isSuccess ? 'Applied' : 'Apply'}</button>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+        {/* END of Vertical Center Modal */}
+    </>
+  )
+}

src/services/queryKeys.js

@@ -8,6 +8,7 @@ const queryKeys = {
     recentAction: ['recent-action'],
     settingsData: ['settings_data'],
     myProductConfig: ['myproduct_config'],
+    myTemplateConfig: ['mytemplate_config'],
     productTemplateData: ['product_template_data'],
     subscriptions: ['subscriptions'],
     profile_data: ['profile_data'],

src/services/services.js

@@ -298,6 +298,14 @@ export const uploadFile = (reqData) => {
     return postAuxEnd(`/upload/webfiles`, postData, true)
 }
 
+// FUNCTION TO CHANGE TEMPLATE MEDIA SET
+export const templateMediaSet = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/template-media-set`, postData, false)
+}
+
 export const getReportsTopicsList = (reqData) => {
     let postData = {
         ...reqData,