From 9980321bc9b88381641f36cca82d968442bb64c0 Mon Sep 17 00:00:00 2001
From: PouyaMohseni <pouyamohseniii@gmail.com>
Date: Fri, 14 Nov 2025 22:31:47 -0500
Subject: [PATCH 1/2] fix(detail.html): format aliases and remove source for
 labels

- display aliases using nested rows
- show verification status and action options for aliases
- remove source information as part of improvements related to #443

resolves #423, resolves #420
---
 .../VIM/templates/instruments/detail.html     | 142 +++++++++++++-----
 1 file changed, 102 insertions(+), 40 deletions(-)

diff --git a/web-app/django/VIM/templates/instruments/detail.html b/web-app/django/VIM/templates/instruments/detail.html
index a3e5f3b6..dd374963 100644
--- a/web-app/django/VIM/templates/instruments/detail.html
+++ b/web-app/django/VIM/templates/instruments/detail.html
@@ -65,12 +65,6 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                         <th scope="col" class="w-20">
                           <span>Name</span>
                         </th>
-                        <th scope="col" class="w-20">
-                          <span>Alias</span>
-                        </th>
-                        <th scope="col" class="w-20">
-                          <span>Source</span>
-                        </th>
                         {% if user.is_authenticated %}
                           <th scope="col" class="w-25">
                             <span>Verification Status</span>
@@ -82,6 +76,15 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                             </i>
                           </th>
                         {% endif %}
+                        {% if user.is_authenticated %}
+                          <th scope="col" class="w-30">
+                            <span>Alias</span>
+                          </th>
+                        {% else %}
+                          <th scope="col" class="w-20">
+                            <span>Alias</span>
+                          </th>
+                        {% endif %}
                         {% if user.is_authenticated %}
                           <th scope="col">
                             <span class="name-form-item">Actions</span>
@@ -105,21 +108,6 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                               </div>
                             </div>
                           </td>
-                          <td class="text-start">
-                            <div class="d-flex flex-row justify-content-between align-items-center gap-2 edit-container"
-                                 dir="{{ lang.html_direction }}">
-                              <div class="alias-list d-flex flex-wrap gap-1">
-                                {% for alias in names.aliases %}
-                                  <span class="alias-item notranslate">{{ alias.name }}</span>
-                                {% endfor %}
-                              </div>
-                            </div>
-                          </td>
-                          <td>
-                            <div class="d-flex flex-row justify-content-between align-items-center gap-2 edit-container">
-                              <span class="view-field flex-grow-1">{{ names.label.source_name }}</span>
-                            </div>
-                          </td>
                           {% if user.is_authenticated %}
                             <td>
                               <div class="d-flex flex-row justify-content-between align-items-center gap-2 edit-container">
@@ -135,8 +123,48 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                               </div>
                             </td>
                           {% endif %}
+                          <td>
+                            <div class="d-flex flex-column gap-2">
+                              {% for alias in names.aliases %}
+                                <div class="p-2 rounded bg-light border d-flex justify-content-between align-items-center">
+                                  <div class="d-flex flex-column flex-grow-1">
+                                    <span class="notranslate">{{ alias.name }}</span>
+                                    {% if user.is_authenticated %}
+                                      <div>
+                                        {% if alias.verification_status == 'verified' %}
+                                          <span class="badge rounded-pill bg-success">Verified</span>
+                                        {% elif alias.verification_status == 'unverified' %}
+                                          <span class="badge rounded-pill bg-secondary">Unverified</span>
+                                        {% elif alias.verification_status == 'rejected' %}
+                                          <span class="badge rounded-pill bg-danger">Rejected</span>
+                                        {% else %}
+                                          <span class="badge rounded-pill bg-warning text-dark">Under Review</span>
+                                        {% endif %}
+                                      </div>
+                                    {% endif %}
+                                  </div>
+                                  {% if user.is_authenticated %}
+                                    <!-- TODO: Add a "More" button that links to the instrument name/alias in a popup -->
+                                    <div class="action-buttons ms-2">
+                                      <button class="btn btn-primary btn-sm"
+                                              data-bs-toggle="modal"
+                                              data-bs-target="#deleteNameModal"
+                                              data-instrument-language="{{ alias.label.language.en_label }}"
+                                              data-instrument-name="{{ alias.label.name }}"
+                                              data-instrument-source="{{ alias.label.source_name }}"
+                                              data-instrument-id="{{ alias.label.id }}"
+                                              data-instrument-pk="{{ instrument.pk }}">
+                                        Delete
+                                      </button>
+                                    </div>
+                                  {% endif %}
+                                </div>
+                              {% endfor %}
+                            </div>
+                          </td>
                           {% if user.is_authenticated %}
                             <td>
