Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 17:26:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix miscellaneous console errors (#1418)

Browse Source 
* 🐛 Bookmark widget key fix

* 🐛 Media request list widget key fix

* 🐛 media server widget key fix

* 🐛 Remove "hasNextLevel" error
This commit is contained in:
Tagaishi
2023-10-08 11:46:18 +02:00
committed by GitHub
parent a7655b6348
commit 4e036315ba
4 changed files with 60 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/widgets/bookmark/BookmarkWidgetTile.tsx
View File

@@ -254,6 +254,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
); );
case 'horizontal': case 'horizontal':
case 'vertical': case 'vertical':
const flexDirection = widget.properties.layout === 'vertical' ? 'column' : 'row';
return ( return (
<Stack h="100%" spacing={0}> <Stack h="100%" spacing={0}>
<Title size="h4" px="0.25rem"> <Title size="h4" px="0.25rem">
@@ -276,21 +277,19 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
}} }}
> >
<Flex <Flex
direction={ widget.properties.layout === 'vertical' ? 'column' : 'row' } direction={flexDirection}
gap="0" gap="0"
h="100%" h="100%"
w="100%" w="100%"
> >
{widget.properties.items.map((item: BookmarkItem, index) => ( {widget.properties.items.map((item: BookmarkItem, index) => (
<> <div key={index} style={{ display: 'flex', flex: '1', flexDirection: flexDirection, }}>
{index > 0 && <Divider
<Divider m="3px"
m="3px" orientation={ widget.properties.layout !== 'vertical' ? 'vertical' : 'horizontal' }
orientation={ widget.properties.layout !== 'vertical' ? 'vertical' : 'horizontal' } color={index === 0 ? "transparent" : undefined}
/> />
}
<Card <Card
key={index}
px="md" px="md"
py="1px" py="1px"
component="a" component="a"
@@ -307,7 +306,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
> >
<BookmarkItemContent item={item}/> <BookmarkItemContent item={item}/>
</Card> </Card>
</> </div>
))} ))}
</Flex> </Flex>
</ScrollArea> </ScrollArea>

1
src/widgets/calendar/CalendarTile.tsx
View File

@@ -105,7 +105,6 @@ function CalendarTile({ widget }: CalendarTileProps) {
style={{ position: 'relative' }} style={{ position: 'relative' }}
date={month} date={month}
maxLevel="month" maxLevel="month"
hasNextLevel={false}
styles={{ styles={{
calendarHeader: { calendarHeader: {
maxWidth: 'inherit', maxWidth: 'inherit',

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

@@ -1,5 +1,6 @@
import { import {
ActionIcon, Anchor, ActionIcon,
Anchor,
Badge, Badge,
Card, Card,
Center, Center,
@@ -9,7 +10,8 @@ import {
ScrollArea, ScrollArea,
Stack, Stack,
Text, Text,
Tooltip, useMantineTheme, Tooltip,
useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import { notifications } from '@mantine/notifications'; import { notifications } from '@mantine/notifications';
import { IconCheck, IconGitPullRequest, IconThumbDown, IconThumbUp } from '@tabler/icons-react'; import { IconCheck, IconGitPullRequest, IconThumbDown, IconThumbUp } from '@tabler/icons-react';
@@ -142,8 +144,8 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
) : ( ) : (
<Text>{t('nonePending')}</Text> <Text>{t('nonePending')}</Text>
)} )}
{sortedData.map((item) => ( {sortedData.map((item, index) => (
<Card radius="md" withBorder> <Card radius="md" withBorder key={index}>
<Flex wrap="wrap" justify="space-between" gap="md"> <Flex wrap="wrap" justify="space-between" gap="md">
<Flex gap="md"> <Flex gap="md">
<Image <Image
@@ -161,9 +163,9 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
</Group> </Group>
<Anchor <Anchor
href={item.href} href={item.href}
target={widget.properties.openInNewTab ? "_blank" : "_self"} target={widget.properties.openInNewTab ? '_blank' : '_self'}
c={mantineTheme.colorScheme === 'dark' ? 'gray.3' : 'gray.8'} c={mantineTheme.colorScheme === 'dark' ? 'gray.3' : 'gray.8'}
> >
{item.name} {item.name}
</Anchor> </Anchor>
</Stack> </Stack>
@@ -180,53 +182,54 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
/> />
<Anchor <Anchor
href={item.userLink} href={item.userLink}
target={widget.properties.openInNewTab ? "_blank" : "_self"} target={widget.properties.openInNewTab ? '_blank' : '_self'}
c={mantineTheme.colorScheme === 'dark' ? 'gray.3' : 'gray.8'} c={mantineTheme.colorScheme === 'dark' ? 'gray.3' : 'gray.8'}
> >
{item.userName} {item.userName}
</Anchor> </Anchor>
</Flex> </Flex>
{item.status === MediaRequestStatus.PendingApproval && sessionData?.user?.isAdmin && ( {item.status === MediaRequestStatus.PendingApproval &&
<Group> sessionData?.user?.isAdmin && (
<Tooltip label={t('tooltips.approve')} withArrow withinPortal> <Group>
<ActionIcon <Tooltip label={t('tooltips.approve')} withArrow withinPortal>
variant="light" <ActionIcon
color="green" variant="light"
onClick={async () => { color="green"
notifications.show({ onClick={async () => {
id: `approve ${item.id}`, notifications.show({
color: 'yellow', id: `approve ${item.id}`,
title: t('tooltips.approving'), color: 'yellow',
message: undefined, title: t('tooltips.approving'),
loading: true, message: undefined,
}); loading: true,
});
await decideAsync({ await decideAsync({
request: item, request: item,
isApproved: true, isApproved: true,
}); });
}} }}
> >
<IconThumbUp /> <IconThumbUp />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
<Tooltip label={t('tooltips.decline')} withArrow withinPortal> <Tooltip label={t('tooltips.decline')} withArrow withinPortal>
<ActionIcon <ActionIcon
variant="light" variant="light"
color="red" color="red"
onClick={async () => { onClick={async () => {
await decideAsync({ await decideAsync({
request: item, request: item,
isApproved: false, isApproved: false,
}); });
}} }}
> >
<IconThumbDown /> <IconThumbDown />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
</Group> </Group>
)} )}
</Stack> </Stack>
</Flex> </Flex>

3
src/widgets/media-server/MediaServerTile.tsx
View File

@@ -100,7 +100,7 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) {
<Group pos="absolute" bottom="15" right="15" mt="auto"> <Group pos="absolute" bottom="15" right="15" mt="auto">
<Avatar.Group> <Avatar.Group>
{data?.servers.map((server) => { {data?.servers.map((server, index) => {
const app = config?.apps.find((x) => x.id === server.appId); const app = config?.apps.find((x) => x.id === server.appId);
if (!app) { if (!app) {
@@ -109,6 +109,7 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) {
return ( return (
<AppAvatar <AppAvatar
key={index}
iconUrl={app.appearance.iconUrl} iconUrl={app.appearance.iconUrl}
// If success, the color is undefined, otherwise it's red but if isFetching is true, it's yellow // If success, the color is undefined, otherwise it's red but if isFetching is true, it's yellow
color={server.success ? (isFetching ? 'yellow' : undefined) : 'red'} color={server.success ? (isFetching ? 'yellow' : undefined) : 'red'}