From patchwork Wed Jul 28 18:17:17 2021
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
X-Patchwork-Submitter: Raxel Gutierrez <raxel@google.com>
X-Patchwork-Id: 1510949
Return-Path: 
 <patchwork-bounces+incoming=patchwork.ozlabs.org@lists.ozlabs.org>
X-Original-To: incoming@patchwork.ozlabs.org
Delivered-To: patchwork-incoming@bilbo.ozlabs.org
Authentication-Results: ozlabs.org;
 spf=pass (sender SPF authorized) smtp.mailfrom=lists.ozlabs.org
 (client-ip=112.213.38.117; helo=lists.ozlabs.org;
 envelope-from=patchwork-bounces+incoming=patchwork.ozlabs.org@lists.ozlabs.org;
 receiver=<UNKNOWN>)
Authentication-Results: ozlabs.org;
	dkim=fail reason="signature verification failed" (2048-bit key;
 unprotected) header.d=google.com header.i=@google.com header.a=rsa-sha256
 header.s=20161025 header.b=CNf/gFc2;
	dkim-atps=neutral
Received: from lists.ozlabs.org (lists.ozlabs.org [112.213.38.117])
	(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
	 key-exchange X25519 server-signature RSA-PSS (4096 bits))
	(No client certificate requested)
	by ozlabs.org (Postfix) with ESMTPS id 4GZhjB4j0Fz9sXN
	for <incoming@patchwork.ozlabs.org>; Thu, 29 Jul 2021 04:17:50 +1000 (AEST)
Received: from boromir.ozlabs.org (localhost [IPv6:::1])
	by lists.ozlabs.org (Postfix) with ESMTP id 4GZhjB3RnRz3bYb
	for <incoming@patchwork.ozlabs.org>; Thu, 29 Jul 2021 04:17:50 +1000 (AEST)
Authentication-Results: lists.ozlabs.org;
	dkim=fail reason="signature verification failed" (2048-bit key;
 unprotected) header.d=google.com header.i=@google.com header.a=rsa-sha256
 header.s=20161025 header.b=CNf/gFc2;
	dkim-atps=neutral
X-Original-To: patchwork@lists.ozlabs.org
Delivered-To: patchwork@lists.ozlabs.org
Authentication-Results: lists.ozlabs.org; spf=pass (sender SPF authorized)
 smtp.mailfrom=flex--raxel.bounces.google.com
 (client-ip=2607:f8b0:4864:20::84a; helo=mail-qt1-x84a.google.com;
 envelope-from=3oj8byqukcys6pct0v33v0t.r314p8rwb36z0x787.3e0pq7.36v@flex--raxel.bounces.google.com;
 receiver=<UNKNOWN>)
Authentication-Results: lists.ozlabs.org; dkim=pass (2048-bit key;
 unprotected) header.d=google.com header.i=@google.com header.a=rsa-sha256
 header.s=20161025 header.b=CNf/gFc2; dkim-atps=neutral
Received: from mail-qt1-x84a.google.com (mail-qt1-x84a.google.com
 [IPv6:2607:f8b0:4864:20::84a])
 (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
 key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest
 SHA256)
 (No client certificate requested)
 by lists.ozlabs.org (Postfix) with ESMTPS id 4GZhhq2ndWz30GK
 for <patchwork@lists.ozlabs.org>; Thu, 29 Jul 2021 04:17:31 +1000 (AEST)
Received: by mail-qt1-x84a.google.com with SMTP id
 k2-20020ac847820000b029024ea3acef5bso1457516qtq.12
 for <patchwork@lists.ozlabs.org>; Wed, 28 Jul 2021 11:17:31 -0700 (PDT)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=google.com;
 s=20161025;
 h=date:in-reply-to:message-id:mime-version:references:subject:from:to
 :cc; bh=rSmTKtiBn0wNLNJ5tPe46wTBq2mIxSz/uNZGFkZ/nUg=;
 b=CNf/gFc2seThdXkFUGx2hW/7Wo9PB8XV4mV4HWoLkrpK7m8nJ7wK9hJDNzNCtqgKba
 PZx6kZ35LVK5qnNRx+J6vzi3Q55P5/aW9zeNqXZJ6qWP+E0I4Qp7goCxZ9yI+/yFohuo
 zp1gT3NEkZAkAmOzbL+C+GXxakf5k3QTLNWjnobnD5gB2GgFwQF4pcSMugHWfaLf/XY1
 Z+ixgIqHHyBoTVIYfNGYEekOaj/HKicHtY6VY6D7ElJzqdN9jxFGJgtuD/y00kn9wrxl
 NvSFOCOpfixxaNCZ9yg4+cD9QQCfRAeRNMr6YGPHP6BKsN2mznnLIuVYtQ3AAORD1gzF
 gsHQ==
