add actions to form and wizard

This commit is contained in:
Josh Hawkins 2025-10-28 14:37:20 -05:00
parent fe675d4fea
commit a948100d0d
2 changed files with 26 additions and 5 deletions

View File

@ -79,6 +79,15 @@ export default function CreateTriggerDialog({
const { t } = useTranslation("views/settings"); const { t } = useTranslation("views/settings");
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const availableActions = useMemo(() => {
if (!config) return [];
if (config.notifications.enabled) {
return ["notification", "sub_label", "attribute"];
}
return ["sub_label", "attribute"];
}, [config]);
const existingTriggerNames = useMemo(() => { const existingTriggerNames = useMemo(() => {
if ( if (
!config || !config ||
@ -132,7 +141,7 @@ export default function CreateTriggerDialog({
.number() .number()
.min(0, t("triggers.dialog.form.threshold.error.min")) .min(0, t("triggers.dialog.form.threshold.error.min"))
.max(1, t("triggers.dialog.form.threshold.error.max")), .max(1, t("triggers.dialog.form.threshold.error.max")),
actions: z.array(z.enum(["notification"])), actions: z.array(z.enum(["notification", "sub_label", "attribute"])),
}); });
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
@ -383,7 +392,7 @@ export default function CreateTriggerDialog({
{t("triggers.dialog.form.actions.title")} {t("triggers.dialog.form.actions.title")}
</FormLabel> </FormLabel>
<div className="space-y-2"> <div className="space-y-2">
{["notification"].map((action) => ( {availableActions.map((action) => (
<div key={action} className="flex items-center space-x-2"> <div key={action} className="flex items-center space-x-2">
<FormControl> <FormControl>
<Checkbox <Checkbox

View File

@ -1,4 +1,4 @@
import { useEffect, useCallback } from "react"; import { useEffect, useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
@ -17,6 +17,8 @@ import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Trigger, TriggerAction } from "@/types/trigger"; import { Trigger, TriggerAction } from "@/types/trigger";
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
export type Step3FormData = { export type Step3FormData = {
threshold: number; threshold: number;
@ -39,13 +41,23 @@ export default function Step3ThresholdAndActions({
isLoading = false, isLoading = false,
}: Step3ThresholdAndActionsProps) { }: Step3ThresholdAndActionsProps) {
const { t } = useTranslation("views/settings"); const { t } = useTranslation("views/settings");
const { data: config } = useSWR<FrigateConfig>("config");
const availableActions = useMemo(() => {
if (!config) return [];
if (config.notifications.enabled) {
return ["notification", "sub_label", "attribute"];
}
return ["sub_label", "attribute"];
}, [config]);
const formSchema = z.object({ const formSchema = z.object({
threshold: z threshold: z
.number() .number()
.min(0, t("triggers.dialog.form.threshold.error.min")) .min(0, t("triggers.dialog.form.threshold.error.min"))
.max(1, t("triggers.dialog.form.threshold.error.max")), .max(1, t("triggers.dialog.form.threshold.error.max")),
actions: z.array(z.enum(["notification"])), actions: z.array(z.enum(["notification", "sub_label", "attribute"])),
}); });
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
@ -127,7 +139,7 @@ export default function Step3ThresholdAndActions({
<FormItem> <FormItem>
<FormLabel>{t("triggers.dialog.form.actions.title")}</FormLabel> <FormLabel>{t("triggers.dialog.form.actions.title")}</FormLabel>
<div className="space-y-2"> <div className="space-y-2">
{["notification"].map((action) => ( {availableActions.map((action) => (
<div key={action} className="flex items-center space-x-2"> <div key={action} className="flex items-center space-x-2">
<FormControl> <FormControl>
<Checkbox <Checkbox