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

fixed input fields

Browse Source
This commit was merged in pull request #54.
This commit is contained in:
victorAnumudu
2025-07-26 21:17:23 +01:00
parent b5a37c4cc5
commit d84c266653
3 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/product/ProductActive.jsx
+5 -5
View File
@@ -24,8 +24,8 @@ export default function ProductActive({productData}){
} }
const homeFields ={ const homeFields ={
banner_text: { name: 'Main Banner Text', controls: 'TEXT', active: true }, banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
banner_description: { name: 'Main Banner Text', controls: 'TEXTAREA', active: true }, banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
} }
const footerFields ={ const footerFields ={
@@ -101,7 +101,7 @@ export default function ProductActive({productData}){
</div> </div>
</div> </div>
<div className="card-body"> <div className="card-body">
<iframe ref={iframe} style={{borderWidth: '0px;'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe> <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
</div> </div>
<div className="p-4 ml-auto"> <div className="p-4 ml-auto">
<button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'} <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
@@ -121,7 +121,7 @@ export default function ProductActive({productData}){
<ul className="nav nav-tabs" role="tablist"> <ul className="nav nav-tabs" role="tablist">
<> <>
{Object.entries(settingsObject).map(([key, value]) => ( {Object.entries(settingsObject).map(([key, value]) => (
<li className="nav-item"> <li key={key} className="nav-item">
<a className={`nav-link ${activeTab == value.controls && 'active show'}`} <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}`}
@@ -139,7 +139,7 @@ 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 ${activeTab == value.controls && 'active show'}`} <div key={key} 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}
> >
src/component/product/settingsTab/GeneralTab.jsx
+22 -7
View File
@@ -1,26 +1,41 @@
import React, {memo} from 'react' import React, {memo, useState} from 'react'
import SiteTemplateSelector from './SiteTemplateSelector'; import SiteTemplateSelector from './SiteTemplateSelector';
const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{ const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
console.log("Page data == ", data) 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){ if (isCustom === true){
return <SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} /> return <SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} />
} }
return ( return (
<div className="page-account-form"> <div className="page-account-form">
<div className="p-0" style={{ minHeight: '500px;'}}> <div className="p-0" style={{ minHeight: '500px'}}>
<form> <form id='tab_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 key={key} className="form-group col-md-12">
<label htmlFor="name1">{value.name}</label> <label htmlFor="name1">{value.name}</label>
{value.controls == 'TEXT' ? {value.controls == 'TEXT' ?
<input type="text" className="form-control" id={key} value="" /> <input name={value.name} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
:value.controls == 'TEXTAREA' ? :value.controls == 'TEXTAREA' ?
<textarea rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value="" /> <textarea name={value.name} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
: :
null null
} }
@@ -28,7 +43,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
))} ))}
</> </>
<div className="form-group col-md-12" style={{textAlign:'right'}}> <div className="form-group col-md-12" style={{textAlign:'right'}}>
<button type="submit" className="btn btn-primary">Update</button> <button onClick={handleSubmit} type="button" className="btn btn-primary">Update</button>
</div> </div>
</div> </div>
</form> </form>
src/component/product/settingsTab/SiteTemplateSelector.jsx
+1 -1
View File
@@ -8,7 +8,7 @@ const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
<div className="row"> <div className="row">
<> <>
{Object.entries(data)?.map(([key, value]) => ( {Object.entries(data)?.map(([key, value]) => (
<div className="col-xl-6 col-sm-6"> <div key={key} className="col-xl-6 col-sm-6">
<div className="card card-statistics"> <div className="card card-statistics">
<div className="card-body"> <div className="card-body">
<div className="text-center p-2"> <div className="text-center p-2">