From 2b9de2405e918c498b34cb00e6f112eb47f5aff8 Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Mon, 31 Jul 2023 00:20:23 +0200 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=92=84=20Elements=20stretch=20to=20fi?= =?UTF-8?q?t=20whole=20widget?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../media-requests/MediaRequestStatsTile.tsx | 82 +++++++++++-------- 1 file changed, 47 insertions(+), 35 deletions(-) diff --git a/src/widgets/media-requests/MediaRequestStatsTile.tsx b/src/widgets/media-requests/MediaRequestStatsTile.tsx index fd81d8f0a..63b9c5498 100644 --- a/src/widgets/media-requests/MediaRequestStatsTile.tsx +++ b/src/widgets/media-requests/MediaRequestStatsTile.tsx @@ -1,4 +1,4 @@ -import { Card, Center, Flex, Stack, Text } from '@mantine/core'; +import { Box, Card, createStyles, Flex, FlexProps, Stack, Text } from '@mantine/core'; import { IconChartBar } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; @@ -11,14 +11,23 @@ import { MediaRequestStatus } from './media-request-types'; const definition = defineWidget({ id: 'media-requests-stats', icon: IconChartBar, - options: {}, - component: MediaRequestStatsTile, + options: { + direction: { + type: 'select', + defaultValue: 'row', + data: [ + { label: 'Horizontal', value: 'horizontal' }, + { label: 'Vertical', value: 'vertical' }, + ], + }, + }, gridstack: { minWidth: 1, - minHeight: 2, + minHeight: 1, maxWidth: 12, maxHeight: 12, }, + component: MediaRequestStatsTile, }); export type MediaRequestStatsWidget = IWidget<(typeof definition)['id'], typeof definition>; @@ -36,41 +45,44 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) { } return ( - - -
- - - {data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length} - - - {t('stats.pending')} - - -
+ + + + + {data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length} + + + {t('stats.pending')} + + - -
- - {data.filter((x) => x.type === 'tv').length} - - {t('stats.tvRequests')} - - -
+ + + + {data.filter((x) => x.type === 'tv').length} + + + {t('stats.tvRequests')} + + - -
- - {data.filter((x) => x.type === 'movie').length} - - {t('stats.movieRequests')} - - -
+ + + + {data.filter((x) => x.type === 'movie').length} + + + {t('stats.movieRequests')} + + ); } -export default definition; +export default definition; \ No newline at end of file From 3b95b8d8c8e60ac27b86805698c03d73638fe67c Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Mon, 31 Jul 2023 00:32:11 +0200 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=A4=A1=20Forgot=20label=20+=20touch?= =?UTF-8?q?=20up?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/modules/media-requests-stats.json | 5 ++++- src/widgets/media-requests/MediaRequestStatsTile.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/public/locales/en/modules/media-requests-stats.json b/public/locales/en/modules/media-requests-stats.json index 3c7d10090..a06a52860 100644 --- a/public/locales/en/modules/media-requests-stats.json +++ b/public/locales/en/modules/media-requests-stats.json @@ -3,7 +3,10 @@ "name": "Media request stats", "description": "Statistics about your media requests", "settings": { - "title": "Media requests stats" + "title": "Media requests stats", + "direction": { + "label": "Direction of the layout." + } } }, "stats": { diff --git a/src/widgets/media-requests/MediaRequestStatsTile.tsx b/src/widgets/media-requests/MediaRequestStatsTile.tsx index 63b9c5498..12e64c1d1 100644 --- a/src/widgets/media-requests/MediaRequestStatsTile.tsx +++ b/src/widgets/media-requests/MediaRequestStatsTile.tsx @@ -14,7 +14,7 @@ const definition = defineWidget({ options: { direction: { type: 'select', - defaultValue: 'row', + defaultValue: 'horizontal', data: [ { label: 'Horizontal', value: 'horizontal' }, { label: 'Vertical', value: 'vertical' }, From 6c1909e627cb41657702f5eab25d2a7a79f56f4d Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Mon, 31 Jul 2023 01:13:36 +0200 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20Common=20card=20component=20?= =?UTF-8?q?+=20flex=20direction=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../media-requests/MediaRequestStatsTile.tsx | 71 ++++++++++--------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/src/widgets/media-requests/MediaRequestStatsTile.tsx b/src/widgets/media-requests/MediaRequestStatsTile.tsx index 12e64c1d1..256d66978 100644 --- a/src/widgets/media-requests/MediaRequestStatsTile.tsx +++ b/src/widgets/media-requests/MediaRequestStatsTile.tsx @@ -7,6 +7,7 @@ import { WidgetLoading } from '../loading'; import { IWidget } from '../widgets'; import { useMediaRequestQuery } from './media-request-query'; import { MediaRequestStatus } from './media-request-types'; +import { string } from 'zod'; const definition = defineWidget({ id: 'media-requests-stats', @@ -14,10 +15,10 @@ const definition = defineWidget({ options: { direction: { type: 'select', - defaultValue: 'horizontal', + defaultValue: 'row' as 'row' | 'column', data: [ - { label: 'Horizontal', value: 'horizontal' }, - { label: 'Vertical', value: 'vertical' }, + { label: 'Horizontal', value: 'row' }, + { label: 'Vertical', value: 'column' }, ], }, }, @@ -49,40 +50,42 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) { w="100%" h="100%" gap="md" - direction={ widget.properties.direction != 'vertical' ? 'row' : 'column' } + direction={ widget.properties.direction?? 'row' } > - - - - {data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length} - - - {t('stats.pending')} - - - - - - - {data.filter((x) => x.type === 'tv').length} - - - {t('stats.tvRequests')} - - - - - - - {data.filter((x) => x.type === 'movie').length} - - - {t('stats.movieRequests')} - - - + x.status === MediaRequestStatus.PendingApproval).length} + label={t('stats.pending')} + /> + x.type === 'tv').length} + label={t('stats.tvRequests')} + /> + x.type === 'movie').length} + label={t('stats.movieRequests')} + /> ); } +interface StatCardProps { + number: number; + label: string; +} + +const StatCard = ({ number, label }: StatCardProps) => { + return ( + + + + {number} + + + {label} + + + + ); +}; + export default definition; \ No newline at end of file From 837b5892703b257f637fc8edc5442d01432d3ab5 Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Mon, 31 Jul 2023 01:15:40 +0200 Subject: [PATCH 4/4] =?UTF-8?q?=E2=9A=B0=EF=B8=8F=20removed=20unused=20imp?= =?UTF-8?q?orts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/media-requests/MediaRequestStatsTile.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/widgets/media-requests/MediaRequestStatsTile.tsx b/src/widgets/media-requests/MediaRequestStatsTile.tsx index 256d66978..2af61d3e3 100644 --- a/src/widgets/media-requests/MediaRequestStatsTile.tsx +++ b/src/widgets/media-requests/MediaRequestStatsTile.tsx @@ -1,4 +1,4 @@ -import { Box, Card, createStyles, Flex, FlexProps, Stack, Text } from '@mantine/core'; +import { Card, Flex, Stack, Text } from '@mantine/core'; import { IconChartBar } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; @@ -7,7 +7,6 @@ import { WidgetLoading } from '../loading'; import { IWidget } from '../widgets'; import { useMediaRequestQuery } from './media-request-query'; import { MediaRequestStatus } from './media-request-types'; -import { string } from 'zod'; const definition = defineWidget({ id: 'media-requests-stats',