Some comments code cleanup
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
66
package-lock.json
generated
66
package-lock.json
generated
@@ -3305,18 +3305,18 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@nextcloud/auth": {
|
"@nextcloud/auth": {
|
||||||
"version": "0.3.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-0.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-1.2.1.tgz",
|
||||||
"integrity": "sha512-kx5VfB2SWG+BNudoggnjQrmxr559rCDANVLnaDDKmCujToxv0l3kNMTBUUcYhSvv8dyYaD/ZTaXBUON9ZLm9lw==",
|
"integrity": "sha512-54g9YPQBFJ+upYMfk5aZhTispuORY/D2R6WdSesJO/hirob7jSpQoUcWuURQj2tssuxADDSgD1rUAiBnbCe1OQ==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@nextcloud/event-bus": "^0.2.0",
|
"@nextcloud/event-bus": "^1.1.2",
|
||||||
"core-js": "3.2.1"
|
"core-js": "3.6.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": {
|
"core-js": {
|
||||||
"version": "3.2.1",
|
"version": "3.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.1.tgz",
|
||||||
"integrity": "sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw=="
|
"integrity": "sha512-186WjSik2iTGfDjfdCZAxv2ormxtKgemjC3SI6PL31qOA0j5LhTDVjHChccoc7brwLvpvLPiMyRlcO88C4l1QQ=="
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -3334,6 +3334,30 @@
|
|||||||
"core-js": "^3.2.1"
|
"core-js": "^3.2.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@nextcloud/auth": {
|
||||||
|
"version": "0.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-0.3.1.tgz",
|
||||||
|
"integrity": "sha512-kx5VfB2SWG+BNudoggnjQrmxr559rCDANVLnaDDKmCujToxv0l3kNMTBUUcYhSvv8dyYaD/ZTaXBUON9ZLm9lw==",
|
||||||
|
"requires": {
|
||||||
|
"@nextcloud/event-bus": "^0.2.0",
|
||||||
|
"core-js": "3.2.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": {
|
||||||
|
"version": "3.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.2.1.tgz",
|
||||||
|
"integrity": "sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@nextcloud/event-bus": {
|
||||||
|
"version": "0.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-0.2.1.tgz",
|
||||||
|
"integrity": "sha512-yerEPTA5lnJ1JV8qYK6sHMWW8m6fxuMEtptVgv7WnGCy2l5rvxDh9vqwk72qX/Z9i2OrC7Jy382TMYbke8b2Qw==",
|
||||||
|
"requires": {
|
||||||
|
"core-js": "^3.1.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"core-js": {
|
"core-js": {
|
||||||
"version": "3.5.0",
|
"version": "3.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.5.0.tgz",
|
||||||
@@ -3348,17 +3372,29 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@nextcloud/event-bus": {
|
"@nextcloud/event-bus": {
|
||||||
"version": "0.2.1",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-0.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-1.1.2.tgz",
|
||||||
"integrity": "sha512-yerEPTA5lnJ1JV8qYK6sHMWW8m6fxuMEtptVgv7WnGCy2l5rvxDh9vqwk72qX/Z9i2OrC7Jy382TMYbke8b2Qw==",
|
"integrity": "sha512-E+j71+2LkqEdRjKLrmCKS/fEeI/NxSfthvDH2YkxIK0uH4ZSC+nlzmrNOr0Jby3z0qOgA8PH7+vSLU3D8qdTzw==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"core-js": "^3.1.4"
|
"@types/semver": "^6.2.0",
|
||||||
|
"core-js": "^3.6.2",
|
||||||
|
"semver": "^6.3.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@types/semver": {
|
||||||
|
"version": "6.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-6.2.0.tgz",
|
||||||
|
"integrity": "sha512-1OzrNb4RuAzIT7wHSsgZRlMBlNsJl+do6UblR7JMW4oB7bbR+uBEYtUh7gEc/jM84GGilh68lSOokyM/zNUlBA=="
|
||||||
|
},
|
||||||
"core-js": {
|
"core-js": {
|
||||||
"version": "3.3.2",
|
"version": "3.6.4",
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
|
||||||
"integrity": "sha512-S1FfZpeBchkhyoY76YAdFzKS4zz9aOK7EeFaNA2aJlyXyA+sgqz6xdxmLPGXEAf0nF44MVN1kSjrA9Kt3ATDQg=="
|
"integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
|
||||||
|
},
|
||||||
|
"semver": {
|
||||||
|
"version": "6.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
||||||
|
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -28,18 +28,19 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/polyfill": "^7.8.3",
|
"@babel/polyfill": "^7.8.3",
|
||||||
"@babel/runtime": "^7.8.3",
|
"@babel/runtime": "^7.8.3",
|
||||||
|
"@nextcloud/auth": "^1.2.1",
|
||||||
"@nextcloud/l10n": "^1.0.1",
|
"@nextcloud/l10n": "^1.0.1",
|
||||||
"@nextcloud/router": "^1.0.0",
|
"@nextcloud/router": "^1.0.0",
|
||||||
"@nextcloud/vue": "^1.2.7",
|
"@nextcloud/vue": "^1.2.7",
|
||||||
|
"fuse.js": "^3.4.5",
|
||||||
"nextcloud-axios": "^0.2.1",
|
"nextcloud-axios": "^0.2.1",
|
||||||
"nextcloud-server": "^0.15.10",
|
"nextcloud-server": "^0.15.10",
|
||||||
"nextcloud-vue-collections": "^0.7.1",
|
"nextcloud-vue-collections": "^0.7.1",
|
||||||
"url-search-params-polyfill": "^7.0.1",
|
|
||||||
"vue": "^2.6.11",
|
|
||||||
"fuse.js": "^3.4.5",
|
|
||||||
"tippy.js": "^4.3.5",
|
"tippy.js": "^4.3.5",
|
||||||
"tiptap": "^1.26.3",
|
"tiptap": "^1.26.3",
|
||||||
"tiptap-extensions": "^1.28.3",
|
"tiptap-extensions": "^1.28.3",
|
||||||
|
"url-search-params-polyfill": "^7.0.1",
|
||||||
|
"vue": "^2.6.11",
|
||||||
"vue-click-outside": "^1.0.7",
|
"vue-click-outside": "^1.0.7",
|
||||||
"vue-color": "^2.7.0",
|
"vue-color": "^2.7.0",
|
||||||
"vue-easymde": "^1.0.1",
|
"vue-easymde": "^1.0.1",
|
||||||
|
|||||||
@@ -59,6 +59,8 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.activity {
|
.activity {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
.activity--icon {
|
.activity--icon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<app-sidebar v-if="currentCard !== null && currentBoard && copiedCard !== null"
|
<AppSidebar v-if="currentCard !== null && currentBoard && copiedCard !== null"
|
||||||
:actions="toolbarActions"
|
:actions="toolbarActions"
|
||||||
:title="currentCard.title"
|
:title="currentCard.title"
|
||||||
:subtitle="subtitle"
|
:subtitle="subtitle"
|
||||||
@@ -159,7 +159,7 @@ export default {
|
|||||||
ActionButton,
|
ActionButton,
|
||||||
Avatar,
|
Avatar,
|
||||||
CollectionList,
|
CollectionList,
|
||||||
CommentsTabSidebar
|
CommentsTabSidebar,
|
||||||
},
|
},
|
||||||
mixins: [
|
mixins: [
|
||||||
Color,
|
Color,
|
||||||
|
|||||||
@@ -1,45 +1,60 @@
|
|||||||
<template>
|
<template>
|
||||||
<li>
|
<li class="comment">
|
||||||
<form v-if="edit" @submit.prevent="updateComment">
|
<template v-if="!edit">
|
||||||
<input v-model="commentMsg" type="text" autofocus
|
<div class="comment--header">
|
||||||
|
<Avatar :user="comment.actorId" />
|
||||||
|
<span class="has-tooltip username">
|
||||||
|
{{ comment.actorDisplayName }}
|
||||||
|
</span>
|
||||||
|
<Actions @click.stop.prevent>
|
||||||
|
<ActionButton icon="icon-rename" @click="showUpdateForm()">
|
||||||
|
{{ t('deck', 'Update') }}
|
||||||
|
</ActionButton>
|
||||||
|
<ActionButton icon="icon-delete" @click="deleteComment(comment.id)">
|
||||||
|
{{ t('deck', 'Delete') }}
|
||||||
|
</ActionButton>
|
||||||
|
</Actions>
|
||||||
|
</div>
|
||||||
|
<!-- FIXME: Check if input is sanitized -->
|
||||||
|
<p class="comment--content" v-html="comment.message" /><p />
|
||||||
|
</template>
|
||||||
|
<form v-else @submit.prevent="updateComment">
|
||||||
|
<input v-model="commentMsg"
|
||||||
|
type="text"
|
||||||
|
autofocus
|
||||||
required>
|
required>
|
||||||
<input v-tooltip="t('deck', 'Save')" class="icon-confirm" type="submit"
|
<input v-tooltip="t('deck', 'Save')"
|
||||||
|
class="icon-confirm"
|
||||||
|
type="submit"
|
||||||
value="">
|
value="">
|
||||||
<input type="submit" value="" class="icon-close"
|
<input type="submit"
|
||||||
|
value=""
|
||||||
|
class="icon-close"
|
||||||
@click.stop.prevent="hideUpdateForm">
|
@click.stop.prevent="hideUpdateForm">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
{{ comment.uId }}: {{ comment.message }}
|
|
||||||
<Actions @click.stop.prevent>
|
|
||||||
<ActionButton icon="icon-rename" @click="showUpdateForm()">{{ t('deck', 'Update') }}</ActionButton>
|
|
||||||
<ActionButton icon="icon-delete" @click="deleteComment(comment.id)">{{ t('deck', 'Delete') }}</ActionButton>
|
|
||||||
</Actions>
|
|
||||||
</template>
|
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Avatar } from 'nextcloud-vue'
|
import { Avatar, Actions, ActionButton } from '@nextcloud/vue'
|
||||||
import { Actions } from 'nextcloud-vue/dist/Components/Actions'
|
|
||||||
import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CommentItem',
|
name: 'CommentItem',
|
||||||
components: {
|
components: {
|
||||||
Avatar,
|
Avatar,
|
||||||
Actions,
|
Actions,
|
||||||
ActionButton
|
ActionButton,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
comment: {
|
comment: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: undefined
|
default: undefined,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
edit: false,
|
edit: false,
|
||||||
commentMsg: ''
|
commentMsg: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -54,28 +69,25 @@ export default {
|
|||||||
this.edit = false
|
this.edit = false
|
||||||
},
|
},
|
||||||
updateComment() {
|
updateComment() {
|
||||||
let data = {
|
const data = {
|
||||||
comment: this.commentMsg,
|
comment: this.commentMsg,
|
||||||
cardId: this.comment.cardId,
|
cardId: this.comment.cardId,
|
||||||
commentId: this.comment.id
|
commentId: this.comment.id,
|
||||||
}
|
}
|
||||||
this.$store.dispatch('updateComment', data)
|
this.$store.dispatch('updateComment', data)
|
||||||
this.hideUpdateForm()
|
this.hideUpdateForm()
|
||||||
},
|
},
|
||||||
deleteComment(commentId) {
|
deleteComment(commentId) {
|
||||||
let data = {
|
const data = {
|
||||||
commentId: commentId,
|
commentId: commentId,
|
||||||
cardId: this.comment.cardId
|
cardId: this.comment.cardId,
|
||||||
}
|
}
|
||||||
this.$store.dispatch('deleteComment', data)
|
this.$store.dispatch('deleteComment', data)
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style scoped lang="scss">
|
||||||
form {
|
@import "../../css/comments";
|
||||||
display: flex
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,28 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div id="userDiv">
|
<div class="comment--header">
|
||||||
<avatar :user="card.owner.uid" />
|
<Avatar :user="card.owner.uid" />
|
||||||
<span class="has-tooltip username">
|
<span class="has-tooltip username">
|
||||||
{{ card.owner.displayname }}
|
{{ card.owner.displayname }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div id="commentForm">
|
<div class="comment-form">
|
||||||
<form @submit.prevent="createComment()">
|
<form @submit.prevent="createComment()">
|
||||||
<input :placeholder="t('deck', 'New comment') + ' ...'" v-model="newComment" type="text"
|
<EditorContent :editor="editor"
|
||||||
autofocus required>
|
:placeholder="t('deck', 'New comment') + ' ...'"
|
||||||
<input v-tooltip="t('deck', 'Save')" class="icon-confirm" type="submit"
|
|
||||||
value="">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<div id="commentForm" class="editor">
|
|
||||||
<form @submit.prevent="createComment()">
|
|
||||||
<editor-content :editor="editor" :placeholder="t('deck', 'New comment') + ' ...'"
|
|
||||||
class="editor__content"
|
class="editor__content"
|
||||||
required />
|
required />
|
||||||
<input v-tooltip="t('deck', 'Save')" class="icon-confirm" type="submit"
|
<input v-tooltip="t('deck', 'Save')"
|
||||||
|
class="icon-confirm"
|
||||||
|
type="submit"
|
||||||
value="">
|
value="">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -34,8 +27,7 @@
|
|||||||
:key="user.uid"
|
:key="user.uid"
|
||||||
:class="{ 'is-selected': navigatedUserIndex === index }"
|
:class="{ 'is-selected': navigatedUserIndex === index }"
|
||||||
class="suggestion-list__item"
|
class="suggestion-list__item"
|
||||||
@click="selectUser(user)"
|
@click="selectUser(user)">
|
||||||
>
|
|
||||||
{{ user.displayname }}
|
{{ user.displayname }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -44,16 +36,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p v-for="comment in comments[card.id]">{{ comment.id }}</p>
|
<ul id="commentsFeed" v-if="comments[card.id] && comments[card.id].length > 0">
|
||||||
|
<CommentItem v-for="comment in comments[card.id]"
|
||||||
<div v-if="isLoading" class="icon icon-loading" />
|
:key="comment.id"
|
||||||
|
:comment="comment"
|
||||||
<ul id="commentsFeed">
|
|
||||||
<CommentItem v-for="comment in comments[card.id]" :comment="comment" :key="comment.id"
|
|
||||||
@doReload="loadComments" />
|
@doReload="loadComments" />
|
||||||
|
<a @click="loadMore">
|
||||||
|
Load More
|
||||||
|
</a>
|
||||||
</ul>
|
</ul>
|
||||||
<button @click="loadMore">Load More</button>
|
<div v-else-if="isLoading" class="icon icon-loading" />
|
||||||
|
<div class="emptycontent" v-else>
|
||||||
|
<div class="icon-comment"></div>
|
||||||
|
<p>Keine Kommentare bisher. Beginne die Diskussion!</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -64,25 +60,21 @@ import { Editor, EditorContent } from 'tiptap'
|
|||||||
import { Mention } from 'tiptap-extensions'
|
import { Mention } from 'tiptap-extensions'
|
||||||
|
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import { Avatar } from 'nextcloud-vue'
|
import { Avatar } from '@nextcloud/vue'
|
||||||
import { Actions } from 'nextcloud-vue/dist/Components/Actions'
|
|
||||||
import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
|
|
||||||
import CommentItem from './CommentItem'
|
import CommentItem from './CommentItem'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CommentsTabSidebar',
|
name: 'CommentsTabSidebar',
|
||||||
components: {
|
components: {
|
||||||
Avatar,
|
Avatar,
|
||||||
Actions,
|
|
||||||
ActionButton,
|
|
||||||
CommentItem,
|
CommentItem,
|
||||||
EditorContent
|
EditorContent,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
card: {
|
card: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: undefined
|
default: undefined,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -100,7 +92,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// is called when a suggestion starts
|
// is called when a suggestion starts
|
||||||
onEnter: ({
|
onEnter: ({
|
||||||
items, query, range, command, virtualNode
|
items, query, range, command, virtualNode,
|
||||||
}) => {
|
}) => {
|
||||||
this.query = query
|
this.query = query
|
||||||
this.filteredUsers = items
|
this.filteredUsers = items
|
||||||
@@ -113,7 +105,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// is called when a suggestion has changed
|
// is called when a suggestion has changed
|
||||||
onChange: ({
|
onChange: ({
|
||||||
items, query, range, virtualNode
|
items, query, range, virtualNode,
|
||||||
}) => {
|
}) => {
|
||||||
this.query = query
|
this.query = query
|
||||||
this.filteredUsers = items
|
this.filteredUsers = items
|
||||||
@@ -159,30 +151,30 @@ export default {
|
|||||||
}
|
}
|
||||||
const fuse = new Fuse(items, {
|
const fuse = new Fuse(items, {
|
||||||
threshold: 0.2,
|
threshold: 0.2,
|
||||||
keys: ['uid', 'displayname']
|
keys: ['uid', 'displayname'],
|
||||||
})
|
})
|
||||||
return fuse.search(query)
|
return fuse.search(query)
|
||||||
}
|
},
|
||||||
})
|
}),
|
||||||
],
|
],
|
||||||
content: '',
|
content: '',
|
||||||
onUpdate: ({ getHTML }) => {
|
onUpdate: ({ getHTML }) => {
|
||||||
this.newComment = getHTML().replace(/(<p>|<\/p>)/g, '')
|
this.newComment = getHTML().replace(/(<p>|<\/p>)/g, '')
|
||||||
}
|
},
|
||||||
}),
|
}),
|
||||||
query: null,
|
query: null,
|
||||||
suggestionRange: null,
|
suggestionRange: null,
|
||||||
filteredUsers: [],
|
filteredUsers: [],
|
||||||
navigatedUserIndex: 0,
|
navigatedUserIndex: 0,
|
||||||
insertMention: () => {},
|
insertMention: () => {},
|
||||||
observer: null
|
observer: null,
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
comments: state => state.comment.comments,
|
comments: state => state.comment.comments,
|
||||||
currentBoard: state => state.currentBoard
|
currentBoard: state => state.currentBoard,
|
||||||
}),
|
}),
|
||||||
|
|
||||||
hasResults() {
|
hasResults() {
|
||||||
@@ -190,7 +182,7 @@ export default {
|
|||||||
},
|
},
|
||||||
showSuggestions() {
|
showSuggestions() {
|
||||||
return this.query || this.hasResults
|
return this.query || this.hasResults
|
||||||
}
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@@ -198,8 +190,8 @@ export default {
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
handler() {
|
handler() {
|
||||||
this.loadComments()
|
this.loadComments()
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
},
|
},
|
||||||
@@ -214,13 +206,14 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
createComment() {
|
createComment() {
|
||||||
let commentObj = {
|
const commentObj = {
|
||||||
cardId: this.card.id,
|
cardId: this.card.id,
|
||||||
comment: this.newComment
|
comment: this.newComment,
|
||||||
}
|
}
|
||||||
this.$store.dispatch('createComment', commentObj)
|
this.$store.dispatch('createComment', commentObj)
|
||||||
this.loadComments()
|
this.loadComments()
|
||||||
this.newComment = ''
|
this.newComment = ''
|
||||||
|
this.editor.setContent('')
|
||||||
},
|
},
|
||||||
loadMore() {
|
loadMore() {
|
||||||
this.offset = this.offset + this.limit
|
this.offset = this.offset + this.limit
|
||||||
@@ -250,8 +243,8 @@ export default {
|
|||||||
range: this.suggestionRange,
|
range: this.suggestionRange,
|
||||||
attrs: {
|
attrs: {
|
||||||
id: user.uid,
|
id: user.uid,
|
||||||
label: user.displayname
|
label: user.displayname,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
this.editor.focus()
|
this.editor.focus()
|
||||||
},
|
},
|
||||||
@@ -268,7 +261,7 @@ export default {
|
|||||||
placement: 'bottom-start',
|
placement: 'bottom-start',
|
||||||
inertia: true,
|
inertia: true,
|
||||||
duration: [400, 200],
|
duration: [400, 200],
|
||||||
showOnInit: true
|
showOnInit: true,
|
||||||
})
|
})
|
||||||
// we have to update tippy whenever the DOM is updated
|
// we have to update tippy whenever the DOM is updated
|
||||||
if (MutationObserver) {
|
if (MutationObserver) {
|
||||||
@@ -278,7 +271,7 @@ export default {
|
|||||||
this.observer.observe(this.$refs.suggestions, {
|
this.observer.observe(this.$refs.suggestions, {
|
||||||
childList: true,
|
childList: true,
|
||||||
subtree: true,
|
subtree: true,
|
||||||
characterData: true
|
characterData: true,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -290,30 +283,11 @@ export default {
|
|||||||
if (this.observer) {
|
if (this.observer) {
|
||||||
this.observer.disconnect()
|
this.observer.disconnect()
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
#commentForm form {
|
@import "../../css/comments";
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor__content {
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
.ProseMirror {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#userDiv {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.username {
|
|
||||||
padding: 12px 9px;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ const xmlToJson = (xml) => {
|
|||||||
obj[nodeName] = xmlToJson(item)
|
obj[nodeName] = xmlToJson(item)
|
||||||
} else {
|
} else {
|
||||||
if (typeof obj[nodeName].push === 'undefined') {
|
if (typeof obj[nodeName].push === 'undefined') {
|
||||||
var old = obj[nodeName]
|
const old = obj[nodeName]
|
||||||
obj[nodeName] = []
|
obj[nodeName] = []
|
||||||
obj[nodeName].push(old)
|
obj[nodeName].push(old)
|
||||||
}
|
}
|
||||||
@@ -38,42 +38,41 @@ const parseXml = (xml) => {
|
|||||||
}
|
}
|
||||||
return dom
|
return dom
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const commentToObject = (tag) => {
|
||||||
|
return {
|
||||||
|
cardId: tag['d:prop']['oc:objectId']['#text'],
|
||||||
|
id: tag['d:prop']['oc:id']['#text'],
|
||||||
|
actorId: tag['d:prop']['oc:actorId']['#text'],
|
||||||
|
actorDisplayName: tag['d:prop']['oc:actorDisplayName']['#text'],
|
||||||
|
creationDateTime: tag['d:prop']['oc:creationDateTime']['#text'],
|
||||||
|
message: tag['d:prop']['oc:message']['#text'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// FIXME: make this generic and not depending on comments
|
||||||
const xmlToTagList = (xml) => {
|
const xmlToTagList = (xml) => {
|
||||||
|
|
||||||
let json = xmlToJson(parseXml(xml))
|
const json = xmlToJson(parseXml(xml))
|
||||||
let list = json['d:multistatus']['d:response']
|
const list = json['d:multistatus']['d:response']
|
||||||
|
|
||||||
// no element
|
// no element
|
||||||
if (list === undefined) {
|
if (list === undefined) {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let result = []
|
const result = []
|
||||||
|
|
||||||
// one element
|
// one element
|
||||||
if (Array.isArray(list) === false) {
|
if (Array.isArray(list) === false) {
|
||||||
let tag = list['d:propstat']
|
result.push(commentToObject(list['d:propstat']))
|
||||||
result.push({
|
|
||||||
cardId: tag['d:prop']['oc:objectId']['#text'],
|
|
||||||
id: tag['d:prop']['oc:id']['#text'],
|
|
||||||
uId: tag['d:prop']['oc:actorId']['#text'],
|
|
||||||
creationDateTime: tag['d:prop']['oc:creationDateTime']['#text'],
|
|
||||||
message: tag['d:prop']['oc:message']['#text']
|
|
||||||
})
|
|
||||||
|
|
||||||
// two or more elements
|
// two or more elements
|
||||||
} else {
|
} else {
|
||||||
for (let index in list) {
|
for (const index in list) {
|
||||||
let tag = list[index]['d:propstat']
|
if (list[index]['d:propstat']['d:status']['#text'] !== 'HTTP/1.1 200 OK') {
|
||||||
if (tag['d:status']['#text'] !== 'HTTP/1.1 200 OK') {
|
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
result.push({
|
result.push(commentToObject(list[index]['d:propstat']))
|
||||||
cardId: tag['d:prop']['oc:objectId']['#text'],
|
|
||||||
id: tag['d:prop']['oc:id']['#text'],
|
|
||||||
uId: tag['d:prop']['oc:actorId']['#text'],
|
|
||||||
creationDateTime: tag['d:prop']['oc:creationDateTime']['#text'],
|
|
||||||
message: tag['d:prop']['oc:message']['#text']
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result
|
return result
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ export class CommentApi {
|
|||||||
<oc:filter-comments xmlns:D="DAV:" xmlns:oc="http://owncloud.org/ns">
|
<oc:filter-comments xmlns:D="DAV:" xmlns:oc="http://owncloud.org/ns">
|
||||||
<oc:limit>${card.limit}</oc:limit>
|
<oc:limit>${card.limit}</oc:limit>
|
||||||
<oc:offset>${card.offset}</oc:offset>
|
<oc:offset>${card.offset}</oc:offset>
|
||||||
</oc:filter-comments>`
|
</oc:filter-comments>`,
|
||||||
}).then(
|
}).then(
|
||||||
(response) => {
|
(response) => {
|
||||||
return Promise.resolve(response.data)
|
return Promise.resolve(response.data)
|
||||||
@@ -56,19 +56,19 @@ export class CommentApi {
|
|||||||
return axios({
|
return axios({
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
url: this.url(`${commentObj.cardId}`),
|
url: this.url(`${commentObj.cardId}`),
|
||||||
data: { actorType: 'users', message: `${commentObj.comment}`, verb: 'comment' }
|
data: { actorType: 'users', message: `${commentObj.comment}`, verb: 'comment' },
|
||||||
}).then(
|
}).then(
|
||||||
(response) => {
|
(response) => {
|
||||||
let header = response.headers['content-location']
|
const header = response.headers['content-location']
|
||||||
let headerArray = header.split('/')
|
const headerArray = header.split('/')
|
||||||
let id = headerArray[headerArray.length - 1]
|
const id = headerArray[headerArray.length - 1]
|
||||||
|
|
||||||
let ret = {
|
const ret = {
|
||||||
cardId: (commentObj.cardId).toString(),
|
cardId: (commentObj.cardId).toString(),
|
||||||
id: id,
|
id: id,
|
||||||
uId: getCurrentUser().uid,
|
uId: getCurrentUser().uid,
|
||||||
creationDateTime: (new Date()).toString(),
|
creationDateTime: (new Date()).toString(),
|
||||||
message: commentObj.comment
|
message: commentObj.comment,
|
||||||
}
|
}
|
||||||
return Promise.resolve(ret)
|
return Promise.resolve(ret)
|
||||||
},
|
},
|
||||||
@@ -92,7 +92,7 @@ export class CommentApi {
|
|||||||
<oc:message>${data.comment}</oc:message>
|
<oc:message>${data.comment}</oc:message>
|
||||||
</d:prop>
|
</d:prop>
|
||||||
</d:set>
|
</d:set>
|
||||||
</d:propertyupdate>`
|
</d:propertyupdate>`,
|
||||||
}).then(
|
}).then(
|
||||||
(response) => {
|
(response) => {
|
||||||
return Promise.resolve(response.data)
|
return Promise.resolve(response.data)
|
||||||
@@ -109,7 +109,7 @@ export class CommentApi {
|
|||||||
deleteComment(data) {
|
deleteComment(data) {
|
||||||
return axios({
|
return axios({
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
url: this.url(`${data.cardId}/${data.commentId}`)
|
url: this.url(`${data.cardId}/${data.commentId}`),
|
||||||
}).then(
|
}).then(
|
||||||
(response) => {
|
(response) => {
|
||||||
return Promise.resolve(response.data)
|
return Promise.resolve(response.data)
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ const apiClient = new CommentApi()
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
state: {
|
state: {
|
||||||
comments: {}
|
comments: {},
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
addComments(state, commentObj) {
|
addComments(state, commentObj) {
|
||||||
@@ -47,26 +47,26 @@ export default {
|
|||||||
state.comments[newComment.cardId].push(newComment)
|
state.comments[newComment.cardId].push(newComment)
|
||||||
},
|
},
|
||||||
updateComment(state, comment) {
|
updateComment(state, comment) {
|
||||||
let existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
|
const existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
|
||||||
if (existingIndex !== -1) {
|
if (existingIndex !== -1) {
|
||||||
state.comments[comment.cardId][existingIndex].message = comment.comment
|
state.comments[comment.cardId][existingIndex].message = comment.comment
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deleteComment(state, comment) {
|
deleteComment(state, comment) {
|
||||||
let existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
|
const existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
|
||||||
if (existingIndex !== -1) {
|
if (existingIndex !== -1) {
|
||||||
state.comments[comment.cardId].splice(existingIndex, 1)
|
state.comments[comment.cardId].splice(existingIndex, 1)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
listComments({ commit }, card) {
|
listComments({ commit }, card) {
|
||||||
apiClient.listComments(card)
|
apiClient.listComments(card)
|
||||||
.then((comments) => {
|
.then((comments) => {
|
||||||
const commentsJson = xmlToTagList(comments)
|
const commentsJson = xmlToTagList(comments)
|
||||||
let returnObj = {
|
const returnObj = {
|
||||||
cardId: card.id,
|
cardId: card.id,
|
||||||
comments: commentsJson
|
comments: commentsJson,
|
||||||
}
|
}
|
||||||
commit('addComments', returnObj)
|
commit('addComments', returnObj)
|
||||||
})
|
})
|
||||||
@@ -88,6 +88,6 @@ export default {
|
|||||||
.then((retVal) => {
|
.then((retVal) => {
|
||||||
commit('updateComment', data)
|
commit('updateComment', data)
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ export default new Vuex.Store({
|
|||||||
},
|
},
|
||||||
currentBoardLabels: state => {
|
currentBoardLabels: state => {
|
||||||
return state.currentBoard ? state.currentBoard.labels : []
|
return state.currentBoard ? state.currentBoard.labels : []
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
toggleShowArchived(state) {
|
toggleShowArchived(state) {
|
||||||
|
|||||||
Reference in New Issue
Block a user