Add watchlist menu to set status in details page

This commit is contained in:
Zoe Roux 2023-12-03 23:59:47 +01:00
parent 015bfe983c
commit 6974ef0163
6 changed files with 36 additions and 35 deletions

View File

@ -165,6 +165,7 @@ public class WatchStatusRepository : IWatchStatusRepository
Guid userId)
{
await _database.ShowWatchStatus
.IgnoreAutoIncludes()
.Where(x => x.ShowId == showId && x.UserId == userId)
.ExecuteDeleteAsync();
await _database.EpisodeWatchStatus

View File

@ -147,7 +147,7 @@ const MenuItem = ({
icon={icon ?? Check}
color={disabled ? theme.overlay0 : theme.paragraph}
size={24}
{...css({ paddingLeft: icon ? ts(2) : 0 })}
{...css({ paddingX: ts(1) })}
/>
);

View File

@ -141,7 +141,7 @@ const MenuItem = ({
icon={icon ?? Dot}
color={disabled ? theme.overlay0 : theme.paragraph}
size={icon ? 24 : ts(1)}
{...nCss({ paddingRight: ts(1) })}
{...nCss({ paddingX: ts(1) })}
/>
);

View File

@ -18,7 +18,7 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { IconButton, tooltip } from "@kyoo/primitives";
import { IconButton, Menu, tooltip } from "@kyoo/primitives";
import { ComponentProps } from "react";
import { useTranslation } from "react-i18next";
import BookmarkAdd from "@material-symbols/svg-400/rounded/bookmark_add.svg";
@ -54,12 +54,9 @@ export const WatchListInfo = ({
if (mutation.isPending) status = mutation.variables;
if (account == null) {
return <IconButton
icon={BookmarkAdd}
disabled
{...tooltip(t("show.watchlistLogin"))}
{...props}
/>
return (
<IconButton icon={BookmarkAdd} disabled {...tooltip(t("show.watchlistLogin"))} {...props} />
);
}
switch (status) {
@ -72,24 +69,6 @@ export const WatchListInfo = ({
{...props}
/>
);
case WatchStatusV.Planned:
return (
<IconButton
icon={Bookmark}
// onPress={() => mutation.mutate(WatchStatusV.)}
{...tooltip(t("show.watchlistEdit"))}
{...props}
/>
);
case WatchStatusV.Watching:
return (
<IconButton
icon={Bookmark}
// onPress={() => mutation.mutate(WatchStatusV.Planned)}
{...tooltip(t("show.watchlistEdit"))}
{...props}
/>
);
case WatchStatusV.Completed:
return (
<IconButton
@ -99,14 +78,21 @@ export const WatchListInfo = ({
{...props}
/>
);
case WatchStatusV.Planned:
case WatchStatusV.Watching:
case WatchStatusV.Droped:
return (
<IconButton
icon={BookmarkRemove}
// onPress={() => mutation.mutate(WatchStatusV.Planned)}
{...tooltip(t("show.watchlistEdit"))}
{...props}
/>
<Menu Trigger={IconButton} icon={Bookmark} {...tooltip(t("show.watchlistEdit"))} {...props}>
{Object.values(WatchStatusV).map((x) => (
<Menu.Item
key={x}
label={t(`show.watchlistMark.${x.toLowerCase()}`)}
onSelect={() => mutation.mutate(x)}
selected={x === status}
/>
))}
<Menu.Item label={t("show.watchlistMark.null")} onSelect={() => mutation.mutate(null)} />
</Menu>
);
}
};

View File

@ -23,7 +23,14 @@
"watchlistAdd": "Add to your plan to watch list",
"watchlistEdit": "Edit watch status",
"watchlistRemove": "Mark as not seen",
"watchlistLogin": "Login to add to your watchlist"
"watchlistLogin": "Login to add to your watchlist",
"watchlistMark": {
"completed": "Mark as completed",
"planned": "Mark as planned",
"watching": "Mark as watching",
"droped": "Mark as dropped",
"null": "Mark as not seen"
}
},
"browse": {
"sortby": "Sort by {{key}}",

View File

@ -23,7 +23,14 @@
"watchlistAdd": "Ajouter à votre liste de visionnage",
"watchlistEdit": "Editer le status",
"watchlistRemove": "Marquer comme non vu",
"watchlistLogin": "Connectez-vous pour ajouter a votre liste de visionnage"
"watchlistLogin": "Connectez-vous pour ajouter a votre liste de visionnage",
"watchlistMark": {
"completed": "Marquer comme complété",
"planned": "Marquer comme prévu a voir",
"watching": "Marquer en cours de visionnage",
"droped": "Marquer comme abandonné",
"null": "Marquer comme non vu"
}
},
"browse": {
"sortby": "Trier par {{key}}",