+                              <!-- TODO: Add a "More" button that links to the instrument name/alias in a popup -->
                               <div class="action-buttons">
                                 <button class="btn btn-primary"
                                         data-bs-toggle="modal"
@@ -176,24 +204,9 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                           </div>
                         </div>
                       </div>
-                      <!-- Aliases -->
-                      <div class="mb-1">
-                        <div class="fw-bold text-muted small">Alias</div>
-                        <div class="alias-list d-flex flex-wrap gap-1 text-start notranslate"
-                             dir="{{ lang.html_direction }}">
-                          {% for alias in names.aliases %}
-                            <span class="alias-item">{{ alias.name }}</span>
-                          {% endfor %}
-                        </div>
-                      </div>
-                      <!-- Source -->
-                      <div class="mb-1">
-                        <div class="fw-bold text-muted small">Source</div>
-                        <span class="view-field">{{ names.label.source_name }}</span>
-                      </div>
                       {% if user.is_authenticated %}
                         <!-- Status column -->
-                        <div class="col-12">
+                        <div class="col-12 mb-1">
                           <div class="fw-bold text-muted small mb-1">
                             Verification Status
                             <i class="bi bi-info-circle"
@@ -216,8 +229,55 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                           </div>
                         </div>
                       {% endif %}
+                      <!-- Aliases -->
+                      <div class="mb-1">
+                        {% if names.aliases %}
+                          <div class="fw-bold text-muted small">Alias</div>
+                          <div class="alias-list">
+                            <div class="d-flex flex-column gap-2">
+                              {% for alias in names.aliases %}
+                                <div class="p-2 rounded bg-light border d-flex justify-content-between align-items-center">
+                                  <div class="d-flex flex-column flex-grow-1">
+                                    <span class="notranslate">{{ alias.name }}</span>
+                                    {% if user.is_authenticated %}
+                                      <div>
+                                        {% if alias.verification_status == 'verified' %}
+                                          <span class="badge rounded-pill bg-success">Verified</span>
+                                        {% elif alias.verification_status == 'unverified' %}
+                                          <span class="badge rounded-pill bg-secondary">Unverified</span>
+                                        {% elif alias.verification_status == 'rejected' %}
+                                          <span class="badge rounded-pill bg-danger">Rejected</span>
+                                        {% else %}
+                                          <span class="badge rounded-pill bg-warning text-dark">Under Review</span>
+                                        {% endif %}
+                                      </div>
+                                    {% endif %}
+                                  </div>
+                                  {% if user.is_authenticated %}
+                                    <!-- TODO: Add a "More" button that links to the instrument name/alias in a popup -->
+                                    <div class="action-buttons ms-2">
+                                      <button class="btn btn-primary btn-sm"
+                                              data-bs-toggle="modal"
+                                              data-bs-target="#deleteNameModal"
+                                              data-instrument-language="{{ alias.label.language.en_label }}"
+                                              data-instrument-name="{{ alias.label.name }}"
+                                              data-instrument-source="{{ alias.label.source_name }}"
+                                              data-instrument-id="{{ alias.label.id }}"
+                                              data-instrument-pk="{{ instrument.pk }}">
+                                        Delete
+                                      </button>
+                                    </div>
+                                  {% endif %}
+                                </div>
+                              {% endfor %}
+                            </div>
+                          </div>
+                        {% endif %}
+                      </div>
+                      <!-- Action -->
                       {% if user.is_authenticated %}
-                        <div class="action-buttons mt-1">
+                        <!-- TODO: Add a "More" button that links to the instrument name/alias in a popup -->
+                        <div class="action-buttons my-2">
                           <button class="btn btn-primary"
                                   data-bs-toggle="modal"
                                   data-bs-target="#deleteNameModal"
@@ -249,7 +309,8 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                     {% else %}
                       <a href="{% url 'main:login' %}?next={{ request.path }}"
                          class="btn btn-primary"
-                         role="button">Add Instrument Name</a>
+                         role="button">Add
+                      Instrument Name</a>
                     {% endif %}
                   </div>
                 </div>
