Some comments code cleanup

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-01-25 09:52:30 +01:00
parent 739a92e9a3
commit ad069e5e14
10 changed files with 187 additions and 163 deletions

66
package-lock.json generated
View File

@@ -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=="
} }
} }
}, },

View File

@@ -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",

View File

@@ -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;

View File

@@ -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,

View File

@@ -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>

View File

@@ -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>

View File

@@ -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

View File

@@ -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)

View File

@@ -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)
}) })
} },
} },
} }

View File

@@ -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) {