From 58fc8a5ec19be1696c3093c264b12384e057d62d Mon Sep 17 00:00:00 2001
From: Juan Rocha <juan.rocha@nc3.lu>
Date: Thu, 19 Sep 2024 11:19:57 +0200
Subject: [PATCH] [template]Improved model  contact render

---
 static/js/incidents.js                  | 19 +++++++++++++++++++
 static/js/incidents_observer.js         | 18 ------------------
 static/js/incidents_regulator.js        | 19 -------------------
 templates/modals/contacts_incident.html |  6 ++++--
 templates/observer/incidents.html       | 12 ++++--------
 templates/regulator/incidents.html      |  6 ++++--
 6 files changed, 31 insertions(+), 49 deletions(-)
 delete mode 100644 static/js/incidents_observer.js

diff --git a/static/js/incidents.js b/static/js/incidents.js
index 2924d06..94f8497 100644
--- a/static/js/incidents.js
+++ b/static/js/incidents.js
@@ -97,4 +97,23 @@ $(document).ready(function () {
         let deleteUrl = deleteUrlBase.replace('0', incidentId);
         modalDeleteButton.attr('href', deleteUrl);
     });
+
+    $('.contacts_incident').on("click", function () {
+        let $this = $(this);
+        const contacts = $this.data('contacts');
+        if (contacts.contact_name == contacts.technical_name) {
+            $('#technical-card').remove();
+            let both_subtitle = $('#translated-both-contact-text').text();
+            $('#card-subtitle-contact').text(both_subtitle);
+        }
+
+        $('#contact-name').text(contacts.contact_name);
+        $('#contact-jobtitle').text(contacts.contact_jobtitle);
+        $('#contact-email').text(contacts.contact_email);
+        $('#contact-telephone').text(contacts.contact_telephone);
+        $('#technical-name').text(contacts.technical_name);
+        $('#technical-jobtitle').text(contacts.technical_jobtitle);
+        $('#technical-email').text(contacts.technical_email);
+        $('#technical-telephone').text(contacts.technical_telephone);
+    });
 });