@@ -268,7 +329,8 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                        class="rounded mw-50" />
                   <a class="ms-2"
                      href="{% static instrument.default_image.url %}"
-                     target="_blank">View image in full size</a>
+                     target="_blank">View image in full
+                  size</a>
                 </div>
               </td>
             </tr>

From 84a995eb004714ff808b3cad834411a4c656be56 Mon Sep 17 00:00:00 2001
From: PouyaMohseni <pouyamohseniii@gmail.com>
Date: Thu, 11 Dec 2025 18:04:03 -0500
Subject: [PATCH 2/2] fix: show alias list in one line seperated by `|` when
 the user is not logged in

---
 .../VIM/templates/instruments/detail.html     | 139 +++++++++---------
 1 file changed, 73 insertions(+), 66 deletions(-)

diff --git a/web-app/django/VIM/templates/instruments/detail.html b/web-app/django/VIM/templates/instruments/detail.html
index dd374963..edbb9a06 100644
--- a/web-app/django/VIM/templates/instruments/detail.html
+++ b/web-app/django/VIM/templates/instruments/detail.html
@@ -123,44 +123,51 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                               </div>
                             </td>
                           {% endif %}
-                          <td>
-                            <div class="d-flex flex-column gap-2">
+                          <td class="text-start">
+                            {% if user.is_authenticated %}
                               {% for alias in names.aliases %}
-                                <div class="p-2 rounded bg-light border d-flex justify-content-between align-items-center">
+                                <div class="p-1 rounded bg-light border d-flex justify-content-between align-items-center my-1">
                                   <div class="d-flex flex-column flex-grow-1">
                                     <span class="notranslate">{{ alias.name }}</span>
-                                    {% if user.is_authenticated %}
-                                      <div>
-                                        {% if alias.verification_status == 'verified' %}
-                                          <span class="badge rounded-pill bg-success">Verified</span>
-                                        {% elif alias.verification_status == 'unverified' %}
-                                          <span class="badge rounded-pill bg-secondary">Unverified</span>
-                                        {% elif alias.verification_status == 'rejected' %}
-                                          <span class="badge rounded-pill bg-danger">Rejected</span>
-                                        {% else %}
-                                          <span class="badge rounded-pill bg-warning text-dark">Under Review</span>
-                                        {% endif %}
-                                      </div>
-                                    {% endif %}
-                                  </div>
-                                  {% if user.is_authenticated %}
-                                    <!-- TODO: Add a "More" button that links to the instrument name/alias in a popup -->
-                                    <div class="action-buttons ms-2">
-                                      <button class="btn btn-primary btn-sm"
-                                              data-bs-toggle="modal"
-                                              data-bs-target="#deleteNameModal"
-                                              data-instrument-language="{{ alias.label.language.en_label }}"
-                                              data-instrument-name="{{ alias.label.name }}"
-                                              data-instrument-source="{{ alias.label.source_name }}"
-                                              data-instrument-id="{{ alias.label.id }}"
-                                              data-instrument-pk="{{ instrument.pk }}">
-                                        Delete
-                                      </button>
+                                    <div>
+                                      {% if alias.verification_status == 'verified' %}
+                                        <span class="badge rounded-pill bg-success">Verified</span>
+                                      {% elif alias.verification_status == 'unverified' %}
+                                        <span class="badge rounded-pill bg-secondary">Unverified</span>
+                                      {% elif alias.verification_status == 'rejected' %}
+                                        <span class="badge rounded-pill bg-danger">Rejected</span>
+                                      {% else %}
+                                        <span class="badge rounded-pill bg-warning text-dark">Under Review</span>
+                                      {% endif %}
                                     </div>
-                                  {% endif %}
+                                  </div>
+                                  <div class="action-buttons ms-2">
+                                    <button class="btn btn-primary btn-sm"
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#deleteNameModal"
+                                            data-instrument-language="{{ alias.label.language.en_label }}"
+                                            data-instrument-name="{{ alias.label.name }}"
+                                            data-instrument-source="{{ alias.label.source_name }}"
+                                            data-instrument-id="{{ alias.label.id }}"
+                                            data-instrument-pk="{{ instrument.pk }}">
+                                      Delete
+                                    </button>
+                                  </div>
                                 </div>
                               {% endfor %}
