Add Resources in Package details using new tabs system #164

Signed-off-by: Thomas Druez <[email protected]>
aboutcode-org · Aug 1, 2022 · 5ac3613 · 5ac3613
1 parent dfa06f0
commit 5ac3613
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 4 deletions.
diff --git a/scancodeio/static/main.js b/scancodeio/static/main.js
@@ -58,6 +58,26 @@ function setupCloseModalButtons() {
   }
 }
 
+// Tabs
+
+function setupTabs() {
+  const $tabLinks = getAll('.tabs a');
+
+  $tabLinks.forEach(function ($el) {
+    $el.addEventListener('click', function (event) {
+      const activeLink = document.querySelector('.tabs .is-active');
+      const activeTabContent = document.querySelector('.tab-content.is-active');
+      const target_id = $el.dataset.target;
+      const targetTabContent = document.getElementById(target_id);
+
+      activeLink.classList.remove('is-active');
+      $el.parentNode.classList.add('is-active');
+      activeTabContent.classList.remove('is-active');
+      targetTabContent.classList.add('is-active');
+    });
+  });
+}
+
 // Utils, available globally
 
 function getAll(selector) {
@@ -122,6 +142,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   setupOpenModalButtons();
   setupCloseModalButtons();
+  setupTabs();
 
   // Close modals and dropdowns on pressing "escape" key
   document.addEventListener('keydown', function (event) {

diff --git a/scanpipe/templates/scanpipe/base.html b/scanpipe/templates/scanpipe/base.html
@@ -49,7 +49,9 @@
       button.as-link {height: auto; line-height: initial; font-size: inherit;}
       .file.is-boxed.has-name .file-cta {border-width: medium; border-style: dashed;}
       progress.file-upload::before {content: 'Files upload: 'attr(value)'%'; position: absolute; top: -14%; left: 43%; color: black; font-weight: 400;}
-      .is-clipped ul {--snippet-spacing: 0.95rem; height: calc(8 * var(--snippet-spacing)); overflow: hidden;}
+      .is-clipped-list ul {--snippet-spacing: 0.95rem; height: calc(8 * var(--snippet-spacing)); overflow: hidden;}
+      .tab-content {display: none;}
+      .tab-content.is-active {display: revert !important;}
     </style>
     {% block extrahead %}{% endblock %}
   </head>

diff --git a/scanpipe/templates/scanpipe/package_detail.html b/scanpipe/templates/scanpipe/package_detail.html
@@ -16,9 +16,30 @@
           <li><a href="{% url 'project_packages' project.uuid %}">Discovered Packages</a></li>
         </ul>
       </nav>
+      <div class="tags has-addons my-3">
+        <span class="tag is-dark">Package URL</span>
+        <span class="tag is-info">{{ object }}</span>
+      </div>
     </section>
 
-    <section class="mx-5">
+    <div class="tabs is-boxed mx-5">
+      <ul>
+        <li class="is-active">
+          <a data-target="tab-details">
+            <span class="icon is-small"><i class="fas fa-info-circle"></i></span>
+            <span>Details</span>
+          </a>
+        </li>
+        <li>
+          <a data-target="tab-resources">
+            <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
+            <span>Resources</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <section id="tab-details" class="tab-content is-active mx-5">
       <dl>
         {% for field, value in package_data.items %}
           <dt class="has-text-weight-semibold">
@@ -31,5 +52,15 @@
       </dl>
     </section>
 
+    <section id="tab-resources" class="tab-content mx-5">
+      <ul>
+        {% for resource in object.resources %}
+          <li>
+            <a href="{{ resource.get_absolute_url }}">{{ resource }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </section>
+
   </div>
 {% endblock %}
diff --git a/scanpipe/templates/scanpipe/package_list.html b/scanpipe/templates/scanpipe/package_list.html
@@ -36,7 +36,7 @@
               <td title="{{ package.copyright }}">
                 {{ package.copyright|truncatechars:150|linebreaksbr }}
               </td>
-              <td class="is-clipped">
+              <td class="is-clipped-list">
                 <ul>
                   {% for resource in package.resources %}
                     <li>
@@ -66,7 +66,7 @@
 
     $showClippedButton.forEach(function ($el) {
       $el.addEventListener("click", function () {
-        $el.parentNode.classList.toggle("is-clipped");
+        $el.parentNode.classList.toggle("is-clipped-list");
         let text = $el.textContent;
         if (text.startsWith("Show"))
           $el.textContent = text.toggle("Show", "Hide");