Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-30 18:09:40 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add button to show collections containing the release on release page

Browse source 
feat: add release in list widget to release page
fix: redirecting if viewing not favorites collection for unauthorized user
This commit is contained in:
Kentai Radiquum 2024-08-18 14:40:59 +05:00
parent 723b620749
commit 501d3a1705
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 117 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

31
app/components/CollectionInfo/CollectionInfoLists.tsx → app/components/InfoLists/InfoLists.tsx
View file

@ -1,13 +1,21 @@
import { Card } from "flowbite-react";
export const CollectionInfoLists = (props: {
export const InfoLists = (props: {
completed: number;
planned: number;
abandoned: number;
delayed: number;
watching: number;
total: number;
total?: number;
}) => {
const total =
props.total ||
props.watching +
props.planned +
props.completed +
props.delayed +
props.abandoned;
return (
<Card className="w-full h-fit ">
<div
@ -15,12 +23,19 @@ export const CollectionInfoLists = (props: {
style={
{
"--width-of-one": "5",
"--watching-percent": `calc(var(--width-of-one) * (${props.watching} / ${props.total} * 100%))`,
"--planned-percent": `calc(var(--width-of-one) * (${props.planned} / ${props.total} * 100%))`,
"--watched-percent": `calc(var(--width-of-one) * (${props.completed} / ${props.total} * 100%))`,
"--delayed-percent": `calc(var(--width-of-one) * (${props.delayed} / ${props.total} * 100%))`,
"--abandoned-percent": `calc(var(--width-of-one) * (${props.abandoned} / ${props.total} * 100%))`,
"--no-list-percent": `calc(var(--width-of-one) * (${props.total - (props.watching + props.planned + props.completed + props.delayed + props.abandoned)} / ${props.total} * 100%))`,
"--watching-percent": `calc(var(--width-of-one) * (${props.watching} / ${total} * 100%))`,
"--planned-percent": `calc(var(--width-of-one) * (${props.planned} / ${total} * 100%))`,
"--watched-percent": `calc(var(--width-of-one) * (${props.completed} / ${total} * 100%))`,
"--delayed-percent": `calc(var(--width-of-one) * (${props.delayed} / ${total} * 100%))`,
"--abandoned-percent": `calc(var(--width-of-one) * (${props.abandoned} / ${total} * 100%))`,
"--no-list-percent": `calc(var(--width-of-one) * (${
total -
(props.watching +
props.planned +
props.completed +
props.delayed +
props.abandoned)
} / ${total} * 100%))`,
} as React.CSSProperties
}
>

87
app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
View file

@ -1,5 +1,6 @@
import { Card, Dropdown, Button } from "flowbite-react";
import { ENDPOINTS } from "#/api/config";
import Link from "next/link";
const lists = [
{ list: 0, name: "Не смотрю" },
@ -12,8 +13,7 @@ const lists = [
const DropdownTheme = {
floating: {
target:
"flex-1",
target: "flex-1",
},
};
@ -24,6 +24,7 @@ export const ReleaseInfoUserList = (props: {
token: string | null;
setUserList: any;
setIsFavorite: any;
collection_count: number;
}) => {
function _addToFavorite() {
if (props.token) {
@ -51,39 +52,57 @@ export const ReleaseInfoUserList = (props: {
return (
<Card className="h-full">
{props.token ? (
<div className="flex flex-wrap gap-2">
<Dropdown
label={lists[props.userList].name}
dismissOnClick={true}
theme={DropdownTheme}
color="blue"
>
{lists.map((list) => (
<Dropdown.Item
key={list.list}
onClick={() => _addToList(list.list)}
>
{list.name}
</Dropdown.Item>
))}
</Dropdown>
<Button
color="blue"
onClick={() => {
_addToFavorite();
}}
>
<span
className={`iconify w-6 h-6 ${
props.isFavorite ? "mdi--heart" : "mdi--heart-outline"
}`}
></span>
<div className="flex flex-wrap gap-1">
<Button color={"blue"} size="sm" className="w-full lg:w-auto ">
<Link href={`/release/${props.release_id}/collections`}>
Показать в коллекциях{" "}
<span className="p-1 ml-1 text-gray-500 rounded bg-gray-50">
{props.collection_count}
</span>
</Link>
</Button>
{props.token && (
<Button color={"blue"} size="sm" className="w-full lg:w-auto lg:flex-1">
В коллекцию{" "}
<span className="w-6 h-6 iconify mdi--bookmark-add "></span>
</Button>
</div>
) : (
<p>Войдите что-бы добавить в избранное или список</p>
)}
)}
{props.token ? (
<>
<Dropdown
label={lists[props.userList].name}
dismissOnClick={true}
theme={DropdownTheme}
color="blue"
size="sm"
>
{lists.map((list) => (
<Dropdown.Item
key={list.list}
onClick={() => _addToList(list.list)}
>
{list.name}
</Dropdown.Item>
))}
</Dropdown>
<Button
color="blue"
onClick={() => {
_addToFavorite();
}}
size="sm"
>
<span
className={`iconify w-6 h-6 ${
props.isFavorite ? "mdi--heart" : "mdi--heart-outline"
}`}
></span>
</Button>
</>
) : (
<p>Войдите что-бы добавить список, избранное или коллекцию</p>
)}
</div>
</Card>
);
};