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

N-FIN-33: move forms to drawers on mobile devices

Browse source
This commit is contained in:
Markus Thielker 2024-03-17 00:42:19 +01:00
parent 206ad0c528
commit ebf174e9a2
No known key found for this signature in database
3 changed files with 148 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
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,26 +100,51 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
<p className="text-3xl font-semibold">Categories</p>
{/* Edit dialog */}
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogTrigger asChild>
<Button
onClick={() => {
setSelectedCategory(undefined);
setIsEditDialogOpen(true);
}}>
Create Category
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DialogTitle>
</DialogHeader>
<CategoryForm
value={selectedCategory}
onSubmit={handleSubmit}
className="flex flex-row space-x-4 py-4"/>
</DialogContent>
</Dialog>
{
isDesktop ? (
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogTrigger asChild>
<Button
onClick={() => {
setSelectedCategory(undefined);
setIsEditDialogOpen(true);
}}>
Create Category
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DialogTitle>
</DialogHeader>
<CategoryForm
value={selectedCategory}
onSubmit={handleSubmit}
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 Payment
</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 */}

68
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,26 +128,51 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
<p className="text-3xl font-semibold">Entities</p>
{/* Edit dialog */}
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogTrigger asChild>
<Button
onClick={() => {
setSelectedEntity(undefined);
setIsEditDialogOpen(true);
}}>
Create Entity
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DialogTitle>
</DialogHeader>
<EntityForm
value={selectedEntity}
onSubmit={handleSubmit}
className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
</DialogContent>
</Dialog>
{
isDesktop ? (
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogTrigger asChild>
<Button
onClick={() => {
setSelectedEntity(undefined);
setIsEditDialogOpen(true);
}}>
Create Entity
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DialogTitle>
</DialogHeader>
<EntityForm
value={selectedEntity}
onSubmit={handleSubmit}
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 Payment
</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 */}

74
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,28 +109,55 @@ export default function PaymentPageClientContent({
<p className="text-3xl font-semibold">Payments</p>
{/* Edit dialog */}
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogTrigger asChild>
<Button
onClick={() => {
setSelectedPayment(undefined);
setIsEditDialogOpen(true);
}}>
Create Payment
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DialogTitle>
</DialogHeader>
<PaymentForm
value={selectedPayment}
entities={entities}
categories={categories}
onSubmit={handleSubmit}
className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
</DialogContent>
</Dialog>
{
isDesktop ? (
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogTrigger asChild>
<Button
onClick={() => {
setSelectedPayment(undefined);
setIsEditDialogOpen(true);
}}>
Create Payment
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DialogTitle>
</DialogHeader>
<PaymentForm
value={selectedPayment}
entities={entities}
categories={categories}
onSubmit={handleSubmit}
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 */}