double click to edit title and notes more easily (#2112)

* Add double click handler to edit title and notes

Signed-off-by: Blair Hasler <blairun@gmail.com>

* Simplify double click implementation

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

Co-authored-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

3 files changed, 25 insertions, 3 deletions

diff --git a/src/components/AppSidebar/NotesItem.vue b/src/components/AppSidebar/NotesItem.vue
index b90981cc..34cdd94b 100644
--- a/src/components/AppSidebar/NotesItem.vue
+++ b/src/components/AppSidebar/NotesItem.vue
@@ -45,6 +45,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 <script>
 import editableItem from '../../mixins/editableItem.js'
 
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 
 import MarkdownIt from 'markdown-it'
@@ -97,6 +98,12 @@ export default {
 			},
 		},
 	},
+	mounted() {
+		subscribe('tasks:edit-appsidebar-notes', this.setNotes)
+	},
+	beforeDestroy() {
+		unsubscribe('tasks:edit-appsidebar-notes', this.setNotes)
+	},
 	methods: {
 		/**
 		 * Focus the notes field after editing is enabled
@@ -111,6 +118,9 @@ export default {
 				)
 			}
 		},
+		setNotes($event) {
+			this.setEditing(true, $event)
+		},
 	},
 }
 </script>
diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
index 458b4224..6aadc996 100644
--- a/src/components/TaskBody.vue
+++ b/src/components/TaskBody.vue
@@ -47,7 +47,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				:priority-class="priorityClass"
 				@toggle-completed="toggleCompleted(task)" />
 			<!-- Info: title, progress & tags -->
-			<div class="task-body__info">
+			<div class="task-body__info"
+				@dblclick="editTitle()">
 				<div class="title">
 					<span v-linkify="{text: task.summary, linkify: true}" />
 				</div>
@@ -79,7 +80,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				<TextBoxOutline v-if="task.note!=''"
 					:size="20"
 					:title="t('tasks', 'Task has a note')"
-					@click.stop="openAppSidebarTab($event, 'app-sidebar-tab-notes')" />
+					@click="openAppSidebarTab($event, 'app-sidebar-tab-notes')"
+					@dblclick.native.stop="openAppSidebarTab($event, 'app-sidebar-tab-notes', true)" />
 				<div v-if="task.due || task.completed" :class="{'date--overdue': overdue(task.dueMoment) && !task.completed}" class="date">
 					<span class="date__short" :class="{ 'date__short--completed': task.completed }">{{ dueDateShort }}</span>
 					<span class="date__long" :class="{ 'date__long--date-only': task.allDay && !task.completed, 'date__long--completed': task.completed }">{{ dueDateLong }}</span>
@@ -573,11 +575,19 @@ export default {
 			}
 		},
 
-		openAppSidebarTab($event, tab) {
+		openAppSidebarTab($event, tab, edit = false) {
 			// Open the AppSidebar
 			this.navigate($event, tab)
 			// In case it is already open, we also have to emit an event to show the tab
 			emit('tasks:open-appsidebar-tab', { tab })
+			if (edit) {
+				emit('tasks:edit-appsidebar-notes', $event)
+			}
+		},
+
+		editTitle() {
+			// emit an event to edit the task title
+			emit('tasks:edit-appsidebar-title', true)
 		},
 
 		openSubtaskInput() {
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index 63eea99c..0f3809f4 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -719,10 +719,12 @@ export default {
 	mounted() {
 		subscribe('tasks:close-appsidebar', this.closeAppSidebar)
 		subscribe('tasks:open-appsidebar-tab', this.openAppSidebarTab)
+		subscribe('tasks:edit-appsidebar-title', this.editTitle)
 	},
 	beforeDestroy() {
 		unsubscribe('tasks:close-appsidebar', this.closeAppSidebar)
 		unsubscribe('tasks:open-appsidebar-tab', this.openAppSidebarTab)
+		unsubscribe('tasks:edit-appsidebar-title', this.editTitle)
 	},
 	created() {
 		this.loadTask()