遷移時警告を複数のformに実装

traPtitech · Oct 14, 2023 · f8c575c · f8c575c
1 parent 8b70189
commit f8c575c
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 8 deletions.
diff --git a/src/components/event/EventFormBase.vue b/src/components/event/EventFormBase.vue
@@ -75,6 +75,9 @@ import EventFormSummary, {
 } from '@/components/event/EventFormSummary.vue'
 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 router from '@/router'
 
 export type EventInput = EventInputContent &
   (
@@ -196,6 +199,47 @@ export default class EventFormBase extends Vue {
         : this.timeAndPlace.timeEnd,
     }
   }
+  hasContent(): boolean {
+    return (
+      this.summary.name !== '' ||
+      this.summary.description !== '' ||
+      this.summary.tags.length > 0 ||
+      this.summary.groupName !== '' ||
+      this.summary.place !== '' ||
+      this.summary.timeStart !== '' ||
+      this.summary.timeEnd !== '' ||
+      this.summary.open ||
+      !this.summary.sharedRoom
+    )
+  }
+  mounted() {
+    this.$watch('summary', () => {
+      if (this.hasContent()) {
+        useDraftConfirmer()
+      } else {
+        removeDraftConfirmer()
+      }
+    })
+    router.beforeEach((to, from, next) => {
+      if (from.name === 'EventNew') {
+        if (this.hasContent()) {
+          if (
+            confirm(
+              '入力されたデータは送信されないまま破棄されますが，よろしいですか。'
+            )
+          ) {
+            next()
+          } else {
+            next(false)
+          }
+        } else {
+          next()
+        }
+      } else {
+        next()
+      }
+    })
+  }
 
   @Emit()
   submit(): EventOutput {

diff --git a/src/components/main/SidebarFooter.vue b/src/components/main/SidebarFooter.vue
@@ -59,6 +59,8 @@
 
 <script lang="ts">
 import { isValidVerifiedroomData } from '@/workers/isValidVerifiedroomData'
+import { useDraftConfirmer } from '@/workers/draftConfirmer'
+import { removeDraftConfirmer } from '@/workers/draftConfirmer'
 import { baseURL } from '@/workers/api'
 
 export default {
@@ -76,22 +78,25 @@ export default {
     },
   },
   mounted: function () {
-    window.onbeforeunload = () => {
-      if (this.inputData) {
-        return 'このページを離れると保存されていないデータは破棄されますが，よろしいですか。'
+    this.$watch('inputData', newVal => {
+      if (newVal !== '') {
+        useDraftConfirmer()
+      } else {
+        removeDraftConfirmer()
       }
-    }
-  },
-  destroyed() {
-    window.onbeforeunload = null
+    })
   },
   methods: {
     showModal() {
       this.isVisible = true
     },
     hideModal() {
       if (this.inputData) {
-        if (confirm('入力されたデータは破棄されますが，よろしいですか。')) {
+        if (
+          confirm(
+            '入力されたデータは送信されないまま破棄されますが，よろしいですか。'
+          )
+        ) {
           this.isVisible = false
           this.showError = false
           this.inputData = ''

diff --git a/src/pages/GroupNew.vue b/src/pages/GroupNew.vue
@@ -35,6 +35,9 @@ import GroupFormSummary from '@/components/group/GroupFormSummary.vue'
 import FormNextButton from '@/components/shared/FormNextButton.vue'
 import FormBackButton from '@/components/shared/FormBackButton.vue'
 import api, { RequestGroup } from '@/api'
+import { useDraftConfirmer } from '@/workers/draftConfirmer'
+import { removeDraftConfirmer } from '@/workers/draftConfirmer'
+import router from '@/router'
 
 @Component({
   components: {
@@ -60,6 +63,44 @@ export default class GroupNew extends Vue {
       : [],
   }
 
+  hasContent(): boolean {
+    return (
+      this.group.name !== '' || this.group.description !== '' || this.group.open
+    )
+  }
+  mounted() {
+    this.$watch(
+      'group',
+      () => {
+        if (this.hasContent()) {
+          useDraftConfirmer()
+        } else {
+          removeDraftConfirmer()
+        }
+      },
+      { deep: true }
+    )
+    router.beforeEach((to, from, next) => {
+      if (from.name === 'GroupNew') {
+        if (this.hasContent()) {
+          if (
+            confirm(
+              '入力されたデータは送信されないまま破棄されますが，よろしいですか。'
+            )
+          ) {
+            next()
+          } else {
+            next(false)
+          }
+        } else {
+          next()
+        }
+      } else {
+        next()
+      }
+    })
+  }
+
   async submitGroup() {
     try {
       await api.groups.createGroup({ requestGroup: this.group })

diff --git a/src/workers/draftConfirmer.ts b/src/workers/draftConfirmer.ts
@@ -0,0 +1,13 @@
+const beforeUnloadListener = (event: BeforeUnloadEvent) => {
+  event.preventDefault()
+  event.returnValue =
+    '入力されたデータは送信されないまま破棄されますが，よろしいですか。'
+}
+
+export function useDraftConfirmer(): void {
+  window.addEventListener('beforeunload', beforeUnloadListener)
+}
+
+export function removeDraftConfirmer(): void {
+  window.removeEventListener('beforeunload', beforeUnloadListener)
+}