mirrors/Tachidesk
1
0
Fork 0
mirror of https://github.com/Suwayomi/Tachidesk.git synced 2026-01-06 03:42:34 +01:00
Code Issues Projects Releases Wiki Activity

category done!

Browse Source
This commit is contained in:
Aria Moradi
2021-02-21 04:27:41 +03:30
parent 312a8baa13
commit 9151034fbc
7 changed files with 205 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
server/src/main/kotlin/ir/armor/tachidesk/Main.kt
View File

@@ -18,6 +18,7 @@ import ir.armor.tachidesk.util.getExtensionIcon
import ir.armor.tachidesk.util.getExtensionList
import ir.armor.tachidesk.util.getLibraryMangas
import ir.armor.tachidesk.util.getManga
import ir.armor.tachidesk.util.getMangaCategories
import ir.armor.tachidesk.util.getMangaList
import ir.armor.tachidesk.util.getPageImage
import ir.armor.tachidesk.util.getSource
@@ -170,6 +171,12 @@ class Main {
ctx.status(200)
}
// adds the manga to category
app.get("api/v1/manga/:mangaId/category/") { ctx ->
val mangaId = ctx.pathParam("mangaId").toInt()
ctx.json(getMangaCategories(mangaId))
}
// adds the manga to category
app.get("api/v1/manga/:mangaId/category/:categoryId") { ctx ->
val mangaId = ctx.pathParam("mangaId").toInt()

11
server/src/main/kotlin/ir/armor/tachidesk/util/CategoryManga.kt
View File

@@ -1,9 +1,12 @@
package ir.armor.tachidesk.util
import ir.armor.tachidesk.database.dataclass.CategoryDataClass
import ir.armor.tachidesk.database.dataclass.MangaDataClass
import ir.armor.tachidesk.database.table.CategoryMangaTable
import ir.armor.tachidesk.database.table.CategoryTable
import ir.armor.tachidesk.database.table.MangaTable
import ir.armor.tachidesk.database.table.toDataClass
import org.jetbrains.exposed.sql.SortOrder
import org.jetbrains.exposed.sql.and
import org.jetbrains.exposed.sql.deleteWhere
import org.jetbrains.exposed.sql.insert
@@ -48,3 +51,11 @@ fun getCategoryMangaList(categoryId: Int): List<MangaDataClass> {
}
}
}
fun getMangaCategories(mangaId: Int): List<CategoryDataClass> {
return transaction {
CategoryMangaTable.innerJoin(CategoryTable).select { CategoryMangaTable.manga eq mangaId }.orderBy(CategoryTable.order to SortOrder.ASC).map {
CategoryTable.toDataClass(it)
}
}
}

1
webUI/react/.gitignore vendored
View File

@@ -1,3 +1,4 @@
node_modules/
.eslintcache
.vscode
.env

113
webUI/react/src/components/CategorySelect.tsx Normal file
View File

