feat(prompts): sleep schedule & meal sorting (V4-1504)

Author: lukashroch

apps/admin/src/components/prompts/custom/time-picker-prompt.vue

@@ -15,30 +15,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue';
-import type { Prompts } from '@intake24/common/prompts';
-import { TimePickerSettings, useBasePrompt } from '../partials';
+import { TimePickerSettings, timerPickerProps, useBasePrompt } from '../partials';
 
 defineOptions({ name: 'TimePickerPrompt' });
 
-const props = defineProps({
-  allowedMinutes: {
-    type: Number as PropType<Prompts['meal-time-prompt']['allowedMinutes']>,
-    required: true,
-  },
-  amPmToggle: {
-    type: Boolean as PropType<Prompts['meal-time-prompt']['amPmToggle']>,
-    required: true,
-  },
-  format: {
-    type: String as PropType<Prompts['meal-time-prompt']['format']>,
-    required: true,
-  },
-  ui: {
-    type: String as PropType<Prompts['meal-time-prompt']['ui']>,
-    required: true,
-  },
-});
+const props = defineProps(timerPickerProps);
 
 const emit = defineEmits(['update:options']);
 

apps/admin/src/components/prompts/index.ts

@@ -156,6 +156,10 @@ export const promptSettings: PromptSettings = {
     tabs: [...tabs],
     sections: ['foods'],
   },
