markus/finances
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases 6 Packages 1 Wiki Activity Actions

N-FIN-33: dialogs become drawer on small screens (#39)

Browse source 
Resolves #33
This commit is contained in:
Markus Thielker 2024-03-17 01:25:30 +01:00 • committed by GitHub
commit 62d6290cf0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 169 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/categoryPageClientComponents.tsx
View file

@ -23,6 +23,8 @@ import {
} from '@/components/ui/alert-dialog';
import { categoryFormSchema } from '@/lib/form-schemas/categoryFormSchema';
import CategoryForm from '@/components/form/categoryForm';
import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
export default function CategoryPageClientContent({categories, onSubmit, onDelete, className}: {
categories: Category[],
@ -31,6 +33,7 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
className: string,
}) {
const isDesktop = useMediaQuery('(min-width: 768px)');
const router = useRouter();
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@ -97,6 +100,8 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
<p className="text-3xl font-semibold">Categories</p>
{/* Edit dialog */}
{
isDesktop ? (
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogTrigger asChild>
<Button
@ -117,6 +122,29 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
className="flex flex-row space-x-4 py-4"/>
</DialogContent>
</Dialog>
) : (
<Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DrawerTrigger asChild>
<Button
onClick={() => {
setSelectedCategory(undefined);
setIsEditDialogOpen(true);
}}>
Create Category
</Button>
</DrawerTrigger>
<DrawerContent className="p-4">
<DrawerHeader>
<DrawerTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DrawerTitle>
</DrawerHeader>
<CategoryForm
value={selectedCategory}
onSubmit={handleSubmit}
className="flex flex-row space-x-4 py-4"/>
</DrawerContent>
</Drawer>
)
}
</div>
{/* Data Table */}

28
src/components/entityPageClientComponents.tsx
View file

@ -24,6 +24,8 @@ import {
AlertDialogFooter,
AlertDialogHeader,
} from '@/components/ui/alert-dialog';
import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
export default function EntityPageClientContent({entities, onSubmit, onDelete, className}: {
entities: Entity[],
@ -32,6 +34,7 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
className: string,
}) {
const isDesktop = useMediaQuery('(min-width: 768px)');
const router = useRouter();
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@ -125,6 +128,8 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
<p className="text-3xl font-semibold">Entities</p>
{/* Edit dialog */}
{
isDesktop ? (
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogTrigger asChild>
<Button
@ -145,6 +150,29 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
</DialogContent>
</Dialog>
) : (
<Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DrawerTrigger asChild>
<Button
onClick={() => {
setSelectedEntity(undefined);
setIsEditDialogOpen(true);
}}>
Create Entity
</Button>
</DrawerTrigger>
<DrawerContent className="p-4">
<DrawerHeader>
<DrawerTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DrawerTitle>
</DrawerHeader>
<EntityForm
value={selectedEntity}
onSubmit={handleSubmit}
className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
</DrawerContent>
</Drawer>
)
}
</div>
{/* Filter input */}

30
src/components/paymentPageClientComponents.tsx
View file

@ -23,6 +23,8 @@ import { paymentFormSchema } from '@/lib/form-schemas/paymentFormSchema';
import { Category, Entity, Payment } from '@prisma/client';
import PaymentForm from '@/components/form/paymentForm';
import { columns } from '@/app/payments/columns';
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
export default function PaymentPageClientContent({
payments,
@ -40,6 +42,7 @@ export default function PaymentPageClientContent({
className: string,
}) {
const isDesktop = useMediaQuery('(min-width: 768px)');
const router = useRouter();
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@ -106,6 +109,8 @@ export default function PaymentPageClientContent({
<p className="text-3xl font-semibold">Payments</p>
{/* Edit dialog */}
{
isDesktop ? (
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogTrigger asChild>
<Button
@ -128,6 +133,31 @@ export default function PaymentPageClientContent({
className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
</DialogContent>
</Dialog>
) : (
<Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DrawerTrigger asChild>
<Button
onClick={() => {
setSelectedPayment(undefined);
setIsEditDialogOpen(true);
}}>
Create Payment
</Button>
</DrawerTrigger>
<DrawerContent className="p-4">
<DrawerHeader>
<DrawerTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DrawerTitle>
</DrawerHeader>
<PaymentForm
value={selectedPayment}
entities={entities}
categories={categories}
onSubmit={handleSubmit}
className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
</DrawerContent>
</Drawer>
)
}
</div>
{/* Data Table */}

21
src/lib/hooks/useMediaQuery.ts Normal file
View file

@ -0,0 +1,21 @@
'use client';
import { useEffect, useState } from 'react';
export function useMediaQuery(mq: string) {
const [matches, setMatch] = useState(
() => typeof window !== 'undefined' ? window.matchMedia(mq).matches : false,
);
useEffect(() => {
if (typeof window !== 'undefined') {
const mql = window.matchMedia(mq);
const listener = (e: any) => setMatch(e.matches);
mql.addEventListener('change', listener);
return () => mql.removeEventListener('change', listener);
}
}, [mq]);
return matches;
}