From 3c241b3389e80fee53fd234c2c6399d21d644a64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 21 Apr 2020 17:30:21 +0200
Subject: [PATCH] WIP: Edit card title inline
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/cards/CardItem.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index ef02af1d1..eef27a908 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -32,10 +32,10 @@
 			@click="openCard">
 			<div class="card-upper">
 				<h3 v-if="showArchived || !canEdit">
-					{{ card.title }}
+					{{ copiedCard.title }}
 				</h3>
 				<h3 v-else-if="!editing">
-					<span @click.stop="startEditing(card)">{{ card.title }}</span>
+					<span contenteditable @input="onCardInput" @paste="onCardPaste">{{ card.title }}</span>
 				</h3>
 
 				<form v-if="editing"
@@ -73,6 +73,7 @@ import CardBadges from './CardBadges'
 import Color from '../../mixins/color'
 import labelStyle from '../../mixins/labelStyle'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
+import debounce from 'lodash/debounce'
 
 export default {
 	name: 'CardItem',
@@ -93,6 +94,9 @@ export default {
 			copiedCard: null,
 		}
 	},
+	mounted() {
+		this.copiedCard = Object.assign({}, this.card)
+	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode,
@@ -132,7 +136,21 @@ export default {
 			return moment(this.card.duedate).format('LLLL')
 		},
 	},
+	watch: {
+		'copiedCard.title': debounce(function() {
+			this.$store.dispatch('updateCardTitle', this.copiedCard)
+		}, 250),
+	},
 	methods: {
+		onCardInput(e) {
+			this.copiedCard.title = e.target.innerText
+		},
+		onCardPaste(e) {
+			e.preventDefault()
+			const text = (e.originalEvent || e).clipboardData.getData('text/plain')
+			document.execCommand('insertHTML', false, text)
+			return false
+		},
 		openCard() {
 			this.$router.push({ name: 'card', params: { cardId: this.id } })
 		},