implement vlan hide/show when list is larger than 10

Netdisco/public/css/style.css

@@ -134,11 +134,32 @@ form .clearfix.success input {
   border-top: 8px solid #F89406;
 }
 
+/* draw little up arrow to the right of a label for collapsed list */
+.cell-arrow-up {
+  float: left;
+  margin-top: 4px;
+  margin-right: 6px;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 8px solid #F89406;
+}
+
+/* draw little down arrow to the right of a label for collapsed list */
+.cell-arrow-down {
+  float: left;
+  margin-top: 4px;
+  margin-right: 6px;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-top: 8px solid #F89406;
+}
+
 /* nudge the port name/vlan filter over a little */
 .nd_port_query {
   margin-left: -2px !important;
 }
 
+/* for ports table to center cell content */
 .center_cell {
   text-align: center;
 }

Netdisco/views/ajax/device/ports.tt

@@ -9,8 +9,10 @@
     </tr>
   </thead>
   </tbody>
+    [% SET rownum = 0 %]
     [% FOREACH row in results %]
     [% NEXT IF params.free AND NOT row.is_free(params.age_num, params.age_unit) %]
+    [% SET rownum = rownum + 1 %]
     <tr>
       <td>
         [% IF row.up_admin == 'down' %]
@@ -58,22 +60,28 @@
       [% END %]
       [% IF params.c_vlan %]
       <td class="center_cell">
-        <a class="nd_linkcell" href="/search?tab=vlan&q=[% row.vlan | uri %]">[% row.vlan | html_entity %]</a>
+        <a class="nd_linkcell"
+          href="/search?tab=vlan&q=[% row.vlan | uri %]">[% row.vlan | html_entity %]</a>
       </td>
       [% END %]
       [% IF params.c_vmember %]
       <td>
-        [% SET count = 1 %]
+        [%# this is really ugly because for some reason
+            I could not get size/max to work on row.tagged_vlans.all %]
+        [% SET output = '' %]
+        [% SET count  = 0  %]
         [% FOREACH vlan IN row.tagged_vlans %]
-          <a href="/search?tab=vlan&q=[% vlan.vlan | uri %]">[% vlan.vlan | html_entity %]</a>
+          [% SET output = output _
+            '<a href="/search?tab=vlan&q=' _ vlan.vlan _ '">' _ vlan.vlan _ '</a>' %]
+          [% SET output = output _ ', ' IF NOT loop.last %]
           [% SET count = count + 1 %]
-          [% IF count > 25 %]
-            (more...)
-            [% LAST %]
-          [% ELSE %]
-            [% ', ' IF NOT loop.last %]
-          [% END %]
         [% END %]
+        [% IF count > 10 %]
+        [% SET output = '<a href="#" class="nd_linkcell nd_collapse_vlans">'
+          _ 'Show VLANs</a><div class="nd_collapse_pre_hidden">' _ output %]
+        [% SET output = output _ '</div>' %]
+        [% END %]
+        [% output %]
       </td>
       [% END %]
       [% IF params.c_connected %]

Netdisco/views/inc/js/device.js

@@ -66,6 +66,15 @@
           }
           // looks good, update the bookmark for this search
           $(mark).attr('href', '/device?' + query);
+
+          // enable collapser on any large vlan lists
+          $('.nd_collapse_vlans').collapser({
+            target: 'siblings',
+            effect: 'slide',
+            changeText: true,
+            expandHtml: '<div class="nd_collapser">Show VLANs<div class="cell-arrow-up"></div></div>',
+            collapseHtml: '<div class="nd_collapser">Hide VLANs<div class="cell-arrow-down"></div></div>',
+          });
         }
       );
     }