+  'sleep-schedule-prompt': {
+    tabs: [...tabs],
+    sections: ['preMeals'],
+  },
   'split-food-prompt': {
     tabs: [...tabs],
     sections: ['foods'],

apps/admin/src/components/prompts/partials/index.ts

@@ -16,6 +16,7 @@ export { default as PromptJson } from './prompt-json.vue';
 export { default as PromptValidation } from './prompt-validation.vue';
 export { default as selectListPrompt } from './select-list-prompt';
 export { default as SliderSettings } from './slider-settings.vue';
+export * from './timer-picker-props';
 export { default as TimePickerSettings } from './timer-picker-settings.vue';
 export * from './use-base-prompt';
 export * from './use-multiple';

apps/admin/src/components/prompts/partials/timer-picker-props.ts

@@ -0,0 +1,21 @@
+import type { PropType } from 'vue';
+import type { TimePicker } from '@intake24/common/prompts';
+
+export const timerPickerProps = {
+  allowedMinutes: {
+    type: Number as PropType<TimePicker['allowedMinutes']>,
+    required: true,
+  },
+  amPmToggle: {
+    type: Boolean as PropType<TimePicker['amPmToggle']>,
+    required: true,
+  },
+  format: {
+    type: String as PropType<TimePicker['format']>,
+    required: true,
+  },
+  ui: {
+    type: String as PropType<TimePicker['ui']>,
+    required: true,
+  },
+} as const;

apps/admin/src/components/prompts/partials/timer-picker-settings.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card border flat>
     <v-toolbar color="grey-lighten-4">
-      <v-icon end icon="fas fa-barcode" />
+      <v-icon end icon="fas fa-clock" />
       <v-toolbar-title>
         {{ $t('survey-schemes.prompts.timePicker.title') }}
       </v-toolbar-title>

apps/admin/src/components/prompts/standard/index.ts

@@ -14,6 +14,7 @@ import RecallDatePrompt from './recall-date-prompt.vue';
 import RedirectPrompt from './redirect-prompt.vue';
 import ReviewConfirmPrompt from './review-confirm-prompt.vue';
 import SameAsBeforePrompt from './same-as-before-prompt.vue';
+import SleepSchedulePrompt from './sleep-schedule-prompt.vue';
 import SplitFoodPrompt from './split-food-prompt.vue';
 import SubmitPrompt from './submit-prompt.vue';
 
@@ -34,6 +35,7 @@ export default {
   RedirectPrompt,
   ReviewConfirmPrompt,
   SameAsBeforePrompt,
+  SleepSchedulePrompt,
   SplitFoodPrompt,
   SubmitPrompt,
 };

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

@@ -15,30 +15,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue';
-import type { Prompts } from '@intake24/common/prompts';
-import { TimePickerSettings, useBasePrompt } from '../partials';
+import { TimePickerSettings, timerPickerProps, useBasePrompt } from '../partials';
 
 defineOptions({ name: 'MealTimePrompt' });
 
-const props = defineProps({
-  allowedMinutes: {
-    type: Number as PropType<Prompts['meal-time-prompt']['allowedMinutes']>,
-    required: true,
-  },
-  amPmToggle: {
-    type: Boolean as PropType<Prompts['meal-time-prompt']['amPmToggle']>,
-    required: true,
-  },
-  format: {
-    type: String as PropType<Prompts['meal-time-prompt']['format']>,
-    required: true,
-  },
-  ui: {
-    type: String as PropType<Prompts['meal-time-prompt']['ui']>,
-    required: true,
-  },
-});
+const props = defineProps(timerPickerProps);
 
 const emit = defineEmits(['update:options']);
 

apps/admin/src/components/prompts/standard/sleep-schedule-prompt.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-tabs-window-item key="options" value="options">
+    <v-row>
+      <v-col cols="12" md="7">
+        <v-card border flat>
+          <v-toolbar color="grey-lighten-4">
+            <v-icon end icon="fas fa-bed" />
+            <v-toolbar-title>
+              {{ $t('survey-schemes.prompts.sleep-schedule-prompt.schedule') }}
+            </v-toolbar-title>
+          </v-toolbar>
+          <v-card-text class="d-flex flex-column flex-sm-row pa-0">
+            <v-time-picker
+              :landscape="$vuetify.display.smAndUp"
+              :model-value="wakeUpTime"
+              :title="$t('survey-schemes.prompts.sleep-schedule-prompt.wakeUpTime')"
+              @update:model-value="update('wakeUpTime', $event)"
+            />
+            <v-time-picker
+              :landscape="$vuetify.display.smAndUp"
+              :model-value="sleepTime"
+              :title="$t('survey-schemes.prompts.sleep-schedule-prompt.sleepTime')"
+              @update:model-value="update('sleepTime', $event)"
+            />
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col class="px-4" cols="12" md="5">
+        <time-picker-settings
+          v-bind="{ allowedMinutes, amPmToggle, format, ui }"
+          @update:allowed-minutes="update('allowedMinutes', $event)"
+          @update:am-pm-toggle="update('amPmToggle', $event)"
+          @update:format="update('format', $event)"
+          @update:ui="update('ui', $event)"
+        />
+      </v-col>
+    </v-row>
+  </v-tabs-window-item>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import type { Prompts } from '@intake24/common/prompts';
+import { TimePickerSettings, timerPickerProps, useBasePrompt } from '../partials';
+
+const props = defineProps({
+  ...timerPickerProps,
+  wakeUpTime: {
+    type: String as PropType<Prompts['sleep-schedule-prompt']['wakeUpTime']>,
+    required: true,
+  },
+  sleepTime: {
+    type: String as PropType<Prompts['sleep-schedule-prompt']['sleepTime']>,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:options']);
+
+const { update } = useBasePrompt(props, { emit });
+</script>
+
+<style lang="scss" scoped></style>

apps/api/__tests__/integration/surveys/clear-session.test.ts

@@ -29,6 +29,8 @@ export default () => {
         mode: 'auto',
       },
       meals: [],
+      wakeUpTime: null,
+      sleepTime: null,
     };
 
     input = {

apps/api/__tests__/integration/surveys/get-session.test.ts

@@ -68,6 +68,8 @@ export default () => {
           meals: [],
           customPromptAnswers: {},
           selection: { element: null, mode: 'auto' },
+          wakeUpTime: null,
+          sleepTime: null,
         },
       };
       await UserSurveySession.create(input);

apps/api/__tests__/integration/surveys/save-session.test.ts

@@ -27,6 +27,8 @@ export default () => {
         mode: 'auto',
       },
       meals: [],
+      wakeUpTime: null,
+      sleepTime: null,
     };
 
     input = { session };

apps/api/__tests__/integration/surveys/start-session.test.ts

@@ -28,6 +28,8 @@ export default () => {
         mode: 'auto',
       },
       meals: [],
+      wakeUpTime: null,
+      sleepTime: null,
     };
 
     input = { session };

apps/api/src/services/admin/data-export/data-export-fields.ts

@@ -3,11 +3,10 @@ import { differenceInMinutes } from 'date-fns';
 import { orderBy } from 'lodash';
 import stringify from 'safe-stable-stringify';
 import { UAParser } from 'ua-parser-js';
-
 import { externalSources as externalSourceProviders } from '@intake24/common/prompts';
 import type { Prompt } from '@intake24/common/prompts';
-import { fromMealTime } from '@intake24/common/surveys';
 import type { ExportField as BaseExportField } from '@intake24/common/surveys';
+import { fromTime } from '@intake24/common/util';
 import type { SurveyScheme } from '@intake24/db';
 import {
   NutrientTableCsvMappingField,
@@ -171,6 +170,16 @@ function dataExportFields() {
       label: 'Submission DateTime',
       value: ({ food }: ExportRow) => food.meal?.submission?.submissionTime?.toISOString(),
     },
+    {
+      id: 'wakeUpTime',
+      label: 'Wake-Up Time',
+      value: ({ food }: ExportRow) => food.meal?.submission?.wakeUpTime,
+    },
+    {
+      id: 'sleepTime',
+      label: 'Sleep Time',
+      value: ({ food }: ExportRow) => food.meal?.submission?.sleepTime,
+    },
     {
       id: 'userAgent',
       label: 'User Agent',
@@ -244,7 +253,7 @@ function dataExportFields() {
       label: 'Meal time',
       value: ({ food }: ExportRow) =>
         food.meal
-          ? fromMealTime({ hours: food.meal.hours, minutes: food.meal.minutes })
+          ? fromTime({ hours: food.meal.hours, minutes: food.meal.minutes })
           : undefined,
     },
     { id: 'duration', label: 'Meal duration', value: ({ food }: ExportRow) => food.meal?.duration },

apps/api/src/services/survey/survey-submission.service.ts

@@ -484,7 +484,7 @@ function surveySubmissionService({
     ];
 
     await db.system.transaction(async (transaction) => {
-      const { recallDate, startTime, endTime, userAgent } = state;
+      const { recallDate, startTime, endTime, userAgent, wakeUpTime, sleepTime } = state;
       const submissionTime = state.submissionTime ?? new Date();
       const id = state.id ?? randomUUID();
 
@@ -508,6 +508,8 @@ function surveySubmissionService({
           submissionTime,
           sessionId,
           userAgent,
+          wakeUpTime,
+          sleepTime,
         },
         { transaction },
       );

apps/docs/admin/surveys/prompt-types.md

@@ -176,6 +176,18 @@ Prompt to redirect user to external site with optional user identifier embedded
 
 Prompt to detect foods that are the same as in the previous recalls / meals and offer to use the same portion-size estimation.
 
+### Sleep schedule prompt
+
+Prompt to collect sleep schedule information (wake-up time and bedtime).
+
+#### Options
+
+- `allowedMinutes` - allowed minutes for selection (`1`, `5`, `10`, `15`, `20`, `30`)
+
+- `format` - time format (`am/pm` or `24h`)
+
+- `AM/PM toggle` - `true` or `false` whether to show AM/PM toggle buttons
+
 ### Split food prompt
 
 Prompt to identify foods that can potentially be split into separate foods.

apps/survey/src/components/elements/SurveyProgressBar.vue

@@ -19,8 +19,9 @@
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
-import { fromMealTime } from '@intake24/common/surveys';
-import type { MealState, MealTime } from '@intake24/common/surveys';
+import type { MealState } from '@intake24/common/surveys';
+import type { Time } from '@intake24/common/util';
+import { fromTime } from '@intake24/common/util';
 import { useI18n } from '@intake24/i18n';
 
 export default defineComponent({
@@ -35,10 +36,10 @@ export default defineComponent({
 
   setup() {
     const { translate } = useI18n();
-    const stringTime = (time: MealTime | undefined): string => {
+    const stringTime = (time: Time | undefined): string => {
       if (time === undefined)
         return '?';
-      return fromMealTime(time);
+      return fromTime(time);
     };
 
     const color = (item: MealState) => {

apps/survey/src/components/elements/time-pickers/time-picker-digital.vue

@@ -151,7 +151,7 @@
 import type { PropType } from 'vue';
 import { computed, ref, watch } from 'vue';
 import type { Prompts } from '@intake24/common/prompts';
-import { fromMealTime, toMealTime } from '@intake24/common/surveys';
+import { fromTime, toTime } from '@intake24/common/util';
 import { usePromptUtils } from '@intake24/survey/composables';
 
 const props = defineProps({
@@ -179,7 +179,7 @@ const promptI18n = computed(() => translatePrompt([
   'picker.pm',
 ]));
 
-const time = ref(toMealTime(props.modelValue ?? '00:00'));
+const time = ref(toTime(props.modelValue ?? '00:00'));
 const activeFormat = ref(props.prompt.format ?? '24hr');
 const isAmPm = computed(() => activeFormat.value === 'ampm');
 
@@ -260,7 +260,7 @@ function updateTime(el: 'hours' | 'minutes', val: number) {
 }
 
 watch(time, (val) => {
-  const time = fromMealTime(val);
+  const time = fromTime(val);
   emit('update:modelValue', time);
 }, { deep: true });
 </script>