fixed iframe bug #52
@@ -1,19 +1,44 @@
|
||||
import React from "react";
|
||||
import React, { useRef } from "react";
|
||||
import getImage from "../../utils/getImage";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import GeneralTab from "./settingsTab/GeneralTab";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { productRefreshSite } from "../../services/services";
|
||||
|
||||
|
||||
export default function ProductActive({productData}){
|
||||
const settingsObject = {
|
||||
home_tab: { title: 'Home Page', controls: 'home', active: 'active show' , data: {}},
|
||||
footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
|
||||
about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
|
||||
contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
|
||||
social_tab: { title: 'Socials', controls: 'social', active: '', data: {} },
|
||||
template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
|
||||
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
|
||||
};
|
||||
const iframe = useRef()
|
||||
|
||||
const settingsObject = {
|
||||
home_tab: { title: 'Home Page', controls: 'home', active: 'active show' , data: {}},
|
||||
footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
|
||||
about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
|
||||
contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
|
||||
social_tab: { title: 'Socials', controls: 'social', active: '', data: {} },
|
||||
template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
|
||||
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
|
||||
};
|
||||
|
||||
const refresh = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return productRefreshSite(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
iframe.current.src += ''
|
||||
}
|
||||
})
|
||||
|
||||
const handleRefresh = () => {
|
||||
const reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData.product_id,
|
||||
subscription_uid: productData.subscription_uid
|
||||
|
||||
}
|
||||
refresh.mutate(reqData)
|
||||
}
|
||||
let externalUrl= 'https://'+productData?.internal_url
|
||||
|
||||
return(
|
||||
<>
|
||||
@@ -24,74 +49,66 @@ export default function ProductActive({productData}){
|
||||
|
||||
|
||||
<div className="row account-contant">
|
||||
<>
|
||||
|
||||
|
||||
<div className="row tabs-contant">
|
||||
<div className="col-xxl-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">{productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<iframe style={{borderWidth: '0px;'}} src={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title"> Site Settings </h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="tab tab-vertical">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<>
|
||||
{Object.entries(settingsObject).map(([key, value]) => (
|
||||
<li className="nav-item">
|
||||
<a className={`nav-link ${value.active}`}
|
||||
id={key} data-bs-toggle="pill"
|
||||
data-bs-target={`#${value.controls}`}
|
||||
type="button" role="tab"
|
||||
aria-controls={value.controls}
|
||||
aria-selected="true">{value.title}</a>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
</ul>
|
||||
<div className="tab-content">
|
||||
<>
|
||||
{Object.entries(settingsObject).map(([key, value]) => (
|
||||
<div className={`tab-pane fade ${value.active}`}
|
||||
id={value.controls} role="tabpanel"
|
||||
aria-labelledby={key}>
|
||||
<GeneralTab name={value.title} data={value.data} />
|
||||
<>
|
||||
<div className="row tabs-contant">
|
||||
<div className="col-xxl-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading d-flex justify-content-between">
|
||||
<h4 className="card-title">{externalUrl}</h4>
|
||||
<button type="button" onClick={()=>iframe.current.src += ''} className="btn btn-primary">IC</button>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<iframe ref={iframe} style={{borderWidth: '0px;'}} src={externalUrl} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}></iframe>
|
||||
</div>
|
||||
<div className="p-4 ml-auto">
|
||||
<button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title"> Site Settings </h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="tab tab-vertical">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<>
|
||||
{Object.entries(settingsObject).map(([key, value]) => (
|
||||
<li className="nav-item">
|
||||
<a className={`nav-link ${value.active}`}
|
||||
id={key} data-bs-toggle="pill"
|
||||
data-bs-target={`#${value.controls}`}
|
||||
type="button" role="tab"
|
||||
aria-controls={value.controls}
|
||||
aria-selected="true">{value.title}</a>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
</ul>
|
||||
<div className="tab-content">
|
||||
<>
|
||||
{Object.entries(settingsObject).map(([key, value]) => (
|
||||
<div className={`tab-pane fade ${value.active}`}
|
||||
id={value.controls} role="tabpanel"
|
||||
aria-labelledby={key}>
|
||||
<GeneralTab name={value.title} data={value.data} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -115,6 +115,14 @@ export const productsData = (reqData) => {
|
||||
return postAuxEnd(`/panel/account/products`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO REFRESH SITE
|
||||
export const productRefreshSite = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/account/products/refresh`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
|
||||
export const recentActions = (reqData) => {
|
||||
let postData = {
|
||||
|
||||
Reference in New Issue
Block a user