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 BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import GeneralTab from "./settingsTab/GeneralTab";
@@ -8,6 +8,7 @@ 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: 'TEXT', active: true },
@@ -38,6 +39,8 @@ export default function ProductActive({productData}){
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
};
const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
const refresh = useMutation({
mutationFn: (fields) => {
return productRefreshSite(fields)
@@ -99,12 +102,16 @@ export default function ProductActive({productData}){
<>
{Object.entries(settingsObject).map(([key, value]) => (
<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"
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>
))}
</>
@@ -112,9 +119,10 @@ 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}>
<div className={`tab-pane fade ${activeTab == value.controls && 'active show'}`}
// id={value.controls} role="tabpanel"
// aria-labelledby={key}
>
<GeneralTab name={value.title} data={value.data} />
</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}) {
console.log("Page data == ", data)
return (
<div className="page-account-form">
<div className="p-0">
<form>
<div className="form-row">
<>
{Object.entries(data).map(([key, value]) => (
<div className="form-group col-md-12">
<label htmlFor="name1">{value.name}</label>
<input type="text" className="form-control" id={key}
value="" />
</div>
))}
</>
<div className="form-group col-md-12" style={{textAlign:'right'}}>
<button type="submit" className="btn btn-primary">Update</button>
const GeneralTab = memo(({name='Full Name', data}) =>{
console.log("Page data == ", data)
return (
<div className="page-account-form">
<div className="p-0">
<form>
<div className="form-row">
<>
{Object.entries(data)?.map(([key, value]) => (
<div className="form-group col-md-12">
<label htmlFor="name1">{value.name}</label>
{value.controls == 'TEXT' ?
<input type="text" className="form-control" id={key} value="" />
:value.controls == 'TEXTAREA' ?
<textarea rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value="" />
:
null
}
</div>
))}
</>
<div className="form-group col-md-12" style={{textAlign:'right'}}>
<button type="submit" className="btn btn-primary">Update</button>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
)
}
)
}
)
export default GeneralTab