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>
This commit is contained in:
Dominik Pschenitschni
committed by
konrad
konrad
parent
2083a52a56
commit
17a42dc2e7
@ -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'
|
||||
},
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user