ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Implement api endpoints for comment reply handling

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-02-11 18:21:43 +01:00
parent e6de5fe3a9
commit 841fa0d4dd
10 changed files with 307 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
appinfo/routes.php
View File

@@ -123,7 +123,9 @@ return [
['name' => 'attachment_api#restore', 'url' => '/api/v1.0/boards/{boardId}/stacks/{stackId}/cards/{cardId}/attachments/{attachmentId}/restore', 'verb' => 'PUT'],
['name' => 'comments_api#list', 'url' => '/api/v1.0/boards/{boardId}/stacks/{stackId}/cards/{cardId}/comments', 'verb' => 'GET'],
['name' => 'comments_api#create', 'url' => '/api/v1.0/boards/{boardId}/stacks/{stackId}/cards/{cardId}/comments', 'verb' => 'POST'],
['name' => 'comments_api#update', 'url' => '/api/v1.0/boards/{boardId}/stacks/{stackId}/cards/{cardId}/comments/{commentId}', 'verb' => 'PUT'],
['name' => 'comments_api#delete', 'url' => '/api/v1.0/boards/{boardId}/stacks/{stackId}/cards/{cardId}/comments/{commentId}', 'verb' => 'DELETE'],
['name' => 'board_api#preflighted_cors', 'url' => '/api/v1.0/{path}','verb' => 'OPTIONS', 'requirements' => ['path' => '.+']],
]

1
css/icons.scss
View File

