Finalize homepage editing functionality
This commit is contained in:
parent
1be3ee54b0
commit
7781c5c3e4
@ -60,7 +60,6 @@ function AppEditable() {
|
||||
"darkTheme": JSON.parse(responseData["dark_theme"]),
|
||||
"lightTheme": JSON.parse(responseData["light_theme"])
|
||||
})
|
||||
setGlobalTheme(responseData["default_theme"])
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Container, Spinner, Input, InputGroup, InputGroupText, Button, ButtonGroup } from 'reactstrap';
|
||||
import { Container, Spinner, Input, InputGroup, InputGroupText, Button, ButtonGroup, FormFeedback } from 'reactstrap';
|
||||
import {useEffect, useState, useRef} from 'react';
|
||||
import EditorComponent from './shared/tiptap';
|
||||
import MediaService from '../../services/media-service'
|
||||
@ -6,6 +6,7 @@ import MediaService from '../../services/media-service'
|
||||
function HomePage(props) {
|
||||
const [introContent, setIntroContent] = useState("")
|
||||
const [saveKeyReady, setSaveKeyReady] = useState(true)
|
||||
const [nameFieldInvalid, setNameFieldInvalid] = useState(false)
|
||||
const nameField = useRef(null)
|
||||
const UserData = props.UserData ? props.UserData : <Spinner> Loading... </Spinner>
|
||||
const GlobalTheme = props.GlobalTheme;
|
||||
@ -20,10 +21,20 @@ function HomePage(props) {
|
||||
console.log(response)
|
||||
if (response === 200)
|
||||
props.notificationToggler("Data saved successfully!")
|
||||
if ([500, 404, 403].includes(response))
|
||||
if ([500, 404, 403, 400].includes(response))
|
||||
props.notificationToggler("Something failed!", "danger")
|
||||
}
|
||||
|
||||
const showError = (elementValue, fieldType) => {
|
||||
console.log(elementValue)
|
||||
if (fieldType === 'nameField'){
|
||||
if (elementValue === '')
|
||||
setNameFieldInvalid(true)
|
||||
else
|
||||
setNameFieldInvalid(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setIntroContent(UserData.introContent)
|
||||
}, [UserData])
|
||||
@ -39,7 +50,10 @@ function HomePage(props) {
|
||||
<InputGroupText>
|
||||
Name
|
||||
</InputGroupText>
|
||||
<Input innerRef={nameField} defaultValue={UserData.name} />
|
||||
<Input invalid={nameFieldInvalid} innerRef={nameField} defaultValue={UserData.name} onChange={() => showError(nameField.current.value, 'nameField')}/>
|
||||
{nameFieldInvalid ? <FormFeedback tooltip className="mt-1">
|
||||
This field cannot be empty
|
||||
</FormFeedback>:''}
|
||||
</InputGroup>
|
||||
<EditorComponent GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig} content={UserData.introContent} setContent={setIntroContent}/>
|
||||
</>
|
||||
|
||||
@ -18,7 +18,7 @@ const Footer = (props) => {
|
||||
const ThemeConfig = props.ThemeConfig;
|
||||
const UserData = props.UserData;
|
||||
|
||||
const setInfo = async (color, colorArea) => {
|
||||
const setInfo = async (colorArea, color) => {
|
||||
let localThemeConfig = {...ThemeConfig}
|
||||
localThemeConfig[GlobalTheme].footer[colorArea] = `${color}`
|
||||
let response = await props.setInfo('/data/shared/update/theme-config/', GlobalTheme === "darkTheme" ? {
|
||||
@ -42,39 +42,39 @@ const Footer = (props) => {
|
||||
</Button>
|
||||
<Button
|
||||
color='primary'
|
||||
onClick={() => setInfo('bg-primary', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-primary')}/>
|
||||
<Button
|
||||
color='secondary'
|
||||
onClick={() => setInfo('bg-secondary', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-secondary')}/>
|
||||
<Button
|
||||
color='success'
|
||||
onClick={() => setInfo('bg-success', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-success')}/>
|
||||
<Button
|
||||
color='danger'
|
||||
onClick={() => setInfo('bg-danger', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-danger')}/>
|
||||
<Button
|
||||
color='warning'
|
||||
onClick={() => setInfo('bg-warning', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-warning')}/>
|
||||
<Button
|
||||
color='info'
|
||||
onClick={() => setInfo('bg-info', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-info')}/>
|
||||
<Button
|
||||
color='light'
|
||||
onClick={() => setInfo('bg-light', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-light')}/>
|
||||
<Button
|
||||
color='dark'
|
||||
onClick={() => setInfo('bg-dark', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-dark')}/>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup style={{marginTop: '15px', marginBottom: '15px'}}>
|
||||
<Button disabled color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}>
|
||||
<FontAwesomeIcon icon={faBrush} /> Set footer text color
|
||||
</Button>
|
||||
<Button
|
||||
color='dark'
|
||||
onClick={() => setInfo('text-light', 'text')}>White on black</Button>
|
||||
<Button
|
||||
color='light'
|
||||
onClick={() => setInfo('text-black', 'text')}>Black on white</Button>
|
||||
onClick={() => setInfo('text', 'text-white')}>White</Button>
|
||||
<Button
|
||||
color='dark'
|
||||
onClick={() => setInfo('text', 'text-black')}>Black</Button>
|
||||
</ButtonGroup>
|
||||
<Col md="12">
|
||||
<div className="blogContent text-center text-md-left mt-3">
|
||||
|
||||
@ -26,13 +26,19 @@ function Header(props) {
|
||||
|
||||
const [collapseClasses, setCollapseClasses] = useState('');
|
||||
const [themeSelected, setThemeSelected] = useState('lightTheme');
|
||||
const [defaultThemeConfig, setDefaultThemeConfig] = useState('lightTheme');
|
||||
|
||||
const setInfo = async (color, colorArea) => {
|
||||
const setInfo = async (colorArea, color, defaultThemeConfig) => {
|
||||
let localThemeConfig = {...ThemeConfig}
|
||||
|
||||
if (colorArea && color)
|
||||
localThemeConfig[GlobalTheme].navBar[colorArea] = `${color}`
|
||||
|
||||
let response = await props.setInfo('/data/shared/update/theme-config/', GlobalTheme === "darkTheme" ? {
|
||||
"default_theme": defaultThemeConfig,
|
||||
"dark_theme": JSON.stringify(localThemeConfig[GlobalTheme]),
|
||||
}:{
|
||||
"default_theme": defaultThemeConfig,
|
||||
"light_theme": JSON.stringify(localThemeConfig[GlobalTheme]),
|
||||
})
|
||||
if (response === 200)
|
||||
@ -47,6 +53,7 @@ function Header(props) {
|
||||
|
||||
useEffect(() => {
|
||||
setThemeSelected(props.ThemeConfig.defaultTheme)
|
||||
setDefaultThemeConfig(props.ThemeConfig.defaultTheme)
|
||||
}, [])
|
||||
|
||||
if (GlobalTheme && ThemeConfig && UserData)
|
||||
@ -102,41 +109,52 @@ function Header(props) {
|
||||
</Button>
|
||||
<Button
|
||||
color='primary'
|
||||
onClick={() => setInfo('bg-primary', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-primary', ThemeConfig['defaultTheme'])}/>
|
||||
<Button
|
||||
color='secondary'
|
||||
onClick={() => setInfo('bg-secondary', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-secondary', ThemeConfig['defaultTheme'])}/>
|
||||
<Button
|
||||
color='success'
|
||||
onClick={() => setInfo('bg-success', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-success', ThemeConfig['defaultTheme'])}/>
|
||||
<Button
|
||||
color='danger'
|
||||
onClick={() => setInfo('bg-danger', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-danger', ThemeConfig['defaultTheme'])}/>
|
||||
<Button
|
||||
color='warning'
|
||||
onClick={() => setInfo('bg-warning', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-warning', ThemeConfig['defaultTheme'])}/>
|
||||
<Button
|
||||
color='info'
|
||||
onClick={() => setInfo('bg-info', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-info', ThemeConfig['defaultTheme'])}/>
|
||||
<Button
|
||||
color='light'
|
||||
onClick={() => setInfo('bg-light', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-light', ThemeConfig['defaultTheme'])}/>
|
||||
<Button
|
||||
color='dark'
|
||||
onClick={() => setInfo('bg-dark', 'background')}/>
|
||||
onClick={() => setInfo('background', 'bg-dark', ThemeConfig['defaultTheme'])}/>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup style={{marginTop: '15px', marginBottom: '15px'}}>
|
||||
<Button disabled color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}>
|
||||
<FontAwesomeIcon icon={faBrush} /> Set button color
|
||||
</Button>
|
||||
<Button
|
||||
color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
|
||||
outline
|
||||
onClick={() => setInfo('light', 'buttonColor')}>White</Button>
|
||||
color='light'
|
||||
onClick={() => setInfo('buttonColor', 'light', ThemeConfig['defaultTheme'])}>White</Button>
|
||||
<Button
|
||||
color='dark'
|
||||
onClick={() => setInfo('buttonColor', 'black', ThemeConfig['defaultTheme'])}>Black</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup style={{marginTop: '15px', marginBottom: '15px'}}>
|
||||
<Button disabled color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}>
|
||||
<FontAwesomeIcon icon={faBrush} /> Default Theme
|
||||
</Button>
|
||||
<Button
|
||||
color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
|
||||
outline
|
||||
onClick={() => setInfo('black', 'buttonColor')}>Black</Button>
|
||||
onClick={() => setInfo(null, null, 'lightTheme')}>Light Theme</Button>
|
||||
<Button
|
||||
color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
|
||||
outline
|
||||
onClick={() => setInfo(null, null, 'darkTheme')}>Dark Theme</Button>
|
||||
</ButtonGroup>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user