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

panel data key

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-09-03 21:00:28 -04:00
parent 1681ca1437
commit c951f925d8
2 changed files with 157 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/product/settingsTab/GeneralTab.jsx
+41 -25
View File
@@ -1,12 +1,12 @@
import React, {memo, useEffect, useMemo, useState} from 'react' import React, {memo, useEffect, useMemo, useState} from 'react'
import { useMutation, useQueryClient } from "@tanstack/react-query"; import {useMutation, useQueryClient} from "@tanstack/react-query";
import { pageSettings } from "../../../services/services"; import {pageSettings} from "../../../services/services";
import SiteTemplateSelector from './SiteTemplateSelector'; import SiteTemplateSelector from './SiteTemplateSelector';
import NoYesBooleanDropdown from './NoYesBooleanDropdown'; import NoYesBooleanDropdown from './NoYesBooleanDropdown';
import { IoMdArrowDropdown } from 'react-icons/io'; import {IoMdArrowDropdown} from 'react-icons/io';
import queryKeys from '../../../services/queryKeys'; import queryKeys from '../../../services/queryKeys';
const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{ const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) => {
const queryClient = useQueryClient() const queryClient = useQueryClient()
@@ -27,7 +27,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
const [fields, setFields] = useState({}) const [fields, setFields] = useState({})
useEffect(()=>{ useEffect(() => {
const fieldData = {} const fieldData = {}
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = '' fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
@@ -36,10 +36,10 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
}) })
setFields(fieldData) setFields(fieldData)
},[backendValues.data]) }, [backendValues.data])
const handleChange = ({target:{name, value}}) => { const handleChange = ({target: {name, value}}) => {
setFields(prev => ({...prev, [name]:value})) setFields(prev => ({...prev, [name]: value}))
setFieldsChanged(true) setFieldsChanged(true)
} }
@@ -48,7 +48,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
return pageSettings(fields) return pageSettings(fields)
}, },
onSuccess: (res) => { onSuccess: (res) => {
if(res?.data?.resultCode != '0'){ if (res?.data?.resultCode != '0') {
return setReqStatus({error: true, message: 'Unable to complete, try again later'}) return setReqStatus({error: true, message: 'Unable to complete, try again later'})
} }
setFieldsChanged(false) setFieldsChanged(false)
@@ -61,9 +61,9 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
queryClient.refetchQueries({ // refetches productProvision API call queryClient.refetchQueries({ // refetches productProvision API call
queryKey: [...queryKeys.settingsData], queryKey: [...queryKeys.settingsData],
}) })
setTimeout(()=>{ setTimeout(() => {
setReqStatus({error: null, message: ''}) setReqStatus({error: null, message: ''})
},3000) }, 3000)
}, },
}) })
@@ -72,7 +72,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
token: localStorage.getItem('token'), // USER TOKEN token: localStorage.getItem('token'), // USER TOKEN
uid: localStorage.getItem('uid'), // USER UID uid: localStorage.getItem('uid'), // USER UID
product_id: productData?.product_id, product_id: productData?.product_id,
settings : { settings: {
...fields ...fields
} }
} }
@@ -98,33 +98,48 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
: :
<> <>
{isCustom === true ? {isCustom === true ?
<SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} /> <SiteTemplateSelector name={name} data={data} isCustom={isCustom}
productData={productData}/>
: :
<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 id='tab_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]) => {
let fieldName = value.name.toLowerCase().replaceAll(" ", "_") let fieldName = key; // value.key.toLowerCase().replaceAll(" ", "_")
let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")] let fieldValue = fields[key]; //fields[value.name.toLowerCase().replaceAll(" ", "_")]
return ( return (
<div key={key} 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 name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} /> <input name={fieldName} type="text"
:value.controls == 'TEXTAREA' ? className="form-control" id={key}
<textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} /> value={fieldValue} onChange={handleChange}/>
: value.controls == 'SELECT_NO_YES' ? : value.controls === 'TEXTAREA' ?
<textarea name={fieldName} rows={5}
style={{resize: 'none'}} type="text"
className="form-control" id={key}
value={fieldValue}
onChange={handleChange}/>
: value.controls === 'SELECT_NO_YES' ?
// <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange} /> // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange} />
<div className='position-relative'> <div className='position-relative'>
<select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control"> <select onChange={handleChange}
name={fieldName} value={fieldValue}
className="form-control">
<option value=''>Select</option> <option value=''>Select</option>
<option value='0'>No</option> <option value='0'>No</option>
<option value='1'>Yes</option> <option value='1'>Yes</option>
</select> </select>
<IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> <IoMdArrowDropdown
className='position-absolute w-auto'
style={{
top: '50%',
right: '2px',
transform: 'translateY(-50%)'
}}/>
</div> </div>
: :
null null
@@ -141,8 +156,9 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
</div> </div>
</> </>
} }
<div className="form-group col-md-12" style={{textAlign:'right'}}> <div className="form-group col-md-12" style={{textAlign: 'right'}}>
<button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button> <button onClick={handleSubmit} type="button" className="btn btn-primary"
disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
</div> </div>
</div> </div>
</form> </form>
src/component/start/Start.jsx
+4 -4
View File
@@ -33,7 +33,7 @@ export default function Start(){
<div className="card-body pricing-content"> <div className="card-body pricing-content">
<div className="pricing-content-card"> <div className="pricing-content-card">
<h5>Start with</h5> <h5>Start with</h5>
<h2 className="text-primary pt-3" >Personal Website</h2> <h2 className="text-primary pt-3" ><a href="/product/A000001">Personal Website</a></h2>
<ul className="py-2"> <ul className="py-2">
<li>post jobs</li> <li>post jobs</li>
<li>advanced instructors search</li> <li>advanced instructors search</li>
@@ -41,7 +41,7 @@ export default function Start(){
<li>post events</li> <li>post events</li>
<li>cancel any time</li> <li>cancel any time</li>
</ul> </ul>
<div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div> <div className="pt-2"><a href="/product/A000001" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
</div> </div>
</div> </div>
</div> </div>
@@ -52,7 +52,7 @@ export default function Start(){
<div className="card-body pricing-content"> <div className="card-body pricing-content">
<div className="pricing-content-card"> <div className="pricing-content-card">
<h5>Start with</h5> <h5>Start with</h5>
<h2 className="text-primary pt-3">Business Website</h2> <h2 className="text-primary pt-3"><a href="/product/A000002">Business Website</a></h2>
<ul className="py-2"> <ul className="py-2">
<li>post jobs</li> <li>post jobs</li>
<li>advanced instructors search</li> <li>advanced instructors search</li>
@@ -60,7 +60,7 @@ export default function Start(){
<li>post events</li> <li>post events</li>
<li>cancel any time</li> <li>cancel any time</li>
</ul> </ul>
<div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div> <div className="pt-2"><a href="/product/A000001" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
</div> </div>
</div> </div>
</div> </div>