use name and ID field in trigger edit dialog

This commit is contained in:
Josh Hawkins 2025-10-27 12:51:53 -05:00
parent 8a6cd05af1
commit 042ae73b81

View File

@ -47,6 +47,7 @@ import {
MobilePageHeader,
MobilePageTitle,
} from "../mobile/MobilePage";
import NameAndIdFields from "@/components/ui/NameAndIdFields";
type CreateTriggerDialogProps = {
show: boolean;
@ -89,6 +90,19 @@ export default function CreateTriggerDialog({
return Object.keys(config.cameras[selectedCamera].semantic_search.triggers);
}, [config, selectedCamera]);
const existingTriggerFriendlyNames = useMemo(() => {
if (
!config ||
!selectedCamera ||
!config.cameras[selectedCamera]?.semantic_search?.triggers
) {
return [];
}
return Object.values(
config.cameras[selectedCamera].semantic_search.triggers,
).map((trigger) => trigger.friendly_name);
}, [config, selectedCamera]);
const formSchema = z.object({
enabled: z.boolean(),
name: z
@ -103,7 +117,15 @@ export default function CreateTriggerDialog({
!existingTriggerNames.includes(value) || value === trigger?.name,
t("triggers.dialog.form.name.error.alreadyExists"),
),
friendly_name: z.string().optional(),
friendly_name: z
.string()
.min(2, t("triggers.dialog.form.name.error.minLength"))
.refine(
(value) =>
!existingTriggerFriendlyNames.includes(value) ||
value === trigger?.friendly_name,
t("triggers.dialog.form.name.error.alreadyExists"),
),
type: z.enum(["thumbnail", "description"]),
data: z.string().min(1, t("triggers.dialog.form.content.error.required")),
threshold: z
@ -138,7 +160,7 @@ export default function CreateTriggerDialog({
values.data,
values.threshold,
values.actions,
values.friendly_name ?? "",
values.friendly_name,
);
}
};
@ -219,47 +241,14 @@ export default function CreateTriggerDialog({
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-5 pt-4"
>
<FormField
<NameAndIdFields
type="trigger"
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t("triggers.dialog.form.name.title")}</FormLabel>
<FormControl>
<Input
placeholder={t("triggers.dialog.form.name.placeholder")}
className="h-10"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="friendly_name"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("triggers.dialog.form.friendly_name.title")}
</FormLabel>
<FormControl>
<Input
placeholder={t(
"triggers.dialog.form.friendly_name.placeholder",
)}
className="h-10"
{...field}
/>
</FormControl>
<FormDescription>
{t("triggers.dialog.form.friendly_name.description")}
</FormDescription>
<FormMessage />
</FormItem>
)}
nameField="friendly_name"
idField="name"
nameLabel={t("triggers.dialog.form.name.title")}
nameDescription={t("triggers.dialog.form.name.description")}
placeholderName={t("triggers.dialog.form.name.placeholder")}
/>
<FormField
@ -335,9 +324,6 @@ export default function CreateTriggerDialog({
camera={selectedCamera}
/>
</FormControl>
<FormDescription>
{t("triggers.dialog.form.content.imageDesc")}
</FormDescription>
</>
) : (
<>
@ -455,7 +441,7 @@ export default function CreateTriggerDialog({
>
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<ActivityIndicator className="size-5" />
<span>{t("button.saving", { ns: "common" })}</span>
</div>
) : (