From 74d97c7eea81accf1f47e7e95623e7bf479ffbfd Mon Sep 17 00:00:00 2001
From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com>
Date: Wed, 26 Mar 2025 14:28:35 -0700
Subject: [PATCH] added List Input

---
 .../(app)/admin/keyword/_components/Form.tsx  |   9 +-
 apps/hub/app/_components/ui/List.tsx          |  88 ++++++++++++++++++
 grafana/grafana.db                            | Bin 1122304 -> 1122304 bytes
 3 files changed, 93 insertions(+), 4 deletions(-)
 create mode 100644 apps/hub/app/_components/ui/List.tsx

diff --git a/apps/hub/app/(app)/admin/keyword/_components/Form.tsx b/apps/hub/app/(app)/admin/keyword/_components/Form.tsx
index e54d0189..395b3f48 100644
--- a/apps/hub/app/(app)/admin/keyword/_components/Form.tsx
+++ b/apps/hub/app/(app)/admin/keyword/_components/Form.tsx
@@ -10,6 +10,7 @@ import { useState } from "react";
 import { deleteKeyword, upsertKeyword } from "../action";
 import { Button } from "../../../../_components/ui/Button";
 import { redirect } from "next/navigation";
+import { ListInput } from "_components/ui/List";
 
 export const KeywordForm = ({ keyword }: { keyword?: Keyword }) => {
 	const form = useForm<z.infer<typeof KeywordOptionalDefaultsSchema>>({
@@ -69,11 +70,11 @@ export const KeywordForm = ({ keyword }: { keyword?: Keyword }) => {
 							name="description"
 							className="input-sm"
 						/>
-						<Input
-							form={form}
-							label="HPG Missionstypen"
-							name="hpgMissionsType"
+						<ListInput
 							className="input-sm"
+							control={form.control}
+							name="hpgMissionsType"
+							label="HPG Missions presets"
 						/>
 					</div>
 				</div>
diff --git a/apps/hub/app/_components/ui/List.tsx b/apps/hub/app/_components/ui/List.tsx
new file mode 100644
index 00000000..f11b5b76
--- /dev/null
+++ b/apps/hub/app/_components/ui/List.tsx
@@ -0,0 +1,88 @@
+import DatePicker, { DatePickerProps, registerLocale } from "react-datepicker";
+import {
+	Control,
+	Controller,
+	FieldValues,
+	Path,
+	PathValue,
+} from "react-hook-form";
+import { de } from "date-fns/locale";
+import { useState } from "react";
+import { cn } from "../../../helper/cn";
+registerLocale("de", de);
+
+interface ListInputProps<T extends FieldValues>
+	extends Omit<DatePickerProps, "onChange" | "selected"> {
+	control: Control<T>;
+	name: Path<T>;
+	label?: string;
+}
+
+export const ListInput = <T extends FieldValues>({
+	control,
+	name,
+	label,
+	...props
+}: ListInputProps<T>) => {
+	const [value, setValue] = useState<string>("");
+	return (
+		<Controller
+			control={control}
+			name={name}
+			render={({ field }) => {
+				return (
+					<fieldset className="fieldset bg-base-200 border border-neutral-400 p-4 rounded-box mt-5">
+						<legend className="fieldset-legend">{label}</legend>
+						<div className="join w-full flex">
+							<input
+								type="text"
+								className={cn("input join-item grow", props.className)}
+								placeholder={props.placeholderText || "Element Hinzufügen"}
+								value={value}
+								onChange={(e) => setValue(e.target.value)}
+							/>
+							<button
+								className={cn("btn join-item", props.className)}
+								onClick={() => {
+									if (value.length === 0) return;
+									field.onChange([...(field.value || []), value]);
+									setValue("");
+								}}
+								type="button"
+								onSubmit={(e) => false}
+							>
+								Hinzufügen
+							</button>
+						</div>
+						<div>
+							{field.value?.map((item: string, index: number) => (
+								<div key={index} className="join flex">
+									<input
+										{...field}
+										value={item}
+										className={cn("input join-item grow", props.className)}
+										onChange={(e) => {
+											const value = [...field.value];
+											value[index] = e.target.value;
+											field.onChange(value);
+										}}
+									/>
+									<button
+										className="btn join-item btn-sm"
+										onClick={() => {
+											const value = [...field.value];
+											value.splice(index, 1);
+											field.onChange(value);
+										}}
+									>
+										Remove
+									</button>
+								</div>
+							))}
+						</div>
+					</fieldset>
+				);
+			}}
+		/>
+	);
+};
diff --git a/grafana/grafana.db b/grafana/grafana.db
index 664833f978b16859d816e8262c738ced881ad0f4..369220d65e8a8e7483b779eb7858219d84702fa4 100644
GIT binary patch
delta 87
zcmZoT;L>owWr8%L!$cWpMu*0P)&$1Z1g6#m=GFw3)&$np1h&=$_N@sVrTVPJ=}!t)
hx8Ks|0Afxc<^p1FAm#yLULfWJV*c&7^aa#D003d;Ajbdz

delta 87
zcmZoT;L>owWr8%L?L--8M%%`O)&$1Z1g6#m=GFw3)&$np1h&=$_N@sVrTVM|=}$5j
hx8Ks|0Afxc<^p1FAm#yLULfWJV*c&7^aa#D003Q3Ag=%b