Shikiryu/diaREact
1
0
Fork 0
Code Issues 19 Pull Requests Projects Releases Wiki Activity

🚧 Commence la personnalisation de l'affichage des pages

Browse Source 
Pour #12
This commit is contained in:
Clement Desmidt
2022-04-19 16:55:18 +02:00
parent 2c56eb91af
commit 1dca0951e8
18 changed files with 695 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/js/components/pages/App.tsx
View File

@@ -24,6 +24,7 @@ const sessionPassphrase = sessionStorage.getItem("key") as string;
let pages: IList[] = [];
let getPageContentUrl,
postUrl,
settings,
removeUrl,
checkword,
startDate,
@@ -33,7 +34,8 @@ if (app) {
getPageContentUrl = "" + app.getAttribute('data-url');
pages = JSON.parse("" + app.getAttribute('data-list')) as IList[];
postUrl = "" + app.getAttribute('data-post');
startDate = "" + app.getAttribute('data-start');
startDate = "" + app.getAttribute('data-start');
settings = JSON.parse("" + app.getAttribute('data-settings'));
removeUrl = "" + app.getAttribute('data-remove');
csrf = "" + app.getAttribute('data-csrf');
checkword = "" + app.getAttribute('data-checkword');
@@ -195,6 +197,7 @@ function App() {
csrf={csrf}
removeUrl={removeUrl}
loadPages={loadPages}
settings={settings}
setAllLoaded={setAllLoaded}
/>
<Divider/>

14
resources/js/components/pages/List.tsx
View File

@@ -5,7 +5,7 @@ import {IPages} from "../../interfaces/IPages";
import {IList} from "../../interfaces/IList";
import {isAllLoadedLocally} from "../../utils";
export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPages, setAllLoaded}: IPages) {
export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPages, settings, setAllLoaded}: IPages) {
const isPassphraseSet = passphrase !== null;
const perPage = 1;
const total = pages.length;
@@ -24,26 +24,22 @@ export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPage
const json = await response.json();
if (json.success) {
console.log(listPages.length);
const newListPages = listPages.filter(function (value) {
console.log(value.id);
return value.id !== id;
});
setListPages(newListPages);
console.log(newListPages.length);
console.log(listPages.length);
updateListPages(newListPages.slice((currentPage - 1) * perPage, ((currentPage - 1) * perPage) + perPage).map(page =>
<Page page={page} url={url} remove={removePage} passphrase={passphrase} key={page.id}/>));
<Page page={page} url={url} remove={removePage} settings={settings} passphrase={passphrase} key={page.id}/>));
}
}
const [listPagesDisplayed, updateListPages] = React.useState(listPages.slice((currentPage-1) * perPage, ((currentPage-1) * perPage) + perPage ).map(page =>
<Page page={page} url={url} remove={removePage} passphrase={passphrase} key={page.id} />));
<Page page={page} url={url} remove={removePage} settings={settings} passphrase={passphrase} key={page.id} />));
const handlePageChange = (event: React.ChangeEvent<unknown>, value: number) => {
setPage(value);
updateListPages(listPages.slice((value-1) * perPage, ((value-1) * perPage) + perPage).map(page =>
<Page page={page} url={url} remove={removePage} passphrase={passphrase} key={page.id}/>));
<Page page={page} url={url} settings={settings} remove={removePage} passphrase={passphrase} key={page.id}/>));
};
const loadAllPages = function() {
@@ -61,7 +57,7 @@ export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPage
localStorage.setItem(page.id + "text", json.content);
updateListPages([]);
updateListPages(listPages.slice((currentPage-1) * perPage, ((currentPage-1) * perPage) + perPage).map(page =>
<Page page={page} url={url} remove={removePage} passphrase={passphrase} key={page.id}/>));
<Page page={page} url={url} remove={removePage} settings={settings} passphrase={passphrase} key={page.id}/>));
}
}

26
resources/js/components/pages/Page.tsx
View File

@@ -3,7 +3,7 @@ import {
AlertTitle,
Card, CardContent,
CardHeader, Collapse,
Grid, IconButton
Grid, IconButton,
} from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import * as React from 'react';
@@ -12,7 +12,7 @@ import {Delete, Download} from "@mui/icons-material";
import MDEditor from "@uiw/react-md-editor";
import {PropPage} from "../../interfaces/PropPage";
const Page = function({page, url, passphrase, remove}: PropPage) {
const Page = function({page, url, passphrase, settings, remove}: PropPage) {
const [more, setMore] = React.useState<boolean>(false);
const handleMoreClick = () => { setMore(!more); };
@@ -49,10 +49,22 @@ const Page = function({page, url, passphrase, remove}: PropPage) {
);
}
return (
<Grid item xs={12} sm={12} md={12} id={page.id}>
<Grid item xs={12} sm={12} md={12} id={page.id}
sx={{
bgcolor: settings.background_color,
color: settings.text_color,
fontSize: settings.font_size + "px",
fontFamily: settings.font,
lineHeight: settings.line_spacing
}}>
<Card>
<CardHeader
sx={{
bgcolor: settings.background_color,
color: settings.text_color
}}
action={
icons
}
@@ -65,7 +77,13 @@ const Page = function({page, url, passphrase, remove}: PropPage) {
</IconButton>
</Collapse>
</CardHeader>
<CardContent>
<CardContent sx={{
backgroundColor: settings.background_color,
color: settings.text_color,
fontSize: settings.font_size + "px",
fontFamily: settings.font,
lineHeight: settings.line_spacing
}}>
<MDEditor.Markdown source={content} />
</CardContent>
</Card>

8
resources/js/components/user/BasicMenu.tsx
View File

@@ -13,6 +13,12 @@ export default function BasicMenu({nickname}) {
setAnchorEl(null);
};
function gotoSettings() {
const currentHref = location.href.split('/');
currentHref.pop();
location.href = currentHref.join('/') + '/settings';
}
function logout() {
const logoutForm: HTMLFormElement = document.getElementById("logout-form") as HTMLFormElement;
logoutForm.submit();
@@ -39,7 +45,7 @@ export default function BasicMenu({nickname}) {
'aria-labelledby': 'basic-button',
}}
>
{/*<MenuItem onClick={handleClose}>My account</MenuItem>*/}
<MenuItem onClick={gotoSettings}>Settings</MenuItem>
<MenuItem onClick={logout}>Logout</MenuItem>
</Menu>
</div>

16
resources/js/components/user/MobileMenu.tsx
View File

@@ -28,6 +28,12 @@ export default function MobileMenu({nickname}) {
setState( open );
};
function gotoSettings() {
const currentHref = location.href.split('/');
currentHref.pop();
location.href = currentHref.join('/') + '/settings';
}
function logout() {
const logoutForm: HTMLFormElement = document.getElementById("logout-form") as HTMLFormElement;
logoutForm.submit();
@@ -53,7 +59,7 @@ export default function MobileMenu({nickname}) {
onKeyDown={toggleDrawer(false)}
>
<List>
<ListItem button key={"user"}>
<ListItem key={"user"}>
<ListItemIcon>
<MailIcon />
</ListItemIcon>
@@ -62,7 +68,13 @@ export default function MobileMenu({nickname}) {
</List>
<Divider />
<List>
<ListItem button key={"user.logout"} onClick={logout}>
<ListItem key={"user.settings"} onClick={gotoSettings}>
<ListItemIcon>
<MailIcon />
</ListItemIcon>
<ListItemText primary={"Settings"} />
</ListItem>
<ListItem key={"user.logout"} onClick={logout}>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>