X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
 d=1e100.net; s=20161025;
 h=x-gm-message-state:date:in-reply-to:message-id:mime-version
 :references:subject:from:to:cc;
 bh=rSmTKtiBn0wNLNJ5tPe46wTBq2mIxSz/uNZGFkZ/nUg=;
 b=uW+fBRLgl2aobSSrthuKMw0t9ONQVWtFjk48ijW9nJZNCMxMcZrW1NWpISv4Ot7F6z
 uwmnm25q/RfbMWU/5uao7Ye94aFSdLuAZudI2s03KzxG1gP7TeRYRuEjQnh9LMvxqgx1
 kN9YRzbrw262gRIGLQe64rA8690e8psMNCRl56JohXC7/thcriYqrm0a1DwgoytrCvos
 8HNCowkzTmu5c5RgRjiS+FpeFi/R/iGBYjrFT/d9mmkqnDR/eKcwvMRzWBPouC7RuKIi
 Ouige/3D1MMeO8p0kd7xBVOnl4HV6uDuIV4eaEWAw0ss3UAxnJmEgi7H5kte0a4/VQO7
 gyOw==
X-Gm-Message-State: AOAM530ijGPNwywd6N1DRF/MM4Vaj3/+FkxH8usuDGpJAtLEve9f8Yem
 zTu6QZcsb3ZvYgs7JWk5pJiOnDxZ4wBVTLmcKdu1Dbu8EPTyqkPWkEajfN5fpQ/yQcynNxcSBbA
 ftorzzUyqVkKxwlVxIxiQlJej5U2YoVi8WXIibR/gjgWIkPA6oyZF2PCxhaO8qKbS
X-Google-Smtp-Source: 
 ABdhPJylAuuFBK5QZT8dIGuh0jr+t4JtQesKE8FGimInePDPx7ZAJ48PFPTiTtmRDjM+bu5TpsdUfOtm9w==
X-Received: from raxel-pw.c.googlers.com
 ([fda3:e722:ac3:cc00:14:4d90:c0a8:2fda])
 (user=raxel job=sendgmr) by 2002:a0c:f084:: with SMTP id
 g4mr1354857qvk.52.1627496248716;
 Wed, 28 Jul 2021 11:17:28 -0700 (PDT)
Date: Wed, 28 Jul 2021 18:17:17 +0000
In-Reply-To: <20210728181718.3613124-1-raxel@google.com>
Message-Id: <20210728181718.3613124-5-raxel@google.com>
Mime-Version: 1.0
References: <20210728181718.3613124-1-raxel@google.com>
X-Mailer: git-send-email 2.32.0.554.ge1b32706d8-goog
Subject: [PATCH v2 4/5] patch-detail: add functionality for comment status
 updates
From: Raxel Gutierrez <raxel@google.com>
To: patchwork@lists.ozlabs.org
X-BeenThere: patchwork@lists.ozlabs.org
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Patchwork development <patchwork.lists.ozlabs.org>
List-Unsubscribe: <https://lists.ozlabs.org/options/patchwork>,
 <mailto:patchwork-request@lists.ozlabs.org?subject=unsubscribe>
List-Archive: <http://lists.ozlabs.org/pipermail/patchwork/>
List-Post: <mailto:patchwork@lists.ozlabs.org>
List-Help: <mailto:patchwork-request@lists.ozlabs.org?subject=help>
List-Subscribe: <https://lists.ozlabs.org/listinfo/patchwork>,
 <mailto:patchwork-request@lists.ozlabs.org?subject=subscribe>
Errors-To: patchwork-bounces+incoming=patchwork.ozlabs.org@lists.ozlabs.org
Sender: "Patchwork"
 <patchwork-bounces+incoming=patchwork.ozlabs.org@lists.ozlabs.org>

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@google.com>
---
 htdocs/css/style.css                          | 15 ++++-
 htdocs/js/submission.js                       | 52 ++++++++++++++++
 patchwork/templates/patchwork/submission.html | 61 ++++++-------------
 templates/base.html                           |  2 +-
 4 files changed, 85 insertions(+), 45 deletions(-)
 create mode 100644 htdocs/js/submission.js

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index ff34ff5..2a5c81f 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -27,6 +27,10 @@ pre {
     top: 17em;
 }
 
+.hidden {
+    visibility: hidden;
+}
+
 /* 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..8894890
--- /dev/null
+++ b/htdocs/js/submission.js
@@ -0,0 +1,52 @@
+import { updateProperty } from "./rest.js";
+
+$( document ).ready(function() {
+    function toggleDiv(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() {
+        toggleDiv("toggle-patch-headers", "patch-headers");
+    });
+
+    // Click listener to expand/collapse series
+    document.getElementById("toggle-patch-series").addEventListener("click", function() {
+        toggleDiv("toggle-patch-series", "patch-series", "expand", "collapse");
+    });
+
+    // Click listener to show/hide related patches
+    document.getElementById("toggle-related").addEventListener("click", function() {
+        toggleDiv("toggle-related", "related");
+    });
+
+    // Click listener to show/hide related patches from different projects
+    document.getElementById("toggle-related-outside").addEventListener("click", function() {
+        toggleDiv("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..e3a8909 100644
--- a/patchwork/templates/patchwork/submission.html
+++ b/patchwork/templates/patchwork/submission.html
@@ -5,29 +5,15 @@
 {% 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 %}
 
 {% block body %}
-<script>
-function toggle_div(link_id, headers_id, label_show, label_hide)
-{
-    var link = document.getElementById(link_id)
-    var headers = document.getElementById(headers_id)
-
-    var 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';
-    }
-
-}
-</script>
-
 <div>
   {% include "patchwork/partials/download-buttons.html" %}
   <h1>{{ submission.name }}</h1>
@@ -63,10 +49,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 +62,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 +98,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 +111,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 +280,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 +323,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>