@@ -61,6 +61,7 @@
@include icon-black-white('clone', 'deck', 1);
@include icon-black-white('filter', 'deck', 1);
@include icon-black-white('attach', 'deck', 1);
@include icon-black-white('reply', 'deck', 1);
.icon-toggle-compact-collapsed {
@include icon-color('toggle-view-expand', 'deck', $color-black);

4
lib/AppInfo/Application.php
View File

@@ -56,6 +56,8 @@ class Application extends App {
public const APP_ID = 'deck';
public const COMMENT_ENTITY_TYPE = 'deckCard';
/** @var IServerContainer */
private $server;
@@ -149,7 +151,7 @@ class Application extends App {
public function registerCommentsEntity(): void {
$this->server->getEventDispatcher()->addListener(CommentsEntityEvent::EVENT_ENTITY, function(CommentsEntityEvent $event) {
$event->addEntityCollection('deckCard', function($name) {
$event->addEntityCollection(self::COMMENT_ENTITY_TYPE, function($name) {
/** @var CardMapper */
$cardMapper = $this->getContainer()->query(CardMapper::class);
$permissionService = $this->getContainer()->query(PermissionService::class);

94
lib/Controller/CommentsApiController.php
View File

@@ -23,87 +23,59 @@
namespace OCA\Deck\Controller;
use OCA\Deck\Service\CommentService;
use OCA\Deck\StatusException;
use OCP\AppFramework\ApiController;
use OCP\AppFramework\Http\DataResponse;
use OCP\AppFramework\Http\JSONResponse;
use OCP\Comments\IComment;
use OCP\Comments\ICommentsManager;
use OCP\Comments\NotFoundException;
use OCP\ILogger;
use OCP\IRequest;
use OCP\IUserManager;
class CommentsApiController extends ApiController {
/** @var ICommentsManager */
private $commentsManager;
/** @var IUserManager */
private $userManager;
/** @var ILogger */
private $logger;
/** @var CommentService */
private $commentService;
public function __construct(
$appName, IRequest $request, $corsMethods = 'PUT, POST, GET, DELETE, PATCH', $corsAllowedHeaders = 'Authorization, Content-Type, Accept', $corsMaxAge = 1728000,
ICommentsManager $commentsManager,
IUserManager $userManager,
ILogger $logger
CommentService $commentService
) {
parent::__construct($appName, $request, $corsMethods, $corsAllowedHeaders, $corsMaxAge);
$this->commentsManager = $commentsManager;
$this->userManager = $userManager;
$this->logger = $logger;
$this->commentService = $commentService;
}
/**
* @NoAdminRequired
* @CORS
* @NoCSRFRequired
* @throws StatusException
*/
public function list(int $cardId, $limit = 20, $offset = 0): JSONResponse {
$comments = $this->commentsManager->getForObject('deckCard', $cardId, $limit, $offset);
$result = [];
foreach ($comments as $comment) {
$formattedComment = $this->formatComment($comment);
try {
if ($comment->getParentId() !== '0' && $replyTo = $this->commentsManager->get($comment->getParentId())) {
$formattedComment['replyTo'] = $this->formatComment($replyTo);
}
} catch (NotFoundException $e) {
}
$result[] = $formattedComment;
}
return new JSONResponse($result);
public function list(string $cardId, int $limit = 20, int $offset = 0): DataResponse {
return $this->commentService->list($cardId, $limit, $offset);
}
private function formatComment(IComment $comment): array {
$user = $this->userManager->get($comment->getActorId());
$actorDisplayName = $user !== null ? $user->getDisplayName() : $comment->getActorId();
return [
'id' => $comment->getId(),
'message' => $comment->getMessage(),
'actorId' => $comment->getActorId(),
'actorType' => $comment->getActorType(),
'actorDisplayName' => $actorDisplayName,
'mentions' => array_map(function($mention) {
try {
$displayName = $this->commentsManager->resolveDisplayName($mention['type'], $mention['id']);
} catch (\OutOfBoundsException $e) {
$this->logger->logException($e);
// No displayname, upon client's discretion what to display.
$displayName = '';
}
return [
'mentionId' => $mention['id'],
'mentionType' => $mention['type'],
'mentionDisplayName' => $displayName
];
}, $comment->getMentions()),
];
/**
* @NoAdminRequired
* @NoCSRFRequired
* @throws StatusException
*/
public function create(string $cardId, string $message, string $parentId = '0'): DataResponse {
return $this->commentService->create($cardId, $message, $parentId);
}
/**
* @NoAdminRequired
* @NoCSRFRequired
* @throws StatusException
*/
public function update(string $cardId, string $commentId, string $message): DataResponse {
return $this->commentService->update($cardId, $commentId, $message);
}
/**
* @NoAdminRequired
* @NoCSRFRequired
* @throws StatusException
*/
public function delete(string $cardId, string $commentId): DataResponse {
return $this->commentService->delete($cardId, $commentId);
}
}

172
lib/Service/CommentService.php Normal file
View File

@@ -0,0 +1,172 @@
<?php
/**
* @copyright Copyright (c) 2020 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/>.
*
*/
namespace OCA\Deck\Service;
use OCA\Deck\AppInfo\Application;
use OCA\Deck\BadRequestException;
use OCA\Deck\NoPermissionException;
use OCA\Deck\NotFoundException;
use OCA\Deck\StatusException;
use OCP\AppFramework\Http\DataResponse;
use OCP\Comments\IComment;
use OCP\Comments\ICommentsManager;
use OCP\Comments\MessageTooLongException;
use OCP\Comments\NotFoundException as CommentNotFoundException;
use OCP\ILogger;
use OCP\IUserManager;
use OutOfBoundsException;
use Sabre\DAV\Exception\Forbidden;
use function is_numeric;
class CommentService {
/**
* @var ICommentsManager
*/
private $commentsManager;
/**
* @var IUserManager
*/
private $userManager;
/** @var ILogger */
private $logger;
private $userId;
public function __construct(ICommentsManager $commentsManager, IUserManager $userManager, ILogger $logger, $userId) {
$this->commentsManager = $commentsManager;
$this->userManager = $userManager;
$this->logger = $logger;
$this->userId = $userId;
}
public function list(string $cardId, int $limit = 20, int $offset = 0): DataResponse {
if (!is_numeric($cardId)) {
throw new BadRequestException('A valid card id must be provided');
}
$comments = $this->commentsManager->getForObject(Application::COMMENT_ENTITY_TYPE, $cardId, $limit, $offset);
$result = [];
foreach ($comments as $comment) {
$formattedComment = $this->formatComment($comment);
try {
if ($comment->getParentId() !== '0' && $replyTo = $this->commentsManager->get($comment->getParentId())) {
$formattedComment['replyTo'] = $this->formatComment($replyTo);
}
} catch (CommentNotFoundException $e) {
}
$result[] = $formattedComment;
}
return new DataResponse($result);
}
/**
* @param string $cardId
* @param string $message
* @param string $replyTo
* @return DataResponse
* @throws BadRequestException
* @throws NotFoundException
*/
public function create(string $cardId, string $message, string $replyTo = '0'): DataResponse {
if (!is_numeric($cardId)) {
throw new BadRequestException('A valid card id must be provided');
}
try {
$comment = $this->commentsManager->create('users', $this->userId, Application::COMMENT_ENTITY_TYPE, $cardId);
$comment->setMessage($message);
$comment->setVerb('comment');
$comment->setParentId($replyTo);
$this->commentsManager->save($comment);
return new DataResponse($this->formatComment($comment));
} catch (\InvalidArgumentException $e) {
throw new BadRequestException('Invalid input values');
} catch (MessageTooLongException $e) {
$msg = 'Message exceeds allowed character limit of ';
throw new BadRequestException($msg . IComment::MAX_MESSAGE_LENGTH);
} catch (CommentNotFoundException $e) {
throw new NotFoundException('Could not create comment.');
}
}
public function update(string $cardId, string $commentId, string $message): DataResponse {
if (!is_numeric($cardId)) {
throw new BadRequestException('A valid card id must be provided');
}
if (!is_numeric($commentId)) {
throw new BadRequestException('A valid comment id must be provided');
}
try {
$comment = $this->commentsManager->get($commentId);
} catch (CommentNotFoundException $e) {
throw new NotFoundException('No comment found.');
}
if ($comment->getActorType() !== 'users' || $comment->getActorId() !== $this->userId) {
throw new NoPermissionException('Only authors are allowed to edit their comment.');
}
$comment->setMessage($message);
$this->commentsManager->save($comment);
return new DataResponse($this->formatComment($comment));
}
public function delete(string $cardId, string $commentId): DataResponse {
if (!is_numeric($cardId)) {
throw new BadRequestException('A valid card id must be provided');
}
if (!is_numeric($commentId)) {
throw new BadRequestException('A valid comment id must be provided');
}
$this->commentsManager->delete($commentId);
return new DataResponse([]);
}
private function formatComment(IComment $comment): array {
$user = $this->userManager->get($comment->getActorId());
$actorDisplayName = $user !== null ? $user->getDisplayName() : $comment->getActorId();
return [
'id' => $comment->getId(),
'objectId' => $comment->getObjectId(),
'message' => $comment->getMessage(),
'actorId' => $comment->getActorId(),
'actorType' => $comment->getActorType(),
'actorDisplayName' => $actorDisplayName,
'mentions' => array_map(function($mention) {
try {
$displayName = $this->commentsManager->resolveDisplayName($mention['type'], $mention['id']);
} catch (OutOfBoundsException $e) {
$this->logger->logException($e);
// No displayname, upon client's discretion what to display.
$displayName = '';
}
return [
'mentionId' => $mention['id'],
'mentionType' => $mention['type'],
'mentionDisplayName' => $displayName
];
}, $comment->getMentions()),
];
}
}

3
src/components/card/CardSidebarTabComments.vue
View File

@@ -7,6 +7,7 @@
</span>
</div>
<CommentItem v-if="replyTo" :comment="replyTo" :reply="true" />
<CommentForm v-model="newComment" @submit="createComment" />
<ul v-if="getCommentsForCard(card.id).length > 0" id="commentsFeed">
@@ -58,6 +59,7 @@ export default {
computed: {
...mapState({
currentBoard: state => state.currentBoard,
replyTo: state => state.comment.replyTo,
}),
...mapGetters([
'getCommentsForCard',
@@ -98,6 +100,7 @@ export default {
comment: content,
}
await this.$store.dispatch('createComment', commentObj)
this.$store.dispatch('setReplyTo', null)
this.newComment = ''
await this.loadComments()
},

11
src/components/card/CommentForm.vue
View File

@@ -45,7 +45,7 @@
@keydown.enter="handleKeydown"
@paste="onPaste"
@blur="error = null"
@input="validate" />
@input="validate()" />
</At>
<input v-tooltip="t('deck', 'Save')"
class="icon-confirm"
@@ -99,10 +99,10 @@ export default {
},
},
methods: {
validate() {
validate(submit) {
this.error = null
const content = this.contentEditableToParsed()
if (content.length === 0) {
if (submit && content.length === 0) {
this.error = t('deck', 'The comment cannot be empty.')
}
if (content.length > 1000) {
@@ -111,14 +111,13 @@ export default {
return this.error === null ? content : null
},
submit() {
const content = this.validate()
const content = this.validate(true)
if (content) {
this.$emit('input', content)
this.$emit('submit', content)
}
},
/**
* All credits for this go to the talk app
/* All credits for this go to the talk app
* https://github.com/nextcloud/spreed/blob/e69740b372e17eec4541337b47baa262a5766510/src/components/NewMessageForm/NewMessageForm.vue#L100-L143
*/
contentEditableToParsed() {

97
src/components/card/CommentItem.vue
View File

@@ -1,5 +1,12 @@
<template>
<li class="comment">
<div v-if="reply" class="reply">
{{ t('deck', 'In reply to') }} <UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
<RichText class="comment--content"
:text="richText(comment)"
:arguments="richArgs(comment)"
:autolink="true" />
</div>
<li v-else class="comment">
<template>
<div class="comment--header">
<Avatar :user="comment.actorId" />
@@ -7,10 +14,13 @@
{{ comment.actorDisplayName }}
</span>
<Actions v-show="canEdit && !edit">
<ActionButton icon="icon-reply" @click="replyTo()">
{{ t('deck', 'Reply') }}
</ActionButton>
<ActionButton icon="icon-rename" @click="showUpdateForm()">
{{ t('deck', 'Update') }}
</ActionButton>
<ActionButton icon="icon-delete" @click="deleteComment(comment.id)">
<ActionButton icon="icon-delete" @click="deleteComment()">
{{ t('deck', 'Delete') }}
</ActionButton>
</Actions>
@@ -18,11 +28,12 @@
<ActionButton icon="icon-close" @click="hideUpdateForm" />
</Actions>
</div>
<CommentItem v-if="comment.replyTo" :reply="true" :comment="comment.replyTo" />
<RichText v-show="!edit"
ref="richTextElement"
class="comment--content"
:text="richText"
:arguments="richArgs"
:text="richText(comment)"
:arguments="richArgs(comment)"
:autolink="true" />
<CommentForm v-if="edit" v-model="commentMsg" @submit="updateComment" />
</template>
@@ -53,6 +64,7 @@ export default {
name: 'CommentItem',
components: {
Avatar,
UserBubble,
Actions,
ActionButton,
CommentForm,
@@ -63,6 +75,10 @@ export default {
type: Object,
default: undefined,
},
reply: {
type: Boolean,
default: false,
},
},
data() {
return {
@@ -76,40 +92,48 @@ export default {
return this.comment.actorId === getCurrentUser().uid
},
richText() {
let message = this.parsedMessage
this.comment.mentions.forEach((mention, index) => {
// Currently only [a-z\-_0-9] are allowed inside of placeholders so we use a hash of the mention id as a unique identifier
const hash = md5(mention.mentionId)
message = message.split('@' + mention.mentionId + '').join(`{user-${hash}}`)
message = message.split('@"' + mention.mentionId + '"').join(`{user-${hash}}`)
return (comment) => {
let message = this.parsedMessage(comment.message)
comment.mentions.forEach((mention, index) => {
// Currently only [a-z\-_0-9] are allowed inside of placeholders so we use a hash of the mention id as a unique identifier
const hash = md5(mention.mentionId)
message = message.split('@' + mention.mentionId + '').join(`{user-${hash}}`)
message = message.split('@"' + mention.mentionId + '"').join(`{user-${hash}}`)
})
return message
})
return message
}
},
richArgs() {
const mentions = [...this.comment.mentions]
const result = mentions.reduce(function(result, item, index) {
const itemKey = 'user-' + md5(item.mentionId)
result[itemKey] = {
component: AtMention,
props: {
user: item.mentionId,
displayName: item.mentionDisplayName,
},
}
return (comment) => {
const mentions = [...comment.mentions]
const result = mentions.reduce((result, item, index) => {
const itemKey = 'user-' + md5(item.mentionId)
result[itemKey] = {
component: AtMention,
props: {
user: item.mentionId,
displayName: item.mentionDisplayName,
},
}
return result
}, {})
return result
}, {})
return result
}
},
parsedMessage() {
const div = document.createElement('div')
div.innerHTML = this.comment.message
return (div.textContent || div.innerText || '')
return (message) => {
const div = document.createElement('div')
div.innerHTML = message
return (div.textContent || div.innerText || '')
}
},
},
methods: {
replyTo() {
this.$store.dispatch('setReplyTo', this.comment)
},
showUpdateForm() {
this.commentMsg = this.$refs.richTextElement.$el.innerHTML
this.edit = true
@@ -121,16 +145,16 @@ export default {
async updateComment() {
const data = {
comment: this.commentMsg,
cardId: this.comment.cardId,
cardId: this.comment.objectId,
commentId: this.comment.id,
}
await this.$store.dispatch('updateComment', data)
this.hideUpdateForm()
},
deleteComment(commentId) {
deleteComment() {
const data = {
commentId: commentId,
cardId: this.comment.cardId,
commentId: this.comment.id,
cardId: this.comment.objectId,
}
this.$store.dispatch('deleteComment', data)
},
@@ -141,6 +165,15 @@ export default {
<style scoped lang="scss">
@import "../../css/comments";
.reply {
border-left: 3px solid var(--color-primary-element);
padding-left: 10px;
margin-left: 44px;
.comment--content {
margin: 0;
}
}
.comment--content::v-deep a {
text-decoration: underline;
}

58
src/services/CommentApi.js
View File

@@ -21,7 +21,6 @@
*/
import axios from '@nextcloud/axios'
import { getCurrentUser } from '@nextcloud/auth'
import xmlToTagList from '../helpers/xml'
export class CommentApi {
@@ -33,19 +32,9 @@ export class CommentApi {
async loadComments({ cardId, limit, offset }) {
const api = await axios.get(OC.generateUrl(`/apps/deck/api/v1.0/boards/0/stacks/0/cards/${cardId}/comments`), {
headers: {'OCS-APIRequest': 'true'}
headers: { 'OCS-APIRequest': 'true' },
})
return api.data
const response = await axios({
method: 'REPORT',
url: this.url(`${cardId}`),
data: `<?xml version="1.0" encoding="utf-8" ?>
<oc:filter-comments xmlns:D="DAV:" xmlns:oc="http://owncloud.org/ns">
<oc:limit>${limit}</oc:limit>
<oc:offset>${offset}</oc:offset>
</oc:filter-comments>`,
})
return xmlToTagList(response.data)
}
async fetchComment({ cardId, commentId }) {
@@ -71,49 +60,24 @@ export class CommentApi {
return xmlToTagList(response.data)
}
async createComment({ cardId, comment }) {
const response = await axios({
method: 'POST',
url: this.url(`${cardId}`),
data: { actorType: 'users', message: `${comment}`, verb: 'comment' },
async createComment({ cardId, comment, replyTo }) {
const api = await axios.post(OC.generateUrl(`/apps/deck/api/v1.0/boards/0/stacks/0/cards/${cardId}/comments`), {
message: `${comment}`,
parentId: replyTo ? replyTo.id : null,
})
const header = response.headers['content-location']
const headerArray = header.split('/')
const id = headerArray[headerArray.length - 1]
const ret = {
cardId: (cardId).toString(),
id: id,
uId: getCurrentUser().uid,
creationDateTime: (new Date()).toString(),
message: comment,
}
return ret
return api.data
}
async updateComment({ cardId, commentId, comment }) {
const response = await axios({
method: 'PROPPATCH',
url: this.url(`${cardId}/${commentId}`),
data: `<?xml version="1.0"?>
<d:propertyupdate xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
<d:set>
<d:prop>
<oc:message>${comment}</oc:message>
</d:prop>
</d:set>
</d:propertyupdate>`,
const api = await axios.put(OC.generateUrl(`/apps/deck/api/v1.0/boards/0/stacks/0/cards/${cardId}/comments/${commentId}`), {
message: `${comment}`,
})
return response.data
return api.data
}
async deleteComment({ cardId, commentId }) {
const response = await axios({
method: 'DELETE',
url: this.url(`${cardId}/${commentId}`),
})
return response.data
const api = await axios.delete(OC.generateUrl(`/apps/deck/api/v1.0/boards/0/stacks/0/cards/${cardId}/comments/${commentId}`))
return api.data
}
async markCommentsAsRead(cardId) {

16
src/store/comment.js
View File

@@ -30,6 +30,7 @@ const COMMENT_FETCH_LIMIT = 10
export default {
state: {
comments: {},
replyTo: null,
},
getters: {
getCommentsForCard: (state) => (id) => {
@@ -78,6 +79,9 @@ export default {
Vue.set(_comment, 'isUnread', false)
})
},
setReplyTo(state, comment) {
Vue.set(state, 'replyTo', comment)
},
},
actions: {
async fetchComments({ commit }, { cardId, offset }) {
@@ -103,8 +107,8 @@ export default {
await dispatch('fetchComments', { cardId, offset: getters.getCommentsForCard(cardId).length })
},
async createComment({ commit, dispatch }, { cardId, comment }) {
await apiClient.createComment({ cardId, comment })
async createComment({ commit, dispatch, state }, { cardId, comment }) {
await apiClient.createComment({ cardId, comment, replyTo: state.replyTo })
await dispatch('fetchComments', { cardId })
},
async deleteComment({ commit }, data) {
@@ -112,13 +116,15 @@ export default {
commit('deleteComment', data)
},
async updateComment({ commit }, data) {
await apiClient.updateComment(data)
const commentData = await apiClient.fetchComment(data)
await commit('updateComment', { cardId: data.cardId, comment: commentData[0] })
const comment = await apiClient.updateComment(data)
await commit('updateComment', { cardId: data.cardId, comment: comment })
},
async markCommentsAsRead({ commit }, cardId) {
await apiClient.markCommentsAsRead(cardId)
await commit('markCommentsAsRead', cardId)
},
setReplyTo({ commit }, comment) {
commit('setReplyTo', comment)
},
},
}