From cdcb675a2491c6d9e73b7b5ca63129eb29b87c09 Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Tue, 9 Jun 2026 14:07:27 -0400
Subject: [PATCH] 06/09 Remove issue details update notes, add comment section

---
 app/templates/issues/view.html | 139 +++++++++++++++++++++++----------
 1 file changed, 98 insertions(+), 41 deletions(-)

diff --git a/app/templates/issues/view.html b/app/templates/issues/view.html
index 91cb97c..7bd2f5e 100644
--- a/app/templates/issues/view.html
+++ b/app/templates/issues/view.html
@@ -1,8 +1,30 @@
 {% extends "base.html" %}
 {% block title %}Issue #{{ issue.id }}{% endblock %}
+
+{% block extra_css %}
+<style>
+  .comment-avatar {
+    width: 38px; height: 38px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: .9rem; color: #fff;
+    flex-shrink: 0;
+  }
+  .comment-bubble {
+    background: #f8f9fa; border: 1px solid #e9ecef;
+    border-radius: .5rem; padding: .75rem 1rem;
+    flex-grow: 1;
+  }
+</style>
+{% endblock %}
+
 {% block content %}
+{% set can_edit = current_user.role in ['admin','director'] or issue.assigned_to == current_user.id %}
+
 <div class="row">
