Play a sound when marking a task as done

src/views/list/views/Kanban.vue

@@ -265,6 +265,7 @@ import Rights from '../../../models/rights.json'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import FilterPopup from '@/components/list/partials/filter-popup'
 import Dropdown from '@/components/misc/dropdown'
+import {playPop} from '@/helpers/playPop'
 
 export default {
 	name: 'Kanban',
@@ -421,6 +422,11 @@ export default {
 			this.$set(this.taskUpdating, task.id, true)
 			task.done = !task.done
 			this.$store.dispatch('tasks/update', task)
+				.then(() => {
+					if(task.done) {
+						playPop()
+					}
+				})
 				.catch(e => {
 					this.error(e, this)
 				})

src/views/tasks/TaskDetailView.vue

@@ -421,6 +421,7 @@ import ColorPicker from '../../components/input/colorPicker'
 import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
 import heading from '@/components/tasks/partials/heading'
 import Datepicker from '@/components/input/datepicker'
+import {playPop} from '@/helpers/playPop'
 
 export default {
 	name: 'TaskDetailView',
@@ -644,6 +645,11 @@ export default {
 		},
 		toggleTaskDone() {
 			this.task.done = !this.task.done
+
+			if(this.task.done) {
+				playPop()
+			}
+
 			this.saveTask(true, () => this.toggleTaskDone())
 		},
 		setDescriptionChanged(e) {

src/views/user/Settings.vue

@@ -108,6 +108,12 @@
 					Send me Reminders for tasks via Email
 				</label>
 			</div>
+			<div class="field">
+				<label class="checkbox">
+					<input type="checkbox" v-model="playSoundWhenDone"/>
+					Play a sound when marking tasks as done
+				</label>
+			</div>
 
 			<x-button
 				:loading="userSettingsService.loading"
@@ -225,6 +231,7 @@ import TotpModel from '../../models/totp'
 import TotpService from '../../services/totp'
 import UserSettingsService from '../../services/userSettings'
 import UserSettingsModel from '../../models/userSettings'
+import {playSoundWhenDoneKey} from '@/helpers/playPop'
 
 import {mapState} from 'vuex'
 
@@ -249,6 +256,7 @@ export default {
 			totpConfirmPasscode: '',
 			totpDisableForm: false,
 			totpDisablePassword: '',
+			playSoundWhenDone: false,
 
 			settings: UserSettingsModel,
 			userSettingsService: UserSettingsService,
@@ -273,6 +281,8 @@ export default {
 			emailRemindersEnabled: this.$store.state.auth.info.emailRemindersEnabled ?? false,
 		})
 
+		this.playSoundWhenDone = localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
+
 		this.totpStatus()
 	},
 	mounted() {
@@ -370,6 +380,8 @@ export default {
 				.catch(e => this.error(e, this))
 		},
 		updateSettings() {
+			localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone)
+
 			this.userSettingsService.update(this.settings)
 				.then(() => {
 					this.$store.commit('auth/setUserSettings', this.settings)