Error boundary

This commit is contained in:
PxlLoewe
2025-03-26 14:04:15 -07:00
parent 9551202370
commit c8d91b684f
21 changed files with 414 additions and 298 deletions

View File

@@ -1,13 +1,13 @@
import { prisma } from '@repo/db';
import { StationForm } from '../_components/Form';
import { prisma } from "@repo/db";
import { KeywordForm } from "../_components/Form";
export default async ({ params }: { params: Promise<{ id: string }> }) => {
const { id } = await params;
const station = await prisma.station.findUnique({
where: {
id: parseInt(id),
},
});
if (!station) return <div>Station not found</div>;
return <StationForm station={station} />;
const { id } = await params;
const keyword = await prisma.keyword.findUnique({
where: {
id: parseInt(id),
},
});
if (!keyword) return <div>Station not found</div>;
return <KeywordForm keyword={keyword} />;
};

View File

@@ -1,20 +1,20 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { StationOptionalDefaultsSchema } from "@repo/db/zod";
import { KeywordOptionalDefaultsSchema } from "@repo/db/zod";
import { set, useForm } from "react-hook-form";
import { z } from "zod";
import { BosUse, Country, Station } from "@repo/db";
import { BosUse, Country, KEYWORD_CATEGORY, Keyword } from "@repo/db";
import { FileText, LocateIcon, PlaneIcon } from "lucide-react";
import { Input } from "../../../../_components/ui/Input";
import { useState } from "react";
import { deleteStation, upsertStation } from "../action";
import { deleteKeyword, upsertKeyword } from "../action";
import { Button } from "../../../../_components/ui/Button";
import { redirect } from "next/navigation";
export const StationForm = ({ station }: { station?: Station }) => {
const form = useForm<z.infer<typeof StationOptionalDefaultsSchema>>({
resolver: zodResolver(StationOptionalDefaultsSchema),
defaultValues: station,
export const KeywordForm = ({ keyword }: { keyword?: Keyword }) => {
const form = useForm<z.infer<typeof KeywordOptionalDefaultsSchema>>({
resolver: zodResolver(KeywordOptionalDefaultsSchema),
defaultValues: keyword,
});
const [loading, setLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
@@ -23,85 +23,26 @@ export const StationForm = ({ station }: { station?: Station }) => {
<form
onSubmit={form.handleSubmit(async (values) => {
setLoading(true);
const createdStation = await upsertStation(values, station?.id);
const createdKeyword = await upsertKeyword(values, keyword?.id);
setLoading(false);
if (!station) redirect(`/admin/station`);
if (!keyword) redirect(`/admin/keyword`);
})}
className="grid grid-cols-6 gap-3"
>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card bg-base-200 shadow-xl col-span-6 ">
<div className="card-body">
<h2 className="card-title">
<FileText className="w-5 h-5" /> Allgemeines
</h2>
<Input
form={form}
label="BOS Rufname"
name="bosCallsign"
className="input-sm"
/>
<Input
form={form}
label="BOS Rufname (kurz)"
name="bosCallsignShort"
className="input-sm"
/>
<Input
form={form}
label="Betreiber"
name="operator"
className="input-sm"
/>
<Input
form={form}
label="ATC Rufname"
name="atcCallsign"
className="input-sm"
/>
<Input
form={form}
label="FIR (Flight Information Region)"
name="fir"
className="input-sm"
/>
<Input
form={form}
label="Leitstelle Rufname"
name="bosRadioArea"
className="input-sm"
/>
<label className="form-control w-full">
<label className="form-control w-full ">
<span className="label-text text-lg flex items-center gap-2">
BOS Nutzung
Kategorie
</span>
<select
className="input-sm select select-bordered select-sm"
{...form.register("bosUse")}
className="input-sm select select-bordered select-sm w-full"
{...form.register("category")}
>
{Object.keys(BosUse).map((use) => (
<option key={use} value={use}>
{use}
</option>
))}
</select>
</label>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<LocateIcon className="w-5 h-5" /> Standort + Ausrüstung
</h2>
<label className="form-control w-full">
<span className="label-text text-lg flex items-center gap-2">
Land
</span>
<select
className="input-sm select select-bordered select-sm"
{...form.register("country", {})}
>
{Object.keys(Country).map((use) => (
{Object.keys(KEYWORD_CATEGORY).map((use) => (
<option key={use} value={use}>
{use}
</option>
@@ -110,109 +51,33 @@ export const StationForm = ({ station }: { station?: Station }) => {
</label>
<Input
form={form}
label="Bundesland"
name="locationState"
label="Abkürzung"
name="abreviation"
className="input-sm"
/>
<Input
form={form}
label="Bundesland (kurz)"
name="locationStateShort"
label="Name"
placeholder="Atembeschwerden, die nicht zunehmen (ohne vitale Indikation)"
name="name"
className="input-sm"
/>
<span className="label-text text-lg flex items-center gap-2">
Ausgerüstet mit:
</span>
<div className="form-control">
<label className="label cursor-pointer">
<span>Winde</span>
<input
type="checkbox"
className="toggle"
{...form.register("hasWinch")}
/>
</label>
<label className="label cursor-pointer">
<span>Nachtsicht Gerät</span>
<input
type="checkbox"
className="toggle"
{...form.register("hasNvg")}
/>
</label>
<label className="label cursor-pointer">
<span>24-Stunden Einsatzfähig</span>
<input
type="checkbox"
className="toggle"
{...form.register("is24h")}
/>
</label>
<label className="label cursor-pointer">
<span>Bergetau</span>
<input
type="checkbox"
className="toggle"
{...form.register("hasRope")}
/>
</label>
</div>
<Input
form={form}
label="zunehmende Atembeschwerden"
placeholder="Beschreibung"
name="description"
className="input-sm"
/>
<Input
form={form}
label="HPG Missionstypen"
name="hpgMissionsType"
className="input-sm"
/>
</div>
</div>
<Input
form={form}
label="Breitengrad"
name="latitude"
className="input-sm"
formOptions={{ valueAsNumber: true }}
type="number"
step="any"
/>
<Input
form={form}
label="Längengrad"
name="longitude"
className="input-sm"
formOptions={{ valueAsNumber: true }}
type="number"
step="any"
/>
<label className="label cursor-pointer">
<span className="text-lg">Reichweiten ausblenden</span>
<input
type="checkbox"
className="toggle"
{...form.register("hideRangeRings")}
/>
</label>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<PlaneIcon className="w-5 h-5" /> Hubschrauber
</h2>
<Input
form={form}
label="Hubschrauber Typ"
name="aircraft"
className="input-sm"
/>
<Input
form={form}
formOptions={{ valueAsNumber: true }}
type="number"
label="Hubschrauber Geschwindigkeit"
className="input-sm"
name="aircraftSpeed"
/>
<Input
form={form}
label="Hubschrauber Registrierung"
name="aircraftRegistration"
className="input-sm"
/>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-6">
<div className="card-body ">
<div className="flex w-full gap-4">
@@ -223,13 +88,13 @@ export const StationForm = ({ station }: { station?: Station }) => {
>
Speichern
</Button>
{station && (
{keyword && (
<Button
isLoading={deleteLoading}
onClick={async () => {
setDeleteLoading(true);
await deleteStation(station.id);
redirect("/admin/station");
await deleteKeyword(keyword.id);
redirect("/admin/keyword");
}}
className="btn btn-error"
>

View File

@@ -1,20 +1,20 @@
"use server";
import { prisma, Prisma, Station } from "@repo/db";
import { prisma, Prisma, Keyword } from "@repo/db";
export const upsertKeyword = async (
station: Prisma.StationCreateInput,
id?: Station["id"],
keyword: Prisma.KeywordCreateInput,
id?: Keyword["id"],
) => {
const newStation = id
? await prisma.station.update({
const newKeyword = id
? await prisma.keyword.update({
where: { id: id },
data: station,
data: keyword,
})
: await prisma.station.create({ data: station });
return newStation;
: await prisma.keyword.create({ data: keyword });
return newKeyword;
};
export const deleteStation = async (id: Station["id"]) => {
await prisma.station.delete({ where: { id: id } });
export const deleteKeyword = async (id: Keyword["id"]) => {
await prisma.keyword.delete({ where: { id: id } });
};

View File

@@ -13,7 +13,7 @@ export default async ({ children }: { children: React.ReactNode }) => {
},
});
if (!user?.permissions.includes("ADMIN_STATION"))
if (!user?.permissions.includes("ADMIN_KEYWORD"))
return <Error title="Keine Berechtigung" statusCode={403} />;
return <>{children}</>;

View File

@@ -1,5 +1,5 @@
import { StationForm } from '../_components/Form';
import { KeywordForm } from "../_components/Form";
export default () => {
return <StationForm />;
return <KeywordForm />;
};

View File

@@ -1,47 +1,43 @@
import { DatabaseBackupIcon } from 'lucide-react';
import { PaginatedTable } from '../../../_components/PaginatedTable';
import Link from 'next/link';
import { DatabaseBackupIcon } from "lucide-react";
import { PaginatedTable } from "../../../_components/PaginatedTable";
import Link from "next/link";
export default () => {
return (
<>
<PaginatedTable
showEditButton
prismaModel="station"
searchFields={['bosCallsign', 'bosUse', 'country', 'operator']}
columns={[
{
header: 'BOS Name',
accessorKey: 'bosCallsign',
},
{
header: 'Bos Use',
accessorKey: 'bosUse',
},
{
header: 'Country',
accessorKey: 'country',
},
{
header: 'operator',
accessorKey: 'operator',
},
]}
leftOfSearch={
<span className="flex items-center gap-2">
<DatabaseBackupIcon className="w-5 h-5" /> Stationen
</span>
}
rightOfSearch={
<p className="text-2xl font-semibold text-left flex items-center gap-2 justify-between">
<Link href={'/admin/station/new'}>
<button className="btn btn-sm btn-outline btn-primary">
Erstellen
</button>
</Link>
</p>
}
/>
</>
);
return (
<>
<PaginatedTable
showEditButton
prismaModel="keyword"
searchFields={["name", "abreviation", "description"]}
columns={[
{
header: "Kateogrie",
accessorKey: "category",
},
{
header: "Name",
accessorKey: "name",
},
{
header: "Beschreibung",
accessorKey: "description",
},
]}
leftOfSearch={
<span className="flex items-center gap-2">
<DatabaseBackupIcon className="w-5 h-5" /> Stichwörter
</span>
}
rightOfSearch={
<p className="text-2xl font-semibold text-left flex items-center gap-2 justify-between">
<Link href={"/admin/keyword/new"}>
<button className="btn btn-sm btn-outline btn-primary">
Erstellen
</button>
</Link>
</p>
}
/>
</>
);
};