mirror of
https://gitlab.archlinux.org/archlinux/aurweb.git
synced 2025-02-03 10:43:03 +01:00
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
parent
adb6252f85
commit
691b7b9091
12 changed files with 276 additions and 182 deletions
|
|
@ -18,35 +18,50 @@
|
|||
</div>
|
||||
|
||||
{% for comment in comments %}
|
||||
{% set commented_at = comment.CommentTS | dt | as_timezone(timezone) %}
|
||||
<h4 id="comment-{{ comment.ID }}" class="comment-header">
|
||||
{{
|
||||
"Commented on package %s%s%s on %s%s%s" | tr
|
||||
| format(
|
||||
'<a href="/pkgbase/{{ comment.PackageBase.Name }}">',
|
||||
comment.PackageBase.Name,
|
||||
"</a>",
|
||||
'<a href="/account/%s/comments#comment-%s">' | format(
|
||||
username,
|
||||
comment.ID
|
||||
),
|
||||
commented_at.strftime("%Y-%m-%d %H:%M"),
|
||||
"</a>"
|
||||
) | safe
|
||||
}}
|
||||
</h4>
|
||||
<div id="comment-{{ comment.ID }}-content" class="article-content">
|
||||
<div>
|
||||
{% if comment.RenderedComment %}
|
||||
{{ comment.RenderedComment | safe }}
|
||||
{% else %}
|
||||
{{ comment.Comments }}
|
||||
{% set header_cls = "comment-header" %}
|
||||
{% if comment.Deleter %}
|
||||
{% set header_cls = "%s %s" | format(header_cls, "comment-deleted") %}
|
||||
{% endif %}
|
||||
|
||||
{% if not comment.Deleter or request.user.has_credential("CRED_COMMENT_VIEW_DELETED", approved=[comment.Deleter]) %}
|
||||
|
||||
{% set commented_at = comment.CommentTS | dt | as_timezone(timezone) %}
|
||||
<h4 id="comment-{{ comment.ID }}" class="{{ header_cls }}">
|
||||
{{
|
||||
"Commented on package %s%s%s on %s%s%s" | tr
|
||||
| format(
|
||||
'<a href="/pkgbase/%s">' | format(comment.PackageBase.Name),
|
||||
comment.PackageBase.Name,
|
||||
"</a>",
|
||||
'<a href="/account/%s/comments#comment-%s">' | format(
|
||||
username,
|
||||
comment.ID
|
||||
),
|
||||
commented_at.strftime("%Y-%m-%d %H:%M"),
|
||||
"</a>"
|
||||
) | safe
|
||||
}}
|
||||
{% if comment.Editor %}
|
||||
{% set edited_on = comment.EditedTS | dt | as_timezone(timezone) %}
|
||||
<span class="edited">
|
||||
({{ "edited on %s by %s" | tr
|
||||
| format(edited_on.strftime('%Y-%m-%d %H:%M'),
|
||||
'<a href="/account/%s">%s</a>' | format(
|
||||
comment.Editor.Username, comment.Editor.Username))
|
||||
| safe
|
||||
}})
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "partials/comment_actions.html" %}
|
||||
</h4>
|
||||
|
||||
{% include "partials/comment_content.html" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
100
templates/partials/comment_actions.html
Normal file
100
templates/partials/comment_actions.html
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
{% set pkgbasename = comment.PackageBase.Name %}
|
||||
|
||||
{% if not comment.Deleter %}
|
||||
{% if request.user.has_credential('CRED_COMMENT_DELETE', approved=[comment.User]) %}
|
||||
<form class="delete-comment-form"
|
||||
method="post"
|
||||
action="/pkgbase/{{ pkgbasename }}/comments/{{ comment.ID }}/delete"
|
||||
>
|
||||
<fieldset style="display:inline;">
|
||||
<input type="hidden"
|
||||
name="next"
|
||||
value="{{ request.url.path }}" />
|
||||
<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 %}
|
||||
|
||||
{% if request.user.has_credential('CRED_COMMENT_EDIT', approved=[comment.User]) %}
|
||||
<a id="comment-edit-link-{{ comment.ID }}"
|
||||
{# /pkgbase/{name}/comments/{id}/edit #}
|
||||
href="/pkgbase/{{ pkgbasename }}/comments/{{ comment.ID }}/edit?{{ {'next': request.url.path} | urlencode }}"
|
||||
class="edit-comment"
|
||||
title="{{ 'Edit comment' | tr }}"
|
||||
>
|
||||
<img src="/images/pencil.min.svg" alt="{{ 'Edit comment' | tr }}"
|
||||
width="11" height="11">
|
||||
</a>
|
||||
|
||||
{# Set the edit event listener for this link. We must do this here
|
||||
so that we can utilize Jinja2's values. #}
|
||||
<script type="text/javascript" nonce="{{ request.user.nonce }}">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
let link = document.getElementById("comment-edit-link-{{ comment.ID }}");
|
||||
let fn = function(event) {
|
||||
return handleEditCommentClick(event, "{{ comment.PackageBase.Name }}");
|
||||
};
|
||||
link.addEventListener("click", fn);
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% if request.user.has_credential("CRED_COMMENT_PIN", approved=[comment.PackageBase.Maintainer]) %}
|
||||
{% if comment.PinnedTS %}
|
||||
<form class="pin-comment-form"
|
||||
method="post"
|
||||
action="/pkgbase/{{ comment.PackageBase.Name }}/comments/{{ comment.ID }}/unpin"
|
||||
>
|
||||
<fieldset style="display:inline;">
|
||||
<input type="hidden" name="next" value="{{ request.url.path }}" />
|
||||
<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/{{ comment.PackageBase.Name }}/comments/{{ comment.ID }}/pin"
|
||||
>
|
||||
<fieldset style="display:inline;">
|
||||
<input type="hidden" name="next" value="{{ request.url.path }}" />
|
||||
<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/{{ comment.PackageBase.Name }}/comments/{{ comment.ID }}/undelete"
|
||||
>
|
||||
<fieldset style="display:inline;">
|
||||
<input type="hidden" name="next" value="{{ request.url.path }}" />
|
||||
<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 %}
|
||||
15
templates/partials/comment_content.html
Normal file
15
templates/partials/comment_content.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
|
||||
{% set article_cls = "article-content" %}
|
||||
{% if comment.Deleter %}
|
||||
{% set article_cls = "%s %s" | format(article_cls, "comment-deleted") %}
|
||||
{% endif %}
|
||||
|
||||
<div id="comment-{{ comment.ID }}-content" class="{{ article_cls }}">
|
||||
<div>
|
||||
{% if comment.RenderedComment %}
|
||||
{{ comment.RenderedComment | safe }}
|
||||
{% else %}
|
||||
{{ comment.Comments }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -15,5 +15,8 @@
|
|||
<!-- Include local typeahead -->
|
||||
<script type="text/javascript" src="/static/js/typeahead.js"></script>
|
||||
|
||||
<!-- On-the-fly comment editing functions -->
|
||||
<script type="text/javascript" src="/static/js/comment-edit.js"></script>
|
||||
|
||||
<title>AUR ({{ language }}) - {{ title | tr }}</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue