first step
Signed-off-by: Jakob <jakob.roehrl@web.de> 1. try Signed-off-by: Jakob <jakob.roehrl@web.de> remote calls are working Signed-off-by: Jakob <jakob.roehrl@web.de> litte changes Signed-off-by: Jakob <jakob.roehrl@web.de> small fixes Signed-off-by: Jakob <jakob.roehrl@web.de> incremental fetching Signed-off-by: Jakob <jakob.roehrl@web.de> integrated tiptap suggestions for test Signed-off-by: Jakob <jakob.roehrl@web.de> Update package-lock after rebase Signed-off-by: Julius Härtl <jus@bitgrid.net> Fix various errors Signed-off-by: Julius Härtl <jus@bitgrid.net> Cleanup mention plugin use Signed-off-by: Julius Härtl <jus@bitgrid.net> Downgrade tippy Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Jakob
Julius Härtl
@@ -21,7 +21,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<AppSidebar v-if="currentCard !== null && copiedCard !== null"
|
||||
<app-sidebar v-if="currentCard !== null && currentBoard && copiedCard !== null"
|
||||
:actions="toolbarActions"
|
||||
:title="currentCard.title"
|
||||
:subtitle="subtitle"
|
||||
@@ -113,7 +113,12 @@
|
||||
{{ t('deck', 'Upload attachment') }}
|
||||
</button>
|
||||
</AppSidebarTab>
|
||||
<AppSidebarTab :order="2" name="Timeline" icon="icon-activity">
|
||||
|
||||
<AppSidebarTab :order="2" name="Comments" icon="icon-comment">
|
||||
<CommentsTabSidebar :card="currentCard" />
|
||||
</AppSidebarTab>
|
||||
|
||||
<AppSidebarTab :order="3" name="Timeline" icon="icon-activity">
|
||||
<div v-if="isLoading" class="icon icon-loading" />
|
||||
<ActivityEntry v-for="entry in cardActivity"
|
||||
v-else
|
||||
@@ -139,6 +144,7 @@ import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
import ActivityEntry from '../ActivityEntry'
|
||||
import Color from '../../mixins/color'
|
||||
import { CollectionList } from 'nextcloud-vue-collections'
|
||||
import CommentsTabSidebar from './CommentsTabSidebar'
|
||||
|
||||
export default {
|
||||
name: 'CardSidebar',
|
||||
@@ -153,6 +159,7 @@ export default {
|
||||
ActionButton,
|
||||
Avatar,
|
||||
CollectionList,
|
||||
CommentsTabSidebar
|
||||
},
|
||||
mixins: [
|
||||
Color,
|
||||
@@ -248,7 +255,6 @@ export default {
|
||||
},
|
||||
created() {
|
||||
setInterval(this.updateRelativeTimestamps, 10000)
|
||||
this.loadCardActivity()
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.updateRelativeTimestamps)
|
||||
|
||||
81
src/components/card/CommentItem.vue
Normal file
81
src/components/card/CommentItem.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<li>
|
||||
<form v-if="edit" @submit.prevent="updateComment">
|
||||
<input v-model="commentMsg" type="text" autofocus
|
||||
required>
|
||||
<input v-tooltip="t('deck', 'Save')" class="icon-confirm" type="submit"
|
||||
value="">
|
||||
<input type="submit" value="" class="icon-close"
|
||||
@click.stop.prevent="hideUpdateForm">
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Avatar } from 'nextcloud-vue'
|
||||
import { Actions } from 'nextcloud-vue/dist/Components/Actions'
|
||||
import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
|
||||
export default {
|
||||
name: 'CommentItem',
|
||||
components: {
|
||||
Avatar,
|
||||
Actions,
|
||||
ActionButton
|
||||
},
|
||||
props: {
|
||||
comment: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
edit: false,
|
||||
commentMsg: ''
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
showUpdateForm() {
|
||||
this.commentMsg = this.comment.message
|
||||
this.edit = true
|
||||
},
|
||||
hideUpdateForm() {
|
||||
this.commentMsg = ''
|
||||
this.edit = false
|
||||
},
|
||||
updateComment() {
|
||||
let data = {
|
||||
comment: this.commentMsg,
|
||||
cardId: this.comment.cardId,
|
||||
commentId: this.comment.id
|
||||
}
|
||||
this.$store.dispatch('updateComment', data)
|
||||
this.hideUpdateForm()
|
||||
},
|
||||
deleteComment(commentId) {
|
||||
let data = {
|
||||
commentId: commentId,
|
||||
cardId: this.comment.cardId
|
||||
}
|
||||
this.$store.dispatch('deleteComment', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
form {
|
||||
display: flex
|
||||
}
|
||||
|
||||
</style>
|
||||
319
src/components/card/CommentsTabSidebar.vue
Normal file
319
src/components/card/CommentsTabSidebar.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="userDiv">
|
||||
<avatar :user="card.owner.uid" />
|
||||
<span class="has-tooltip username">
|
||||
{{ card.owner.displayname }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- <div id="commentForm">
|
||||
<form @submit.prevent="createComment()">
|
||||
<input :placeholder="t('deck', 'New comment') + ' ...'" v-model="newComment" type="text"
|
||||
autofocus required>
|
||||
<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"
|
||||
required />
|
||||
<input v-tooltip="t('deck', 'Save')" class="icon-confirm" type="submit"
|
||||
value="">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-show="showSuggestions" ref="suggestions" class="suggestion-list">
|
||||
<template v-if="hasResults">
|
||||
<div
|
||||
v-for="(user, index) in filteredUsers"
|
||||
:key="user.uid"
|
||||
:class="{ 'is-selected': navigatedUserIndex === index }"
|
||||
class="suggestion-list__item"
|
||||
@click="selectUser(user)"
|
||||
>
|
||||
{{ user.displayname }}
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="suggestion-list__item is-empty">
|
||||
No users found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-for="comment in comments[card.id]">{{ comment.id }}</p>
|
||||
|
||||
<div v-if="isLoading" class="icon icon-loading" />
|
||||
|
||||
<ul id="commentsFeed">
|
||||
<CommentItem v-for="comment in comments[card.id]" :comment="comment" :key="comment.id"
|
||||
@doReload="loadComments" />
|
||||
</ul>
|
||||
<button @click="loadMore">Load More</button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Fuse from 'fuse.js'
|
||||
import tippy from 'tippy.js'
|
||||
import { Editor, EditorContent } from 'tiptap'
|
||||
import { Mention } from 'tiptap-extensions'
|
||||
|
||||
import { mapState } from 'vuex'
|
||||
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'
|
||||
|
||||
export default {
|
||||
name: 'CommentsTabSidebar',
|
||||
components: {
|
||||
Avatar,
|
||||
Actions,
|
||||
ActionButton,
|
||||
CommentItem,
|
||||
EditorContent
|
||||
},
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newComment: '',
|
||||
isLoading: false,
|
||||
limit: 20,
|
||||
offset: 0,
|
||||
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new Mention({
|
||||
// a list of all suggested items
|
||||
items: () => {
|
||||
return this.currentBoard.users
|
||||
},
|
||||
// is called when a suggestion starts
|
||||
onEnter: ({
|
||||
items, query, range, command, virtualNode
|
||||
}) => {
|
||||
this.query = query
|
||||
this.filteredUsers = items
|
||||
this.suggestionRange = range
|
||||
this.renderPopup(virtualNode)
|
||||
// we save the command for inserting a selected mention
|
||||
// this allows us to call it inside of our custom popup
|
||||
// via keyboard navigation and on click
|
||||
this.insertMention = command
|
||||
},
|
||||
// is called when a suggestion has changed
|
||||
onChange: ({
|
||||
items, query, range, virtualNode
|
||||
}) => {
|
||||
this.query = query
|
||||
this.filteredUsers = items
|
||||
this.suggestionRange = range
|
||||
this.navigatedUserIndex = 0
|
||||
this.renderPopup(virtualNode)
|
||||
},
|
||||
// is called when a suggestion is cancelled
|
||||
onExit: () => {
|
||||
// reset all saved values
|
||||
this.query = null
|
||||
this.filteredUsers = []
|
||||
this.suggestionRange = null
|
||||
this.navigatedUserIndex = 0
|
||||
this.destroyPopup()
|
||||
},
|
||||
// is called on every keyDown event while a suggestion is active
|
||||
onKeyDown: ({ event }) => {
|
||||
// pressing up arrow
|
||||
if (event.keyCode === 38) {
|
||||
this.upHandler()
|
||||
return true
|
||||
}
|
||||
// pressing down arrow
|
||||
if (event.keyCode === 40) {
|
||||
this.downHandler()
|
||||
return true
|
||||
}
|
||||
// pressing enter
|
||||
if (event.keyCode === 13) {
|
||||
this.enterHandler()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
// is called when a suggestion has changed
|
||||
// this function is optional because there is basic filtering built-in
|
||||
// you can overwrite it if you prefer your own filtering
|
||||
// in this example we use fuse.js with support for fuzzy search
|
||||
onFilter: (items, query) => {
|
||||
if (!query) {
|
||||
return items
|
||||
}
|
||||
const fuse = new Fuse(items, {
|
||||
threshold: 0.2,
|
||||
keys: ['uid', 'displayname']
|
||||
})
|
||||
return fuse.search(query)
|
||||
}
|
||||
})
|
||||
],
|
||||
content: '',
|
||||
onUpdate: ({ getHTML }) => {
|
||||
this.newComment = getHTML().replace(/(<p>|<\/p>)/g, '')
|
||||
}
|
||||
}),
|
||||
query: null,
|
||||
suggestionRange: null,
|
||||
filteredUsers: [],
|
||||
navigatedUserIndex: 0,
|
||||
insertMention: () => {},
|
||||
observer: null
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
comments: state => state.comment.comments,
|
||||
currentBoard: state => state.currentBoard
|
||||
}),
|
||||
|
||||
hasResults() {
|
||||
return this.filteredUsers.length
|
||||
},
|
||||
showSuggestions() {
|
||||
return this.query || this.hasResults
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
'card': {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.loadComments()
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadComments() {
|
||||
this.isLoading = true
|
||||
this.card.limit = this.limit
|
||||
this.card.offset = this.offset
|
||||
this.$store.dispatch('listComments', this.card).then(response => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
createComment() {
|
||||
let commentObj = {
|
||||
cardId: this.card.id,
|
||||
comment: this.newComment
|
||||
}
|
||||
this.$store.dispatch('createComment', commentObj)
|
||||
this.loadComments()
|
||||
this.newComment = ''
|
||||
},
|
||||
loadMore() {
|
||||
this.offset = this.offset + this.limit
|
||||
this.loadComments()
|
||||
},
|
||||
|
||||
// navigate to the previous item
|
||||
// if it's the first item, navigate to the last one
|
||||
upHandler() {
|
||||
this.navigatedUserIndex = ((this.navigatedUserIndex + this.filteredUsers.length) - 1) % this.filteredUsers.length
|
||||
},
|
||||
// navigate to the next item
|
||||
// if it's the last item, navigate to the first one
|
||||
downHandler() {
|
||||
this.navigatedUserIndex = (this.navigatedUserIndex + 1) % this.filteredUsers.length
|
||||
},
|
||||
enterHandler() {
|
||||
const user = this.filteredUsers[this.navigatedUserIndex]
|
||||
if (user) {
|
||||
this.selectUser(user)
|
||||
}
|
||||
},
|
||||
// we have to replace our suggestion text with a mention
|
||||
// so it's important to pass also the position of your suggestion text
|
||||
selectUser(user) {
|
||||
this.insertMention({
|
||||
range: this.suggestionRange,
|
||||
attrs: {
|
||||
id: user.uid,
|
||||
label: user.displayname
|
||||
}
|
||||
})
|
||||
this.editor.focus()
|
||||
},
|
||||
// renders a popup with suggestions
|
||||
// tiptap provides a virtualNode object for using popper.js (or tippy.js) for popups
|
||||
renderPopup(node) {
|
||||
if (this.popup) {
|
||||
return
|
||||
}
|
||||
this.popup = tippy(node, {
|
||||
content: this.$refs.suggestions,
|
||||
trigger: 'mouseenter',
|
||||
interactive: true,
|
||||
placement: 'bottom-start',
|
||||
inertia: true,
|
||||
duration: [400, 200],
|
||||
showOnInit: true
|
||||
})
|
||||
// we have to update tippy whenever the DOM is updated
|
||||
if (MutationObserver) {
|
||||
this.observer = new MutationObserver(() => {
|
||||
this.popup.popperInstance.scheduleUpdate()
|
||||
})
|
||||
this.observer.observe(this.$refs.suggestions, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true
|
||||
})
|
||||
}
|
||||
},
|
||||
destroyPopup() {
|
||||
if (this.popup) {
|
||||
this.popup.destroy()
|
||||
this.popup = null
|
||||
}
|
||||
if (this.observer) {
|
||||
this.observer.disconnect()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#commentForm form {
|
||||
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>
|
||||
82
src/helpers/xml.js
Normal file
82
src/helpers/xml.js
Normal file
@@ -0,0 +1,82 @@
|
||||
const xmlToJson = (xml) => {
|
||||
let obj = {}
|
||||
if (xml.nodeType === 1) {
|
||||
if (xml.attributes.length > 0) {
|
||||
obj['@attributes'] = {}
|
||||
for (let j = 0; j < xml.attributes.length; j++) {
|
||||
const attribute = xml.attributes.item(j)
|
||||
obj['@attributes'][attribute.nodeName] = attribute.nodeValue
|
||||
}
|
||||
}
|
||||
} else if (xml.nodeType === 3) {
|
||||
obj = xml.nodeValue
|
||||
}
|
||||
if (xml.hasChildNodes()) {
|
||||
for (let i = 0; i < xml.childNodes.length; i++) {
|
||||
const item = xml.childNodes.item(i)
|
||||
const nodeName = item.nodeName
|
||||
if (typeof (obj[nodeName]) === 'undefined') {
|
||||
obj[nodeName] = xmlToJson(item)
|
||||
} else {
|
||||
if (typeof obj[nodeName].push === 'undefined') {
|
||||
var old = obj[nodeName]
|
||||
obj[nodeName] = []
|
||||
obj[nodeName].push(old)
|
||||
}
|
||||
obj[nodeName].push(xmlToJson(item))
|
||||
}
|
||||
}
|
||||
}
|
||||
return obj
|
||||
}
|
||||
const parseXml = (xml) => {
|
||||
let dom = null
|
||||
try {
|
||||
dom = (new DOMParser()).parseFromString(xml, 'text/xml')
|
||||
} catch (e) {
|
||||
console.error('Failed to parse xml document', e)
|
||||
}
|
||||
return dom
|
||||
}
|
||||
const xmlToTagList = (xml) => {
|
||||
|
||||
let json = xmlToJson(parseXml(xml))
|
||||
let list = json['d:multistatus']['d:response']
|
||||
|
||||
// no element
|
||||
if (list === undefined) {
|
||||
return []
|
||||
}
|
||||
let result = []
|
||||
|
||||
// one element
|
||||
if (Array.isArray(list) === false) {
|
||||
let tag = 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
|
||||
} else {
|
||||
for (let index in list) {
|
||||
let tag = list[index]['d:propstat']
|
||||
if (tag['d:status']['#text'] !== 'HTTP/1.1 200 OK') {
|
||||
continue
|
||||
}
|
||||
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']
|
||||
})
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export default xmlToTagList
|
||||
126
src/services/CommentApi.js
Normal file
126
src/services/CommentApi.js
Normal file
@@ -0,0 +1,126 @@
|
||||
/*
|
||||
* @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
|
||||
*
|
||||
* @author Michael Weimann <mail@michael-weimann.eu>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
import axios from 'nextcloud-axios'
|
||||
import { getCurrentUser } from '@nextcloud/auth'
|
||||
|
||||
export class CommentApi {
|
||||
|
||||
url(url) {
|
||||
url = `dav/comments/deckCard/${url}`
|
||||
return OC.linkToRemote(url)
|
||||
}
|
||||
|
||||
listComments(card) {
|
||||
return axios({
|
||||
method: 'REPORT',
|
||||
url: this.url(`${card.id}`),
|
||||
data: `<?xml version="1.0" encoding="utf-8" ?>
|
||||
<oc:filter-comments xmlns:D="DAV:" xmlns:oc="http://owncloud.org/ns">
|
||||
<oc:limit>${card.limit}</oc:limit>
|
||||
<oc:offset>${card.offset}</oc:offset>
|
||||
</oc:filter-comments>`
|
||||
}).then(
|
||||
(response) => {
|
||||
return Promise.resolve(response.data)
|
||||
},
|
||||
(err) => {
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
.catch((err) => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
}
|
||||
|
||||
createComment(commentObj) {
|
||||
return axios({
|
||||
method: 'POST',
|
||||
url: this.url(`${commentObj.cardId}`),
|
||||
data: { actorType: 'users', message: `${commentObj.comment}`, verb: 'comment' }
|
||||
}).then(
|
||||
(response) => {
|
||||
let header = response.headers['content-location']
|
||||
let headerArray = header.split('/')
|
||||
let id = headerArray[headerArray.length - 1]
|
||||
|
||||
let ret = {
|
||||
cardId: (commentObj.cardId).toString(),
|
||||
id: id,
|
||||
uId: getCurrentUser().uid,
|
||||
creationDateTime: (new Date()).toString(),
|
||||
message: commentObj.comment
|
||||
}
|
||||
return Promise.resolve(ret)
|
||||
},
|
||||
(err) => {
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
.catch((err) => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
}
|
||||
|
||||
updateComment(data) {
|
||||
return axios({
|
||||
method: 'PROPPATCH',
|
||||
url: this.url(`${data.cardId}/${data.commentId}`),
|
||||
data: `<?xml version="1.0"?>
|
||||
<d:propertyupdate xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
|
||||
<d:set>
|
||||
<d:prop>
|
||||
<oc:message>${data.comment}</oc:message>
|
||||
</d:prop>
|
||||
</d:set>
|
||||
</d:propertyupdate>`
|
||||
}).then(
|
||||
(response) => {
|
||||
return Promise.resolve(response.data)
|
||||
},
|
||||
(err) => {
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
.catch((err) => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
}
|
||||
|
||||
deleteComment(data) {
|
||||
return axios({
|
||||
method: 'DELETE',
|
||||
url: this.url(`${data.cardId}/${data.commentId}`)
|
||||
}).then(
|
||||
(response) => {
|
||||
return Promise.resolve(response.data)
|
||||
},
|
||||
(err) => {
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
.catch((err) => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
93
src/store/comment.js
Normal file
93
src/store/comment.js
Normal file
@@ -0,0 +1,93 @@
|
||||
/*
|
||||
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
|
||||
*
|
||||
* @author Julius Härtl <jus@bitgrid.net>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
import { CommentApi } from '../services/CommentApi'
|
||||
import xmlToTagList from '../helpers/xml'
|
||||
import Vue from 'vue'
|
||||
|
||||
const apiClient = new CommentApi()
|
||||
|
||||
export default {
|
||||
state: {
|
||||
comments: {}
|
||||
},
|
||||
mutations: {
|
||||
addComments(state, commentObj) {
|
||||
if (state.comments[commentObj.cardId] === undefined) {
|
||||
Vue.set(state.comments, commentObj.cardId, commentObj.comments)
|
||||
} else {
|
||||
// FIXME append comments once incremental fetching is implemented
|
||||
// state.comments[commentObj.cardId].push(...commentObj.comments)
|
||||
Vue.set(state.comments, commentObj.cardId, commentObj.comments)
|
||||
}
|
||||
},
|
||||
createComment(state, newComment) {
|
||||
if (state.comments[newComment.cardId] === undefined) {
|
||||
state.comments[newComment.cardId] = []
|
||||
}
|
||||
state.comments[newComment.cardId].push(newComment)
|
||||
},
|
||||
updateComment(state, comment) {
|
||||
let existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
|
||||
if (existingIndex !== -1) {
|
||||
state.comments[comment.cardId][existingIndex].message = comment.comment
|
||||
}
|
||||
},
|
||||
deleteComment(state, comment) {
|
||||
let existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
|
||||
if (existingIndex !== -1) {
|
||||
state.comments[comment.cardId].splice(existingIndex, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
listComments({ commit }, card) {
|
||||
apiClient.listComments(card)
|
||||
.then((comments) => {
|
||||
const commentsJson = xmlToTagList(comments)
|
||||
let returnObj = {
|
||||
cardId: card.id,
|
||||
comments: commentsJson
|
||||
}
|
||||
commit('addComments', returnObj)
|
||||
})
|
||||
},
|
||||
createComment({ commit }, newComment) {
|
||||
apiClient.createComment(newComment)
|
||||
.then((newComment) => {
|
||||
commit('createComment', newComment)
|
||||
})
|
||||
},
|
||||
deleteComment({ commit }, data) {
|
||||
apiClient.deleteComment(data)
|
||||
.then((retVal) => {
|
||||
commit('deleteComment', data)
|
||||
})
|
||||
},
|
||||
updateComment({ commit }, data) {
|
||||
apiClient.updateComment(data)
|
||||
.then((retVal) => {
|
||||
commit('updateComment', data)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -28,6 +28,7 @@ import axios from 'nextcloud-axios'
|
||||
import { BoardApi } from './../services/BoardApi'
|
||||
import stack from './stack'
|
||||
import card from './card'
|
||||
import comment from './comment'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
@@ -44,6 +45,7 @@ export default new Vuex.Store({
|
||||
modules: {
|
||||
stack,
|
||||
card,
|
||||
comment,
|
||||
},
|
||||
strict: debug,
|
||||
state: {
|
||||
@@ -92,8 +94,8 @@ export default new Vuex.Store({
|
||||
return boards
|
||||
},
|
||||
currentBoardLabels: state => {
|
||||
return state.currentBoard.labels
|
||||
},
|
||||
return state.currentBoard ? state.currentBoard.labels : []
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
toggleShowArchived(state) {
|
||||
|
||||
Reference in New Issue
Block a user