Compare commits

..

6 Commits

Author SHA1 Message Date
victorAnumudu a0da97e14d populate fields from backend 2025-08-08 10:51:42 +01:00
ameye 4d1de18713 Merge branch 'settings-endpoint-start' of MERMS/MermsPanelReactJS into master 2025-08-07 21:02:08 +00:00
victorAnumudu 4fe66fd161 merged with master 2025-08-07 21:49:14 +01:00
victorAnumudu 6028e4c617 added settings values endpoint 2025-08-07 21:41:36 +01:00
CHIEFSOFT\ameye 398392062c Added more about configurations 2025-08-07 13:13:41 -04:00
ameye b84eac1299 Merge branch 'settings-endpoint' of MERMS/MermsPanelReactJS into master 2025-08-06 13:46:22 +00:00
6 changed files with 190 additions and 249 deletions
+8 -89
View File
@@ -1,65 +1,15 @@
import React, { useRef, useState } from "react";
import React, { useMemo, useRef, useState } from "react";
import { useSelector } from "react-redux";
import getImage from "../../utils/getImage";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import GeneralTab from "./settingsTab/GeneralTab";
import { useMutation } from "@tanstack/react-query";
import { productRefreshSite } from "../../services/services";
import { useMutation, useQuery } from "@tanstack/react-query";
import { productRefreshSite, getSettingsData } from "../../services/services";
import Settings from "./settingsTab/Settings";
import queryKeys from "../../services/queryKeys";
export default function ProductActive({productData}){
const iframe = useRef()
const dataFields ={
site_title: { name: 'Title', controls: 'TEXT', active: true },
site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
}
const socialFields ={
facebook: { name: 'Facebook', controls: 'TEXT', active: true },
twitter: { name: 'Twitter', controls: 'TEXT', active: true },
youtube: { name: 'Youtube', controls: 'TEXT', active: true },
}
const homeFields ={
banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
}
const footerFields ={
footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
}
const aboutFields ={
about_description: { name: 'About us', controls: 'TEXTAREA', active: true },
}
const templateData = {
template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
template_9 : { title: 'Template Name-9', template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
}
const settingsObject = {
settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false, data: homeFields},
footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: {} },
social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
};
const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
const refresh = useMutation({
mutationFn: (fields) => {
@@ -119,38 +69,7 @@ export default function ProductActive({productData}){
</div>
</div>
<div className="card-body">
<div className="tab tab-vertical">
<ul className="nav nav-tabs" role="tablist">
<>
{Object.entries(settingsObject).map(([key, value]) => (
<li key={key} className="nav-item">
<a className={`nav-link ${activeTab == value.controls && 'active show'}`}
id={key} data-bs-toggle="pill"
// data-bs-target={`#${value.controls}`}
type="button" role="tab"
// aria-controls={value.controls}
// aria-selected="true"
onClick={()=>setActiveTab(value.controls)}
>
{value.title}
</a>
</li>
))}
</>
</ul>
<div className="tab-content">
<>
{Object.entries(settingsObject).map(([key, value]) => (
<div key={key} className={`tab-pane fade ${activeTab == value.controls && 'active show'}`}
// id={value.controls} role="tabpanel"
// aria-labelledby={key}
>
<GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} />
</div>
))}
</>
</div>
</div>
<Settings productData={productData} />
</div>
</div>
</div>
-149
View File
@@ -1,149 +0,0 @@
import React, { useRef, useState } from "react";
import getImage from "../../utils/getImage";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import GeneralTab from "./settingsTab/GeneralTab";
import { useMutation } from "@tanstack/react-query";
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: 'TEXTAREA', active: true },
site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
}
const socialFields ={
facebook: { name: 'Facebook', controls: 'TEXT', active: true },
twitter: { name: 'Twitter', controls: 'TEXT', active: true },
youtube: { name: 'Youtube', controls: 'TEXT', active: true },
}
const homeFields ={
banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
}
const footerFields ={
footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
}
const aboutFields ={
about_description: { name: 'About us', controls: 'TEXTAREA', active: true },
}
const templateData = {
template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
template_9 : { title: 'Template Name-9', template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
}
const settingsObject = {
settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false, data: homeFields},
footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: {} },
social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
};
const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
const refresh = useMutation({
mutationFn: (fields) => {
return productRefreshSite(fields)
},
onSuccess: (res) => {
iframe.current.src += ''
}
})
const handleRefresh = () => {
const reqData = {
token: localStorage.getItem('token'), // USER TOKEN
uid: localStorage.getItem('uid'), // USER UID
product_id: productData.product_id,
subscription_uid: productData.subscription_uid
}
refresh.mutate(reqData)
}
let externalUrl= 'https://'+productData?.internal_url
return(
<>
<div className="row account-contant">
<>
<div className="row tabs-contant">
<div className="col-xxl-6">
<div className="card card-statistics">
<div className="card-header">
<div className="card-heading d-flex justify-content-between">
<h4 className="card-title">{externalUrl}</h4>
<button type="button" onClick={()=>iframe.current.src += ''} className="btn">
<img src={getImage('refresh.png')} style={{width: '30px', height: 'auto'}} alt='refresh page' />
</button>
</div>
</div>
<div className="card-body">
<iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
</div>
<div className="p-4 ml-auto">
<button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
</button>
</div>
</div>
</div>
<div className="col-xxl-6">
<div className="card card-statistics">
<div className="card-header">
<div className="card-heading">
<h4 className="card-title"> Site Settings </h4>
</div>
</div>
<div className="card-body">
<div className="tab tab-vertical">
<ul className="nav nav-tabs" role="tablist">
<>
{Object.entries(settingsObject).map(([key, value]) => (
<li key={key} className="nav-item">
<a className={`nav-link ${activeTab == value.controls && 'active show'}`}
id={key} data-bs-toggle="pill"
type="button" role="tab"
onClick={()=>setActiveTab(value.controls)}
>
{value.title}
</a>
</li>
))}
</>
</ul>
<div className="tab-content">
<>
<div key={key} className={`tab-pane fade ${activeTab == value.controls && 'active show'}`}
>
<GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} />
</div>
</>
</div>
</div>
</div>
</div>
</div>
</div>
</>
</div>
</>
)
}
@@ -3,20 +3,26 @@ import { useMutation } from "@tanstack/react-query";
import { pageSettings } from "../../../services/services";
import SiteTemplateSelector from './SiteTemplateSelector';
const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
// console.log("Page data == ", data)
const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
const [reqStatus, setReqStatus] = useState({error: null, message: ''})
const [reqStatus, setReqStatus] = useState({error: null, message: ''})
const fieldData = {}
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
fieldData[value?.name?.toLowerCase().replace(" ", "_")] = ''
})
const [fields, setFields] = useState(fieldData)
const handleChange = ({target:{name, value}}) => {
const fieldData = {}
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
fieldData[value?.name?.toLowerCase().replace(" ", "_")] = ''
})
backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
fieldData[item?.setting_key?.toLowerCase().replace(" ", "_")] = item?.setting_value
})
// console.log('fieldData', fieldData)
const [fields, setFields] = useState(fieldData)
const handleChange = ({target:{name, value}}) => {
setFields(prev => ({...prev, [name]:value}))
}
setFieldsChanged(true)
}
const submitSettings = useMutation({
mutationFn: (fields) => {
@@ -26,6 +32,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
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) => {
@@ -0,0 +1,156 @@
import React, { memo, useMemo, useState } from 'react'
import GeneralTab from './GeneralTab'
import { getSettingsData } from '../../../services/services';
import queryKeys from '../../../services/queryKeys';
import { useSelector } from 'react-redux';
import { useQuery } from '@tanstack/react-query';
const Settings = memo(({productData}) => {
const { userDetails: { uid }} = useSelector((state) => state?.userDetails); // GETS USER UID
const dataFields ={
site_title: { name: 'Title', controls: 'TEXT', active: true },
site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
}
const socialFields ={
facebook: { name: 'Facebook', controls: 'TEXT', active: true },
twitter: { name: 'Twitter', controls: 'TEXT', active: true },
youtube: { name: 'Youtube', controls: 'TEXT', active: true },
}
const homeFields ={
banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
}
const footerFields ={
footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
}
const aboutFields ={
about_description: { name: 'About us', controls: 'TEXTAREA', active: true },
about_extra_1: { name: 'Extra About us', controls: 'TEXTAREA', active: true },
about_extra_2: { name: 'More About us', controls: 'TEXTAREA', active: true },
}
const templateData = {
template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
template_9 : { title: 'Template Name-9', template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
}
const settingsObject = useMemo(()=>{
return {
settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false, data: homeFields},
footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: {} },
social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
};
},[])
const [fieldsChanged, setFieldsChanged] = useState(false)
const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
const handleChangeTab = (value) => {
// if(fieldsChanged){
// const proceed = confirm('Continue without saving changes')
// if(proceed){
// setActiveTab(value)
// setFieldsChanged(false)
// }
// }else{
// setActiveTab(value)
// }
setActiveTab(value)
}
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.settingsData,
queryFn: () => {
let reqData = {
token: localStorage.getItem('token'), // USER TOKEN
uid: localStorage.getItem('uid'), // USER UID
product_id: productData?.product_id
}
return getSettingsData(reqData)
}
})
const settingsData = data?.data?.settings
// console.log('data', settingsData)
return (
<>
{isFetching ?
<>
<div className="row">
<div className="col-12">
<p className='text-mute'>Loading...</p>
</div>
</div>
</>
: isError ?
<div className="row">
<div className="col-12">
<p className='text-danger'>{error.message}</p>
</div>
</div>
:
<div className="tab tab-vertical">
<ul className="nav nav-tabs" role="tablist">
<>
{Object.entries(settingsObject).map(([key, value]) => (
<li key={key} className="nav-item">
<a className={`nav-link ${activeTab == value.controls && 'active show'}`}
id={key}
// data-bs-toggle="pill"
// data-bs-target={`#${value.controls}`}
type="button"
// role="tab"
// aria-controls={value.controls}
// aria-selected="true"
onClick={()=>handleChangeTab(value.controls)}
>
{value.title}
</a>
</li>
))}
</>
</ul>
<div className="tab-content">
<>
{Object.entries(settingsObject).map(([key, value]) => (
<div key={key} className={`tab-pane fade ${activeTab == value.controls && 'active show'}`}
// id={value.controls} role="tabpanel"
// aria-labelledby={key}
>
<GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
</div>
))}
</>
</div>
</div>
}
</>
)
}
)
export default Settings
+1
View File
@@ -5,6 +5,7 @@ const queryKeys = {
myproduct_provision: ['myproduct_provision'],
product_page: ['product_page'],
recentAction: ['recent-action'],
settingsData: ['settings_data'],
dashboard: ['dashboard'],
topBar: ['top-bar'],
+7
View File
@@ -158,6 +158,13 @@ export const pageSettings = (reqData) => {
return postAuxEnd(`/panel/myproduct/settings`, postData, false)
}
// FUNCTION TO GET SETTINGS DATA
export const getSettingsData = (reqData) => {
let postData = {
...reqData,
}
return postAuxEnd(`/panel/myproduct/settings/values`, postData, false)
}