+  {# ══════════════════════════════════ LEFT COLUMN ══════════════════════════════════ #}
   <div class="col-lg-8">
+
+    {# ── Issue details ──────────────────────────────────────────────────── #}
     <div class="card shadow-sm mb-4">
       <div class="card-header d-flex justify-content-between align-items-center
                   bg-{{ 'danger' if issue.severity in ['critical','high'] else 'warning' if issue.severity == 'medium' else 'secondary' }}
@@ -133,35 +155,81 @@
       </div>
     </div>
 
-    {# ── Update History ─────────────────────────────────────────────────── #}
-    {% if comments %}
-    <div class="card shadow-sm mb-4">
-      <div class="card-header bg-light">
-        <h6 class="mb-0" id="update-history"><i class="bi bi-clock-history"></i> Update History</h6>
+    {# ── Comments ───────────────────────────────────────────────────────── #}
+    <div class="card shadow-sm mb-4" id="comments-section">
+      <div class="card-header bg-light d-flex justify-content-between align-items-center">
+        <h6 class="mb-0">
+          <i class="bi bi-chat-left-text me-1"></i>Comments
+          <span class="badge bg-secondary rounded-pill ms-1">{{ comments|length }}</span>
+        </h6>
       </div>
-      <ul class="list-group list-group-flush">
+
+      {# Comment list #}
+      {% if comments %}
+      <div class="p-3 pb-0" id="comments-list">
+        {% set avatar_colors = ['#4f46e5','#0891b2','#059669','#d97706','#dc2626','#7c3aed','#db2777'] %}
         {% for c in comments %}
-        <li class="list-group-item">
-          <div class="d-flex justify-content-between align-items-center mb-1">
-            <span class="fw-semibold text-dark">
-              <i class="bi bi-person-circle"></i> {{ c.author.display_name }}
-            </span>
-            <span class="d-flex align-items-center gap-2">
-              <span class="badge bg-{{ 'success' if c.status_at_time == 'resolved' else 'warning text-dark' if c.status_at_time == 'in_progress' else 'danger' }} rounded-pill" style="font-size:.65rem;">
-                {{ c.status_at_time|replace('_',' ')|title }}
-              </span>
-              <small class="text-muted">{{ c.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
-            </span>
+        {% set avatar_color = avatar_colors[c.author.id % (avatar_colors | length)] %}
+        <div class="d-flex gap-3 mb-3">
+          <div class="comment-avatar" style="background:{{ avatar_color }};">
+            {{ c.author.display_name[0] | upper }}
           </div>
-          <p class="mb-0 text-secondary" style="white-space:pre-wrap; font-size:.9rem;">{{ c.body }}</p>
-        </li>
+          <div class="comment-bubble">
+            <div class="d-flex justify-content-between align-items-start flex-wrap gap-1 mb-1">
+              <div class="d-flex align-items-center gap-2">
+                <span class="fw-semibold" style="font-size:.9rem;">{{ c.author.display_name }}</span>
+                {% if c.author.role == 'customer' %}
+                <span class="badge bg-info text-dark" style="font-size:.65rem;">Customer</span>
+                {% else %}
+                <span class="badge bg-secondary" style="font-size:.65rem;">{{ c.author.role|replace('_',' ')|title }}</span>
+                {% endif %}
+              </div>
+              <div class="d-flex align-items-center gap-2">
+                <span class="badge bg-{{ 'success' if c.status_at_time == 'resolved' else 'info text-dark' if c.status_at_time == 'pending_verification' else 'warning text-dark' if c.status_at_time == 'in_progress' else 'danger' }}"
+                      style="font-size:.65rem;">
+                  {{ c.status_at_time|replace('_',' ')|title }}
+                </span>
+                <small class="text-muted">{{ c.created_at.strftime('%b %d, %Y %H:%M') }}</small>
+              </div>
+            </div>
+            <p class="mb-0" style="white-space:pre-wrap; font-size:.9rem;">{{ c.body }}</p>
+          </div>
+        </div>
         {% endfor %}
-      </ul>
+      </div>
+      <hr class="mx-3 my-0">
+      {% endif %}
+
+      {# Add Comment form — submits to the same view POST endpoint #}
+      {% if can_edit %}
+      <div class="card-body">
+        <p class="fw-semibold small mb-2">Add Comment</p>
+        <form method="post">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+          {# Keep current status and assigned_to so the route doesn't change them #}
+          <input type="hidden" name="status" value="{{ issue.status }}">
+          <input type="hidden" name="assigned_to" value="{{ issue.assigned_to or 0 }}">
+          <div class="mb-2">
+            <textarea name="update_notes" class="form-control" rows="3"
+                      placeholder="Write a comment…" required></textarea>
+          </div>
+          <button type="submit" class="btn btn-primary btn-sm">
+            <i class="bi bi-send me-1"></i>Post Comment
+          </button>
+        </form>
+      </div>
+      {% elif current_user.role != 'customer' %}
+      <div class="card-body py-2">
+        <p class="text-muted small mb-0">
+          <i class="bi bi-lock me-1"></i>Only assigned staff can add comments.
+        </p>
+      </div>
+      {% endif %}
     </div>
-    {% endif %}
 
-  </div>
+  </div>{# /col-lg-8 #}
 
+  {# ══════════════════════════════════ RIGHT COLUMN ═════════════════════════════════ #}
   <div class="col-lg-4">
 
     {# ── Follow / Unfollow ──────────────────────────────────────────────── #}
@@ -195,7 +263,6 @@
     </div>
 
     {# ── Update Form ────────────────────────────────────────────────────── #}
-    {% set can_edit = current_user.role in ['admin','director'] or issue.assigned_to == current_user.id %}
     {% if can_edit %}
     <div class="card shadow-sm">
       <div class="card-header bg-light"><h6 class="mb-0">Update Issue</h6></div>
@@ -212,10 +279,6 @@
             {{ form.assigned_to(class="form-select") }}
           </div>
           {% endif %}
-          <div class="mb-3">
-            {{ form.update_notes.label(class="form-label fw-semibold") }}
-            {{ form.update_notes(class="form-control", rows=3, placeholder="Optional update notes…") }}
-          </div>
           <div class="mb-3">
             {{ form.result_notes.label(class="form-label fw-semibold") }}
             {{ form.result_notes(class="form-control", rows=3,
@@ -249,7 +312,8 @@
       </div>
     </div>
     {% endif %}
-  </div>
+
+  </div>{# /col-lg-4 #}
 </div>
 
 <div class="d-flex align-items-center gap-2 mt-2">
@@ -265,7 +329,6 @@
 </div>
 
 {% if current_user.role in ['admin', 'director'] %}
-<!-- Delete Confirmation Modal -->
 <div class="modal fade" id="deleteIssueModal" tabindex="-1" aria-labelledby="deleteIssueModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -305,27 +368,21 @@
 (function () {
     'use strict';
 
-    // ── Immediate bell refresh after a successful update ──────────────────
-    // After form submit + redirect, Flask flashes 'Issue updated.' and the
-    // URL stays at /issues/<id>. We detect the flash message presence and
-    // call the global fetchNotifications() defined in base.html so the bell
-    // badge updates instantly without waiting for the 60-second poll cycle.
+    // Refresh bell badge after a successful update
     if (document.querySelector('.alert-success')) {
         if (typeof fetchNotifications === 'function') {
             fetchNotifications();
         }
     }
 
-    // ── Auto-scroll to Update History after save ──────────────────────────
-    // If there's a success flash AND comments exist, scroll the history
-    // section into view so the newly added comment is immediately visible.
+    // Scroll to bottom of comments list after posting a comment
     if (document.querySelector('.alert-success')) {
-        var historyEl = document.getElementById('update-history');
-        if (historyEl) {
-            historyEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        var section = document.getElementById('comments-section');
+        if (section) {
+            section.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     }
 })();
 </script>
 {% endblock %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}