feat(detector): toggle file and shows smell type

Author: marabesi

detector/src/reporters/layout/example.html

@@ -82,7 +82,8 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
         <tbody>
           {{#each data}}
           <tr
-            class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
+            onclick="toggleDetails({{@index}})"
+            class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 cursor-pointer">
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
               {{this.fileName}}
             </th>
@@ -93,8 +94,8 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
               {{this.smells.length}}
             </td>
           </tr>
-          <tr class="hidden">
-            <td colspan="3" class="p-4" data-testid="{{@index}}-code">
+          <tr class="hidden" id="details-{{@index}}">
+            <td colspan="3" class="p-0" data-testid="{{@index}}-code">
               {{#each smells}}
                 <div data-testid="{{@../index}}-smell-name-{{@index}}">{{this.type}}</div>
               {{/each }}
@@ -105,12 +106,7 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
         </tbody>
       </table>
     </div>
-
   </div>
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-  <script>hljs.highlightAll();</script>
-
   <script>
     var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
     var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
@@ -153,6 +149,17 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
 
     });
   </script>
+
+  <script>
+    function toggleDetails(index) {
+      var details = document.getElementById('details-' + index);
+      details.classList.toggle('hidden');
+    }
+  </script>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script>hljs.highlightAll();</script>
+
 </body>
 
 </html>