@@ -0,0 +1,113 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useEffect, useState } from 'react';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import Dialog from '@material-ui/core/Dialog';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
const useStyles = makeStyles(() => createStyles({
paper: {
maxHeight: 435,
width: '80%',
},
}));
interface IProps {
open: boolean
setOpen: (value: boolean) => void
mangaId: number
}
interface ICategoryInfo {
category: ICategory
selected: boolean
}
export default function CategorySelect(props: IProps) {
const classes = useStyles();
const { open, setOpen, mangaId } = props;
const [categoryInfos, setCategoryInfos] = useState<ICategoryInfo[]>([]);
const [updateTriggerHolder, setUpdateTriggerHolder] = useState(0); // just a hack
const triggerUpdate = () => setUpdateTriggerHolder(updateTriggerHolder + 1); // just a hack
useEffect(() => {
let tmpCategoryInfos: ICategoryInfo[] = [];
fetch('http://127.0.0.1:4567/api/v1/category/')
.then((response) => response.json())
.then((data: ICategory[]) => {
tmpCategoryInfos = data.map((category) => ({ category, selected: false }));
})
.then(() => {
fetch(`http://127.0.0.1:4567/api/v1/manga/${mangaId}/category/`)
.then((response) => response.json())
.then((data: ICategory[]) => {
data.forEach((category) => {
tmpCategoryInfos[category.order - 1].selected = true;
});
setCategoryInfos(tmpCategoryInfos);
});
});
}, [updateTriggerHolder]);
const handleCancel = () => {
setOpen(false);
};
const handleOk = () => {
setOpen(false);
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleChange = (event: React.ChangeEvent<HTMLInputElement>, categoryId: number) => {
const { checked } = event.target as HTMLInputElement;
fetch(`http://127.0.0.1:4567/api/v1/manga/${mangaId}/category/${categoryId}`, {
method: checked ? 'GET' : 'DELETE', mode: 'cors',
})
.then(() => triggerUpdate());
};
return (
<Dialog
classes={classes}
maxWidth="xs"
open={open}
>
<DialogTitle>Set categories</DialogTitle>
<DialogContent dividers>
<FormGroup>
{categoryInfos.map((categoryInfo) => (
<FormControlLabel
control={(
<Checkbox
checked={categoryInfo.selected}
onChange={(e) => handleChange(e, categoryInfo.category.id)}
name="checkedB"
color="default"
/>
)}
label={categoryInfo.category.name}
/>
))}
</FormGroup>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleCancel} color="primary">
Cancel
</Button>
<Button onClick={handleOk} color="primary">
Ok
</Button>
</DialogActions>
</Dialog>
);
}

29
webUI/react/src/components/MangaDetails.tsx
View File

