Refactor the Inventory tab as async #3

Signed-off-by: tdruez <[email protected]>
aboutcode-org · Dec 14, 2023 · ff9a217 · ff9a217
1 parent b17eee1
commit ff9a217
Show file tree

Hide file tree

Showing 5 changed files with 306 additions and 234 deletions.
diff --git a/product_portfolio/templates/product_portfolio/product_details.html b/product_portfolio/templates/product_portfolio/product_details.html
@@ -205,4 +205,89 @@
       });
     </script>
   {% endif %}
+
+  {% if purldb_enabled %}
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        document.getElementById('check-package-versions').addEventListener('click', function (event) {
+          event.preventDefault();
+          let checkPackageLink = this;
+          checkPackageLink.classList.add("disabled");
+
+          document.querySelectorAll("#tab_inventory tbody tr").forEach(function (row) {
+            row.style.display = 'none';
+          });
+
+          let newVersionRow = document.createElement('tr');
+          newVersionRow.className = 'spinner new-version';
+          newVersionRow.innerHTML = '<td colspan="100">' +
+            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ' +
+            'Checking new Package versions...' +
+            '</td>';
+
+          document.querySelector("#tab_inventory tbody").insertBefore(newVersionRow, document.querySelector("#tab_inventory tbody").firstChild);
+          document.querySelector('button[data-bs-target="#tab_inventory"]').click();
+
+          let spinnerTd = document.querySelector("tr.spinner > td");
+
+          function handleSuccess(data) {
+            if (data['success']) {
+              spinnerTd.innerHTML =
+                'Version check completed. ' +
+                '<a id="show-all-items" href="#">Show All Items</a> / ' +
+                '<a id="show-new-version" href="#">Show New Version Alerts</a>';
+
+              document.getElementById('show-all-items').addEventListener('click', function () {
+                document.querySelectorAll("#tab_inventory tbody tr").forEach(function (row) {
+                  if (!row.classList.contains("extra-details")) {
+                    row.style.display = '';
+                  }
+                });
+                return false;
+              });
+
+              document.getElementById('show-new-version').addEventListener('click', function () {
+                document.querySelectorAll("#tab_inventory tbody tr").forEach(function (row) {
+                  if (!row.classList.contains("new-version")) {
+                    row.style.display = 'none';
+                  }
+                });
+                return false;
+              });
+
+              let upgradeAvailable = data['upgrade_available'];
+              upgradeAvailable.forEach(function (value) {
+                let td = document.querySelector(`[data-purl="${value.purl}"]`);
+                if (td) {
+                  td.insertAdjacentHTML('beforeend', `
+                    <div>
+                      <a class="text-success" href="/purldb/${value.latest_version_uuid}/" target="_blank">
+                        <i class="fas fa-arrow-alt-circle-up"></i> Version ${value.latest_version} available
+                      </a>
+                    </div>
+                  `);
+                  td.parentElement.classList.add('new-version');
+                  td.parentElement.style.display = '';
+                }
+              });
+            }
+          }
+
+          fetch("{{ product.get_check_package_version_url }}", { method: 'GET' })
+            .then(response => {
+              if (!response.ok) {
+                throw new Error('Network response was not ok');
+              }
+              return response.json();
+            })
+            .then(data => handleSuccess(data))
+            .catch(error => {
+              console.error('Error fetching data:', error);
+              spinnerTd.innerHTML = 'Error.';
+            });
+
+        })
+      });
+    </script>
+  {% endif %}
 {% endblock %}
diff --git a/product_portfolio/templates/product_portfolio/tabs/tab_codebase.html b/product_portfolio/templates/product_portfolio/tabs/tab_codebase.html
@@ -13,7 +13,7 @@
         </form>
       </li>
       <li class="nav-item">
-        <div class="h6 mt-2 mb-0 smaller">{{ paginator.count|intcomma }} results</div>
+        <div class="h6 mt-2 mb-0 smaller">{{ page_obj.paginator.count|intcomma }} results</div>
       </li>
     </ul>
   </div>

diff --git a/product_portfolio/templates/product_portfolio/tabs/tab_inventory.html b/product_portfolio/templates/product_portfolio/tabs/tab_inventory.html
@@ -5,8 +5,20 @@
 
 {% spaceless %}
 <div class="row align-items-end">
+  <div class="col mb-3">
+    <ul class="nav nav-pills">
+      <li class="nav-item">
+        <form id="tab-codebase-search-form" class="mt-md-0 me-sm-2">
+          <input style="width: 250px;" type="text" class="form-control form-control-sm" id="tab-inventory-search-input" name="inventory-q" placeholder="Search inventory" aria-label="Search" autocomplete="off" value="{{ search_query|escape }}">
+        </form>
+      </li>
+      <li class="nav-item">
+        <div class="h6 mt-2 mb-0 smaller">{{ page_obj.paginator.count|intcomma }} results (xx total)</div>
+      </li>
+    </ul>
+  </div>
   <div class="col-auto">
