fix(psm): V4-476 select portion size on click & prompt cleanup

MRC-Epid-it24 · Sep 22, 2022 · e6de2a7 · e6de2a7
1 parent a265b1e
commit e6de2a7
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 87 deletions.
diff --git a/...y/src/components/prompts/dynamic/handlers/portion-size/PortionSizeOptionPromptHandler.vue b/...y/src/components/prompts/dynamic/handlers/portion-size/PortionSizeOptionPromptHandler.vue
@@ -1,8 +1,8 @@
 <template>
   <portion-size-option-prompt
-    v-bind="{ continueEnabled, promptComponent, promptProps, availableMethods }"
+    v-bind="{ continueEnabled, promptProps, availableMethods }"
     :food-name="foodName()"
-    :initial-value="initialState"
+    :initial-value="initialState ?? undefined"
     @continue="$emit('continue')"
     @update="onUpdate"
   >

diff --git a/apps/survey/src/components/prompts/portion/PortionSizeOptionPrompt.vue b/apps/survey/src/components/prompts/portion/PortionSizeOptionPrompt.vue
@@ -4,46 +4,54 @@
       {{ $t('portion.option.label', { food: localeDescription }) }}
     </template>
     <v-sheet>
-      <v-row class="mt-2 ma-2">
-        <v-col
-          v-for="(method, index) in availableMethods"
-          :key="index"
-          class="mx-auto"
-          cols="6"
-          lg="3"
-          md="4"
-          @click="selectMethod(index)"
-        >
-          <v-card :elevation="returnSelectElevation(index)">
-            <v-img aspect-ratio="1" class="align-end" contain :src="method.imageUrl">
-              <v-chip class="ma-2" :color="returnSelectedStyle(index)">
-                {{ $t(`portion.option.description.${method.description}`) }}
-              </v-chip>
-              <template #placeholder>
-                <v-alert outlined text>
-                  <v-progress-circular
-                    class="mr-2"
-                    color="primary"
-                    indeterminate
-                  ></v-progress-circular>
-                  {{ $t('portion.option.imageInvalid') }}
-                </v-alert>
-              </template>
-            </v-img>
-          </v-card>
-        </v-col>
-      </v-row>
+      <v-item-group v-model="currentValue">
+        <v-container>
+          <v-row>
+            <v-col v-for="(method, index) in availableMethods" :key="index" cols="12" md="4" sm="6">
+              <v-item v-slot="{ active, toggle }">
+                <v-card
+                  border-color="primary"
+                  :elevation="active ? 12 : 0"
+                  outlined
+                  @click="toggle"
+                >
+                  <v-img :aspect-ratio="3 / 2" :src="method.imageUrl">
+                    <template #placeholder>
+                      <div
+                        class="d-flex"
+                        style="
+                           {
+                            width: 100%;
+                            height: 100%;
+                          }
+                        "
+                      >
+                        <v-progress-circular
+                          class="ma-auto"
+                          color="primary"
+                          indeterminate
+                          :size="100"
+                          :width="10"
+                        ></v-progress-circular>
+                      </div>
+                    </template>
+                  </v-img>
+                  <v-card-actions class="d-flex justify-end">
+                    <v-chip class="font-weight-medium px-4" rounded>
+                      {{ $t(`portion.option.description.${method.description}`) }}
+                    </v-chip>
+                  </v-card-actions>
+                </v-card>
+              </v-item>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-item-group>
       <v-row>
         <v-col>
           <v-messages v-show="hasErrors" v-model="errors" class="mt-3" color="error"></v-messages>
         </v-col>
       </v-row>
-      <template #actions>
-        <v-form ref="form" @submit.prevent="submit">
-          <!-- Should be disabled if nothing selected? -->
-          <continue :disabled="!continueEnabled" @click="submit"></continue>
-        </v-form>
-      </template>
     </v-sheet>
   </portion-layout>
 </template>
@@ -61,13 +69,10 @@ import { localeContent } from '@intake24/survey/components/mixins';
 
 import BasePortion from './BasePortion';
 
-type Response = null | number;
-
 export interface PortionSizeOptionState {
   option: number | null;
 }
 
-// For user to select which portion size estimation method they want to use
 export default defineComponent({
   name: 'PortionSizeOptionPrompt',
 
@@ -87,13 +92,8 @@ export default defineComponent({
       type: Array as PropType<UserPortionSizeMethod[]>,
       required: true,
     },
-    promptComponent: {
-      type: String,
-      required: true,
-    },
     initialValue: {
       type: Object as PropType<PortionSizeOptionState>,
-      default: null,
     },
     continueEnabled: {
       type: Boolean,
@@ -105,7 +105,7 @@ export default defineComponent({
     return {
       ...merge(basePromptProps, this.promptProps),
       errors: [] as string[],
-      currentValue: this.initialValue?.option,
+      currentValue: this.initialValue?.option ?? undefined,
     };
   },
 
@@ -116,56 +116,30 @@ export default defineComponent({
     hasErrors(): boolean {
       return !!this.errors.length;
     },
+    isValid() {
+      return this.currentValue !== undefined;
+    },
   },
 
-  methods: {
-    onChange(index: number) {
-      let response: Response = null;
-      if (index !== -1) {
-        response = this.currentValue === undefined ? null : this.currentValue;
-      }
-      this.$emit('update', {
-        option: response,
-      });
-    },
+  watch: {
+    currentValue(val) {
+      this.clearErrors();
 
-    selectMethod(index: number) {
-      if (this.currentValue === index) {
-        this.currentValue = -1;
-        this.onChange(this.currentValue);
-      } else {
-        this.currentValue = index;
-        this.onChange(this.currentValue);
-        this.clearErrors();
-      }
-    },
+      if (val === undefined) return;
 
-    clearErrors() {
-      this.errors = [];
+      this.update(val);
     },
+  },
 
-    isValid() {
-      // Check user has selected a method
-      if (this.currentValue !== -1) {
-        return true;
-      }
-      return false;
-    },
+  methods: {
+    update(index: number) {
+      this.$emit('update', { option: index });
 
-    // Styling for chip to denote selected
-    returnSelectedStyle(index: number) {
-      if (this.currentValue === index) {
-        return 'green';
-      }
-      return 'false';
+      this.submit();
     },
 
-    returnSelectElevation(index: number) {
-      // Elevation for card based on selected or not
-      if (this.currentValue === index) {
-        return 12;
-      }
-      return 0;
+    clearErrors() {
+      this.errors = [];
     },
 
     submit() {