feat(prompts): food entry auto focus option (#V4-1357)

Author: mechkg

apps/admin/src/components/prompts/standard/edit-meal-prompt.vue

@@ -8,6 +8,12 @@
           :model-value="separateDrinks"
           @update:model-value="update('separateDrinks', $event)"
         />
+        <v-switch
+          hide-details="auto"
+          :label="$t('survey-schemes.prompts.edit-meal-prompt.inputAutoFocus')"
+          :model-value="inputAutoFocus"
+          @update:model-value="update('inputAutoFocus', $event)"
+        />
       </v-col>
     </v-row>
   </v-tabs-window-item>
@@ -31,6 +37,10 @@ export default defineComponent({
       type: Boolean as PropType<Prompts['edit-meal-prompt']['separateDrinks']>,
       required: true,
     },
+    inputAutoFocus: {
+      type: Boolean as PropType<Prompts['edit-meal-prompt']['inputAutoFocus']>,
+      required: true,
+    },
   },
 });
 </script>

apps/api/src/jobs/survey-schemes/migrations/2_refactor_conditions.ts

@@ -218,6 +218,15 @@ function migrateSinglePrompt(prompt: SinglePromptV1, section: PromptSection): Si
             },
       };
     }
+    case 'edit-meal-prompt':
+      return {
+        ...prompt,
+        version: 2,
+        useGraph: false,
+        conditions,
+        separateDrinks: true,
+        inputAutoFocus: true,
+      };
     default:
       return {
         ...prompt,

apps/survey/src/components/prompts/standard/EditMealPrompt.vue

@@ -4,7 +4,7 @@
       <editable-food-list
         v-model="foodsOnly"
         v-bind="{ prompt, section }"
-        focus
+        :focus="prompt.inputAutoFocus"
         mode="foodsOnly"
         @delete="deleteFood"
       />
@@ -19,7 +19,7 @@
       v-else
       v-bind="{ prompt, section }"
       v-model="state"
-      focus
+      :focus="prompt.inputAutoFocus"
       @delete="deleteFood"
     />
     <template #actions>

packages/common/src/prompts/prompts.ts

@@ -367,6 +367,7 @@ const generalAssociatedFoodsPrompt = baseStandardPrompt.merge(foodBrowser).exten
 const editMealPrompt = baseStandardPrompt.extend({
   component: z.literal('edit-meal-prompt'),
   separateDrinks: z.boolean(),
+  inputAutoFocus: z.boolean(),
 });
 
 const externalSourcePrompt = baseStandardPrompt.extend({

packages/common/src/prompts/standard.ts

@@ -37,6 +37,7 @@ export const editMealPrompt: Prompts['edit-meal-prompt'] = copy({
   id: 'edit-meal-prompt',
   name: 'Meal Edit prompt',
   separateDrinks: false,
+  inputAutoFocus: true,
 });
 
 export const externalSourcePrompt: Prompts['external-source-prompt'] = copy({

packages/i18n/src/admin/en/survey-schemes.json

@@ -524,7 +524,8 @@
     "edit-meal-prompt": {
       "title": "Food list",
       "subtitle": "List or edit foods in this meal as free text descriptions",
-      "separateDrinks": "Separate drinks list"
+      "separateDrinks": "Separate drinks list",
+      "inputAutoFocus": "Automatically set focus to the food entry text field"
     },
     "external-source-prompt": {
       "title": "External source",