Merge pull request #1707 from aronovgj/feat/drag-drop-categories

feat (UI): drag & drop notes to categories

Author: enjeck

AUTHORS

@@ -30,6 +30,7 @@
  - Felix Nüsse <felix.nuesse@t-online.de>
  - Ferdinand Mütsch <mail@ferdinand-muetsch.de>
  - Florian Hülsmann <fh@cbix.de>
+ - Grigorij Aronov <aronovgj@gmx.net>
  - Hendrik Leppelsack <hendrik@leppelsack.de>
  - Holger Hees <holger.hees@gmail.com>
  - Holly <holly@r00t.li>

src/components/CategoriesList.vue

@@ -7,8 +7,14 @@
 	<Fragment>
 		<NcAppNavigationItem
 			:name="t('notes', 'All notes')"
-			:class="{ active: selectedCategory === null }"
+			:class="{
+				active: selectedCategory === null,
+				'drop-over': dragOverAllNotes,
+			}"
 			@click.prevent.stop="onSelectCategory(null)"
+			@dragover.native="onAllNotesDragOver($event)"
+			@dragleave.native="onAllNotesDragLeave($event)"
+			@drop.native="onAllNotesDrop($event)"
 		>
 			<template #icon>
 				<HistoryIcon :size="20" />
@@ -26,8 +32,14 @@
 			:key="category.name"
 			:name="categoryTitle(category.name)"
 			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
-			:class="{ active: category.name === selectedCategory }"
+			:class="{
+				active: category.name === selectedCategory,
+				'drop-over': category.name === dragOverCategory,
+			}"
 			@click.prevent.stop="onSelectCategory(category.name)"
+			@dragover.native="onCategoryDragOver(category.name, $event)"
+			@dragleave.native="onCategoryDragLeave(category.name, $event)"
+			@drop.native="onCategoryDrop(category.name, $event)"
 		>
 			<template #icon>
 				<FolderOutlineIcon v-if="category.name === ''" :size="20" />
@@ -52,7 +64,7 @@ import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
 import HistoryIcon from 'vue-material-design-icons/History.vue'
 
-import { getCategories } from '../NotesService.js'
+import { getCategories, setCategory } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
 import store from '../store.js'
 
@@ -69,6 +81,13 @@ export default {
 		HistoryIcon,
 	},
 
+	data() {
+		return {
+			dragOverCategory: null,
+			dragOverAllNotes: false,
+		}
+	},
+
 	computed: {
 		numNotes() {
 			return store.getters.numNotes()
@@ -88,6 +107,118 @@ export default {
 			return categoryLabel(category)
 		},
 
+		getDraggedNoteId(event) {
+			const dt = event?.dataTransfer
+			if (!dt) {
+				return null
+			}
+
+			let raw = ''
+			try {
+				raw = dt.getData('application/x-nextcloud-notes-note-id')
+			} catch {
+				// Some browsers only allow specific mime types.
+			}
+			if (!raw) {
+				raw = dt.getData('text/plain') || dt.getData('text/uri-list') || dt.getData('text/x-moz-url') || ''
+			}
+
+			const match = /\/note\/(\d+)(?:[/?#\s]|$)/.exec(raw) || /^\s*(\d+)\s*$/.exec(raw)
+			const noteId = match ? Number.parseInt(match[1], 10) : Number.NaN
+			if (!Number.isFinite(noteId)) {
+				return null
+			}
+			const note = store.getters.getNote(noteId)
+			if (!note || note.readonly) {
+				return null
+			}
+
+			return noteId
+		},
+
+		onCategoryDragOver(category, event) {
+			event.preventDefault()
+			if (event.dataTransfer) {
+				event.dataTransfer.dropEffect = 'move'
+			}
+			this.dragOverAllNotes = false
+			this.dragOverCategory = category
+		},
+
+		onAllNotesDragOver(event) {
+			event.preventDefault()
+			if (event.dataTransfer) {
+				event.dataTransfer.dropEffect = 'move'
+			}
+			this.dragOverCategory = null
+			this.dragOverAllNotes = true
+		},
+
+		onAllNotesDragLeave(event) {
+			if (!this.dragOverAllNotes) {
+				return
+			}
+
+			const currentTarget = event.currentTarget
+			const relatedTarget = event.relatedTarget
+			if (currentTarget && relatedTarget && currentTarget.contains(relatedTarget)) {
+				return
+			}
+
+			this.dragOverAllNotes = false
+		},
+
+		onCategoryDragLeave(category, event) {
+			if (this.dragOverCategory !== category) {
+				return
+			}
+
+			const currentTarget = event.currentTarget
+			const relatedTarget = event.relatedTarget
+			if (currentTarget && relatedTarget && currentTarget.contains(relatedTarget)) {
+				return
+			}
+
+			this.dragOverCategory = null
+		},
+
+		async onAllNotesDrop(event) {
+			event.preventDefault()
+			event.stopPropagation()
+
+			this.dragOverAllNotes = false
+			const noteId = this.getDraggedNoteId(event)
+			if (noteId === null) {
+				return
+			}
+
+			const note = store.getters.getNote(noteId)
+			if (!note || note.category === '') {
+				return
+			}
+
+			await setCategory(noteId, '')
+		},
+
+		async onCategoryDrop(category, event) {
+			event.preventDefault()
+			event.stopPropagation()
+
+			const noteId = this.getDraggedNoteId(event)
+			this.dragOverCategory = null
+			this.dragOverAllNotes = false
+			if (noteId === null) {
+				return
+			}
+
+			const note = store.getters.getNote(noteId)
+			if (!note || note.category === category) {
+				return
+			}
+
+			await setCategory(noteId, category)
+		},
+
 		onSelectCategory(category) {
 			store.commit('setSelectedCategory', category)
 		},
@@ -98,4 +229,10 @@ export default {
 .app-navigation-entry-wrapper.active:deep(.app-navigation-entry) {
 	background-color: var(--color-primary-element-light) !important;
 }
+
+.app-navigation-entry-wrapper.drop-over:deep(.app-navigation-entry) {
+	background-color: var(--color-primary-element-light) !important;
+	outline: 2px dashed var(--color-primary-element);
+	outline-offset: -2px;
+}
 </style>

src/components/NoteItem.vue

@@ -8,9 +8,11 @@
 		:name="title"
 		:active="isSelected"
 		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
+		:draggable="isDraggable"
 		one-line
 		@update:menuOpen="onMenuChange"
 		@click="onNoteSelected(note.id)"
+		@dragstart.native="onDragStart"
 	>
 		<template #subtitle>
 			{{ categoryTitle }}
@@ -152,6 +154,10 @@ export default {
 	},
 
 	computed: {
+		isDraggable() {
+			return !this.note.readonly
+		},
+
 		isSelected() {
 			return this.$store.getters.getSelectedNote() === this.note.id
 		},
@@ -206,6 +212,22 @@ export default {
 	},
 
 	methods: {
+		onDragStart(event) {
+			if (!this.isDraggable) {
+				event.preventDefault()
+				return
+			}
+
+			const noteId = this.note.id.toString()
+			event.dataTransfer.effectAllowed = 'move'
+			try {
+				event.dataTransfer.setData('application/x-nextcloud-notes-note-id', noteId)
+			} catch {
+				// Some browsers only allow specific mime types.
+			}
+			event.dataTransfer.setData('text/plain', noteId)
+		},
+
 		onMenuChange(state) {
 			this.actionsOpen = state
 			this.showCategorySelect = false