Move task description to separate component

src/components/tasks/partials/description.vue

@@ -0,0 +1,91 @@
+<template>
+	<div>
+		<h3>
+			<span class="icon is-grey">
+				<icon icon="align-left"/>
+			</span>
+			Description
+			<transition name="fade">
+				<span class="is-small is-inline-flex" v-if="loading">
+					<span class="loader is-inline-block mr-2"></span>
+					Saving...
+				</span>
+				<span class="is-small has-text-success" v-if="!loading && saved">
+					<icon icon="check"/>
+					Saved!
+				</span>
+			</transition>
+		</h3>
+		<editor
+			:is-edit-enabled="canWrite"
+			:upload-callback="attachmentUpload"
+			:upload-enabled="true"
+			@change="save"
+			placeholder="Click here to enter a description..."
+			v-model="task.description"/>
+	</div>
+</template>
+
+<script>
+import LoadingComponent from '@/components/misc/loading'
+import ErrorComponent from '@/components/misc/error'
+
+import {LOADING} from '@/store/mutation-types'
+import {mapState} from 'vuex'
+
+export default {
+	name: 'description',
+	components: {
+		editor: () => ({
+			component: import(/* webpackChunkName: "editor" */ '@/components/input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	data() {
+		return {
+			task: {description: ''},
+			saved: false,
+		}
+	},
+	computed: mapState({
+		loading: LOADING,
+	}),
+	props: {
+		value: {
+			required: true,
+		},
+		attachmentUpload: {
+			required: true,
+		},
+		canWrite: {
+			required: true,
+		},
+	},
+	watch: {
+		value(newVal) {
+			this.task = newVal
+		},
+	},
+	mounted() {
+		this.task = this.value
+	},
+	methods: {
+		save() {
+			this.$store.dispatch('tasks/update', this.task)
+				.then(() => {
+					this.$emit('input', this.task)
+					this.saved = true
+					setTimeout(() => {
+						this.saved = false
+					}, 2000)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		}
+	},
+}
+</script>
+

src/store/modules/tasks.js

@@ -3,12 +3,15 @@ import TaskAssigneeService from '../../services/taskAssignee'
 import TaskAssigneeModel from '../../models/taskAssignee'
 import LabelTaskModel from '../../models/labelTask'
 import LabelTaskService from '../../services/labelTask'
+import {setLoading} from '@/store/helper'
 
 export default {
 	namespaced: true,
 	state: () => ({}),
 	actions: {
 		update(ctx, task) {
+			const cancel = setLoading(ctx)
+
 			const taskService = new TaskService()
 			return taskService.update(task)
 				.then(t => {
@@ -18,6 +21,9 @@ export default {
 				.catch(e => {
 					return Promise.reject(e)
 				})
+				.finally(() => {
+					cancel()
+				})
 		},
 		delete(ctx, task) {
 			const taskService = new TaskService()

src/styles/theme/content.scss

@@ -44,3 +44,7 @@
 .media-content {
   width: calc(100% - 48px - 2em);
 }
+
+.content h3 .is-small {
+  font-size: 1rem;
+}

src/views/tasks/TaskDetailView.vue

@@ -67,7 +67,7 @@
 									:class="{ 'disabled': taskService.loading}"
 									:config="flatPickerConfig"
 									:disabled="taskService.loading || !canWrite"
-									@on-close="saveTask"
+									@on-close="() => saveTask()"
 									class="input"
 									placeholder="Click here to set a due date"
 									ref="dueDate"
@@ -104,7 +104,7 @@
 									:class="{ 'disabled': taskService.loading}"
 									:config="flatPickerConfig"
 									:disabled="taskService.loading || !canWrite"
-									@on-close="saveTask"
+									@on-close="() => saveTask()"
 									class="input"
 									placeholder="Click here to set a start date"
 									ref="startDate"
@@ -129,7 +129,7 @@
 									:class="{ 'disabled': taskService.loading}"
 									:config="flatPickerConfig"
 									:disabled="taskService.loading || !canWrite"
-									@on-close="saveTask"
+									@on-close="() => saveTask()"
 									class="input"
 									placeholder="Click here to set an end date"
 									ref="endDate"
@@ -194,19 +194,11 @@
 
 					<!-- Description -->
 					<div :class="{ 'has-top-border': activeFields.labels }" class="details content description">
-						<h3>
-							<span class="icon is-grey">
-								<icon icon="align-left"/>
-							</span>
-							Description
-						</h3>
-						<editor
-							:is-edit-enabled="canWrite"
-							:upload-callback="attachmentUpload"
-							:upload-enabled="true"
-							@change="saveTask"
-							placeholder="Click here to enter a description..."
-							v-model="task.description"/>
+						<description
+							v-model="task"
+							:can-write="canWrite"
+							:attachment-upload="attachmentUpload"
+						/>
 					</div>
 
 					<!-- Attachments -->
@@ -346,7 +338,8 @@
 
 					<!-- Created / Updated [by] -->
 					<p class="created">
-						Created <span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span> by {{ task.createdBy.getDisplayName() }}
+						Created <span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
+						by {{ task.createdBy.getDisplayName() }}
 						<template v-if="+new Date(task.created) !== +new Date(task.updated)">
 							<br/>
 							<!-- Computed properties to show the actual date every time it gets updated -->
@@ -393,10 +386,9 @@ import Reminders from '../../components/tasks/partials/reminders'
 import Comments from '../../components/tasks/partials/comments'
 import router from '../../router'
 import ListSearch from '../../components/tasks/partials/listSearch'
+import description from '@/components/tasks/partials/description'
 import ColorPicker from '../../components/input/colorPicker'
 import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
-import LoadingComponent from '../../components/misc/loading'
-import ErrorComponent from '../../components/misc/error'
 
 export default {
 	name: 'TaskDetailView',
@@ -413,12 +405,7 @@ export default {
 		PrioritySelect,
 		Comments,
 		flatPickr,
-		editor: () => ({
-			component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		description,
 	},
 	mixins: [
 		attachmentUpload,
@@ -445,6 +432,9 @@ export default {
 			descriptionChanged: false,
 			listViewName: 'list.list',
 
+			descriptionSaving: false,
+			descriptionRecentlySaved: false,
+
 			priorities: priorites,
 			flatPickerConfig: {
 				altFormat: 'j M Y H:i',
@@ -563,7 +553,7 @@ export default {
 				this.taskTitle = taskTitle
 			}
 		},
-		saveTask(undoCallback = null) {
+		saveTask(showNotification = true, undoCallback = null) {
 
 			if (!this.canWrite) {
 				return
@@ -584,15 +574,20 @@ export default {
 				this.$store.dispatch('tasks/update', this.task)
 					.then(r => {
 						this.$set(this, 'task', r)
+						this.setActiveFields()
+
+						if (!showNotification) {
+							return
+						}
+
 						let actions = []
 						if (undoCallback !== null) {
 							actions = [{
 								title: 'Undo',
 								callback: undoCallback,
 							}]
-							this.success({message: 'The task was saved successfully.'}, this, actions)
 						}
-						this.setActiveFields()
+						this.success({message: 'The task was saved successfully.'}, this, actions)
 					})
 					.catch(e => {
 						this.error(e, this)
@@ -619,7 +614,7 @@ export default {
 		},
 		toggleTaskDone() {
 			this.task.done = !this.task.done
-			this.saveTask(() => this.toggleTaskDone())
+			this.saveTask(true, () => this.toggleTaskDone())
 		},
 		setDescriptionChanged(e) {
 			if (e.key === 'Enter' || e.key === 'Control') {