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
+153 -137
View File
@@ -1,158 +1,174 @@
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()
const [reqStatus, setReqStatus] = useState({error: null, message: ''}) const [reqStatus, setReqStatus] = useState({error: null, message: ''})
// const computeFieldData = useMemo(()=>{
// const fieldData = {}
// Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
// fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
// })
// backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
// fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
// })
// return fieldData
// },[backendValues.data])
// const computeFieldData = useMemo(()=>{
const [fields, setFields] = useState({}) // const fieldData = {}
// Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
// fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
// })
// backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
// fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
// })
// return fieldData
// },[backendValues.data])
useEffect(()=>{
const fieldData = {} const [fields, setFields] = useState({})
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = '' useEffect(() => {
}) const fieldData = {}
backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
})
setFields(fieldData)
},[backendValues.data])
const handleChange = ({target:{name, value}}) => {
setFields(prev => ({...prev, [name]:value}))
setFieldsChanged(true)
}
const submitSettings = useMutation({
mutationFn: (fields) => {
return pageSettings(fields)
},
onSuccess: (res) => {
if(res?.data?.resultCode != '0'){
return setReqStatus({error: true, message: 'Unable to complete, try again later'})
}
setFieldsChanged(false)
setReqStatus({error: false, message: 'Completed successfully'})
},
onError: (err) => {
setReqStatus({error: true, message: 'Unable to complete, try again later'})
},
onSettled: () => {
queryClient.refetchQueries({ // refetches productProvision API call
queryKey: [...queryKeys.settingsData],
}) })
setTimeout(()=>{ backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
setReqStatus({error: null, message: ''}) fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
},3000) })
}, setFields(fieldData)
}) }, [backendValues.data])
const handleSubmit = () => { const handleChange = ({target: {name, value}}) => {
const reqData = { setFields(prev => ({...prev, [name]: value}))
token: localStorage.getItem('token'), // USER TOKEN setFieldsChanged(true)
uid: localStorage.getItem('uid'), // USER UID
product_id: productData?.product_id,
settings : {
...fields
}
} }
submitSettings.mutate(reqData)
}
return ( const submitSettings = useMutation({
<> mutationFn: (fields) => {
{backendValues?.isFetching || !backendValues?.data ? return pageSettings(fields)
<> },
<div className="row"> onSuccess: (res) => {
<div className="col-12"> if (res?.data?.resultCode != '0') {
<p className='text-mute'>Loading...</p> return setReqStatus({error: true, message: 'Unable to complete, try again later'})
</div> }
</div> setFieldsChanged(false)
</> setReqStatus({error: false, message: 'Completed successfully'})
: backendValues?.isError ? },
<div className="row"> onError: (err) => {
<div className="col-12"> setReqStatus({error: true, message: 'Unable to complete, try again later'})
<p className='text-danger'>{backendValues?.error.message}</p> },
</div> onSettled: () => {
</div> queryClient.refetchQueries({ // refetches productProvision API call
: queryKey: [...queryKeys.settingsData],
<> })
{isCustom === true ? setTimeout(() => {
<SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} /> setReqStatus({error: null, message: ''})
: }, 3000)
<div className="page-account-form"> },
<div className="p-0" style={{ minHeight: '500px'}}> })
<form id='tab_form'> const handleSubmit = () => {
<div className="form-row"> const reqData = {
<> token: localStorage.getItem('token'), // USER TOKEN
{Object.entries(data)?.map(([key, value]) => { uid: localStorage.getItem('uid'), // USER UID
let fieldName = value.name.toLowerCase().replaceAll(" ", "_") product_id: productData?.product_id,
let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")] settings: {
return ( ...fields
<div key={key} className="form-group col-md-12"> }
<label htmlFor="name1">{value.name}</label> }
{value.controls == 'TEXT' ? submitSettings.mutate(reqData)
<input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} /> }
:value.controls == 'TEXTAREA' ?
<textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} /> return (
: value.controls == 'SELECT_NO_YES' ? <>
// <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange} /> {backendValues?.isFetching || !backendValues?.data ?
<div className='position-relative'> <>
<select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control"> <div className="row">
<option value=''>Select</option> <div className="col-12">
<option value='0'>No</option> <p className='text-mute'>Loading...</p>
<option value='1'>Yes</option>
</select>
<IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />
</div>
:
null
}
</div>
)
}
)}
</>
{reqStatus.message &&
<>
<div className="col-12">
<p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
</div>
</>
}
<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>
</div> </div>
</div> </div>
</form> </>
</div> : backendValues?.isError ?
</div> <div className="row">
} <div className="col-12">
<p className='text-danger'>{backendValues?.error.message}</p>
</div>
</div>
:
<>
{isCustom === true ?
<SiteTemplateSelector name={name} data={data} isCustom={isCustom}
productData={productData}/>
:
<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]) => {
let fieldName = key; // value.key.toLowerCase().replaceAll(" ", "_")
let fieldValue = fields[key]; //fields[value.name.toLowerCase().replaceAll(" ", "_")]
return (
<div key={key} className="form-group col-md-12">
<label htmlFor="name1">{value.name}</label>
{value.controls === 'TEXT' ?
<input name={fieldName} type="text"
className="form-control" id={key}
value={fieldValue} onChange={handleChange}/>
: 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} />
<div className='position-relative'>
<select onChange={handleChange}
name={fieldName} value={fieldValue}
className="form-control">
<option value=''>Select</option>
<option value='0'>No</option>
<option value='1'>Yes</option>
</select>
<IoMdArrowDropdown
className='position-absolute w-auto'
style={{
top: '50%',
right: '2px',
transform: 'translateY(-50%)'
}}/>
</div>
:
null
}
</div>
)
}
)}
</>
{reqStatus.message &&
<>
<div className="col-12">
<p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
</div>
</>
}
<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>
</div>
</div>
</form>
</div>
</div>
}
</>
}
</> </>
} )
</>
)
} }
) )
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>