Show image on click

.gitignore

@@ -136,3 +136,5 @@ redistributions/
 
 #Images uploaded
 static-common/images/ticket_images/*
+
+code/haitiwater/static-common/images/ticket_images/

code/haitiwater/apps/report/static/reportTableHandler.js

@@ -27,7 +27,7 @@ function getReportDatatableConfiguration(dataURL){
         "processing": true,
         "serverSide": true,
         "responsive": true,
-        "autoWidth": false,
+        "autoWidth": true,
         scrollX:        true,
         scrollCollapse: true,
         "columnDefs": [

code/haitiwater/apps/report/static/supportTicketTableHandler.js

@@ -1,20 +1,11 @@
+
+
 function drawTicketTable(){
     let baseURL = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
     let dataURL = baseURL + "/api/table/?name=ticket";
     console.log("Request data from: " + dataURL);
     $('#datatable-ticket').DataTable(getTicketDatatableConfiguration(dataURL));
 
-    let table = $('#datatable-ticket').DataTable();
-    $('#datatable-ticket tbody').on( 'click', 'tr', function () {
-        if ( $(this).hasClass('selected') ) {
-            $(this).removeClass('selected');
-        }
-        else {
-            table.$('tr.selected').removeClass('selected');
-            $(this).addClass('selected');
-        }
-    });
-
     $('#datatable-ticket tbody').on( 'click', '.remove-row', function () {
         let data = $(this).parents('tr')[0].getElementsByTagName('td');
         if (confirm("Voulez-vous supprimer: " + data[1].innerText + ' ' + data[2].innerText + ' ?')){
@@ -48,7 +39,7 @@ function getTicketDatatableConfiguration(dataURL){
         "processing": true,
         "serverSide": true,
         "responsive": true,
-        "autoWidth": false,
+        "autoWidth": true,
         scrollX:        true,
         scrollCollapse: true,
         paging:         true,
@@ -75,21 +66,24 @@ function getTicketDatatableConfiguration(dataURL){
         },
 
         //Callbacks on fetched data
-        "createdRow": function (row, data, index) {
-            $('td', row).eq(5).addClass('text-center');
-            $('td', row).eq(6).addClass('text-center');
-            //Hide actions if column hidden
-            if ($("#datatable-ticket th:last-child, #datatable-ticket td:last-child").hasClass("hidden")){
-                $('td', row).eq(8).addClass('hidden');
-            }
-        },
-        "initComplete": function(settings, json){
-            // Removes the last column (both header and body) if we cannot edit or if required by withAction argument
-            if(!(json.hasOwnProperty('editable') && json['editable'])){
-                $("#datatable-ticket th:last-child, #datatable-ticket td:last-child").addClass("hidden");
-                $("#datatable-ticket_wrapper tr:last-child th:last-child").addClass("hidden");
+        "createdRow": function (row, data, index, cells) {
+            let imageURL = '../static/' + data[7];
+            if (imageURL !== 'none'){
+                let commentDom = $('td', row).eq(5);
+                let comment = commentDom.text();
+
+                commentDom.html('<i class="far fa-image" title="Cliquez pour voir l\'image"></i>' + comment);
+                commentDom.on('click', function(){
+                    $.magnificPopup.open({
+                        type: 'image',
+                        items: {
+                        src: imageURL
+                        },
+                    });
+                })
             }
         }
     };
+
     return config;
-}
+}

code/haitiwater/apps/report/templates/support_ticket_table.html

@@ -6,7 +6,7 @@
 
 <link rel="stylesheet" href="{% static "vendor/jquery-datatables-bs3/assets/css/datatables.css" %}"/>
 <div id="datatable-ticket_wrapper" class="dataTables_wrapper no-footer">
-    <table class="table table-bordered table-responsive table-striped dataTable no-footer" id="datatable-ticket" aria-describedby="datatable-ticket_info">
+    <table class="table table-bordered table-responsive table-striped dataTable no-footer" id="datatable-ticket" aria-describedby="datatable-ticket_info" style="width:100%">
         <thead>
             <tr>
                 <th width="5%">Id</th>
@@ -14,7 +14,7 @@
                 <th width="10%">Urgence</th>
                 <th width="25%">Emplacement</th>
                 <th width="10%">Type</th>
-                <th>Commentaire</th>
+                <th width="25%">Commentaire</th>
                 <th width="10%">Statut</th>
                 <th width="5%">Actions</th>
             </tr>