display sync services

dashboard-ui/scripts/plugincatalogpage.js

@@ -132,7 +132,7 @@
             }
 
             var installedPlugin = plugin.isApp ? null : installedPlugins.filter(function (ip) {
-                return ip.Name == plugin.name;
+                return ip.Id == plugin.guid;
             })[0];
 
             html += "<div class='cardText'>";

dashboard-ui/scripts/pluginspage.js

@@ -108,6 +108,15 @@
         return html;
     }
 
+    function renderPlugins(page, plugins) {
+
+        ApiClient.getJSON(ApiClient.getUrl("dashboard/configurationpages") + "?pageType=PluginConfiguration").done(function (configPages) {
+
+            populateList(page, plugins, configPages);
+
+        });
+    }
+
     function populateList(page, plugins, pluginConfigurationPages) {
 
         plugins = plugins.sort(function (plugin1, plugin2) {
@@ -198,14 +207,9 @@
 
         Dashboard.showLoadingMsg();
 
-        var promise1 = ApiClient.getInstalledPlugins();
+        ApiClient.getInstalledPlugins().done(function (plugins) {
-
-        var promise2 = ApiClient.getJSON(ApiClient.getUrl("dashboard/configurationpages") + "?pageType=PluginConfiguration");
-
-        $.when(promise1, promise2).done(function (response1, response2) {
-
-            populateList(page, response1[0], response2[0]);
 
+            renderPlugins(page, plugins);
         });
     }
 
@@ -214,4 +218,8 @@
         reloadList(this);
     });
 
+    window.PluginsPage = {
+        renderPlugins: renderPlugins
+    };
+
 })(jQuery, window);

dashboard-ui/scripts/syncservices.js

@@ -11,11 +11,27 @@
         var promise2 = ApiClient.getInstalledPlugins();
 
         $.when(promise1, promise2).done(function (response1, response2) {
-            populateList(page, response1[0], response2[0]);
+            renderInstalled(page, response1[0], response2[0]);
+            renderCatalog(page, response1[0], response2[0]);
         });
     }
 
-    function populateList(page, availablePlugins, installedPlugins) {
+    function renderInstalled(page, availablePlugins, installedPlugins) {
+
+        installedPlugins = installedPlugins.filter(function (i) {
+
+            var catalogEntry = availablePlugins.filter(function (a) {
+                return a.guid == i.Id;
+            })[0];
+
+            return catalogEntry && catalogEntry.category == 'Sync';
+
+        });
+
+        PluginsPage.renderPlugins(page, installedPlugins);
+    }
+
+    function renderCatalog(page, availablePlugins, installedPlugins) {
 
         PluginCatalog.renderCatalog({
 

dashboard-ui/syncservices.html

@@ -16,8 +16,7 @@
                 </div>
 
                 <div class="detailSectionHeader">${HeaderInstalledServices}</div>
-                <p style="display:none;" class="noServicesInstalled">${MessageNoServicesInstalled}</p>
+                <div class="installedPlugins"></div>
-                <div class="installed"></div>
                 <br />
                 <br />
                 <br />