From 0390ea34e62e15d8c0448b8f6f448a16ceb5a547 Mon Sep 17 00:00:00 2001
From: Jan Steemann <jan@arangodb.com>
Date: Thu, 13 Nov 2014 11:31:12 +0100
Subject: [PATCH] hide system applications by default

---
 CHANGELOG                                     |  5 +
 .../js/templates/applicationsView.ejs         |  8 +-
 .../frontend/js/templates/foxxActiveView.ejs  |  1 -
 .../frontend/js/views/applicationsView.js     | 95 +++++++++++--------
 4 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 282dbad55d..f405dcf4e0 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,6 +1,11 @@
 v2.3.0 (XXXX-XX-XX)
 -------------------
 
+* hide system applications in **Applications** tab by default
+
+  Display of system applications can be toggled by using the *system applications* 
+  toggle in the UI.
+
 * added HTTP REST API for managing tasks (`/_api/tasks`)
 
 * allow passing character lists as optional parameter to AQL functions `TRIM`,
diff --git a/js/apps/system/aardvark/frontend/js/templates/applicationsView.ejs b/js/apps/system/aardvark/frontend/js/templates/applicationsView.ejs
index 6cd33b3f84..d057236f8a 100644
--- a/js/apps/system/aardvark/frontend/js/templates/applicationsView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/applicationsView.ejs
@@ -39,12 +39,12 @@
           </label>
         </a></li>
 
-        <!--li><a href="#">
+        <li><a href="#">
           <label class="checkbox checkboxLabel">
-            <input class="css-checkbox" type="checkbox" id="checkInactive">
-            <label class="css-label"></label>Inactive
+            <input class="css-checkbox" type="checkbox" id="checkSystem">
+            <label class="css-label"></label>System applications
           </label>
-        </a></li>-->
+        </a></li>
       </ul>
 
       <!--
diff --git a/js/apps/system/aardvark/frontend/js/templates/foxxActiveView.ejs b/js/apps/system/aardvark/frontend/js/templates/foxxActiveView.ejs
index cfa577184f..eee7e4961f 100644
--- a/js/apps/system/aardvark/frontend/js/templates/foxxActiveView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/foxxActiveView.ejs
@@ -4,7 +4,6 @@
   <span class="icon_arangodb_settings2" alt="Edit application properties" title="Edit application properties"></span>
   <span class="icon_arangodb_info" title="Show API documentation"></span>
 </div>
