add templates

This commit is contained in:
Spectralitree 2021-07-17 15:03:40 +02:00
parent 65632a9103
commit ae673558d1
5 changed files with 80 additions and 4 deletions

View File

@ -12,6 +12,7 @@ import Footer from './Components/Footer.js'
import Public from './Pages/Public.js'
import Home from './Pages/Home.js'
import Settings from './Pages/Settings.js'
import Template from './Pages/Template.js'
import Navbar from './Components/Navbar.js'
export default function App() {
@ -42,6 +43,9 @@ export default function App() {
<Route path="/pk-webs/settings">
<Settings forceUpdate={forceUpdate}/>
</Route>
<Route path="/pk-webs/template">
<Template/>
</Route>
</Switch>
</BS.Container>
</div>

View File

@ -27,6 +27,7 @@ const Navbar = ({ setIsSubmit, forceUpdate}) => {
{/* for some reason just using react router's link elements doesn't work here, maybe look into that */}
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/dash')} >Dash</BS.NavDropdown.Item>
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/settings')} >Settings</BS.NavDropdown.Item>
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/template')}>Templates</BS.NavDropdown.Item>
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/profile')}>Public profile</BS.NavDropdown.Item>
{ localStorage.getItem('token') ? <><hr className="my-1"/><BS.NavDropdown.Item onClick={() => logOut()}>Log out</BS.NavDropdown.Item></> : "" }

View File

@ -47,7 +47,8 @@ export default function MemberCard(props) {
const {
register: registerEdit,
handleSubmit: handleSubmitEdit
handleSubmit: handleSubmitEdit,
setValue
} = useForm();
const {
@ -259,7 +260,8 @@ export default function MemberCard(props) {
</BS.Col>
</BS.Form.Row>
<BS.Form.Group className="mt-3">
<BS.Form.Label>Description:</BS.Form.Label>
<BS.Form.Label>Description:</BS.Form.Label><br/>
{ localStorage.getItem('template1') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template1'))}>Template 1</BS.Button> : ""} { localStorage.getItem('template2') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template2'))}>Template 2</BS.Button> : ""} { localStorage.getItem('template3') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template3'))}>Template 3</BS.Button> : ""}
<BS.Form.Control maxLength="1000" as="textarea" name="description" {...registerEdit("description")} defaultValue={editDesc}/>
</BS.Form.Group>
<BS.Button variant="light" onClick={() => setEditMode(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="danger" className="float-right" onClick={() => setOpen(o => !o)}>Delete</BS.Button>

View File

@ -43,7 +43,7 @@ export default function Memberlist() {
prefix: "", suffix: ""
}]);
const {register, handleSubmit} = useForm();
const {register, handleSubmit, setValue: setTemplate} = useForm();
const fetchMembers = useCallback( () => {
setIsLoading(true);
@ -401,7 +401,8 @@ export default function Memberlist() {
</BS.Form.Row>
<hr/></> : "" }
<BS.Form.Group className="mt-3">
<BS.Form.Label>Description:</BS.Form.Label>
<BS.Form.Label>Description:</BS.Form.Label><br/>
{ localStorage.getItem('template1') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template1'))}>Template 1</BS.Button> : ""} { localStorage.getItem('template2') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template2'))}>Template 2</BS.Button> : ""} { localStorage.getItem('template3') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template3'))}>Template 3</BS.Button> : ""}
<BS.Form.Control maxLength="1000" as="textarea" rows="7" name="description" {...register("description")} defaultValue={''}/>
</BS.Form.Group>
<BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>

68
src/Pages/Template.js Normal file
View File

@ -0,0 +1,68 @@
import { useEffect, useState } from 'react';
import * as BS from 'react-bootstrap';
import { FaFileAlt } from 'react-icons/fa';
import { useForm } from 'react-hook-form';
import autosize from 'autosize';
const Template = () => {
const [isSubmit, setIsSubmit] = useState(false);
const { register, handleSubmit } = useForm();
var template1 = "";
var template2 = "";
var template3 = "";
if (localStorage.getItem('template1') !== null) template1 = localStorage.getItem('template1');
if (localStorage.getItem('template2') !== null) template2 = localStorage.getItem('template2');
if (localStorage.getItem('template3') !== null) template3 = localStorage.getItem('template3');
const onSubmit = data => {
localStorage.setItem('template1', data.template1);
localStorage.setItem('template2', data.template2);
localStorage.setItem('template3', data.template3);
setIsSubmit(true);
};
useEffect(() => {
autosize(document.querySelectorAll('textarea'));
});
return (
<>
<BS.Card className="mb-3">
<BS.Card.Header>
<BS.Card.Title>
<FaFileAlt className="mr-3" />
Templates
</BS.Card.Title>
</BS.Card.Header>
<BS.Card.Body>
<p>Templates allow you to quickly set up a member description with a specific layout. Put in the template in one of the below fields, and access it whenever you create or edit a member. You can set up to 3 templates.</p>
<p><b>Note:</b> just like the settings, these templates are saved in your localstorage, which means you will have to set them again on every different device/browser you use. If you clear your local storage, the templates will also be cleared!</p>
</BS.Card.Body>
</BS.Card>
<BS.Card>
<BS.Card.Body>
<BS.Form onSubmit={handleSubmit(onSubmit)}>
<BS.Form.Group className="mt-3">
<BS.Form.Label><b>Template 1.</b></BS.Form.Label>
<BS.Form.Control maxLength="1000" as="textarea" name="template1" {...register("template1")} defaultValue={template1}/>
</BS.Form.Group>
<BS.Form.Group className="mt-3">
<BS.Form.Label><b>Template 2.</b></BS.Form.Label>
<BS.Form.Control maxLength="1000" as="textarea" name="template2" {...register("template2")} defaultValue={template2}/>
</BS.Form.Group>
<BS.Form.Group className="mt-3">
<BS.Form.Label><b>Template 3.</b></BS.Form.Label>
<BS.Form.Control maxLength="1000" as="textarea" name="template3" {...register("template3")} defaultValue={template3}/>
</BS.Form.Group>
<BS.Button variant="primary" className="float-left mr-2" type="submit">Submit</BS.Button> { isSubmit? <p style={{opacity: 0.7}}>Templates saved!</p> : ""}
</BS.Form>
</BS.Card.Body>
</BS.Card>
</>
);
}
export default Template;