MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

fixed tab controls #53

Merged
ameye merged 1 commits from tab-control-fix into master 2025-07-25 20:58:04 +00:00
Conversation 0 Commits 1 Files Changed 2
+49 -32
2 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/product/ProductActive.jsx
+16 -8
View File
@@ -1,4 +1,4 @@
import React, { useRef } from "react"; import React, { useRef, useState } from "react";
import getImage from "../../utils/getImage"; import getImage from "../../utils/getImage";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import GeneralTab from "./settingsTab/GeneralTab"; import GeneralTab from "./settingsTab/GeneralTab";
@@ -8,6 +8,7 @@ import { productRefreshSite } from "../../services/services";
export default function ProductActive({productData}){ export default function ProductActive({productData}){
const iframe = useRef() const iframe = useRef()
const dataFields ={ const dataFields ={
site_title: { name: 'Title', controls: 'TEXT', active: true }, site_title: { name: 'Title', controls: 'TEXT', active: true },
site_description: { name: 'Description', controls: 'TEXT', active: true }, site_description: { name: 'Description', controls: 'TEXT', active: true },
@@ -38,6 +39,8 @@ export default function ProductActive({productData}){
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} }, color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
}; };
const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
const refresh = useMutation({ const refresh = useMutation({
mutationFn: (fields) => { mutationFn: (fields) => {
return productRefreshSite(fields) return productRefreshSite(fields)
@@ -99,12 +102,16 @@ export default function ProductActive({productData}){
<> <>
{Object.entries(settingsObject).map(([key, value]) => ( {Object.entries(settingsObject).map(([key, value]) => (
<li className="nav-item"> <li className="nav-item">
<a className={`nav-link ${value.active}`} <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
id={key} data-bs-toggle="pill" id={key} data-bs-toggle="pill"
data-bs-target={`#${value.controls}`} // data-bs-target={`#${value.controls}`}
type="button" role="tab" type="button" role="tab"
aria-controls={value.controls} // aria-controls={value.controls}
aria-selected="true">{value.title}</a> // aria-selected="true"
onClick={()=>setActiveTab(value.controls)}
>
{value.title}
</a>
</li> </li>
))} ))}
</> </>
@@ -112,9 +119,10 @@ export default function ProductActive({productData}){
<div className="tab-content"> <div className="tab-content">
<> <>
{Object.entries(settingsObject).map(([key, value]) => ( {Object.entries(settingsObject).map(([key, value]) => (
<div className={`tab-pane fade ${value.active}`} <div className={`tab-pane fade ${activeTab == value.controls && 'active show'}`}
id={value.controls} role="tabpanel" // id={value.controls} role="tabpanel"
aria-labelledby={key}> // aria-labelledby={key}
>
<GeneralTab name={value.title} data={value.data} /> <GeneralTab name={value.title} data={value.data} />
</div> </div>
))} ))}
src/component/product/settingsTab/GeneralTab.jsx
+33 -24
View File
@@ -1,27 +1,36 @@
import React from 'react' import React, {memo} from 'react'
export default function GeneralTab({name='Full Name', data}) { const GeneralTab = memo(({name='Full Name', data}) =>{
console.log("Page data == ", data) console.log("Page data == ", data)
return ( return (
<div className="page-account-form"> <div className="page-account-form">
<div className="p-0"> <div className="p-0">
<form> <form>
<div className="form-row"> <div className="form-row">
<> <>
{Object.entries(data).map(([key, value]) => ( {Object.entries(data)?.map(([key, value]) => (
<div className="form-group col-md-12"> <div className="form-group col-md-12">
<label htmlFor="name1">{value.name}</label> <label htmlFor="name1">{value.name}</label>
<input type="text" className="form-control" id={key} {value.controls == 'TEXT' ?
value="" /> <input type="text" className="form-control" id={key} value="" />
</div> :value.controls == 'TEXTAREA' ?
))} <textarea rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value="" />
</> :
<div className="form-group col-md-12" style={{textAlign:'right'}}> null
<button type="submit" className="btn btn-primary">Update</button> }
</div>
))}
</>
<div className="form-group col-md-12" style={{textAlign:'right'}}>
<button type="submit" className="btn btn-primary">Update</button>
</div>
</div> </div>
</div> </form>
</form> </div>
</div> </div>
</div> )
) }
} )
export default GeneralTab