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

✨ Add affix for board customization page

Browse Source
This commit is contained in:
Manuel
2023-08-06 16:46:00 +02:00
parent 936980d67a
commit 0004dbd826
2 changed files with 79 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/pages/board/[slug]/customize.tsx
View File

@@ -1,4 +1,16 @@
import { Button, Container, Group, Paper, Stack, Text, Title } from '@mantine/core'; import {
Affix,
Button,
Card,
Container,
Group,
Paper,
Stack,
Text,
Title,
Transition,
rem,
} from '@mantine/core';
import { showNotification, updateNotification } from '@mantine/notifications'; import { showNotification, updateNotification } from '@mantine/notifications';
import { import {
IconArrowLeft, IconArrowLeft,
@@ -15,7 +27,7 @@ import { useTranslation } from 'next-i18next';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { ReactNode } from 'react'; import { ReactNode, useRef } from 'react';
import { z } from 'zod'; import { z } from 'zod';
import { AppearanceCustomization } from '~/components/Board/Customize/Appearance/AppearanceCustomization'; import { AppearanceCustomization } from '~/components/Board/Customize/Appearance/AppearanceCustomization';
import { GridstackCustomization } from '~/components/Board/Customize/Gridstack/GridstackCustomization'; import { GridstackCustomization } from '~/components/Board/Customize/Gridstack/GridstackCustomization';
@@ -29,7 +41,6 @@ import { MainLayout } from '~/components/layout/Templates/MainLayout';
import { createTrpcServersideHelpers } from '~/server/api/helper'; import { createTrpcServersideHelpers } from '~/server/api/helper';
import { getServerAuthSession } from '~/server/auth'; import { getServerAuthSession } from '~/server/auth';
import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
import { boardNamespaces } from '~/tools/server/translation-namespaces';
import { firstUpperCase } from '~/tools/shared/strings'; import { firstUpperCase } from '~/tools/shared/strings';
import { api } from '~/utils/api'; import { api } from '~/utils/api';
import { useI18nZodResolver } from '~/utils/i18n-zod-resolver'; import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
@@ -72,6 +83,8 @@ export default function CustomizationPage() {
}, },
}, },
validate: i18nZodResolver(boardCustomizationSchema), validate: i18nZodResolver(boardCustomizationSchema),
validateInputOnChange: true,
validateInputOnBlur: true,
}); });
const handleSubmit = async (values: z.infer<typeof boardCustomizationSchema>) => { const handleSubmit = async (values: z.infer<typeof boardCustomizationSchema>) => {
@@ -122,6 +135,51 @@ export default function CustomizationPage() {
<Head> <Head>
<title>{metaTitle}</title> <title>{metaTitle}</title>
</Head> </Head>
<Affix position={{ bottom: rem(20), left: rem(20), right: rem(20) }}>
<Transition transition="slide-up" mounted={form.isDirty()}>
{(transitionStyles) => (
<Card
style={transitionStyles}
sx={(theme) => ({
background:
theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[1],
})}
shadow="md"
withBorder
>
<Group position="apart" noWrap>
<Text weight="bold">Careful, you have unsaved changes!</Text>
<Group spacing="md">
<Button
onClick={() => {
form.reset();
}}
variant="subtle"
type="button"
>
Cancel
</Button>
<Button
onClick={() => {
if (!form.isValid()) {
return;
}
handleSubmit(form.values);
}}
disabled={!form.isValid()}
loading={isLoading}
type="submit"
color="green"
>
{t('save')}
</Button>
</Group>
</Group>
</Card>
)}
</Transition>
</Affix>
<Container> <Container>
<Paper p="xl" py="sm" mih="100%" withBorder> <Paper p="xl" py="sm" mih="100%" withBorder>
<Stack> <Stack>
@@ -141,29 +199,24 @@ export default function CustomizationPage() {
</Button> </Button>
</Group> </Group>
<BoardCustomizationFormProvider form={form}> <BoardCustomizationFormProvider form={form}>
<form onSubmit={form.onSubmit(handleSubmit)}> <Stack spacing="xl">
<Stack spacing="xl"> <Stack spacing="xs">
<Stack spacing="xs"> <SectionTitle type="layout" icon={IconLayout} />
<SectionTitle type="layout" icon={IconLayout} /> <LayoutCustomization />
<LayoutCustomization />
</Stack>
<Stack spacing="xs">
<SectionTitle type="gridstack" icon={IconDragDrop} />
<GridstackCustomization />
</Stack>
<Stack spacing="xs">
<SectionTitle type="pageMetadata" icon={IconChartCandle} />
<PageMetadataCustomization />
</Stack>
<Stack spacing="xs">
<SectionTitle type="appereance" icon={IconBrush} />
<AppearanceCustomization />
</Stack>
<Button type="submit" loading={isLoading}>
{t('save')}
</Button>
</Stack> </Stack>
</form> <Stack spacing="xs">
<SectionTitle type="gridstack" icon={IconDragDrop} />
<GridstackCustomization />
</Stack>
<Stack spacing="xs">
<SectionTitle type="pageMetadata" icon={IconChartCandle} />
<PageMetadataCustomization />
</Stack>
<Stack spacing="xs">
<SectionTitle type="appereance" icon={IconBrush} />
<AppearanceCustomization />
</Stack>
</Stack>
</BoardCustomizationFormProvider> </BoardCustomizationFormProvider>
</Stack> </Stack>
</Paper> </Paper>

2
src/validations/boards.ts
View File

@@ -17,7 +17,7 @@ export const boardCustomizationSchema = z.object({
lg: z.number().min(5).max(20), lg: z.number().min(5).max(20),
}), }),
pageMetadata: z.object({ pageMetadata: z.object({
pageTitle: z.string(), pageTitle: z.string().min(1),
metaTitle: z.string(), metaTitle: z.string(),
logoSrc: z.string(), logoSrc: z.string(),
faviconSrc: z.string(), faviconSrc: z.string(),