jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🔀 Merge dev to auth branch

Browse Source
This commit is contained in:
Manuel
2023-09-10 13:38:53 +02:00
parent 9dd6654a5c 12230bd9e7
commit f35f6debaf
617 changed files with 8473 additions and 1499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/widgets/media-requests/MediaRequestListTile.tsx
View File

@@ -1,14 +1,15 @@
import {
ActionIcon,
ActionIcon, Anchor,
Badge,
Card,
Center,
Flex,
Group,
Image,
ScrollArea,
Stack,
Text,
Tooltip,
Tooltip, useMantineTheme,
} from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { IconCheck, IconGitPullRequest, IconThumbDown, IconThumbUp } from '@tabler/icons-react';
@@ -31,6 +32,10 @@ const definition = defineWidget({
type: 'switch',
defaultValue: true,
},
openInNewTab: {
type: 'switch',
defaultValue: true,
},
},
component: MediaRequestListTile,
gridstack: {
@@ -56,7 +61,8 @@ const useMediaRequestDecisionMutation = () => {
const utils = api.useContext();
const { mutateAsync } = api.overseerr.decide.useMutation({
onSuccess() {
utils.mediaRequest.all.invalidate();
utils.mediaRequest.allMedia.invalidate();
utils.mediaRequest.users.invalidate();
},
});
const { t } = useTranslation('modules/media-requests-list');
@@ -94,11 +100,13 @@ const useMediaRequestDecisionMutation = () => {
function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
const { t } = useTranslation('modules/media-requests-list');
const { data, isLoading } = useMediaRequestQuery();
const { data, isLoading } = useMediaRequestQuery(widget);
// Use mutation to approve or deny a pending request
const decideAsync = useMediaRequestDecisionMutation();
const { data: sessionData } = useSession();
const mantineTheme = useMantineTheme();
if (!data || isLoading) {
return <WidgetLoading />;
}
@@ -127,58 +135,57 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
});
return (
<Stack>
{countPendingApproval > 0 ? (
<Text>{t('pending', { countPendingApproval })}</Text>
) : (
<Text>{t('nonePending')}</Text>
)}
{sortedData.map((item) => (
<Card withBorder>
<Flex wrap="wrap" justify="space-between" gap="md">
<Flex gap="md">
<Image
src={item.posterPath}
width={30}
height={50}
alt="poster"
radius="xs"
withPlaceholder
/>
<Stack spacing={0}>
<Group spacing="xs">
{item.airDate && <Text>{item.airDate.split('-')[0]}</Text>}
<MediaRequestStatusBadge status={item.status} />
</Group>
<Text
sx={{ cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }}
lineClamp={1}
weight="bold"
component="a"
href={item.href}
>
{item.name}
</Text>
</Stack>
</Flex>
<Stack justify="center">
<Flex gap="xs">
<ScrollArea h="100%">
<Stack>
{countPendingApproval > 0 ? (
<Text>{t('pending', { countPendingApproval })}</Text>
) : (
<Text>{t('nonePending')}</Text>
)}
{sortedData.map((item) => (
<Card radius="md" withBorder>
<Flex wrap="wrap" justify="space-between" gap="md">
<Flex gap="md">
<Image
src={item.userProfilePicture}
width={25}
height={25}
alt="requester avatar"
radius="xl"
src={item.posterPath}
width={30}
height={50}
alt="poster"
radius="xs"
withPlaceholder
/>
<Text
component="a"
href={item.userLink}
sx={{ cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }}
>
{item.userName}
</Text>
<Stack spacing={0}>
<Group spacing="xs">
{item.airDate && <Text>{item.airDate.split('-')[0]}</Text>}
<MediaRequestStatusBadge status={item.status} />
</Group>
<Anchor
href={item.href}
target={widget.properties.openInNewTab ? "_blank" : "_self"}
c={mantineTheme.colorScheme === 'dark' ? 'gray.3' : 'gray.8'}
>
{item.name}
</Anchor>
</Stack>
</Flex>
<Stack justify="center">
<Flex gap="xs">
<Image
src={item.userProfilePicture}
width={25}
height={25}
alt="requester avatar"
radius="xl"
withPlaceholder
/>
<Anchor
href={item.userLink}
target={widget.properties.openInNewTab ? "_blank" : "_self"}
c={mantineTheme.colorScheme === 'dark' ? 'gray.3' : 'gray.8'}
>
{item.userName}
</Anchor>
</Flex>
{item.status === MediaRequestStatus.PendingApproval && sessionData?.user?.isAdmin && (
<Group>
@@ -195,47 +202,48 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
loading: true,
});
await decideAsync({
request: item,
isApproved: true,
});
}}
>
<IconThumbUp />
</ActionIcon>
</Tooltip>
<Tooltip label={t('tooltips.decline')} withArrow withinPortal>
<ActionIcon
variant="light"
color="red"
onClick={async () => {
await decideAsync({
request: item,
isApproved: false,
});
}}
>
<IconThumbDown />
</ActionIcon>
</Tooltip>
</Group>
)}
</Stack>
</Flex>
await decideAsync({
request: item,
isApproved: true,
});
}}
>
<IconThumbUp />
</ActionIcon>
</Tooltip>
<Tooltip label={t('tooltips.decline')} withArrow withinPortal>
<ActionIcon
variant="light"
color="red"
onClick={async () => {
await decideAsync({
request: item,
isApproved: false,
});
}}
>
<IconThumbDown />
</ActionIcon>
</Tooltip>
</Group>
)}
</Stack>
</Flex>
<Image
src={item.backdropPath}
pos="absolute"
w="100%"
h="100%"
opacity={0.1}
top={0}
left={0}
style={{ pointerEvents: 'none' }}
/>
</Card>
))}
</Stack>
<Image
src={item.backdropPath}
pos="absolute"
w="100%"
h="100%"
opacity={0.1}
top={0}
left={0}
style={{ pointerEvents: 'none' }}
/>
</Card>
))}
</Stack>
</ScrollArea>
);
}