feat: remove copy-to-clipboard (#1797)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1797
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

package.json

@@ -31,7 +31,6 @@
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
     "codemirror": "5.65.3",
-    "copy-to-clipboard": "3.3.1",
     "date-fns": "2.28.0",
     "dompurify": "2.3.6",
     "easymde": "2.16.1",

src/components/sharing/linkSharing.vue

@@ -183,8 +183,8 @@ import rights from '../../models/constants/rights'
 import LinkShareService from '../../services/linkShare'
 import LinkShareModel from '../../models/linkShare'
 
-import copy from 'copy-to-clipboard'
 import {mapState} from 'vuex'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 
 export default defineComponent({
 	name: 'linkSharing',
@@ -207,6 +207,11 @@ export default defineComponent({
 			showNewForm: false,
 		}
 	},
+	setup() {
+		return {
+			copy: useCopyToClipboard(),
+		}
+	},
 	watch: {
 		listId: {
 			handler: 'load',
@@ -253,7 +258,6 @@ export default defineComponent({
 				this.showDeleteModal = false
 			}
 		},
-		copy,
 		getShareLink(hash) {
 			return this.frontendUrl + 'share/' + hash + '/auth'
 		},

src/components/tasks/partials/attachments.vue

@@ -142,8 +142,8 @@ import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
 import User from '../../misc/user'
 import {mapState} from 'vuex'
-import copy from 'copy-to-clipboard'
 
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
 
 export default defineComponent({
@@ -175,6 +175,17 @@ export default defineComponent({
 			default: true,
 		},
 	},
+
+	setup(props) {
+		const copy = useCopyToClipboard()
+
+		function copyUrl(attachment: AttachmentModel) {
+			copy(generateAttachmentUrl(props.taskId, attachment.id))
+		}
+
+		return { copyUrl }
+	},
+
 	computed: mapState({
 		attachments: (state) => state.attachments.attachments,
 	}),
@@ -245,9 +256,6 @@ export default defineComponent({
 				this.downloadAttachment(attachment)
 			}
 		},
-		copyUrl(attachment) {
-			copy(generateAttachmentUrl(this.taskId, attachment.id))
-		},
 	},
 })
 </script>

src/components/tasks/partials/heading.vue

@@ -1,23 +1,29 @@
 <template>
 	<div class="heading">
-		<h1 class="title task-id">{{ textIdentifier }}</h1>
+		<BaseButton @click="copyUrl"><h1 class="title task-id">{{ textIdentifier }}</h1></BaseButton>
 		<Done class="heading__done" :is-done="task.done" />
 		<h1
 			class="title input"
 			:class="{'disabled': !canWrite}"
-			@blur="save($event.target.textContent)"
-			@keydown.enter.prevent.stop="$event.target.blur()"
+			@blur="save(($event.target as HTMLInputElement).textContent as string)"
+			@keydown.enter.prevent.stop="($event.target as HTMLInputElement).blur()"
 			:contenteditable="canWrite ? true : undefined"
 			:spellcheck="false"
 		>
 			{{ task.title.trim() }}
 		</h1>
 		<transition name="fade">
-			<span class="is-inline-flex is-align-items-center" v-if="loading && saving">
+			<span
+				v-if="loading && saving"
+				class="is-inline-flex is-align-items-center"
+			>
 				<span class="loader is-inline-block mr-2"></span>
 				{{ $t('misc.saving') }}
 			</span>
-			<span class="has-text-success is-inline-flex is-align-content-center" v-else-if="!loading && showSavedMessage">
+			<span
+				v-else-if="!loading && showSavedMessage"
+				class="has-text-success is-inline-flex is-align-content-center"
+			>
 				<icon icon="check" class="mr-2"/>
 				{{ $t('misc.saved') }}
 			</span>
@@ -25,75 +31,73 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-import {mapState} from 'vuex'
+<script setup lang="ts">
+import {ref, computed} from 'vue'
+import {useStore} from 'vuex'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Done from '@/components/misc/Done.vue'
+import TaskModel from '@/models/task'
+import { useRouter } from 'vue-router'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 
-export default defineComponent({
-	name: 'heading',
-	components: {
-		Done,
+const props = defineProps({
+	task: {
+		type: TaskModel,
+		required: true,
 	},
-	data() {
-		return {
-			showSavedMessage: false,
-			saving: false, // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.
-		}
-	},
-	computed: {
-		...mapState(['loading']),
-		task() {
-			return this.modelValue
-		},
-		textIdentifier() {
-			return this.task?.getTextIdentifier() || ''
-		},
-	},
-	props: {
-		modelValue: {
-			required: true,
-		},
-		canWrite: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	emits: ['update:modelValue'],
-
-	methods: {
-		async save(title) {
-			// We only want to save if the title was actually changed.
-			// Because the contenteditable does not have a change event
-			// we're building it ourselves and only continue
-			// if the task title changed.
-			if (title === this.task.title) {
-				return
-			}
-
-			this.saving = true
-
-			const newTask = {
-				...this.task,
-				title,
-			}
-
-			try {
-				const task = await this.$store.dispatch('tasks/update', newTask)
-				this.$emit('update:modelValue', task)
-				this.showSavedMessage = true
-				setTimeout(() => {
-					this.showSavedMessage = false
-				}, 2000)
-			}
-			finally {
-				this.saving = false
-			}
-		},
+	canWrite: {
+		type: Boolean,
+		default: false,
 	},
 })
+
+const emit = defineEmits(['update:task'])
+
+const router = useRouter()
+const copy = useCopyToClipboard()
+async function copyUrl() {
+	const route = router.resolve({ name: 'task.detail', query: { taskId: props.task.id}})
+	const absoluteURL = new URL(route.href, window.location.href).href
+	
+	await copy(absoluteURL)
+}
+
+const store = useStore()
+const loading = computed(() => store.state.loading)
+
+const textIdentifier = computed(() => props.task?.getTextIdentifier() || '')
+
+// Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.
+const saving = ref(false)
+
+const showSavedMessage = ref(false)
+
+async function save(title: string) {
+	// We only want to save if the title was actually changed.
+	// Because the contenteditable does not have a change event
+	// we're building it ourselves and only continue
+	// if the task title changed.
+	if (title === props.task.title) {
+		return
+	}
+
+	try {
+		saving.value = true
+		const newTask = await store.dispatch('tasks/update', {
+			...props.task,
+			title,
+		})
+		emit('update:task', newTask)
+		showSavedMessage.value = true
+		setTimeout(() => {
+			showSavedMessage.value = false
+		}, 2000)
+	}
+	finally {
+		saving.value = false
+	}
+}
 </script>
 
 <style lang="scss" scoped>

src/composables/useCopyToClipboard.ts

@@ -0,0 +1,14 @@
+import {error} from '@/message'
+import {useI18n} from 'vue-i18n'
+
+export function useCopyToClipboard() {
+	const {t} = useI18n()
+
+	return async (text: string) => {
+		try {
+			await navigator.clipboard.writeText(text)
+		} catch {
+			error(t('misc.copyError'))
+		}
+	}
+}

src/i18n/lang/en.json

@@ -476,6 +476,7 @@
     "refresh": "Refresh",
     "disable": "Disable",
     "copy": "Copy to clipboard",
+    "copyError": "Copy to clipboard failed",
     "search": "Search",
     "searchPlaceholder": "Type to search…",
     "previous": "Previous",

src/views/tasks/TaskDetailView.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="{ 'is-loading': taskService.loading, 'visible': visible}" class="loader-container task-view-container">
 		<div class="task-view">
-			<heading v-model="task" :can-write="canWrite" ref="heading"/>
+			<heading v-model:task="task" :can-write="canWrite" ref="heading"/>
 			<h6 class="subtitle" v-if="parent && parent.namespace && parent.list">
 				{{ getNamespaceTitle(parent.namespace) }} >
 				<router-link :to="{ name: 'list.index', params: { listId: parent.list.id } }">

src/views/user/settings/Caldav.vue

@@ -66,19 +66,21 @@
 </template>
 
 <script lang="ts" setup>
-import copy from 'copy-to-clipboard'
 import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useStore} from 'vuex'
 
 import {CALDAV_DOCS} from '@/urls'
 import {useTitle} from '@/composables/useTitle'
+import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
 import BaseButton from '@/components/base/BaseButton.vue'
 import Message from '@/components/misc/message.vue'
 import CaldavTokenService from '@/services/caldavToken'
 import CaldavTokenModel from '@/models/caldavToken'
 
+const copy = useCopyToClipboard()
+
 const {t} = useI18n()
 useTitle(() => `${t('user.settings.caldav.title')} - ${t('user.settings.title')}`)
 

yarn.lock

@@ -5140,13 +5140,6 @@ copy-template-dir@^1.4.0:
     readdirp "^2.0.0"
     run-parallel "^1.1.4"
 
-copy-to-clipboard@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
-  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 core-js-compat@^3.14.0, core-js-compat@^3.15.0:
   version "3.15.2"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.15.2.tgz#47272fbb479880de14b4e6081f71f3492f5bd3cb"
@@ -12751,11 +12744,6 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-toggle-selection@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
-
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"