diff --git a/static/js/incidents_observer.js b/static/js/incidents_observer.js
deleted file mode 100644
index b7ada00..0000000
--- a/static/js/incidents_observer.js
+++ /dev/null
@@ -1,18 +0,0 @@
-$(document).ready(function () {
-    $('.contacts_incident').on("click", function () {
-        let $this = $(this);
-        const contacts = $this.data('contacts');
-        if (contacts.contact_name == contacts.technical_name) {
-            $('#technical-card').remove();
-            let both_subtitle = $('#translated-both-contact-text').text();
-            $('#card-subtitle-contact').text(both_subtitle);
-        }
-
-        $('#contact-name').text(contacts.contact_name);
-        $('#contact-email').text(contacts.contact_email);
-        $('#contact-telephone').text(contacts.contact_telephone);
-        $('#technical-name').text(contacts.technical_name);
-        $('#technical-email').text(contacts.technical_email);
-        $('#technical-telephone').text(contacts.technical_telephone);
-    });
-});
\ No newline at end of file
diff --git a/static/js/incidents_regulator.js b/static/js/incidents_regulator.js
index 2c47d2d..a8f9b5b 100644
--- a/static/js/incidents_regulator.js
+++ b/static/js/incidents_regulator.js
@@ -1,22 +1,3 @@
-$(document).ready(function () {
-    $('.contacts_incident').on("click", function () {
-        let $this = $(this);
-        const contacts = $this.data('contacts');
-        if (contacts.contact_name == contacts.technical_name) {
-            $('#technical-card').remove();
-            let both_subtitle = $('#translated-both-contact-text').text();
-            $('#card-subtitle-contact').text(both_subtitle);
-        }
-
-        $('#contact-name').text(contacts.contact_name);
-        $('#contact-email').text(contacts.contact_email);
-        $('#contact-telephone').text(contacts.contact_telephone);
-        $('#technical-name').text(contacts.technical_name);
-        $('#technical-email').text(contacts.technical_email);
-        $('#technical-telephone').text(contacts.technical_telephone);
-    });
-});
-
 function getCookie(name) {
     let cookieValue = null;
     if (document.cookie && document.cookie !== '') {
diff --git a/templates/modals/contacts_incident.html b/templates/modals/contacts_incident.html
index f5e07b4..8e7929c 100644
--- a/templates/modals/contacts_incident.html
+++ b/templates/modals/contacts_incident.html
@@ -13,7 +13,8 @@ <h4 class="modal-title" id="contacts_incident_label">
         <div class="card" id="contact-card">
             <div class="card-body text-center">
                 <h5 class="card-title" id="contact-name"></h5>
-                <h6 class="card-subtitle text-muted" id="card-subtitle-contact">{% translate "Person in charge" %}</h6>
+                <h6 class="card-subtitle text-muted" id="contact-jobtitle"></h6>
+                <h6 class="small card-subtitle text-muted fst-italic" id="card-subtitle-contact">{% translate "Person in charge" %}</h6>
                 <span id="translated-both-contact-text" class="d-none">
                     {% translate "Person in charge and technical contact" %}
                 </span>
@@ -34,7 +35,8 @@ <h6 class="card-subtitle text-muted" id="card-subtitle-contact">{% translate "Pe
             <div class="card" >
                 <div class="card-body text-center">
                     <h5 class="card-title" id="technical-name"></h5>
-                    <h6 class="card-subtitle mb-2 text-muted">{% translate "Technical contact" %}</h6>
+                    <h6 class="card-subtitle text-muted" id="technical-jobtitle"></h6>                   
+                    <h6 class="small card-subtitle text-muted fst-italic">{% translate "Technical contact" %}</h6>
                 </div>
                 <ul class="list-group list-group-flush bg-white">
                     <li class="list-group-item">
diff --git a/templates/observer/incidents.html b/templates/observer/incidents.html
index 98b77c5..067c0fe 100644
--- a/templates/observer/incidents.html
+++ b/templates/observer/incidents.html
@@ -1,10 +1,4 @@
 {% extends 'incidents_base.html' %}
-{% load static %}
-
-{% block bootstrap5_extra_script %}
-{{ block.super }}
-<script src='{% static "js/incidents_observer.js" %}'></script>
-{% endblock %}
 
 {% load i18n %}
 {% load custom_filters %}
@@ -78,10 +72,12 @@
 {{ block.super }}
 <button class="btn text-secondary p-0 border-0 contacts_incident"
     data-contacts='{
-        "contact_name": "{{ incident.contact_title }} {{ incident.contact_firstname }} {{ incident.contact_lastname }}",
+        "contact_name": "{{ incident.contact_firstname }} {{ incident.contact_lastname }}",
+        "contact_jobtitle": "{{ incident.contact_title }}",
         "contact_email": "{{ incident.contact_email }}",
         "contact_telephone": "{{ incident.contact_telephone }}",
-        "technical_name": "{{ incident.technical_title }} {{ incident.technical_firstname }} {{ incident.technical_lastname }}",
+        "technical_name": "{{ incident.technical_firstname }} {{ incident.technical_lastname }}",
+        "technical_jobtitle": "{{ incident.technical_title }}",
         "technical_email": "{{ incident.technical_email }}",
         "technical_telephone": "{{ incident.technical_telephone }}"
     }'
diff --git a/templates/regulator/incidents.html b/templates/regulator/incidents.html
index 9cabb76..40ddfb2 100644
--- a/templates/regulator/incidents.html
+++ b/templates/regulator/incidents.html
@@ -10,10 +10,12 @@
 {{ block.super }}
 <button class="btn text-secondary p-0 border-0 contacts_incident"
     data-contacts='{
-        "contact_name": "{{ incident.contact_title }} {{ incident.contact_firstname }} {{ incident.contact_lastname }}",
+        "contact_name": "{{ incident.contact_firstname }} {{ incident.contact_lastname }}",
+        "contact_jobtitle": "{{ incident.contact_title }}",
         "contact_email": "{{ incident.contact_email }}",
         "contact_telephone": "{{ incident.contact_telephone }}",
-        "technical_name": "{{ incident.technical_title }} {{ incident.technical_firstname }} {{ incident.technical_lastname }}",
+        "technical_name": "{{ incident.technical_firstname }} {{ incident.technical_lastname }}",
+        "technical_jobtitle": "{{ incident.technical_title }}",
         "technical_email": "{{ incident.technical_email }}",
         "technical_telephone": "{{ incident.technical_telephone }}"
     }'