Extract bugs table into reusable template

kiwitcms · Jun 11, 2020 · 72b3591 · 72b3591
1 parent 61ede13
commit 72b3591
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 68 deletions.
diff --git a/tcms/static/js/bugs.js b/tcms/static/js/bugs.js
@@ -0,0 +1,49 @@
+const bugDetailsCache = {}
+
+function loadBugs(selector, filter) {
+    $(selector).DataTable({
+        ajax: (data, callback, settings) => {
+            dataTableJsonRPC('TestExecution.get_links', filter, callback);
+        },
+        columns: [
+            {
+                data: null,
+                render: (data, type, full, meta) => `<a href="${data.url}" class="bug-url">${data.url}</a>`
+            },
+            {
+                data: null,
+                render: function (data, type, full, meta) {
+                    return `<a href="#bugs" data-toggle="popover" data-html="true"
+                        data-content="undefined" data-trigger="focus" data-placement="top">
+                        <span class="fa fa-info-circle"></span>
+                        </a>`;
+                }
+            },
+        ],
+        dom: "t",
+        language: {
+            loadingRecords: '<div class="spinner spinner-lg"></div>',
+            processing: '<div class="spinner spinner-lg"></div>',
+            zeroRecords: "No records found"
+        },
+        order: [[0, 'asc']],
+    });
+
+    $(selector).on('draw.dt', () => {
+        $(selector).find('[data-toggle=popover]')
+            .popovers()
+            .on('show.bs.popover', (element) => {
+                fetchBugDetails($(element.target).parents('tr').find('.bug-url')[0],
+                    element.target,
+                    bugDetailsCache);
+            });
+    });
+
+    $('[data-toggle=popover]')
+        .popovers()
+        .on('show.bs.popover', (element) => {
+            fetchBugDetails($(element.target).parents('.list-view-pf-body').find('.bug-url')[0],
+                element.target,
+                bugDetailsCache);
+        });
+}
diff --git a/tcms/templates/include/bugs_table.html b/tcms/templates/include/bugs_table.html
@@ -0,0 +1,21 @@
+{% load i18n %}
+{% load static %}
+
+<div class="col-xs-12 col-sm-6 col-md-4">
+    <div class="card-pf card-pf-accented">
+        <h2 class="card-pf-title">
+            <span class="fa fa-bug"></span>
+            {% trans heading %}
+        </h2>
+
+        <div class="card-pf-body">
+            <table class="table {{ class }}" data-show-hyperlinks="{% if show_hyperlinks %}true{% else %}false{% endif %}">
+                <thead>
+                    <tr>
+                        <th colspan="2">{% trans 'URL' %}</th>
+                    </tr>
+                </thead>
+            </table>
+        </div>
+    </div>
+</div>
diff --git a/tcms/testcases/static/testcases/js/get.js b/tcms/testcases/static/testcases/js/get.js
@@ -1,4 +1,3 @@
-const bug_details_cache = {}
 const plan_cache = {}
 
 
@@ -214,55 +213,10 @@ $(document).ready(function() {
     initAddPlan(case_id, plans_table);
 
     // bugs table
-    $('#bugs').DataTable({
-        ajax: function(data, callback, settings) {
-            dataTableJsonRPC('TestExecution.get_links',
-                             {execution__case: case_id,
-                              is_defect: true}, callback);
-        },
-        columns: [
-            {
-                data: null,
-                render: function (data, type, full, meta) {
-                    return '<a href="' + data.url + '" class="bug-url">' + data.url + '</a>';
-                }
-            },
-            {
-                data: null,
-                render: function (data, type, full, meta) {
-                    return '<a href="#bugs" data-toggle="popover" data-html="true" ' +
-                                'data-content="undefined" data-trigger="focus" data-placement="top">' +
-                                '<span class="fa fa-info-circle"></span>' +
-                           '</a>';
-                }
-            },
-        ],
-        dom: "t",
-        language: {
-            loadingRecords: '<div class="spinner spinner-lg"></div>',
-            processing: '<div class="spinner spinner-lg"></div>',
-            zeroRecords: "No records found"
-        },
-        order: [[ 0, 'asc' ]],
-    });
-
-    $('#bugs').on('draw.dt', function () {
-        $('#bugs').find('[data-toggle=popover]')
-        .popovers()
-        .on('show.bs.popover', function(element) {
-            fetchBugDetails($(element.target).parents('tr').find('.bug-url')[0],
-                            element.target,
-                            bug_details_cache);
-        });
-    });
-
-    $('[data-toggle=popover]')
-        .popovers()
-        .on('show.bs.popover', function(element) {
-            fetchBugDetails($(element.target).parents('.list-view-pf-body').find('.bug-url')[0],
-                            element.target,
-                            bug_details_cache);
-    });
+    loadBugs('.bugs', {
+        execution__case: case_id,
+        is_defect: true
+    })
 
     // executions treeview
     treeViewBind();

diff --git a/tcms/testcases/templates/testcases/get.html b/tcms/testcases/templates/testcases/get.html
@@ -129,24 +129,7 @@ <h2 class="card-pf-title" style="text-align: left">
     </div>
 
     <div class="row row-cards-pf">
-        <div class="col-xs-12 col-sm-6 col-md-4">
-            <div class="card-pf card-pf-accented">
-                <h2 class="card-pf-title">
-                    <span class="fa fa-bug"></span>
-                    {% trans 'Bugs' %}
-                </h2>
-
-                <div class="card-pf-body">
-                    <table class="table" id="bugs">
-                        <thead>
-                            <tr>
-                                <th colspan="2">{% trans 'Bug URL' %}</th>
-                            </tr>
-                        </thead>
-                    </table>
-                </div>
-            </div>
-        </div>
+        {% include "include/bugs_table.html" with heading="Bugs" class="bugs" %}
 
         <div class="col-xs-12 col-sm-6 col-md-8">
             <div class="card-pf card-pf-accented">
@@ -245,5 +228,6 @@ <h2 class="card-pf-title">
 <script src="{% static 'js/utils.js' %}"></script>
 <script src="{% static 'js/jsonrpc.js' %}"></script>
 <script src="{% static 'js/tags.js' %}"></script>
+<script src="{% static 'js/bugs.js' %}"></script>
 <script src="{% static 'testcases/js/get.js' %}"></script>
 {% endblock %}