feat(fastapi): add comment actions to /account/{username}/comments

With this change, we've decoupled some partials shared between
`/pkgbase/{name}` and `/account/{username}/comments`. The comment
actions template now resolves its package base via the `comment`
instance instead of requiring `pkgbase`.

We've also modified the existing package comment routes to
support execution from any location using the `next` parameter.
This allows us to reuse code from package comments for
account comments actions.

Moved the majority of comment editing javascript to its own
.js file.

Signed-off-by: Kevin Morris <kevr@0cost.org>
This commit is contained in:
Kevin Morris 2021-10-28 17:52:17 -07:00
parent adb6252f85
commit 691b7b9091
No known key found for this signature in database
GPG key ID: F7E46DED420788F3
12 changed files with 276 additions and 182 deletions

View file

@ -34,77 +34,10 @@
| safe
}})
</span>
{% endif %}
{% if not comment.Deleter %}
{% if request.user.has_credential('CRED_COMMENT_DELETE', approved=[comment.User]) %}
<form class="delete-comment-form" method="post"
action="/pkgbase/{{ pkgbase.Name }}/comments/{{ comment.ID }}/delete">
<fieldset style="display:inline;">
<input type="image" class="delete-comment" src="/images/x.min.svg" width="11" height="11" alt="{{ 'Delete comment' | tr }}" title="{{ 'Delete comment' | tr }}" name="submit" value="1" />
</fieldset>
</form>
{% endif %}
{% endif %}
{% if request.user.has_credential('CRED_COMMENT_EDIT', approved=[comment.User]) %}
<a href="/pkgbase/{{ pkgname }}/edit-comment/?comment_id={{ comment.ID }}" class="edit-comment" title="Edit comment"><img src="/images/pencil.min.svg" alt="Edit comment" width="11" height="11"></a>
{% endif %}
{% include "partials/comment_actions.html" %}
</h4>
{% if request.user.has_credential("CRED_COMMENT_PIN", approved=[pkgbase.Maintainer]) %}
{% if comment.PinnedTS %}
<form class="pin-comment-form"
method="post"
action="/pkgbase/{{ pkgbase.Name }}/comments/{{ comment.ID }}/unpin"
>
<fieldset style="display:inline;">
<input type="image"
class="pin-comment"
src="/images/unpin.min.svg"
alt="{{ 'Unpin comment' | tr }}"
title="{{ 'Unpin comment' | tr }}"
name="submit"
value="1" width="11" height="11" />
</fieldset>
</form>
{% else %}
<form class="pin-comment-form"
method="post"
action="/pkgbase/{{ pkgbase.Name }}/comments/{{ comment.ID }}/pin"
>
<fieldset style="display:inline;">
<input type="image"
class="pin-comment"
src="/images/pin.min.svg"
alt="{{ 'Pin comment' | tr }}"
title="{{ 'Pin comment' | tr }}"
name="submit"
value="1" width="11" height="11" />
</fieldset>
</form>
{% endif %}
{% endif %}
{% elif request.user.has_credential("CRED_COMMENT_UNDELETE", approved=[comment.User]) %}
<form class="undelete-comment-form"
method="post"
action="/pkgbase/{{ pkgbase.Name }}/comments/{{ comment.ID }}/undelete"
>
<fieldset style="display:inline;">
<input type="image"
class="undelete-comment"
src="/images/action-undo.min.svg"
alt="{{ 'Undelete comment' | tr }}"
title="{{ 'Undelete comment' | tr }}"
name="submit" value="1" width="11" height="11" />
</fieldset>
</form>
{% endif %}
</h4>
<div id="comment-{{ comment.ID }}-content" class="{{ article_cls }}">
<div>
{% if comment.RenderedComment %}
{{ comment.RenderedComment | safe }}
{% else %}
{{ comment.Comments }}
{% endif %}
</div>
</div>
{% include "partials/comment_content.html" %}
{% endif %}

View file

@ -13,6 +13,7 @@ Routes:
<form action="{{ action }}" method="post">
<fieldset>
<input type="hidden" name="next" value="{{ next }}" />
<p>
{{ "Git commit identifiers referencing commits in the AUR package "
"repository and URLs are converted to links automatically." | tr }}

View file

@ -39,72 +39,3 @@
{% endfor %}
</div>
{% endif %}
<script type="text/javascript" nonce="{{ request.user.nonce }}">
function add_busy_indicator(sibling) {
const img = document.createElement('img');
img.src = "/images/ajax-loader.gif";
img.classList.add('ajax-loader');
img.style.height = 11;
img.style.width = 16;
img.alt = "Busy…";
sibling.insertAdjacentElement('afterend', img);
}
function remove_busy_indicator(sibling) {
const elem = sibling.nextElementSibling;
elem.parentNode.removeChild(elem);
}
function getParentsUntil(elem, className) {
// Limit to 10 depth
for ( ; elem && elem !== document; elem = elem.parentNode) {
if (elem.matches(className)) {
break;
}
}
return elem;
}
function handleEditCommentClick(event) {
event.preventDefault();
const parent_element = getParentsUntil(event.target, '.comment-header');
const parent_id = parent_element.id;
const comment_id = parent_id.substr(parent_id.indexOf('-') + 1);
// The div class="article-content" which contains the comment
const edit_form = parent_element.nextElementSibling;
const url = "/pkgbase/{{ pkgbase.Name }}/comments/" + comment_id + "/form";
add_busy_indicator(event.target);
fetch(url, {
method: 'GET',
credentials: 'same-origin'
})
.then(function(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response.json();
})
.then(function(data) {
remove_busy_indicator(event.target);
edit_form.innerHTML = data.form;
edit_form.querySelector('textarea').focus();
})
.catch(function(error) {
remove_busy_indicator(event.target);
console.error(error);
});
}
document.addEventListener('DOMContentLoaded', function() {
const divs = document.querySelectorAll('.edit-comment');;
for (let div of divs) {
div.addEventListener('click', handleEditCommentClick);
}
});
</script>