-    {% include 'pagination/object_list_pagination.html' with page_obj=values.page_obj previous_url=values.previous_url next_url=values.next_url %}
+    {% include 'pagination/object_list_pagination.html' %}
   </div>
 </div>
 
@@ -40,7 +52,7 @@
     </tr>
   </thead>
   <tbody>
-    {% for feature, relationships in values.inventory_items.items %}
+    {% for feature, relationships in inventory_items.items %}
       {% if feature %}
         <tr>
           <td colspan="100" class="sub-header"><strong>{{ feature }}</strong></td>
@@ -216,89 +228,4 @@
     {% endfor %}
   </tbody>
 </table>
-{% endspaceless %}
-
-{% if purldb_enabled %}
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    document.getElementById('check-package-versions').addEventListener('click', function (event) {
-      event.preventDefault();
-      let checkPackageLink = this;
-      checkPackageLink.classList.add("disabled");
-
-      document.querySelectorAll("#tab_inventory tbody tr").forEach(function (row) {
-        row.style.display = 'none';
-      });
-
-      let newVersionRow = document.createElement('tr');
-      newVersionRow.className = 'spinner new-version';
-      newVersionRow.innerHTML = '<td colspan="100">' +
-        '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ' +
-        'Checking new Package versions...' +
-        '</td>';
-
-      document.querySelector("#tab_inventory tbody").insertBefore(newVersionRow, document.querySelector("#tab_inventory tbody").firstChild);
-      document.querySelector('button[data-bs-target="#tab_inventory"]').click();
-
-      let spinnerTd = document.querySelector("tr.spinner > td");
-
-      function handleSuccess(data) {
-        if (data['success']) {
-          spinnerTd.innerHTML =
-            'Version check completed. ' +
-            '<a id="show-all-items" href="#">Show All Items</a> / ' +
-            '<a id="show-new-version" href="#">Show New Version Alerts</a>';
-
-          document.getElementById('show-all-items').addEventListener('click', function () {
-            document.querySelectorAll("#tab_inventory tbody tr").forEach(function (row) {
-              if (!row.classList.contains("extra-details")) {
-                row.style.display = '';
-              }
-            });
-            return false;
-          });
-
-          document.getElementById('show-new-version').addEventListener('click', function () {
-            document.querySelectorAll("#tab_inventory tbody tr").forEach(function (row) {
-              if (!row.classList.contains("new-version")) {
-                row.style.display = 'none';
-              }
-            });
-            return false;
-          });
-
-          let upgradeAvailable = data['upgrade_available'];
-          upgradeAvailable.forEach(function (value) {
-            let td = document.querySelector(`[data-purl="${value.purl}"]`);
-            if (td) {
-              td.insertAdjacentHTML('beforeend', `
-                <div>
-                  <a class="text-success" href="/purldb/${value.latest_version_uuid}/" target="_blank">
-                    <i class="fas fa-arrow-alt-circle-up"></i> Version ${value.latest_version} available
-                  </a>
-                </div>
-              `);
-              td.parentElement.classList.add('new-version');
-              td.parentElement.style.display = '';
-            }
-          });
-        }
-      }
-
-      fetch("{{ product.get_check_package_version_url }}", { method: 'GET' })
-        .then(response => {
-          if (!response.ok) {
-            throw new Error('Network response was not ok');
-          }
-          return response.json();
-        })
-        .then(data => handleSuccess(data))
-        .catch(error => {
-          console.error('Error fetching data:', error);
-          spinnerTd.innerHTML = 'Error.';
-        });
-
-    })
-  });
-</script>
-{% endif %}
+{% endspaceless %}
diff --git a/product_portfolio/urls.py b/product_portfolio/urls.py
@@ -21,6 +21,7 @@
 from product_portfolio.views import ProductSendAboutFilesView
 from product_portfolio.views import ProductTabCodebaseView
 from product_portfolio.views import ProductTabImportsView
+from product_portfolio.views import ProductTabInventoryView
 from product_portfolio.views import ProductUpdateView
 from product_portfolio.views import PullProjectDataFromScanCodeIOView
 from product_portfolio.views import add_customcomponent_ajax_view
@@ -90,6 +91,7 @@ def product_path(path_segment, view):
     *product_path("import_manifest", ImportManifestView.as_view()),
     *product_path("tab_codebase", ProductTabCodebaseView.as_view()),
     *product_path("tab_imports", ProductTabImportsView.as_view()),
+    *product_path("tab_inventory", ProductTabInventoryView.as_view()),
     *product_path("pull_project_data", PullProjectDataFromScanCodeIOView.as_view()),
     path(
         "<str:dataspace>/<str:name>/<str:version>/",