From f6b4807ba07043118730d018721f6ede5880fbd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 6 Apr 2020 08:58:09 +0200
Subject: [PATCH] Properly update description and add autosave delay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/card/CardSidebar.vue | 28 +++++++++++++++++++++++-----
 src/components/cards/CardBadges.vue |  2 +-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index c6b1fe0a0..be97d440b 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -121,13 +121,18 @@
 
 			<h5>
 				{{ t('deck', 'Description') }}
+				<span v-if="copiedCard.descriptionLastEdit && !descriptionSaving">{{ t('deck', '(Unsaved)') }}</span>
+				<span v-if="descriptionSaving">{{ t('deck', '(Saving…)') }}</span>
 				<a v-tooltip="t('deck', 'Formatting help')"
 					href="https://deck.readthedocs.io/en/latest/Markdown/"
 					target="_blank"
 					class="icon icon-info" />
 			</h5>
 			<!-- FIXME: make sure the editor is disabled when canEdit is false -->
-			<VueEasymde ref="markdownEditor" v-model="copiedCard.description" :configs="mdeConfig" />
+			<VueEasymde ref="markdownEditor"
+				:value="copiedCard.description"
+				:configs="mdeConfig"
+				@input="updateDescription" />
 		</AppSidebarTab>
 
 		<AppSidebarTab id="attachments"
@@ -158,7 +163,6 @@
 <script>
 import { Avatar, Actions, ActionButton, Multiselect, AppSidebar, AppSidebarTab, DatetimePicker } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
-import VueEasymde from 'vue-easymde/dist/VueEasyMDE.common'
 import Color from '../../mixins/color'
 import { CollectionList } from 'nextcloud-vue-collections'
 import CardSidebarTabAttachments from './CardSidebarTabAttachments'
@@ -174,7 +178,7 @@ export default {
 		AppSidebarTab,
 		Multiselect,
 		DatetimePicker,
-		VueEasymde,
+		VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
 		Actions,
 		ActionButton,
 		Avatar,
@@ -209,6 +213,8 @@ export default {
 			},
 			lastModifiedRelative: null,
 			lastCreatedRemative: null,
+			descriptionSaveTimeout: null,
+			descriptionSaving: false,
 			hasActivity: capabilities && capabilities.activity,
 			hasComments: window.OCP && window.OCP.Comments,
 		}
@@ -299,8 +305,20 @@ export default {
 			this.copiedCard.duedate = null
 			this.$store.dispatch('updateCardDue', this.copiedCard)
 		},
-		saveDesc() {
-			this.$store.dispatch('updateCardDesc', this.copiedCard)
+		updateDescription(text) {
+			this.copiedCard.description = text
+			this.copiedCard.descriptionLastEdit = Date.now()
+			clearTimeout(this.descriptionSaveTimeout)
+			this.descriptionSaveTimeout = setTimeout(async() => {
+				if (!Object.prototype.hasOwnProperty.call(this.copiedCard, 'descriptionLastEdit') || this.descriptionSaving) {
+					return
+				}
+				this.descriptionSaving = true
+				await this.$store.dispatch('updateCardDesc', this.copiedCard)
+				delete this.copiedCard.descriptionLastEdit
+				this.descriptionSaving = false
+			}, 2500)
+
 		},
 
 		closeSidebar() {
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 6c41d54d5..1f73cf583 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="badges">
-		<div v-if="card.description" class="icon icon-edit" />
+		<div v-if="false && card.description" class="icon icon-edit" />
 
 		<div v-if="card.commentsUnread > 0" class="icon icon-comment" />