macro form fixes

frontend/src/features/admin/macros/MacroForm.vue

@@ -27,7 +27,12 @@
       </FormItem>
     </FormField>
 
-    <FormField v-slot="{ componentField }" name="actions">
+    <FormField
+      v-slot="{ componentField }"
+      name="actions"
+      :validate-on-blur="false"
+      :validate-on-change="false"
+    >
       <FormItem>
         <FormLabel>
           {{ t('globals.terms.action', 2) }} ({{ t('globals.terms.optional', 1).toLowerCase() }})
@@ -71,7 +76,15 @@
       </FormItem>
     </FormField>
 
-    <FormField v-slot="{ componentField }" name="visibility">
+    <FormField
+      v-slot="{ componentField }"
+      name="visibility"
+      :validate-on-blur="false"
+      :validate-on-change="false"
+      :validate-on-input="false"
+      :validate-on-mount="false"
+      :validate-on-model-update="false"
+    >
       <FormItem>
         <FormLabel>{{ t('globals.terms.visibility') }}</FormLabel>
         <FormControl>

frontend/src/features/admin/macros/formSchema.js

@@ -1,10 +1,10 @@
 import * as z from 'zod'
 import { getTextFromHTML } from '@/utils/strings.js'
 
-const actionSchema = (t) => z.array(
+const actionSchema = () => z.array(
   z.object({
-    type: z.string().min(1, t('admin.macro.actionTypeRequired')),
-    value: z.array(z.string().min(1, t('admin.macro.actionValueRequired'))),
+    type: z.string().optional(),
+    value: z.array(z.string()).optional(),
   })
 )
 
@@ -35,19 +35,39 @@ export const createFormSchema = (t) => z.object({
   .refine(
     (data) => {
       // If visibility is 'team', team_id is required
-      if (data.visibility === 'team' && !data.team_id) {
-        return false
+      if (data.visibility === 'team') {
+        return !!data.team_id
       }
-      // If visibility is 'user', user_id is required
-      if (data.visibility === 'user' && !data.user_id) {
-        return false
-      }
-      // Otherwise, validation passes
       return true
     },
     {
-      message: t('admin.macro.teamOrUserRequired'),
+      message: t('globals.messages.required'),
+      path: ['team_id'],
+    }
+  )
+  .refine(
+    (data) => {
+      // If visibility is 'user', user_id is required
+      if (data.visibility === 'user') {
+        return !!data.user_id
+      }
+      return true
+    },
+    {
+      message: t('globals.messages.required'),
+      path: ['user_id'],
+    }
+  ).refine(
+    (data) => {
+      // if actions are present, all actions should have type and value defined.
+      if (data.actions && data.actions.length > 0) {
+        return data.actions.every(action => action.type?.length > 0 && action.value?.length > 0)
+      }
+      return true
+    },
+    {
+      message: t('admin.macro.actionInvalid'),
       // Field path to highlight
-      path: ['visibility'],
+      path: ['actions'],
     }
   )

i18n/en.json

@@ -392,9 +392,7 @@
   "admin.macro.messageContent": "Response to be sent when macro is used (optional)",
   "admin.macro.actions": "Actions (optional)",
   "admin.macro.messageOrActionRequired": "Either message content or actions are required",
-  "admin.macro.actionTypeRequired": "Action type is required",
-  "admin.macro.actionValueRequired": "Action value is required",
-  "admin.macro.teamOrUserRequired": "Team or user is required",
+  "admin.macro.actionInvalid": "Each action must have a type and a value",
   "admin.conversationStatus.name.description": "Set status name. Click save when you're done.",
   "admin.conversationStatus.deleteConfirmation": "This action cannot be undone. This will permanently delete this status.",
   "admin.inbox.name.description": "Name for your inbox.",