@@ -2,18 +2,31 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { Button } from '@material-ui/core';
import { Button, createStyles, makeStyles } from '@material-ui/core';
import React, { useState } from 'react';
import CategorySelect from './CategorySelect';
const useStyles = makeStyles(() => createStyles({
root: {
display: 'flex',
flexDirection: 'row-reverse',
'& button': {
marginLeft: 10,
},
},
}));
interface IProps{
manga: IManga
}
export default function MangaDetails(props: IProps) {
const classes = useStyles();
const { manga } = props;
const [inLibrary, setInLibrary] = useState<string>(
manga.inLibrary ? 'In Library' : 'Not In Library',
);
const [categoryDialogOpen, setCategoryDialogOpen] = useState<boolean>(true);
function addToLibrary() {
setInLibrary('adding');
@@ -38,13 +51,21 @@ export default function MangaDetails(props: IProps) {
}
return (
<>
<div>
<h1>
{manga && manga.title}
</h1>
<div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
<div className={classes.root}>
<Button variant="outlined" onClick={() => handleButtonClick()}>{inLibrary}</Button>
{inLibrary === 'In Library'
&& <Button variant="outlined" onClick={() => setCategoryDialogOpen(true)}>Edit Categories</Button>}
</div>
</>
<CategorySelect
open={categoryDialogOpen}
setOpen={setCategoryDialogOpen}
mangaId={manga.id}
/>
</div>
);
}

61
webUI/react/src/screens/Library.tsx
View File

@@ -20,7 +20,7 @@ interface TabPanelProps {
function TabPanel(props: TabPanelProps) {
const {
children, value, index, ...other
children, value, index,
} = props;
return (
@@ -28,9 +28,6 @@ function TabPanel(props: TabPanelProps) {
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
// eslint-disable-next-line react/jsx-props-no-spreading
{...other}
>
{value === index && children}
</div>
@@ -41,31 +38,57 @@ export default function Library() {
const { setTitle } = useContext(NavBarTitle);
const [tabs, setTabs] = useState<IMangaCategory[]>([]);
const [tabNum, setTabNum] = useState<number>(0);
const [lastPageNum, setLastPageNum] = useState<number>(1);
// a hack so MangaGrid doesn't stop working. I won't change it in case
// if I do manga pagination for library..
const [lastPageNum, setLastPageNum] = useState<number>(1);
useEffect(() => {
setTitle('Library');
}, []);
// eslint-disable-next-line @typescript-eslint/no-shadow
const fetchAndSetMangas = (tabs: IMangaCategory[], tab: IMangaCategory, index: number) => {
fetch(`http://127.0.0.1:4567/api/v1/category/${tab.category.id}`)
.then((response) => response.json())
.then((data: IManga[]) => {
const tabsClone = JSON.parse(JSON.stringify(tabs));
tabsClone[index].mangas = data;
setTabs(tabsClone); // clone the object
});
};
const handleTabChange = (newTab: number) => {
setTabNum(newTab);
tabs.forEach((tab, index) => {
if (tab.category.order === newTab && tab.mangas.length === 0) {
// mangas are empty, fetch the mangas
fetchAndSetMangas(tabs, tab, index);
}
});
};
useEffect(() => {
// eslint-disable-next-line no-var
var newTabs: IMangaCategory[] = [];
fetch('http://127.0.0.1:4567/api/v1/library')
.then((response) => response.json())
.then((data: IManga[]) => {
// if some manga with no category exist, they will be added under a virtual category
if (data.length > 0) {
newTabs = [
return [
{
category: {
name: 'Default', isLanding: true, order: 0, id: 0,
name: 'Default', isLanding: true, order: 0, id: -1,
},
mangas: data,
},
]; // will set state on the next fetch
}
// no default category so the first tab is 1
setTabNum(1);
return [];
})
.then(
() => {
(newTabs: IMangaCategory[]) => {
fetch('http://127.0.0.1:4567/api/v1/category')
.then((response) => response.json())
.then((data: ICategory[]) => {
@@ -73,20 +96,24 @@ export default function Library() {
category,
mangas: [] as IManga[],
}));
setTabs([...newTabs, ...mangaCategories]);
const newNewTabs = [...newTabs, ...mangaCategories];
setTabs(newNewTabs);
// if no default category, we must fetch the first tab now...
// eslint-disable-next-line max-len
if (newTabs.length === 0) { fetchAndSetMangas(newNewTabs, newNewTabs[0], 0); }
});
},
);
}, []);
// eslint-disable-next-line max-len
const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => setTabNum(newValue);
let toRender;
if (tabs.length > 1) {
const tabDefines = tabs.map((tab) => (<Tab label={tab.category.name} />));
// eslint-disable-next-line max-len
const tabDefines = tabs.map((tab) => (<Tab label={tab.category.name} value={tab.category.order} />));
const tabBodies = tabs.map((tab, index) => (
<TabPanel value={tabNum} index={index}>
const tabBodies = tabs.map((tab) => (
<TabPanel value={tabNum} index={tab.category.order}>
<MangaGrid
mangas={tab.mangas}
hasNextPage={false}
@@ -102,7 +129,7 @@ export default function Library() {
<>
<Tabs
value={tabNum}
onChange={handleTabChange}
onChange={(e, newTab) => handleTabChange(newTab)}
indicatorColor="primary"
textColor="primary"
centered={!scrollableTabs}

4
webUI/react/src/screens/settings/Categories.jsx
View File

@@ -66,6 +66,7 @@ export default function Categories() {
formData.append('to', to + 1);
fetch(`http://127.0.0.1:4567/api/v1/category/${category.id}/reorder`, {
method: 'PATCH',
mode: 'cors',
body: formData,
}).finally(() => triggerUpdate());
@@ -112,12 +113,14 @@ export default function Categories() {
if (categoryToEdit === -1) {
fetch('http://127.0.0.1:4567/api/v1/category/', {
method: 'POST',
mode: 'cors',
body: formData,
}).finally(() => triggerUpdate());
} else {
const category = categories[categoryToEdit];
fetch(`http://127.0.0.1:4567/api/v1/category/${category.id}`, {
method: 'PATCH',
mode: 'cors',
body: formData,
}).finally(() => triggerUpdate());
}
@@ -127,6 +130,7 @@ export default function Categories() {
const category = categories[index];
fetch(`http://127.0.0.1:4567/api/v1/category/${category.id}`, {
method: 'DELETE',
mode: 'cors',
}).finally(() => triggerUpdate());
};