add templates
This commit is contained in:
parent
65632a9103
commit
ae673558d1
@ -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>
|
||||
|
@ -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></> : "" }
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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
68
src/Pages/Template.js
Normal 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;
|
Loading…
Reference in New Issue
Block a user