refactor(common, survey): minor changes to timepicker type field after rebasing

Author: chrimyn234

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

@@ -2,9 +2,9 @@
   <v-tab-item key="options" value="options">
     <v-card-text>
       <v-row>
-        <v-col class="bg-red" cols="12" lg="4" md="6">
+        <v-col cols="12" lg="4" md="6">
           <v-card-title>
-            {{ $t("survey-schemes.prompts.timePicker.allowedMinutes._") }}
+            {{ $t('survey-schemes.prompts.timePicker.allowedMinutes._') }}
           </v-card-title>
           <v-select
             :items="[1, 5, 10, 15, 20, 30]"
@@ -39,7 +39,7 @@
         </v-col>
         <v-col cols="12" lg="4" md="6">
           <v-card-title>
-            {{ $t("survey-schemes.prompts.timePicker.format._") }}
+            {{ $t('survey-schemes.prompts.timePicker.format._') }}
           </v-card-title>
           <v-btn-toggle
             class="d-flex"
@@ -53,20 +53,20 @@
               :title="$t('survey-schemes.prompts.timePicker.format.24hr')"
               value="24hr"
             >
-              {{ $t("survey-schemes.prompts.timePicker.format.24hr") }}
+              {{ $t('survey-schemes.prompts.timePicker.format.24hr') }}
             </v-btn>
             <v-btn
               class="px-10 flex-grow-1 flex-md-grow-0"
               :title="$t('survey-schemes.prompts.timePicker.format.ampm')"
               value="ampm"
             >
-              {{ $t("survey-schemes.prompts.timePicker.format.ampm") }}
+              {{ $t('survey-schemes.prompts.timePicker.format.ampm') }}
             </v-btn>
           </v-btn-toggle>
         </v-col>
         <v-col cols="12" lg="6" md="6">
           <v-card-title>
-            {{ $t("survey-schemes.prompts.timePicker.pickerType._") }}
+            {{ $t('survey-schemes.prompts.timePicker.pickerType._') }}
           </v-card-title>
           <v-btn-toggle
             class="d-flex"
@@ -80,14 +80,14 @@
               :title="$t('survey-schemes.prompts.timePicker.pickerType.clock')"
               value="clock"
             >
-              {{ $t("survey-schemes.prompts.timePicker.pickerType.clock") }}
+              {{ $t('survey-schemes.prompts.timePicker.pickerType.clock') }}
             </v-btn>
             <v-btn
               class="px-10 flex-grow-1 flex-md-grow-0"
               :title="$t('survey-schemes.prompts.timePicker.pickerType.simple')"
               value="simple"
             >
-              {{ $t("survey-schemes.prompts.timePicker.pickerType.simple") }}
+              {{ $t('survey-schemes.prompts.timePicker.pickerType.simple') }}
             </v-btn>
           </v-btn-toggle>
         </v-col>

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

@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, defineComponent } from 'vue';
 
 import type { MealState, MealTime } from '@intake24/common/types';
 import { fromMealTime, toMealTime } from '@intake24/common/surveys';
@@ -109,8 +109,6 @@ export default defineComponent({
   setup(props, ctx) {
     const { action, translatePrompt } = usePromptUtils(props, ctx);
 
-    const selectedTime = ref('12:00');
-
     const allowedMinutes = computed(
       () => (minutes: number) => minutes % props.prompt.allowedMinutes === 0,
     );
@@ -125,15 +123,7 @@ export default defineComponent({
     });
     const isValid = computed(() => !!state.value);
 
-    watch(
-      () => state.value,
-      (newState) => {
-        console.log(newState);
-      },
-      { immediate: true },
-    );
-
-    return { action, allowedMinutes, selectedTime, isValid, promptI18n, state };
+    return { action, allowedMinutes, isValid, promptI18n, state };
   },
 });
 </script>
@@ -144,61 +134,4 @@ export default defineComponent({
     justify-content: center;
   }
 }
-
-.vue__time-picker {
-  input.display-time {
-    border-radius: 0.375rem;
-    border: 1px solid #ddd;
-    padding: 1.5rem 1rem;
-    font-size: 1.5rem;
-    color: #444;
-    background-color: #fafafa;
-    transition: all 0.3s ease;
-
-    &:focus {
-      outline: none;
-      border-color: #fd7e14;
-      box-shadow: 0 0 8px rgba(253, 126, 20, 0.6);
-      background-color: #fff;
-    }
-
-    &::placeholder {
-      color: #bbb;
-    }
-
-    &:hover {
-      border-color: #fd7e14;
-      background-color: #fff;
-    }
-  }
-
-  .dropdown {
-    margin-top: 1.4rem;
-
-    ul {
-      li {
-        transition:
-          background 0.3s,
-          color 0.3s;
-        border-radius: 0.5rem;
-        font-size: 1.2rem;
-
-        &:not([disabled]).active {
-          background: #fd7e14;
-          color: #fff;
-          font-weight: bold;
-
-          &:hover {
-            background: rgba(253, 126, 20, 0.9);
-          }
-        }
-
-        &:hover:not([disabled]) {
-          background: #f1f1f1;
-          color: #333;
-        }
-      }
-    }
-  }
-}
 </style>