[RFC/PATCH 3/3] patch-detail: add functionality for comment status updates
Raxel Gutierrez
raxel at google.com
Fri Jul 23 07:35:43 AEST 2021
Use new comment detail REST API endpoint to update the addressed field
value when "Addressed" or "Unaddressed" buttons are clicked. After, the
request is made, the appearance of the comment status label and buttons
are toggled appropriately.
Signed-off-by: Raxel Gutierrez <raxel at google.com>
---
htdocs/css/style.css | 15 ++++--
htdocs/js/submission.js | 52 +++++++++++++++++++
patchwork/templates/patchwork/submission.html | 42 +++++++--------
templates/base.html | 2 +-
4 files changed, 85 insertions(+), 26 deletions(-)
create mode 100644 htdocs/js/submission.js
diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index ff34ff5..2f63b9a 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -27,6 +27,10 @@ pre {
top: 17em;
}
+.hidden {
+ display: none;
+}
+
/* Bootstrap overrides */
.navbar-inverse .navbar-brand > a {
@@ -306,7 +310,7 @@ table.patchmeta tr th, table.patchmeta tr td {
font-family: "DejaVu Sans Mono", fixed;
}
-#comment-status-bar {
+div[id^="comment-status-bar-"] {
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -316,7 +320,7 @@ table.patchmeta tr th, table.patchmeta tr td {
margin: 0px 8px;
}
-#comment-action-addressed, #comment-action-unaddressed {
+button[id^=comment-action] {
background-color: var(--light-color);
border-radius: 4px;
}
@@ -329,11 +333,16 @@ table.patchmeta tr th, table.patchmeta tr td {
border-color: var(--warning-color);
}
-#comment-action-addressed:hover, #comment-action-unaddressed:hover {
+#comment-action-addressed:hover {
background-color: var(--success-color);
color: var(--light-color);
}
+#comment-action-unaddressed:hover {
+ background-color: var(--warning-color);
+ color: var(--light-color);
+}
+
.quote {
color: #007f00;
}
diff --git a/htdocs/js/submission.js b/htdocs/js/submission.js
new file mode 100644
index 0000000..79b677d
--- /dev/null
+++ b/htdocs/js/submission.js
@@ -0,0 +1,52 @@
+import { updateProperty } from "./rest.js";
+
+$( document ).ready(function() {
+ function toggle_div(link_id, headers_id, label_show, label_hide) {
+ const link = document.getElementById(link_id)
+ const headers = document.getElementById(headers_id)
+
+ const hidden = headers.style['display'] == 'none';
+
+ if (hidden) {
+ link.innerHTML = label_hide || 'hide';
+ headers.style['display'] = 'block';
+ } else {
+ link.innerHTML = label_show || 'show';
+ headers.style['display'] = 'none';
+ }
+ }
+
+ $("button[id^='comment-action']").click((event) => {
+ const patchId = document.getElementById("patch").dataset.patchId;
+ const commentId = event.target.parentElement.dataset.commentId;
+ const url = "/api/patches/" + patchId + "/comments/" + commentId + "/";
+ const data = {'addressed': event.target.value} ;
+ const updateMessage = {
+ 'none': "No comments updated",
+ 'some': "1 comment updated",
+ };
+ updateProperty(url, data, updateMessage);
+ $("div[id^='comment-status-bar-'][data-comment-id='"+commentId+"']").toggleClass("hidden");
+ });
+
+ // Click listener to show/hide headers
+ document.getElementById("toggle-patch-headers").addEventListener("click", function() {
+ toggle_div("toggle-patch-headers", "patch-headers");
+ });
+
+ // Click listener to expand/collapse series
+ document.getElementById("toggle-patch-series").addEventListener("click", function() {
+ toggle_div("toggle-patch-series", "patch-series", "expand", "collapse");
+ });
+
+ // Click listener to show/hide related patches
+ document.getElementById("toggle-related").addEventListener("click", function() {
+ toggle_div("toggle-related", "related");
+ });
+
+ // Click listener to show/hide related patches from different projects
+ document.getElementById("toggle-related-outside").addEventListener("click", function() {
+ toggle_div("toggle-related-outside", "related-outside", "show from other projects");
+ });
+
+});
\ No newline at end of file
diff --git a/patchwork/templates/patchwork/submission.html b/patchwork/templates/patchwork/submission.html
index 4109442..b741282 100644
--- a/patchwork/templates/patchwork/submission.html
+++ b/patchwork/templates/patchwork/submission.html
@@ -5,6 +5,11 @@
{% load syntax %}
{% load person %}
{% load patch %}
+{% load static %}
+
+{% block headers %}
+ <script type="module" src="{% static "js/submission.js" %}"></script>
+{% endblock %}
{% block title %}{{submission.name}}{% endblock %}
@@ -63,10 +68,7 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
<tr>
<th>Headers</th>
<td>
- <button
- id="toggle-patch-headers"
- onclick="javascript:toggle_div('toggle-patch-headers', 'patch-headers')"
- >show</button>
+ <button id="toggle-patch-headers">show</button>
<div id="patch-headers" class="patch-headers" style="display:none;">
<pre>{{submission.headers}}</pre>
</div>
@@ -79,10 +81,7 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
<a href="{% url 'patch-list' project_id=project.linkname %}?series={{ submission.series.id }}">
{{ submission.series.name }}
</a>
- <button
- id="toggle-patch-series"
- onclick="javascript:toggle_div('toggle-patch-series', 'patch-series', 'expand', 'collapse')"
- >expand</button>
+ <button id="toggle-patch-series">expand</button>
<div id="patch-series" class="submission-list" style="display:none;">
<ul>
{% with submission.series.cover_letter as cover %}
@@ -118,10 +117,7 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
<tr>
<th>Related</th>
<td>
- <button
- id="toggle-related"
- onclick="javascript:toggle_div('toggle-related', 'related')"
- >show</button>
+ <button id="toggle-related">show</button>
<div id="related" class="submission-list" style="display:none;">
<ul>
{% for sibling in related_same_project %}
@@ -134,10 +130,7 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
</li>
{% endfor %}
{% if related_different_project %}
- <button
- id="toggle-related-outside"
- onclick="javascript:toggle_div('toggle-related-outside', 'related-outside', 'show from other projects')"
- >show from other projects</button>
+ <button id="toggle-related-outside">show from other projects</button>
<div id="related-outside" class="submission-list" style="display:none;">
{% for sibling in related_outside %}
<li>
@@ -306,32 +299,37 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
<a href="{% url 'comment-redirect' comment_id=item.id %}">#{{ forloop.counter }}</a>
</span>
{% if item.addressed %}
- <div id="comment-status-bar">
+ <div id="comment-status-bar-addressed" data-comment-id={{item.id}}>
+ {% else %}
+ <div id="comment-status-bar-addressed" class="hidden" data-comment-id={{item.id}}>
+ {% endif %}
<div id="comment-status-label" class="text-success mx-3">
<span id="comment-status-icon" class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
Addressed
</div>
{% if editable %}
- <button id="comment-action-unaddressed" class="text-warning">
+ <button id="comment-action-unaddressed" class="text-warning" value="false">
<span id="comment-action-icon" class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
Unaddressed
</button>
{% endif %}
</div>
+ {% if item.addressed %}
+ <div id="comment-status-bar-unaddressed" class="hidden" data-comment-id={{item.id}}>
{% else %}
- <div id="comment-status-bar">
+ <div id="comment-status-bar-unaddressed" data-comment-id={{item.id}}>
+ {% endif %}
<div id="comment-status-label" class="text-warning mx-3">
<span id="comment-status-icon" class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
Unaddressed
</div>
{% if editable %}
- <button id="comment-action-addressed" class="text-success">
+ <button id="comment-action-addressed" class="text-success" value="true">
<span id="comment-action-icon" class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
Addressed
</button>
{% endif %}
</div>
- {% endif %}
</div>
<pre class="content">
{{ item|commentsyntax }}
@@ -344,7 +342,7 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
{% include "patchwork/partials/download-buttons.html" %}
<h2>Patch</h2>
</div>
-<div id="patch" class="patch">
+<div id="patch" data-patch-id={{submission.id}} class="patch">
<pre class="content">
{{ submission|patchsyntax }}
</pre>
diff --git a/templates/base.html b/templates/base.html
index 8accb4c..a95a11b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -113,7 +113,7 @@
{% endfor %}
</div>
{% endif %}
- <div class="container-fluid">
+ <div id="main-content" class="container-fluid">
{% block body %}
{% endblock %}
</div>
--
2.32.0.432.gabb21c7263-goog
More information about the Patchwork
mailing list