refactor date step

app/javascript/submission_form/date_step.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center w-full mb-2">
+      <label
+        :for="field.uuid"
+        class="label text-2xl"
+      >{{ field.name || t('date') }}
+        <template v-if="!field.required">({{ t('optional') }})</template>
+      </label>
+      <button
+        class="btn btn-outline btn-sm !normal-case font-normal"
+        @click.prevent="setCurrentDate"
+      >
+        <IconCalendarCheck :width="16" />
+        {{ t('set_today') }}
+      </button>
+    </div>
+    <div class="text-center">
+      <input
+        ref="input"
+        v-model="value"
+        class="base-input !text-2xl text-center w-full"
+        :required="field.required"
+        type="date"
+        :name="`values[${field.uuid}]`"
+        @focus="$emit('focus')"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconCalendarCheck } from '@tabler/icons-vue'
+
+export default {
+  name: 'DateStep',
+  components: {
+    IconCalendarCheck
+  },
+  inject: ['t'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['update:model-value', 'focus'],
+  computed: {
+    value: {
+      set (value) {
+        this.$emit('update:model-value', value)
+      },
+      get () {
+        return this.modelValue
+      }
+    }
+  },
+  methods: {
+    setCurrentDate () {
+      const inputEl = this.$refs.input
+
+      inputEl.valueAsDate = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
+
+      inputEl.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+  }
+}
+</script>

app/javascript/submission_form/form.vue

@@ -65,34 +65,13 @@
               @focus="$refs.areas.scrollIntoField(currentField)"
             />
           </div>
-          <div v-else-if="currentField.type === 'date'">
+          <DateStep
-            <div class="flex justify-between items-center w-full mb-2">
+            v-else-if="currentField.type === 'date'"
-              <label
+            :key="currentField.uuid"
-                :for="currentField.uuid"
+            v-model="values[currentField.uuid]"
-                class="label text-2xl"
+            :field="currentField"
-              >{{ currentField.name || t('date') }}
+            @focus="$refs.areas.scrollIntoField(currentField)"
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+          />
-              </label>
-              <button
-                class="btn btn-outline btn-sm !normal-case font-normal"
-                @click.prevent="setCurrentDate"
-              >
-                <IconCalendarCheck :width="16" />
-                {{ t('set_today') }}
-              </button>
-            </div>
-            <div class="text-center">
-              <input
-                :id="currentField.uuid"
-                v-model="values[currentField.uuid]"
-                class="base-input !text-2xl text-center w-full"
-                :required="currentField.required"
-                type="date"
-                :name="`values[${currentField.uuid}]`"
-                @focus="$refs.areas.scrollIntoField(currentField)"
-              >
-            </div>
-          </div>
           <div v-else-if="currentField.type === 'select'">
             <label
               v-if="currentField.name"
@@ -350,8 +329,9 @@ import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
 import TextStep from './text_step'
+import DateStep from './date_step'
 import FormCompleted from './completed'
-import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2, IconCalendarCheck } from '@tabler/icons-vue'
+import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import { t } from './i18n'
 
 export default {
@@ -364,10 +344,10 @@ export default {
     InitialsStep,
     MultiSelectStep,
     IconInnerShadowTop,
+    DateStep,
     IconArrowsDiagonal,
     TextStep,
     PhoneStep,
-    IconCalendarCheck,
     IconArrowsDiagonalMinimize2,
     FormCompleted
   },
@@ -642,13 +622,6 @@ export default {
         }
       })
     },
-    setCurrentDate () {
-      const inputEl = document.getElementById(this.currentField.uuid)
-
-      inputEl.valueAsDate = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
-
-      inputEl.dispatchEvent(new Event('input', { bubbles: true }))
-    },
     saveStep (formData) {
       if (this.isCompleted) {
         return Promise.resolve({})