-
 <img src="foxxes/thumbnail/<%=attributes.app %>" height="50" width="50" alt="" class="icon">
 <%if (attributes.development) {%>
   <div class="tileBadge">
diff --git a/js/apps/system/aardvark/frontend/js/views/applicationsView.js b/js/apps/system/aardvark/frontend/js/views/applicationsView.js
index e4edcf2074..dac7bdc672 100644
--- a/js/apps/system/aardvark/frontend/js/views/applicationsView.js
+++ b/js/apps/system/aardvark/frontend/js/views/applicationsView.js
@@ -10,7 +10,7 @@ window.ApplicationsView = Backbone.View.extend({
   events: {
     "click #checkDevel"         : "toggleDevel",
     "click #checkActive"        : "toggleActive",
-    "click #checkInactive"      : "toggleInactive",
+    "click #checkSystem"        : "toggleSystem",
     "click #foxxToggle"         : "slideToggle",
     "click #importFoxxToggle"   : "slideToggleImport",
     "change #importFoxx"        : "uploadSetup",
@@ -188,12 +188,14 @@ window.ApplicationsView = Backbone.View.extend({
     });
   },
 
-  toggleInactive: function() {
+  toggleSystem: function() {
+    this._showSystem = !this._showSystem;
     var self = this;
-    this._showInactive = !this._showInactive;
     _.each(this._installedSubViews, function(v) {
-      v.toggle("inactive", self._showInactive);
+      v.toggle("system", self._showSystem);
     });
+    this.createSubViews();
+    this.renderSubViews();
   },
 
   hideImportModal: function() {
@@ -232,28 +234,36 @@ window.ApplicationsView = Backbone.View.extend({
       v.undelegateEvents();
     });
 
+    this.collection.fetch({
+      success: function() {
+        self.createSubViews();
+        self.render();
+      }
+    });
+  },
+
+  createSubViews: function() {
+    var self = this;
     this._installedSubViews = { };
     this._availableSubViews = { };
 
-    this.collection.fetch({
-      success: function() {
-        self.collection.each(function (foxx) {
-          var subView;
-          if (foxx.get("type") === "app") {
-            subView = new window.FoxxInstalledView({
-              model: foxx,
-              appsView: self
-            });
-            self._availableSubViews[foxx.get('_id')] = subView;
-          } else if (foxx.get("type") === "mount") {
-            subView = new window.FoxxActiveView({
-              model: foxx,
-              appsView: self
-            });
-            self._installedSubViews[foxx.get('_id')] = subView;
-          }
+    self.collection.each(function (foxx) {
+      if (foxx.get('isSystem') && ! self._showSystem) {
+        return;
+      }
+      var subView;
+      if (foxx.get("type") === "app") {
+        subView = new window.FoxxInstalledView({
+          model: foxx,
+          appsView: self
         });
-        self.render();
+        self._availableSubViews[foxx.get('_id')] = subView;
+      } else if (foxx.get("type") === "mount") {
+        subView = new window.FoxxActiveView({
+          model: foxx,
+          appsView: self
+        });
+        self._installedSubViews[foxx.get('_id')] = subView;
       }
     });
   },
@@ -263,23 +273,41 @@ window.ApplicationsView = Backbone.View.extend({
     this._availableSubViews = {};
     this._showDevel = true;
     this._showActive = true;
-    this._showInactive = true;
+    this._showSystem = false;
     this.reload();
   },
 
   render: function() {
-
     this.collection.sort();
 
     $(this.el).html(this.template.render({}));
-    var self = this, name;
-    var versions = {};
+    this.renderSubViews();
+    this.delegateEvents();
+    $('#checkActive').attr('checked', this._showActive);
+    $('#checkDevel').attr('checked', this._showDevel);
+    $('#checkSystem').attr('checked', this._showSystem);
+    
+    var self = this;
+    _.each(this._installedSubViews, function(v) {
+      v.toggle("devel", self._showDevel);
+      v.toggle("active", self._showActive);
+      v.toggle("system", self._showSystem);
+    });
 
+    arangoHelper.fixTooltips("icon_arangodb", "left");
+    return this;
+  },
+
+  renderSubViews: function () {
+    $("#availableList").empty();
+    $("#installedList").empty();
     _.each(this._installedSubViews, function (v) {
       $("#installedList").append(v.render());
     });
+
+    var versions = { };
     _.each(this._availableSubViews, function (v) {
-      name = v.model.get("name");
+      var name = v.model.get("name");
 
       //look which installed apps have multiple versions
       if (versions[name]) {
@@ -293,6 +321,7 @@ window.ApplicationsView = Backbone.View.extend({
         };
       }
     });
+
     _.each(this._availableSubViews, function (v) {
       var name = v.model.get("name"),
       version = v.model.get("version");
@@ -324,17 +353,5 @@ window.ApplicationsView = Backbone.View.extend({
         $("#availableList").append(v.render());
       }
     });
-    this.delegateEvents();
-    $('#checkActive').attr('checked', this._showActive);
-    $('#checkInactive').attr('checked', this._showInactive);
-    $('#checkDevel').attr('checked', this._showDevel);
-    _.each(this._installedSubViews, function(v) {
-      v.toggle("devel", self._showDevel);
-      v.toggle("active", self._showActive);
-      v.toggle("inactive", self._showInactive);
-    });
-
-    arangoHelper.fixTooltips("icon_arangodb", "left");
-    return this;
   }
 });