From fb1a09c7c172b913c12b30975ca545e505df0c05 Mon Sep 17 00:00:00 2001
From: Shlomo <78599753+ShlomoCode@users.noreply.github.com>
Date: Tue, 30 Jan 2024 11:48:03 +0200
Subject: [PATCH] feat: prompt to confirm discard editor changes (#2948)

* chore: update he.json

* feat: prompt to confirm discard editor changes

---------

Co-authored-by: Oleg Lobanov <oleg@lobanov.me>
---
 .../prompts/DiscardEditorChanges.vue          | 45 +++++++++++++++++++
 frontend/src/components/prompts/Prompts.vue   |  4 +-
 frontend/src/i18n/en.json                     |  6 ++-
 frontend/src/i18n/he.json                     |  6 ++-
 frontend/src/views/files/Editor.vue           | 11 +++--
 5 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/prompts/DiscardEditorChanges.vue

diff --git a/frontend/src/components/prompts/DiscardEditorChanges.vue b/frontend/src/components/prompts/DiscardEditorChanges.vue
new file mode 100644
index 00000000..a870708d
--- /dev/null
+++ b/frontend/src/components/prompts/DiscardEditorChanges.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="card floating">
+    <div class="card-content">
+      <p>
+        {{ $t("prompts.discardEditorChanges") }}
+      </p>
+    </div>
+    <div class="card-action">
+      <button
+        @click="$store.commit('closeHovers')"
+        class="button button--flat button--grey"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        @click="submit"
+        class="button button--flat button--red"
+        :aria-label="$t('buttons.discardChanges')"
+        :title="$t('buttons.discardChanges')"
+      >
+        {{ $t("buttons.discardChanges") }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+import url from "@/utils/url";
+
+export default {
+  name: "discardEditorChanges",
+  methods: {
+    ...mapMutations(["closeHovers"]),
+    submit: async function () {
+      this.$store.commit("updateRequest", {});
+
+      let uri = url.removeLastDir(this.$route.path) + "/";
+      this.$router.push({ path: uri });
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/prompts/Prompts.vue b/frontend/src/components/prompts/Prompts.vue
index 9dfba9cd..53b3949f 100644
--- a/frontend/src/components/prompts/Prompts.vue
+++ b/frontend/src/components/prompts/Prompts.vue
@@ -27,6 +27,7 @@ import Share from "./Share.vue";
 import Upload from "./Upload.vue";
 import ShareDelete from "./ShareDelete.vue";
 import Sidebar from "../Sidebar.vue";
+import DiscardEditorChanges from "./DiscardEditorChanges.vue";
 import { mapGetters, mapState } from "vuex";
 import buttons from "@/utils/buttons";
 
@@ -47,7 +48,8 @@ export default {
     ReplaceRename,
     Upload,
     ShareDelete,
-    Sidebar
+    Sidebar,
+    DiscardEditorChanges,
   },
   data: function () {
     return {
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 01c98b4b..33977e4e 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -38,7 +38,8 @@
     "update": "Update",
     "upload": "Upload",
     "openFile": "Open file",
-    "continue": "Continue"
+    "continue": "Continue",
+    "discardChanges": "Discard"
   },
   "download": {
     "downloadFile": "Download File",
@@ -162,7 +163,8 @@
     "uploadFiles": "Uploading {files} files...",
     "uploadMessage": "Select an option to upload.",
     "optionalPassword": "Optional password",
-    "resolution": "Resolution"
+    "resolution": "Resolution",
+    "discardEditorChanges": "Are you sure you wish to discard the changes you've made?"
   },
   "search": {
     "images": "Images",
diff --git a/frontend/src/i18n/he.json b/frontend/src/i18n/he.json
index bc2e8ea2..dbac2871 100644
--- a/frontend/src/i18n/he.json
+++ b/frontend/src/i18n/he.json
@@ -38,7 +38,8 @@
     "update": "עדכון",
     "upload": "העלאה",
     "openFile": "פתח קובץ",
-    "continue": "המשך"
+    "continue": "המשך",
+    "discardChanges": "זריקת השינויים"
   },
   "download": {
     "downloadFile": "הורד קובץ",
@@ -160,7 +161,8 @@
     "upload": "העלאה",
     "uploadFiles": "מעלה {files} קבצים...",
     "uploadMessage": "בחר אפשרות העלאה.",
-    "optionalPassword": "סיסמא אופציונלית"
+    "optionalPassword": "סיסמא אופציונלית",
+    "discardEditorChanges": "האם אתה בטוח שברצונך לבטל את השינויים שביצעת?"
   },
   "search": {
     "images": "תמונות",
diff --git a/frontend/src/views/files/Editor.vue b/frontend/src/views/files/Editor.vue
index cd1e23cd..e85ffa3b 100644
--- a/frontend/src/views/files/Editor.vue
+++ b/frontend/src/views/files/Editor.vue
@@ -107,10 +107,6 @@ export default {
     this.editor.focus();
   },
   methods: {
-    back() {
-      let uri = url.removeLastDir(this.$route.path) + "/";
-      this.$router.push({ path: uri });
-    },
     keyEvent(event) {
       if (event.code === "Escape") {
         this.close();
@@ -140,6 +136,13 @@ export default {
       }
     },
     close() {
+      const originalContent = this.req.content;
+      const currentContent = this.editor.getValue();
+      if (originalContent !== currentContent) {
+        this.$store.commit("showHover", "discardEditorChanges");
+        return;
+      }
+
       this.$store.commit("updateRequest", {});
 
       let uri = url.removeLastDir(this.$route.path) + "/";