From f8c575c33bda951255aa8c98566dbe0107199607 Mon Sep 17 00:00:00 2001
From: mathsuky <yuida2718@gmail.com>
Date: Sat, 14 Oct 2023 20:55:10 +0900
Subject: [PATCH] =?UTF-8?q?=E9=81=B7=E7=A7=BB=E6=99=82=E8=AD=A6=E5=91=8A?=
 =?UTF-8?q?=E3=82=92=E8=A4=87=E6=95=B0=E3=81=AEform=E3=81=AB=E5=AE=9F?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/event/EventFormBase.vue | 44 ++++++++++++++++++++++++++
 src/components/main/SidebarFooter.vue  | 21 +++++++-----
 src/pages/GroupNew.vue                 | 41 ++++++++++++++++++++++++
 src/workers/draftConfirmer.ts          | 13 ++++++++
 4 files changed, 111 insertions(+), 8 deletions(-)
 create mode 100644 src/workers/draftConfirmer.ts

diff --git a/src/components/event/EventFormBase.vue b/src/components/event/EventFormBase.vue
index 3933b7a0..68c55222 100644
--- 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
index dbe1810b..f4bbe878 100644
--- 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,14 +78,13 @@ 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() {
@@ -91,7 +92,11 @@ export default {
     },
     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
index 83245a9f..47282984 100644
--- 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
new file mode 100644
index 00000000..3e34ec84
--- /dev/null
+++ 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)
+}