Add MissionForm WIP
This commit is contained in:
nocnico
119
apps/dispatch/app/_components/Select.tsx
Normal file
119
apps/dispatch/app/_components/Select.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
import {
|
||||
FieldValues,
|
||||
Path,
|
||||
RegisterOptions,
|
||||
UseFormReturn,
|
||||
} from "react-hook-form";
|
||||
import SelectTemplate, {
|
||||
Props as SelectTemplateProps,
|
||||
StylesConfig,
|
||||
} from "react-select";
|
||||
import { cn } from "helpers/cn";
|
||||
import dynamic from "next/dynamic";
|
||||
import { CSSProperties } from "react";
|
||||
|
||||
interface SelectProps<T extends FieldValues>
|
||||
extends Omit<SelectTemplateProps, "form"> {
|
||||
label?: any;
|
||||
name: Path<T>;
|
||||
form: UseFormReturn<T> | any;
|
||||
formOptions?: RegisterOptions<T>;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
}
|
||||
|
||||
const customStyles: StylesConfig<any, false> = {
|
||||
control: (provided) => ({
|
||||
...provided,
|
||||
backgroundColor: "var(--color-base-100)",
|
||||
borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
|
||||
borderRadius: "0.5rem",
|
||||
padding: "0.25rem",
|
||||
boxShadow: "none",
|
||||
"&:hover": {
|
||||
borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
|
||||
},
|
||||
}),
|
||||
option: (provided, state) => ({
|
||||
...provided,
|
||||
backgroundColor: state.isSelected ? "hsl(var(--p))" : "hsl(var(--b1))",
|
||||
color: "var(--color-primary-content)",
|
||||
"&:hover": { backgroundColor: "var(--color-base-200)" }, // DaisyUI secondary color
|
||||
}),
|
||||
multiValueLabel: (provided) => ({
|
||||
...provided,
|
||||
color: "var(--color-primary-content)",
|
||||
}),
|
||||
singleValue: (provided) => ({
|
||||
...provided,
|
||||
color: "var(--color-primary-content)",
|
||||
}),
|
||||
multiValue: (provided) => ({
|
||||
...provided,
|
||||
backgroundColor: "var(--color-base-300)",
|
||||
}),
|
||||
menu: (provided) => ({
|
||||
...provided,
|
||||
backgroundColor: "var(--color-base-100)",
|
||||
borderRadius: "0.5rem",
|
||||
}),
|
||||
};
|
||||
|
||||
const SelectCom = <T extends FieldValues>({
|
||||
name,
|
||||
label = name,
|
||||
placeholder = label,
|
||||
form,
|
||||
formOptions,
|
||||
className,
|
||||
...inputProps
|
||||
}: SelectProps<T>) => {
|
||||
return (
|
||||
<div>
|
||||
<span className="label-text text-lg flex items-center gap-2">
|
||||
{label}
|
||||
</span>
|
||||
<SelectTemplate
|
||||
onChange={(newValue: any) => {
|
||||
if (Array.isArray(newValue)) {
|
||||
form.setValue(name, newValue.map((v: any) => v.value) as any, {
|
||||
shouldDirty: true,
|
||||
});
|
||||
} else {
|
||||
form.setValue(name, newValue.value, {
|
||||
shouldDirty: true,
|
||||
});
|
||||
}
|
||||
form.trigger(name);
|
||||
form.Dirty;
|
||||
}}
|
||||
value={
|
||||
(inputProps as any)?.isMulti
|
||||
? (inputProps as any).options?.filter((o: any) =>
|
||||
form.watch(name)?.includes(o.value),
|
||||
)
|
||||
: (inputProps as any).options?.find(
|
||||
(o: any) => o.value === form.watch(name),
|
||||
)
|
||||
}
|
||||
styles={customStyles as any}
|
||||
className={cn("w-full placeholder:text-neutral-600", className)}
|
||||
placeholder={placeholder}
|
||||
{...inputProps}
|
||||
/>
|
||||
{form.formState.errors[name]?.message && (
|
||||
<p className="text-error">
|
||||
{form.formState.errors[name].message as string}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SelectWrapper = <T extends FieldValues>(props: SelectProps<T>) => (
|
||||
<SelectCom {...props} />
|
||||
);
|
||||
|
||||
export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
|
||||
ssr: false,
|
||||
});
|
||||
@@ -7,6 +7,6 @@ interface PannelStore {
|
||||
}
|
||||
|
||||
export const usePannelStore = create<PannelStore>((set) => ({
|
||||
isOpen: false,
|
||||
isOpen: true, // DEBUG, REMOVE LATER FOR PROD
|
||||
setOpen: (isOpen) => set({ isOpen }),
|
||||
}));
|
||||
|
||||
178
apps/dispatch/app/dispatch/_components/pannel/MissionForm.tsx
Normal file
178
apps/dispatch/app/dispatch/_components/pannel/MissionForm.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { MissionSchema } from "@repo/db/zod";
|
||||
import { Mission } from "@repo/db/zod";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { Select } from "_components/Select";
|
||||
|
||||
const clearBtn = () => {
|
||||
return (
|
||||
<button className="btn btn-sm btn-circle btn-info">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const missionFormSchema = MissionSchema.pick({
|
||||
addressLat: true,
|
||||
addressLng: true,
|
||||
addressStreet: true,
|
||||
addressCity: true,
|
||||
addressZip: true,
|
||||
missionCategory: true,
|
||||
missionKeyword: true,
|
||||
missionAdditionalInfo: true,
|
||||
missionPatientInfo: true,
|
||||
});
|
||||
|
||||
type MissionFormValues = z.infer<typeof missionFormSchema>;
|
||||
|
||||
const dummyRettungsmittel = [
|
||||
"Christoph 31",
|
||||
"Christoph 100",
|
||||
"Christoph Berlin",
|
||||
"Christophorus 1",
|
||||
];
|
||||
|
||||
export const MissionForm: React.FC = () => {
|
||||
const [missionCategory, setMissionCategory] = useState<"PRIMÄR" | "SEKUNDÄR">(
|
||||
"PRIMÄR",
|
||||
);
|
||||
const form = useForm<MissionFormValues>({
|
||||
resolver: zodResolver(missionFormSchema),
|
||||
defaultValues: {
|
||||
addressLat: 0,
|
||||
addressLng: 0,
|
||||
missionCategory: "PRIMÄR",
|
||||
},
|
||||
});
|
||||
const { control, register, handleSubmit, watch } = form;
|
||||
|
||||
const onSubmit = (data: MissionFormValues) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
{/* Koorinaten Section */}
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Koordinaten</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressLat")}
|
||||
className="input input-sm input-neutral input-bordered w-full"
|
||||
readOnly
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressLng")}
|
||||
className="input input-sm input-neutral input-bordered w-full"
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Adresse Section */}
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Adresse</h2>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressStreet")}
|
||||
placeholder="Straße"
|
||||
className="input input-primary input-bordered w-full mb-4"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressCity")}
|
||||
placeholder="Stadt"
|
||||
className="input input-primary input-bordered w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressZip")}
|
||||
placeholder="PLZ"
|
||||
className="input input-primary input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("missionAdditionalInfo")}
|
||||
placeholder="Zusätzliche Adressinformationen"
|
||||
className="input input-primary input-bordered w-full mt-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Rettungsmittel Section */}
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Rettungsmittel</h2>
|
||||
<Controller
|
||||
name="rettungsmittel"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
isMulti
|
||||
form={form}
|
||||
name="rettungsmittel"
|
||||
label={""}
|
||||
options={dummyRettungsmittel.map((item) => ({
|
||||
label: item,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Einsatzdaten Section */}
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Einsatzdaten</h2>
|
||||
<select
|
||||
{...form.register("missionCategory")}
|
||||
className="select select-primary select-bordered w-full mb-4"
|
||||
onChange={(e) =>
|
||||
setMissionCategory(e.target.value as "PRIMÄR" | "SEKUNDÄR")
|
||||
}
|
||||
>
|
||||
<option value="PRIMÄR">PRIMÄR</option>
|
||||
<option value="SEKUNDÄR">SEKUNDÄR</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("missionKeyword")}
|
||||
placeholder="Stichwort"
|
||||
className="input input-primary input-bordered w-full mb-4"
|
||||
/>
|
||||
<textarea
|
||||
{...form.register("missionAdditionalInfo")}
|
||||
placeholder="Einsatzinformationen"
|
||||
className="textarea textarea-primary textarea-bordered w-full mb-4"
|
||||
/>
|
||||
{missionCategory === "SEKUNDÄR" && (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Zielkrankenhaus"
|
||||
className="input input-primary input-bordered w-full"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Patienteninformationen Section */}
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Patienteninformationen</h2>
|
||||
<textarea
|
||||
{...form.register("missionPatientInfo")}
|
||||
placeholder="Patienteninformationen"
|
||||
className="textarea textarea-primary textarea-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary mt-4">
|
||||
Alarmieren
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@@ -1,19 +1,23 @@
|
||||
import { Missions } from "dispatch/_components/pannel/Missions";
|
||||
import { usePannelStore } from "_store/pannelStore";
|
||||
import { cn } from "helpers/cn";
|
||||
import { MissionForm } from "./MissionForm";
|
||||
import { Trash2 } from "lucide-react";
|
||||
|
||||
export const Pannel = () => {
|
||||
const { isOpen, setOpen } = usePannelStore();
|
||||
return (
|
||||
<div className={cn("flex-1 max-w-[400px] z-9999999")}>
|
||||
<div className={cn("flex-1 max-w-[600px] z-9999999")}>
|
||||
<div className="bg-base-100 h-full w-full">
|
||||
<div className="flex justify-between items-center p-4">
|
||||
<h1 className="text-xl font-bold">Pannel</h1>
|
||||
<div className="flex flex-row justify-between items-center p-4">
|
||||
<h1 className="text-xl font-bold">Neuer Einsatz</h1>
|
||||
<button className="btn" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
<Missions />
|
||||
<div className="divider" />
|
||||
<div className="p-4">
|
||||
<MissionForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user