Added Local Drafts

diff --git a/README.md b/README.md
index eb896fea99d11814f24c6c2031474a3cbe8dbf95..fdd00257bd78bdd905d84c0d64ac8f0cf53d3537 100644 (file)
--- a/README.md
+++ b/README.md
@@ -38,10 +38,10 @@ This is what flatnotes aims to achieve.
 * [x] e to edit
 * [x] Ability to Delete a Note
 * [x] Exclude extension when renaming
+* [x] Drafts
 * [ ] Loading & Not Found Indicators
 * [ ] / to search
 * [ ] CTRL-S to save
-* [ ] Drafts
 * [ ] Image Embedding
 * [ ] Index Page (alphabetically sorted note list)
 * [ ] Clean & Responsive UI

diff --git a/flatnotes/src/components/App.js b/flatnotes/src/components/App.js
index cd2d450d0779fcbaebb7ab5b252f3158f5484e3a..48f8a0f1597b3fb90a145f627384e2ebeb6f9283 100644 (file)
--- a/flatnotes/src/components/App.js
+++ b/flatnotes/src/components/App.js
@@ -29,7 +29,8 @@ export default {
       rememberMeInput: false,
       notes: [],
       searchTerm: null,
-      searchTimeout: null,
+      draftSaveTimeout: null,
+      draftContent: null,
       searchResults: null,
       currentNote: null,
       titleInput: null,
@@ -160,6 +161,18 @@ export default {
         });
     },
 
+    getContentForEditor: function() {
+      let draftContent = localStorage.getItem(this.currentNote.filename);
+      if (draftContent) {
+        if (confirm("Do you want to resume the saved draft?")) {
+          return draftContent;
+        } else {
+          localStorage.removeItem(this.currentNote.filename);
+        }
+      }
+      return this.currentNote.content;
+    },
+
     loadNote: function(filename) {
       let parent = this;
       api
@@ -185,8 +198,27 @@ export default {
       this.currentView = this.views.note;
     },
 
+    getEditorContent: function() {
+      return this.$refs.toastUiEditor.invoke("getMarkdown");
+    },
+
+    clearDraftSaveTimeout: function() {
+      if (this.draftSaveTimeout != null) {
+        clearTimeout(this.draftSaveTimeout);
+      }
+    },
+
+    startDraftSaveTimeout: function() {
+      this.clearDraftSaveTimeout();
+      this.draftSaveTimeout = setTimeout(this.saveDraft, 1000);
+    },
+
+    saveDraft: function() {
+      localStorage.setItem(this.currentNote.filename, this.getEditorContent());
+    },
+
     saveNote: function() {
-      let newContent = this.$refs.toastUiEditor.invoke("getMarkdown");
+      let newContent = this.getEditorContent();
 
       // New Note
       if (this.currentNote.lastModified == null) {
@@ -218,6 +250,7 @@ export default {
     },
 
     saveNoteResponseHandler: function(response) {
+      localStorage.removeItem(this.currentNote.filename);
       this.currentNote = new Note(
         response.data.filename,
         response.data.lastModified,
@@ -229,6 +262,16 @@ export default {
       this.toggleEditMode();
     },
 
+    cancelNote: function() {
+      localStorage.removeItem(this.currentNote.filename);
+      if (this.currentNote.lastModified == null) {
+        // Cancelling a new note
+        this.currentNote = null;
+        this.currentView = this.views.home;
+      }
+      this.toggleEditMode();
+    },
+
     deleteNote: function() {
       if (
         confirm(

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index d0bdf5ac70d4265f46de4951d63376fa1120f3d1..7f502f4cb5912585e44d1bea0d537c28cddb8159 100644 (file)
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -103,7 +103,7 @@
           v-if="currentView == views.note && editMode == true"
           type="button"
           class="btn btn-secondary mx-1"
-          @click="toggleEditMode"
+          @click="cancelNote"
         >
           Cancel
         </button>
@@ -146,10 +146,11 @@
         <div v-else>
           <input type="text" class="form-control" v-model="titleInput" />
           <editor
-            :initialValue="currentNote.content"
+            :initialValue="getContentForEditor()"
             previewStyle="tab"
             height="calc(100vh - 180px)"
             ref="toastUiEditor"
+            @change="startDraftSaveTimeout"
           />
         </div>
       </div>