diff --git a/resources/vue/components/MessagesList.vue b/resources/vue/components/MessagesList.vue index caae73fc8927b1b60d0a8c4ab2f6879b99bd2d75..c4e28fd2a6a6a6875fa625c38783c0832f1492b4 100644 --- a/resources/vue/components/MessagesList.vue +++ b/resources/vue/components/MessagesList.vue @@ -33,7 +33,7 @@ :id="`message_${message.id}`" :class="isMessageRead(message) ? 'read' : 'unread'" draggable="true" - @dragstart="dragStart(message)" @dragend="dragStop()" + @dragstart="dragStart(message, $event)" @dragend="dragStop()" > <td class="hidden-small-down"> <input type="checkbox" :checked="messageIsSelected(message)" :value="message.id" @click="selectedMessage(message)"> @@ -82,13 +82,18 @@ <sidebar-widget :title="$gettext('Schlagwörter')"> <template #content> <ul class="widget-list widget-links sidebar-views"> - <li class="active"> - <a href="#" @click.prevent> + <li :class="{active: !selectedTag}"> + <a href="#" @click.prevent="selectedTag = null"> {{ $gettext('Alle Nachrichten') }} </a> </li> - <li v-for="tag in tags" :key="`tag-${tag}`" :class="{dropzone: isDragging}" @drop="drop()"> - <a href="#" @click.prevent> + <li v-for="tag in tags" :key="`tag-${tag}`" + :class="{active: selectedTag === tag, dropzone: isDragging, draggedover: draggedOverTag === tag}" + @drop="drop(tag, $event)" + @dragover.prevent="draggedOver(tag)" @dragenter.prevent + @dragleave="draggedOver(null)" + > + <a href="#" @click.prevent="selectedTag = tag"> {{ tag }} </a> </li> @@ -118,6 +123,8 @@ export default { data () { return { selected: [], + selectedTag: null, + draggedOverTag: null, pageOptions: { offset: 0, limit: 30, @@ -230,15 +237,23 @@ export default { this.observed = element; this.observer.observe(this.observed); }, - dragStart(message) { + dragStart(message, event) { this.isDragging = true; + + event.dataTransfer.dropEffect = 'move'; + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('messageId', message.id); }, dragStop(message) { this.isDragging = false; }, - drop() { - console.log('dropped'); + drop(tag, event) { + const messageId = event.dataTransfer.getData('messageId'); + console.log('dropped message on tag', messageId, tag); }, + draggedOver(tag) { + this.draggedOverTag = tag; + } }, computed: { ...mapGetters({ @@ -267,7 +282,10 @@ export default { </script> <style scoped lang="scss"> .dropzone { - background-color: var(--red); + background-color: var(--red-20); +} +.dropzone.draggedover { + background-color: var(--red-80); } .fade-enter-active, diff --git a/resources/vue/store/MessagesStore.js b/resources/vue/store/MessagesStore.js index e827ff6eb657d1c9c6d58ae4a3b46eafd01df911..2628703b649e8f067c5eb1e3ce8422d03be613a1 100644 --- a/resources/vue/store/MessagesStore.js +++ b/resources/vue/store/MessagesStore.js @@ -23,7 +23,6 @@ export default new Vuex.Store({ actions: { async [LOAD_TAGS]({ commit }) { const response = await jsonapiClient.get('/messages/tags'); - console.log('response', response); commit(SET_TAGS, await response.data); }, },