Feat/set default end time

src/components/event/EventFormBase.vue

@@ -77,6 +77,7 @@ import FormNextButton from '@/components/shared/FormNextButton.vue'
 import FormBackButton from '@/components/shared/FormBackButton.vue'
 import { useDraftConfirmer } from '@/workers/draftConfirmer'
 import { removeDraftConfirmer } from '@/workers/draftConfirmer'
+import { today } from '@/workers/date'
 import router from '@/router'
 import { Route } from 'vue-router'
 
@@ -126,6 +127,20 @@ export default class EventFormBase extends Vue {
 
   beforeEachControl: (() => void) | null = null
 
+  roundToNextHour(date: Date): Date {
+    const roundedDate = new Date(date)
+    const minutes = roundedDate.getMinutes()
+    const seconds = roundedDate.getSeconds()
+    const milliseconds = roundedDate.getMilliseconds()
+
+    if (minutes > 0 || seconds > 0 || milliseconds > 0) {
+      roundedDate.setHours(roundedDate.getHours() + 1)
+    }
+    roundedDate.setMinutes(0, 0, 0)
+
+    return roundedDate
+  }
+
   created() {
     this.content = {
       name: this.event?.name ?? '',
@@ -149,8 +164,15 @@ export default class EventFormBase extends Vue {
           : true,
     }
     this.timeAndPlaceInstant = {
-      timeStart: this.event?.instant ? this.event.timeStart ?? '' : '',
-      timeEnd: this.event?.instant ? this.event.timeEnd ?? '' : '',
+      // TODO: placeだけ初期値がないとvalidationが先に走ってしまう
+      timeStart: this.event?.instant
+        ? this.event.timeStart ?? ''
+        : this.roundToNextHour(new Date()).toISOString(),
+      timeEnd: this.event?.instant
+        ? this.event.timeEnd ?? ''
+        : this.roundToNextHour(
+            new Date(new Date().getTime() + 60 * 60 * 1000)
+          ).toISOString(),
       place: this.event?.instant ? this.event.place ?? '' : '',
     }
     this.instant = this.event?.instant ?? false

src/components/event/EventFormTimeAndPlaceInstant.vue

@@ -15,14 +15,15 @@
         $rules.eventTimeInstant(timeStartInput, timeEndInput)
       "
       type="date"
-      @blur="setDefaultDateEnd"
+      @blur="updateEndDateTime"
     />
     <v-text-field
       v-model="timeStartMem"
       filled
       label="開始時刻"
       :rules="$rules.eventTimeInstant(timeStartInput, timeEndInput)"
       type="time"
+      @blur="updateEndDateTime"
     />
     <v-text-field
       v-model="dateEndMem"
@@ -33,13 +34,15 @@
         $rules.eventTimeInstant(timeStartInput, timeEndInput)
       "
       type="date"
+      @blur="recalculateTimeDiff"
     />
     <v-text-field
       v-model="timeEndMem"
       filled
       label="終了時刻"
       :rules="$rules.eventTimeInstant(timeStartInput, timeEndInput)"
       type="time"
+      @blur="recalculateTimeDiff"
     />
   </v-form>
 </template>
@@ -73,6 +76,11 @@ export default class EventFormTimeAndPlaceInstant extends Vue {
   private dateEndMem = ''
   private timeStartMem = ''
   private timeEndMem = ''
+  private dateDiff = 0
+  private minuteDiff = 60
+
+  @Ref()
+  readonly form!: { validate(): void }
 
   created() {
     this.dateStartMem = this.timeStartInput && getDate(this.timeStartInput)
@@ -81,8 +89,16 @@ export default class EventFormTimeAndPlaceInstant extends Vue {
     this.timeEndMem = this.timeEndInput && getTime(this.timeEndInput)
   }
 
-  @Ref()
-  readonly form!: { validate(): void }
+  get dateMin(): string {
+    return today()
+  }
+
+  get valid(): boolean {
+    return this.value
+  }
+  set valid(value: boolean) {
+    this.$emit('input', value)
+  }
 
   @Watch('timeStartInput')
   @Watch('timeEndInput')
@@ -102,10 +118,6 @@ export default class EventFormTimeAndPlaceInstant extends Vue {
     }
   }
 
-  public setDefaultDateEnd() {
-    if (!this.dateEndMem) this.dateEndMem = this.dateStartMem
-  }
-
   @Watch('dateEndMem')
   @Watch('timeEndMem')
   private onTimeEndMemChange() {
@@ -114,15 +126,37 @@ export default class EventFormTimeAndPlaceInstant extends Vue {
     }
   }
 
-  get dateMin(): string {
-    return today()
-  }
+  public updateEndDateTime() {
+    if (!this.minuteDiff) {
+      this.minuteDiff = 60
+    }
 
-  get valid(): boolean {
-    return this.value
+    const startDateTime = new Date(`${this.dateStartMem}T${this.timeStartMem}`)
+    startDateTime.setMinutes(startDateTime.getMinutes() + this.minuteDiff)
+
+    const localDateTime = new Date(
+      startDateTime.getTime() - startDateTime.getTimezoneOffset() * 60000
+    ).toISOString()
+    this.dateEndMem = localDateTime.split('T')[0]
+
+    const hours = String(startDateTime.getHours()).padStart(2, '0')
+    const minutes = String(startDateTime.getMinutes()).padStart(2, '0')
+    this.timeEndMem = `${hours}:${minutes}`
   }
-  set valid(value: boolean) {
-    this.$emit('input', value)
+
+  public recalculateTimeDiff() {
+    if (this.timeStartMem && this.timeEndMem) {
+      const startDateTime = new Date(
+        `${this.dateStartMem}T${this.timeStartMem}`
+      )
+      const endDateTime = new Date(`${this.dateEndMem}T${this.timeEndMem}`)
+      const diffInMilliseconds = endDateTime.getTime() - startDateTime.getTime()
+      if (diffInMilliseconds > 0) {
+        this.minuteDiff = Math.floor(diffInMilliseconds / (1000 * 60))
+      } else {
+        this.minuteDiff = 0
+      }
+    }
   }
 }
 </script>