Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
d84c266653 | ||
|
CHIEFSOFT\ameye
|
b5a37c4cc5 | ||
|
CHIEFSOFT\ameye
|
ddde4bd0d5 | ||
 ameye
|
bf9c6c8b32 | ||
|
victorAnumudu
|
14e588b0a9 | ||
|
CHIEFSOFT\ameye
|
dde01ab79a | ||
|
ameye
|
a5f1c4b5bb |
@@ -87,7 +87,7 @@ export default function Calendar(){
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Event Calendar</h4>
|
||||
<h4 className="card-title">Events</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
|
||||
@@ -58,7 +58,7 @@ export default function TopBar() {
|
||||
let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
|
||||
return (
|
||||
<div key={item.id + index} className="col-sm-6 col-xxl-3">
|
||||
<div className="card card-statistics ecommerce-contant overflow-h">
|
||||
<div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `}>
|
||||
<div className="card-body p-0">
|
||||
<div className="d-flex m-b-0 ecommerce-contant-text h-100">
|
||||
<div className="w-100">
|
||||
@@ -68,9 +68,7 @@ export default function TopBar() {
|
||||
<small className="d-block">{item?.data_span}</small>
|
||||
</div>
|
||||
<div className="col text-right">
|
||||
<h5 className="text-muted mb-0">{item?.description}</h5>
|
||||
<strong className={`${textColor} m-t-5`}><i
|
||||
className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
|
||||
<h5 className="text-muted mb-0"><a href={item?.link}>{item?.description}</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apexchart-wrapper">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useRef } from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import getImage from "../../utils/getImage";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import GeneralTab from "./settingsTab/GeneralTab";
|
||||
@@ -8,17 +8,59 @@ import { productRefreshSite } from "../../services/services";
|
||||
|
||||
export default function ProductActive({productData}){
|
||||
const iframe = useRef()
|
||||
|
||||
const dataFields ={
|
||||
site_title: { name: 'Title', controls: 'TEXT', active: true },
|
||||
site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
|
||||
site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
|
||||
site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
|
||||
site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
|
||||
}
|
||||
|
||||
const socialFields ={
|
||||
facebook: { name: 'Facebook', controls: 'TEXT', active: true },
|
||||
twitter: { name: 'Twitter', controls: 'TEXT', active: true },
|
||||
youtube: { name: 'Youtube', controls: 'TEXT', active: true },
|
||||
}
|
||||
|
||||
const homeFields ={
|
||||
banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
|
||||
banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
|
||||
}
|
||||
|
||||
const footerFields ={
|
||||
footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
|
||||
}
|
||||
|
||||
const aboutFields ={
|
||||
about_description: { name: 'About us', controls: 'TEXTAREA', active: true },
|
||||
}
|
||||
|
||||
const templateData = {
|
||||
template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: '/assets/img/file-icon/svg.png', active: '' },
|
||||
template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: '/assets/img/file-icon/svg.png', active: '' },
|
||||
template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: '/assets/img/file-icon/svg.png', active: '' },
|
||||
template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: '/assets/img/file-icon/svg.png', active: '' },
|
||||
template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: '/assets/img/file-icon/svg.png', active: '' },
|
||||
template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: '/assets/img/file-icon/svg.png', active: '' },
|
||||
template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: '/assets/img/file-icon/svg.png', active: '' },
|
||||
template_9 : { title: 'Template Name-9', template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: '/assets/img/file-icon/svg.png', active: '' },
|
||||
}
|
||||
|
||||
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: {} },
|
||||
settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
|
||||
home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false, data: homeFields},
|
||||
footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
|
||||
about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
|
||||
contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: {} },
|
||||
social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
|
||||
template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
|
||||
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
|
||||
};
|
||||
|
||||
|
||||
const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
|
||||
|
||||
const refresh = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return productRefreshSite(fields)
|
||||
@@ -34,7 +76,6 @@ export default function ProductActive({productData}){
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData.product_id,
|
||||
subscription_uid: productData.subscription_uid
|
||||
|
||||
}
|
||||
refresh.mutate(reqData)
|
||||
}
|
||||
@@ -60,7 +101,7 @@ export default function ProductActive({productData}){
|
||||
</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>
|
||||
<iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
|
||||
</div>
|
||||
<div className="p-4 ml-auto">
|
||||
<button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
|
||||
@@ -80,13 +121,17 @@ export default function ProductActive({productData}){
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<>
|
||||
{Object.entries(settingsObject).map(([key, value]) => (
|
||||
<li className="nav-item">
|
||||
<a className={`nav-link ${value.active}`}
|
||||
<li key={key} className="nav-item">
|
||||
<a className={`nav-link ${activeTab == value.controls && 'active show'}`}
|
||||
id={key} data-bs-toggle="pill"
|
||||
data-bs-target={`#${value.controls}`}
|
||||
// data-bs-target={`#${value.controls}`}
|
||||
type="button" role="tab"
|
||||
aria-controls={value.controls}
|
||||
aria-selected="true">{value.title}</a>
|
||||
// aria-controls={value.controls}
|
||||
// aria-selected="true"
|
||||
onClick={()=>setActiveTab(value.controls)}
|
||||
>
|
||||
{value.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
@@ -94,10 +139,11 @@ export default function ProductActive({productData}){
|
||||
<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 key={key} className={`tab-pane fade ${activeTab == value.controls && 'active show'}`}
|
||||
// id={value.controls} role="tabpanel"
|
||||
// aria-labelledby={key}
|
||||
>
|
||||
<GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
|
||||
@@ -1,49 +1,57 @@
|
||||
import React from 'react'
|
||||
import React, {memo, useState} from 'react'
|
||||
import SiteTemplateSelector from './SiteTemplateSelector';
|
||||
|
||||
export default function GeneralTab({name='Full Name'}) {
|
||||
return (
|
||||
<div className="page-account-form">
|
||||
<div className="p-0">
|
||||
<form>
|
||||
<h4>{name}</h4>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Full Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Alice Williams" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="title1">Title</label>
|
||||
<input type="text" className="form-control" id="title1"
|
||||
value="Marketing expert" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number</label>
|
||||
<input type="text" className="form-control" id="phone1"
|
||||
value="(01) 97 563 15613" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input type="email" className="form-control" id="email1"
|
||||
value="alicewilliams@gmail.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add1">Address</label>
|
||||
<input type="text" className="form-control" id="add1"
|
||||
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add2">Address 2</label>
|
||||
<input type="text" className="form-control" id="add2"
|
||||
value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
|
||||
</div>
|
||||
const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
|
||||
console.log("Page data == ", data)
|
||||
|
||||
const fieldData = {}
|
||||
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
|
||||
fieldData[value.name] = ''
|
||||
})
|
||||
const [fields, setFields] = useState(fieldData)
|
||||
const handleChange = ({target:{name, value}}) => {
|
||||
setFields(prev => ({...prev, [name]:value}))
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log('formInfo', fields)
|
||||
}
|
||||
|
||||
if (isCustom === true){
|
||||
return <SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} />
|
||||
}
|
||||
|
||||
|
||||
<button type="submit" className="btn btn-primary">Update Information
|
||||
</button>
|
||||
</form>
|
||||
return (
|
||||
<div className="page-account-form">
|
||||
<div className="p-0" style={{ minHeight: '500px'}}>
|
||||
|
||||
<form id='tab_form'>
|
||||
<div className="form-row">
|
||||
<>
|
||||
{Object.entries(data)?.map(([key, value]) => (
|
||||
<div key={key} className="form-group col-md-12">
|
||||
<label htmlFor="name1">{value.name}</label>
|
||||
{value.controls == 'TEXT' ?
|
||||
<input name={value.name} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
|
||||
:value.controls == 'TEXTAREA' ?
|
||||
<textarea name={value.name} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
<div className="form-group col-md-12" style={{textAlign:'right'}}>
|
||||
<button onClick={handleSubmit} type="button" className="btn btn-primary">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
export default GeneralTab
|
||||
@@ -0,0 +1,32 @@
|
||||
import React, {memo} from 'react'
|
||||
|
||||
const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
|
||||
console.log("Page data == ", data)
|
||||
return (
|
||||
<div className="page-account-form">
|
||||
<div className="p-0">
|
||||
<div className="row">
|
||||
<>
|
||||
{Object.entries(data)?.map(([key, value]) => (
|
||||
<div key={key} className="col-xl-6 col-sm-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body">
|
||||
<div className="text-center p-2">
|
||||
<div className="mb-2">
|
||||
<img src={value.banner} alt={value.title} />
|
||||
</div>
|
||||
<h4 className="mb-0">{value.title}</h4>
|
||||
<a href="javascript:void(0)" className="btn btn-light">Activate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
export default SiteTemplateSelector
|
||||
Reference in New Issue
Block a user