-                            </div>
+                            {% else %}
+                              <div class="d-flex flex-row justify-content-between align-items-center gap-2 edit-container"
+                                   dir="{{ lang.html_direction }}">
+                                <div class="alias-list d-flex flex-wrap gap-1">
+                                  {% for alias in names.aliases %}
+                                    <span class="alias-item notranslate">
+                                      {{ alias.name }}
+                                      {% if not forloop.last %}|{% endif %}
+                                    </span>
+                                  {% endfor %}
+                                </div>
+                              </div>
+                            {% endif %}
                           </td>
                           {% if user.is_authenticated %}
                             <td>
@@ -233,44 +240,44 @@ <h2 class="notranslate">{{ active_instrument_label.name }}</h2>
                       <div class="mb-1">
                         {% if names.aliases %}
                           <div class="fw-bold text-muted small">Alias</div>
-                          <div class="alias-list">
-                            <div class="d-flex flex-column gap-2">
-                              {% for alias in names.aliases %}
-                                <div class="p-2 rounded bg-light border d-flex justify-content-between align-items-center">
+                          <div class="alias-list" dir="{{ lang.html_direction }}">
+                            {% for alias in names.aliases %}
+                              {% if user.is_authenticated %}
+                                <div class="p-2 rounded bg-light border d-flex justify-content-between align-items-center my-1">
                                   <div class="d-flex flex-column flex-grow-1">
                                     <span class="notranslate">{{ alias.name }}</span>
-                                    {% if user.is_authenticated %}
-                                      <div>
-                                        {% if alias.verification_status == 'verified' %}
-                                          <span class="badge rounded-pill bg-success">Verified</span>
-                                        {% elif alias.verification_status == 'unverified' %}
-                                          <span class="badge rounded-pill bg-secondary">Unverified</span>
-                                        {% elif alias.verification_status == 'rejected' %}
-                                          <span class="badge rounded-pill bg-danger">Rejected</span>
-                                        {% else %}
-                                          <span class="badge rounded-pill bg-warning text-dark">Under Review</span>
-                                        {% endif %}
-                                      </div>
-                                    {% endif %}
-                                  </div>
-                                  {% if user.is_authenticated %}
-                                    <!-- TODO: Add a "More" button that links to the instrument name/alias in a popup -->
-                                    <div class="action-buttons ms-2">
-                                      <button class="btn btn-primary btn-sm"
-                                              data-bs-toggle="modal"
-                                              data-bs-target="#deleteNameModal"
-                                              data-instrument-language="{{ alias.label.language.en_label }}"
-                                              data-instrument-name="{{ alias.label.name }}"
-                                              data-instrument-source="{{ alias.label.source_name }}"
-                                              data-instrument-id="{{ alias.label.id }}"
-                                              data-instrument-pk="{{ instrument.pk }}">
-                                        Delete
-                                      </button>
+                                    <div>
+                                      {% if alias.verification_status == 'verified' %}
+                                        <span class="badge rounded-pill bg-success">Verified</span>
+                                      {% elif alias.verification_status == 'unverified' %}
+                                        <span class="badge rounded-pill bg-secondary">Unverified</span>
+                                      {% elif alias.verification_status == 'rejected' %}
+                                        <span class="badge rounded-pill bg-danger">Rejected</span>
+                                      {% else %}
+                                        <span class="badge rounded-pill bg-warning text-dark">Under Review</span>
+                                      {% endif %}
                                     </div>
-                                  {% endif %}
+                                  </div>
+                                  <!-- TODO: Add a "More" button that links to the instrument name/alias in a popup -->
+                                  <div class="action-buttons ms-2">
+                                    <button class="btn btn-primary btn-sm"
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#deleteNameModal"
+                                            data-instrument-language="{{ alias.label.language.en_label }}"
+                                            data-instrument-name="{{ alias.label.name }}"
+                                            data-instrument-source="{{ alias.label.source_name }}"
+                                            data-instrument-id="{{ alias.label.id }}"
+                                            data-instrument-pk="{{ instrument.pk }}">
+                                      Delete
+                                    </button>
+                                  </div>
                                 </div>
-                              {% endfor %}
-                            </div>
+                              {% else %}
+                                <span class="alias-item">{{ alias.name }}
+                                  {% if not forloop.last %}|{% endif %}
+                                </span>
+                              {% endif %}
+                            {% endfor %}
                           </div>
                         {% endif %}
                       </div>