Feat/api tags filter (#19)

* API category filtering

* Fixing checkbox sidenav and grid column layout

* Updating apis grid style and layout

* Not all changes were pushed

* Adding custom.css to layout.jade, changes are in global file, config

* Updating media queries for responsive

* Fixing condition were there are no categories in the eft column.

* removing custom.css inclusion

* New layout for API tags filtering

* Fix package version

* layout fix

* version revert

* Implement review comments

* Make sure the layout looks good if no tags are used

package.json

@@ -41,4 +41,4 @@
     "esversion": 6
   },
   "name": "portal"
-}
+}

routes/apis.js

@@ -26,28 +26,58 @@ router.get('/', function (req, res, next) {
                 return next(err);
             var apiList = results.getApis.apis;
             // Markdownify short descriptions.
+            var apiTags = [];
             for (var i = 0; i < apiList.length; ++i) {
                 if (apiList[i].desc)
                     apiList[i].desc = marked(apiList[i].desc);
+                if(apiList[i].tags && apiList[i].tags.length>0){
+                  for (var j = 0; j < apiList[i].tags.length; ++j) {
+                    apiTags.push(apiList[i].tags[j]);
+                  }
+                }
+            }
+            if(req.query["filter"]){
+              apiList = apiList.filter(function(api) {
+                if(!api.tags) return false;
+                for(var i=0; i< api.tags.length; i++){
+                  if(req.query[api.tags[i]]){
+                    return true;
+                  }
+                }
+                return false;
+              });
             }
             var desc = results.getDesc;
-
             if (!utils.acceptJson(req)) {
                 res.render('apis',
                     {
                         authUser: req.user,
+                        params: req.query,
                         glob: req.app.portalGlobals,
                         route: '/apis',
                         title: 'APIs',
                         desc: marked(desc),
-                        apilist: apiList
+                        apilist: apiList,
+                        apiTags: unique(apiTags)
                     });
             } else {
                 res.json(apiList);
             }
         });
 });
 
+function unique(arr) {
+    var u = {}, a = [];
+    for(var i = 0, l = arr.length; i < l; ++i){
+        if(!u.hasOwnProperty(arr[i])) {
+            a.push(arr[i]);
+            u[arr[i]] = 1;
+        }
+    }
+    return a;
+}
+
+
 router.get('/:api', function (req, res, next) {
     debug("get('/:api')");
 
@@ -109,7 +139,7 @@ router.get('/:api', function (req, res, next) {
         // TODO: This makes me a little unhappy, as this is Kong specific.
         // The "right" thing to do here would be to have the API, and more specific
         // even the Kong Adapter (or something) translate this into this Request URI.
-        // Idea: Make this part of the generic configuration, as it would be a 
+        // Idea: Make this part of the generic configuration, as it would be a
         // necessary configuration option for any API gateway.
         var apiRequestUri = apiConfig.api.uris[0];
         var nw = req.app.portalGlobals.network;
@@ -302,7 +332,7 @@ router.get('/:api/swagger', cors(corsOptionsDelegate), function (req, res, next)
         }
     };
 
-    // Let's call the API, it has all the data we need.    
+    // Let's call the API, it has all the data we need.
     var swaggerUri = '/apis/' + apiId + '/swagger';
 
     // Do we have a forUser query parameter?

views/apis.jade

@@ -1,48 +1,85 @@
 extends layout
 
+mixin checkBox(source, value)
+  - var inputId = source
+  - var inputValue = value
+  - var label = source
+  .checkbox
+    label
+      if inputValue
+        input(name='#{inputId}' id='#{inputId}' class='tag' checked='checked' type='checkbox')
+        | !{label}
+      else
+        input(name='#{inputId}' id='#{inputId}' class='tag' type='checkbox')
+        | !{label}
+
+mixin apiCategories(apiTags, params)
+    .panel.panel-default
+      .panel-body.wicked-api-body
+        form(role='form' action='/apis' method='GET')
+          .form-group
+            b API Categories
+            input(name='filter' id='filter' value='on' type='hidden')
+            each tag, i in apiTags
+              +checkBox(tag, params[tag])
+            button(type='submit' onclick='checkCategoryFilter()').btn.btn-primary Filter
+             
+            a(class="btn btn-primary" href="/apis" role="button") Clear
+
 mixin apiDef(anApi)
     .col-md-4
-        .panel.panel-default
-            .panel-body.wicked-api-body
-                if glob.views.apis.showApiIcon
-                    img(src='/images/api-icon.png')
-                if anApi.auth == 'oauth2'
-                    a(href='/help/apis' target='_blank')
-                        img(src='/images/oauth2-icon-32.png' align='right' title='API is secured over OAuth 2.0')
-                else if anApi.auth == 'none'
-                else
-                    a(href='/help/apis' target='_blank')
-                        img(src='/images/key-icon-32.png' align='right' title='API is secured over API keys')
-                a(href='/apis/#{anApi.id}')
-                    h4= anApi.name
-                if anApi.deprecated
-                    p(style='color:red;') <b>Deprecated</b>
-                p!= anApi.desc
-                a(class="btn btn-default" href="/apis/#{anApi.id}" role="button") Information &raquo;
+      .panel.panel-default
+        .panel-body.wicked-api-body
+          if glob.views.apis.showApiIcon
+            img(src='/images/api-icon.png')
+          if anApi.auth == 'oauth2'
+            a(href='/help/apis' target='_blank')
+              img(src='/images/oauth2-icon-32.png' align='right' title='API is secured over OAuth 2.0')
+          else if anApi.auth == 'none'
+          else
+            a(href='/help/apis' target='_blank')
+              img(src='/images/key-icon-32.png' align='right' title='API is secured over API keys')
+          a(href='/apis/#{anApi.id}')
+            h4= anApi.name
+          if anApi.deprecated
+            p(style='color:red;') <b>Deprecated</b>
+          p!= anApi.desc
+          a(class="btn btn-default" href="/apis/#{anApi.id}" role="button") Information &raquo;
+
+
+
+block scripts
+  script(type='text/javascript').
+    function checkCategoryFilter() {
+      if($(".tag:checked").length <= 0){
+        $("input[id='filter']").remove();
+      }
+    }
 
 block content
     .jumbotron.wicked-api-title
-        .container.wicked-title-container
-            h1= title
+      .container.wicked-title-container
+        h1= title
 
-            p= glob.views.apis.titleTagline
+        p= glob.views.apis.titleTagline
 
     .container.wicked-container
-        if desc
-            p!= desc
-
-        p &nbsp;
-
+      if desc
+        p!= desc
+      p &nbsp;
+      div(class="row")
         - var length = apilist.length
-
-        each api, i in apilist
-            if (i % 3 == 0)
-                .row
+        - var apiClass = "col-md-12"
+        if (apiTags.length > 0)
+          div(class="col-md-3")
+            +apiCategories(apiTags, params)
+          - apiClass = "col-md-9"
+        div(class=apiClass)
+            each api, i in apilist
+                if (i % 3 == 0)
+                  div(class="row")
                     +apiDef(apilist[i])
                     if (i+1) < length
-                        +apiDef(apilist[i+1])
+                      +apiDef(apilist[i+1])
                     if (i+2) < length
-                        +apiDef(apilist[i+2])
-                .row
-                    .col-md-1
-                        p &nbsp;
+                      +apiDef(apilist[i+2])