ami/tl-vikunja
1
0
Fork 0
Code Activity

Move buttons to separate component (#380)

Browse Source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/380
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
2021-01-17 17:57:57 +00:00
parent f3e0b79b26
commit 2aceca54ca
61 changed files with 2315 additions and 1825 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/components/tasks/partials/attachments.vue
View File

@ -2,7 +2,7 @@
<div class="attachments">
<h3>
<span class="icon is-grey">
<icon icon="paperclip"/>
<icon icon="paperclip" />
</span>
Attachments
</h3>
@ -14,12 +14,14 @@
multiple
ref="files"
type="file"
v-if="editEnabled"/>
v-if="editEnabled"
/>
<progress
:value="attachmentService.uploadProgress"
class="progress is-primary"
max="100"
v-if="attachmentService.uploadProgress > 0">
v-if="attachmentService.uploadProgress > 0"
>
{{ attachmentService.uploadProgress }}%
</progress>
@ -28,13 +30,22 @@
class="attachment"
v-for="a in attachments"
:key="a.id"
@click="viewOrDownload(a)">
@click="viewOrDownload(a)"
>
<div class="filename">{{ a.file.name }}</div>
<div class="info">
<p class="collapses">
<span>
created <span v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</span> by
<user :avatar-size="24" :user="a.createdBy" :is-inline="true"/>
created
<span v-tooltip="formatDate(a.created)">{{
formatDateSince(a.created)
}}</span>
by
<user
:avatar-size="24"
:user="a.createdBy"
:is-inline="true"
/>
</span>
<span>
{{ a.file.getHumanSize() }}
@ -46,13 +57,20 @@
<p>
<a
@click="downloadAttachment(a)"
v-tooltip="'Download this attachment'">
v-tooltip="'Download this attachment'"
>
Download
</a>
<a
@click="() => {attachmentToDelete = a; showDeleteModal = true}"
@click="
() => {
attachmentToDelete = a
showDeleteModal = true
}
"
v-if="editEnabled"
v-tooltip="'Delete this attachment'">
v-tooltip="'Delete this attachment'"
>
Delete
</a>
</p>
@ -60,24 +78,29 @@
</a>
</div>
<a
<x-button
v-if="editEnabled"
:disabled="attachmentService.loading"
@click="$refs.files.click()"
class="button mb-4 has-no-shadow"
v-if="editEnabled">
<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
class="mb-4"
icon="cloud-upload-alt"
type="secondary"
:shadow="false"
>
Upload attachment
</a>
</x-button>
<!-- Dropzone -->
<div :class="{ 'hidden': !showDropzone }" class="dropzone" v-if="editEnabled">
<div
:class="{ hidden: !showDropzone }"
class="dropzone"
v-if="editEnabled"
>
<div class="drop-hint">
<div class="icon">
<icon icon="cloud-upload-alt"/>
</div>
<div class="hint">
Drop files here to upload
<icon icon="cloud-upload-alt" />
</div>
<div class="hint">Drop files here to upload</div>
</div>
</div>
@ -85,18 +108,27 @@
<modal
@close="showDeleteModal = false"
v-if="showDeleteModal"
@submit="deleteAttachment()">
@submit="deleteAttachment()"
>
<span slot="header">Delete attachment</span>
<p slot="text">Are you sure you want to delete the attachment {{ attachmentToDelete.file.name }}?<br/>
<b>This CANNOT BE UNDONE!</b></p>
<p slot="text">
Are you sure you want to delete the attachment
{{ attachmentToDelete.file.name }}?<br />
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
<transition name="modal">
<modal
@close="() => {showImageModal = false; attachmentImageBlobUrl = null}"
@close="
() => {
showImageModal = false
attachmentImageBlobUrl = null
}
"
v-if="showImageModal"
>
<img :src="attachmentImageBlobUrl" alt=""/>
<img :src="attachmentImageBlobUrl" alt="" />
</modal>
</transition>
</div>
@ -106,7 +138,7 @@
import AttachmentService from '../../../services/attachment'
import AttachmentModel from '../../../models/attachment'
import User from '../../misc/user'
import {mapState} from 'vuex'
import { mapState } from 'vuex'
export default {
name: 'attachments',
@ -141,28 +173,28 @@ export default {
this.attachmentService = new AttachmentService()
},
computed: mapState({
attachments: state => state.attachments.attachments,
attachments: (state) => state.attachments.attachments,
}),
mounted() {
document.addEventListener('dragenter', e => {
document.addEventListener('dragenter', (e) => {
e.stopPropagation()
e.preventDefault()
this.showDropzone = true
})
window.addEventListener('dragleave', e => {
window.addEventListener('dragleave', (e) => {
e.stopPropagation()
e.preventDefault()
this.showDropzone = false
})
document.addEventListener('dragover', e => {
document.addEventListener('dragover', (e) => {
e.stopPropagation()
e.preventDefault()
this.showDropzone = true
})
document.addEventListener('drop', e => {
document.addEventListener('drop', (e) => {
e.stopPropagation()
e.preventDefault()
@ -183,32 +215,40 @@ export default {
this.uploadFiles(this.$refs.files.files)
},
uploadFiles(files) {
const attachmentModel = new AttachmentModel({taskId: this.taskId})
this.attachmentService.create(attachmentModel, files)
.then(r => {
const attachmentModel = new AttachmentModel({ taskId: this.taskId })
this.attachmentService
.create(attachmentModel, files)
.then((r) => {
if (r.success !== null) {
r.success.forEach(a => {
r.success.forEach((a) => {
this.$store.commit('attachments/add', a)
this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
this.$store.dispatch('tasks/addTaskAttachment', {
taskId: this.taskId,
attachment: a,
})
})
}
if (r.errors !== null) {
r.errors.forEach(m => {
r.errors.forEach((m) => {
this.error(m)
})
}
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
deleteAttachment() {
this.attachmentService.delete(this.attachmentToDelete)
.then(r => {
this.$store.commit('attachments/removeById', this.attachmentToDelete.id)
this.attachmentService
.delete(this.attachmentToDelete)
.then((r) => {
this.$store.commit(
'attachments/removeById',
this.attachmentToDelete.id
)
this.success(r, this)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {
@ -216,15 +256,16 @@ export default {
})
},
viewOrDownload(attachment) {
if (attachment.file.name.endsWith('.jpg') ||
if (
attachment.file.name.endsWith('.jpg') ||
attachment.file.name.endsWith('.png') ||
attachment.file.name.endsWith('.bmp') ||
attachment.file.name.endsWith('.gif')) {
attachment.file.name.endsWith('.gif')
) {
this.showImageModal = true
this.attachmentService.getBlobUrl(attachment)
.then(url => {
this.attachmentImageBlobUrl = url
})
this.attachmentService.getBlobUrl(attachment).then((url) => {
this.attachmentImageBlobUrl = url
})
} else {
this.downloadAttachment(attachment)
}

170
src/components/tasks/partials/comments.vue
View File

@ -2,33 +2,70 @@
<div class="content details">
<h3 v-if="canWrite || comments.length > 0">
<span class="icon is-grey">
<icon :icon="['far', 'comments']"/>
<icon :icon="['far', 'comments']" />
</span>
Comments
</h3>
<div class="comments">
<span class="is-inline-flex is-align-items-center" v-if="taskCommentService.loading && saving === null && !creating">
<span
class="is-inline-flex is-align-items-center"
v-if="
taskCommentService.loading && saving === null && !creating
"
>
<span class="loader is-inline-block mr-2"></span>
Loading comments...
</span>
<div :key="c.id" class="media comment" v-for="c in comments">
<figure class="media-left is-hidden-mobile">
<img :src="c.author.getAvatarUrl(48)" alt="" class="image is-avatar" height="48" width="48"/>
<img
:src="c.author.getAvatarUrl(48)"
alt=""
class="image is-avatar"
height="48"
width="48"
/>
</figure>
<div class="media-content">
<div class="comment-info">
<img :src="c.author.getAvatarUrl(20)" alt="" class="image is-avatar" height="20" width="20"/>
<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
<span v-tooltip="formatDate(c.created)">{{ formatDateSince(c.created) }}</span>
<span v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)">
<img
:src="c.author.getAvatarUrl(20)"
alt=""
class="image is-avatar"
height="20"
width="20"
/>
<strong>{{ c.author.getDisplayName() }}</strong
>&nbsp;
<span v-tooltip="formatDate(c.created)">{{
formatDateSince(c.created)
}}</span>
<span
v-if="+new Date(c.created) !== +new Date(c.updated)"
v-tooltip="formatDate(c.updated)"
>
· edited {{ formatDateSince(c.updated) }}
</span>
<transition name="fade">
<span class="is-inline-flex" v-if="taskCommentService.loading && saving === c.id">
<span class="loader is-inline-block mr-2"></span>
<span
class="is-inline-flex"
v-if="
taskCommentService.loading &&
saving === c.id
"
>
<span
class="loader is-inline-block mr-2"
></span>
Saving...
</span>
<span class="has-text-success" v-if="!taskCommentService.loading && saved === c.id">
<span
class="has-text-success"
v-if="
!taskCommentService.loading &&
saved === c.id
"
>
Saved!
</span>
</transition>
@ -38,7 +75,12 @@
:is-edit-enabled="canWrite"
:upload-callback="attachmentUpload"
:upload-enabled="true"
@change="() => {toggleEdit(c);editComment()}"
@change="
() => {
toggleEdit(c)
editComment()
}
"
v-model="c.comment"
:has-edit-bottom="true"
:bottom-actions="actions[c.id]"
@ -47,19 +89,34 @@
</div>
<div class="media comment" v-if="canWrite">
<figure class="media-left is-hidden-mobile">
<img :src="userAvatar" alt="" class="image is-avatar" height="48" width="48"/>
<img
:src="userAvatar"
alt=""
class="image is-avatar"
height="48"
width="48"
/>
</figure>
<div class="media-content">
<div class="form">
<transition name="fade">
<span class="is-inline-flex" v-if="taskCommentService.loading && creating">
<span class="loader is-inline-block mr-2"></span>
<span
class="is-inline-flex"
v-if="taskCommentService.loading && creating"
>
<span
class="loader is-inline-block mr-2"
></span>
Creating comment...
</span>
</transition>
<div class="field">
<editor
:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
:class="{
'is-loading':
taskCommentService.loading &&
!isCommentEdit,
}"
:has-preview="false"
:upload-callback="attachmentUpload"
:upload-enabled="true"
@ -69,10 +126,15 @@
/>
</div>
<div class="field">
<button :class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
:disabled="newComment.comment === ''"
@click="addComment()" class="button is-primary">Comment
</button>
<x-button
:loading="
taskCommentService.loading && !isCommentEdit
"
:disabled="newComment.comment === ''"
@click="addComment()"
>
Comment
</x-button>
</div>
</div>
</div>
@ -81,10 +143,13 @@
<modal
@close="showDeleteModal = false"
@submit="deleteComment()"
v-if="showDeleteModal">
v-if="showDeleteModal"
>
<span slot="header">Delete this comment</span>
<p slot="text">Are you sure you want to delete this comment?
<br/>This <b>CANNOT BE UNDONE!</b></p>
<p slot="text">
Are you sure you want to delete this comment? <br />This
<b>CANNOT BE UNDONE!</b>
</p>
</modal>
</div>
</template>
@ -100,15 +165,15 @@ export default {
name: 'comments',
components: {
editor: () => ({
component: import(/* webpackChunkName: "editor" */ '../../input/editor'),
component: import(
/* webpackChunkName: "editor" */ '../../input/editor'
),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
mixins: [
attachmentUpload,
],
mixins: [attachmentUpload],
props: {
taskId: {
type: Number,
@ -140,9 +205,9 @@ export default {
},
created() {
this.taskCommentService = new TaskCommentService()
this.newComment = new TaskCommentModel({taskId: this.taskId})
this.commentEdit = new TaskCommentModel({taskId: this.taskId})
this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
this.newComment = new TaskCommentModel({ taskId: this.taskId })
this.commentEdit = new TaskCommentModel({ taskId: this.taskId })
this.commentToDelete = new TaskCommentModel({ taskId: this.taskId })
this.comments = []
},
mounted() {
@ -163,12 +228,13 @@ export default {
},
methods: {
loadComments() {
this.taskCommentService.getAll({taskId: this.taskId})
.then(r => {
this.taskCommentService
.getAll({ taskId: this.taskId })
.then((r) => {
this.$set(this, 'comments', r)
this.makeActions()
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
@ -183,16 +249,20 @@ export default {
// not update if new content from the outside was made available.
// See https://github.com/NikulinIlya/vue-easymde/issues/3
this.editorActive = false
this.$nextTick(() => this.editorActive = true)
this.$nextTick(() => (this.editorActive = true))
this.creating = true
this.taskCommentService.create(this.newComment)
.then(r => {
this.taskCommentService
.create(this.newComment)
.then((r) => {
this.comments.push(r)
this.newComment.comment = ''
this.success({message: 'The comment was added successfully.'}, this)
this.success(
{ message: 'The comment was added successfully.' },
this
)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {
@ -215,8 +285,9 @@ export default {
this.saving = this.commentEdit.id
this.commentEdit.taskId = this.taskId
this.taskCommentService.update(this.commentEdit)
.then(r => {
this.taskCommentService
.update(this.commentEdit)
.then((r) => {
for (const c in this.comments) {
if (this.comments[c].id === this.commentEdit.id) {
this.$set(this.comments, c, r)
@ -227,7 +298,7 @@ export default {
this.saved = null
}, 2000)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {
@ -236,7 +307,8 @@ export default {
})
},
deleteComment() {
this.taskCommentService.delete(this.commentToDelete)
this.taskCommentService
.delete(this.commentToDelete)
.then(() => {
for (const a in this.comments) {
if (this.comments[a].id === this.commentToDelete.id) {
@ -244,7 +316,7 @@ export default {
}
}
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {
@ -253,14 +325,16 @@ export default {
},
makeActions() {
if (this.canWrite) {
this.comments.forEach(c => {
this.$set(this.actions, c.id, [{
action: () => this.toggleDelete(c.id),
title: 'Remove',
}])
this.comments.forEach((c) => {
this.$set(this.actions, c.id, [
{
action: () => this.toggleDelete(c.id),
title: 'Remove',
},
])
})
}
}
},
},
}
</script>

38
src/components/tasks/partials/defer-task.vue
View File

@ -1,13 +1,34 @@
<template>
<div :class="{'is-loading': taskService.loading}" class="defer-task loading-container">
<div
:class="{ 'is-loading': taskService.loading }"
class="defer-task loading-container"
>
<label class="label">Defer due date</label>
<div class="defer-days">
<button @click="() => deferDays(1)" class="button has-no-shadow">1 day</button>
<button @click="() => deferDays(3)" class="button has-no-shadow">3 days</button>
<button @click="() => deferDays(7)" class="button has-no-shadow">1 week</button>
<x-button
@click.prevent.stop="() => deferDays(1)"
:shadow="false"
type="secondary"
>
1 day
</x-button>
<x-button
@click.prevent.stop="() => deferDays(3)"
:shadow="false"
type="secondary"
>
3 days
</x-button>
<x-button
@click.prevent.stop="() => deferDays(7)"
:shadow="false"
type="secondary"
>
1 week
</x-button>
</div>
<flat-pickr
:class="{ 'disabled': taskService.loading}"
:class="{ disabled: taskService.loading }"
:config="flatPickerConfig"
:disabled="taskService.loading"
class="input"
@ -97,13 +118,14 @@ export default {
}
this.task.dueDate = new Date(this.dueDate)
this.taskService.update(this.task)
.then(r => {
this.taskService
.update(this.task)
.then((r) => {
this.lastValue = r.dueDate
this.task = r
this.$emit('input', r)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},

20
src/components/tasks/partials/relatedTasks.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="task-relations">
<button
class="button is-pulled-right add-task-relation-button"
:class="{'is-active': showNewRelationForm}"
@click="showNewRelationForm = !showNewRelationForm"
v-tooltip="'Add a New Task Relation'"
<x-button
v-if="Object.keys(relatedTasks).length > 0"
>
<icon icon="plus"/>
</button>
@click="showNewRelationForm = !showNewRelationForm"
class="is-pulled-right add-task-relation-button"
:class="{'is-active': showNewRelationForm}"
v-tooltip="'Add a New Task Relation'"
type="secondary"
icon="plus"
/>
<transition-group name="fade">
<template v-if="editEnabled && showCreate">
<label class="label" key="label">
@ -48,7 +48,7 @@
</div>
</div>
<div class="control">
<a @click="addTaskRelation()" class="button is-primary">Add Task Relation</a>
<x-button @click="addTaskRelation()">Add Task Relation</x-button>
</div>
</div>
</template>
@ -248,7 +248,7 @@ export default {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
@import '@/styles/theme/variables';
.add-task-relation-button {

6
src/components/tasks/partials/repeatAfter.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="control repeat-after-input">
<div class="buttons has-addons is-centered mt-2">
<button class="button is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</button>
<button class="button is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</button>
<button class="button is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</button>
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</x-button>
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</x-button>
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</x-button>
</div>
<div class="columns is-align-items-center">
<div class="is-flex column">