From db7709c7baf2f17fbfe32c1f3a5c1fb08ebcf9aa Mon Sep 17 00:00:00 2001
From: Kevin Jump <kevin@thejumps.co.uk>
Date: Wed, 26 Jun 2019 14:00:14 +0100
Subject: [PATCH] Add Component views for common UI

---
 .../uSync8/components/uSyncProgressView.html  |  27 +++++
 .../uSync8/components/uSyncReportView.html    |  77 +++++++++++++
 .../components/uSyncReportViewComponent.js    |  63 +++++++++++
 .../components/usyncProgressViewComponent.js  |  30 +++++
 .../App_Plugins/uSync8/package.manifest       |   5 +-
 .../App_Plugins/uSync8/settings/default.html  | 104 +-----------------
 uSync8.BackOffice/uSync8.BackOffice.csproj    |   4 +
 .../uSync8/components/uSyncProgressView.html  |  27 +++++
 .../uSync8/components/uSyncReportView.html    |  77 +++++++++++++
 .../components/uSyncReportViewComponent.js    |  63 +++++++++++
 .../components/usyncProgressViewComponent.js  |  30 +++++
 .../App_Plugins/uSync8/package.manifest       |   5 +-
 .../App_Plugins/uSync8/settings/default.html  | 104 +-----------------
 13 files changed, 418 insertions(+), 198 deletions(-)
 create mode 100644 uSync8.BackOffice/App_Plugins/uSync8/components/uSyncProgressView.html
 create mode 100644 uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportView.html
 create mode 100644 uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportViewComponent.js
 create mode 100644 uSync8.BackOffice/App_Plugins/uSync8/components/usyncProgressViewComponent.js
 create mode 100644 uSync8.Site/App_Plugins/uSync8/components/uSyncProgressView.html
 create mode 100644 uSync8.Site/App_Plugins/uSync8/components/uSyncReportView.html
 create mode 100644 uSync8.Site/App_Plugins/uSync8/components/uSyncReportViewComponent.js
 create mode 100644 uSync8.Site/App_Plugins/uSync8/components/usyncProgressViewComponent.js

diff --git a/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncProgressView.html b/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncProgressView.html
new file mode 100644
index 00000000..45413a79
--- /dev/null
+++ b/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncProgressView.html
@@ -0,0 +1,27 @@
+<div>
+    <div class="flex flex-wrap justify-center items-center">
+        <div ng-repeat="handler in vm.status.Handlers"
+             class="text-center usync-handler-icon"
+             ng-class="{'usync-pending' : handler.Status == 0, 'usync-progress' : handler.Status == 1, 'usync-complete' : handler.Status == 2}"
+             ng-click="vm.setFilter(handler.ItemType)">
+            <i class="icon {{handler.Icon}}"></i>
+            <div class="usync-handler-name">{{handler.Name}}</div>
+            <div ng-if="!vm.hideLabels">
+                <div class="handler-badge badge type-complete" ng-if="handler.Changes > 0" title="{{handler.Changes}} changes">{{handler.Changes}}</div>
+                <div class="handler-badge type-complete" ng-if="handler.Changes == 0 && handler.Status == 2"><i class="icon icon-check"></i></div>
+            </div>
+        </div>
+    </div>
+    <div class="flex justify-center">
+        <div class="text-center">
+            <h4 class="usync-action-message">{{vm.status.Message}}</h4>
+            <small>{{vm.update.Message}}</small>
+            <div class="progress usync-not-animated" style="height: 3px;">
+                <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.update)}}%;" aria-valuenow="{{vm.calcPercentage(vm.update)}}" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+        </div>
+    </div>
+    <div class="progress" style="height: 1px;">
+        <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.status)}}%;" aria-valuenow="{{vm.calcPercentage(vm.status)}}" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportView.html b/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportView.html
new file mode 100644
index 00000000..de1edf2a
--- /dev/null
+++ b/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportView.html
@@ -0,0 +1,77 @@
+<div>
+    <umb-box>
+        <div class="umb-box-header flex justify-between items-center">
+            <div>
+                <div class="umb-box-header-title">{{vm.action}}</div>
+                <div class="umb-box-header-description">{{vm.countChanges(vm.results)}} changes across {{vm.results.length}} items</div>
+            </div>
+            <umb-toggle checked="vm.showAll"
+                        on-click="vm.showAll = !vm.showAll"
+                        show-labels="true"
+                        label-on="Show all"
+                        label-off="Changes only"
+                        label-position="left"
+                        ng-if="vm.runMode = 'report'"></umb-toggle>
+        </div>
+        <umb-box-content>
+            <div class="umb-table" ng-show="vm.countChanges(vm.results) > 0 || vm.showAll">
+                <div class="umb-table-head">
+                    <div class="umb-table-row">
+                        <div class="umb-table-cell">
+                        </div>
+                        <div class="umb-table-cell">
+                            Type
+                        </div>
+                        <div class="umb-table-cell umb-table__name">
+                            Name
+                        </div>
+                        <div class="umb-table-cell">
+                            Change
+                        </div>
+                        <div class="umb-table-cell">
+                            Message
+                        </div>
+                        <div class="umb-table-cell"></div>
+                    </div>
+                </div>
+                <div class="umb-table-body">
+                    <div ng-repeat="result in vm.results">
+                        <div class="umb-table-row"
+                             ng-if="vm.showChange(result.Change)">
+                            <div class="umb-table-cell">
+                                <i ng-if="result.Change == 'NoChange'" class="icon icon-check color-green"></i>
+                                <i ng-if="result.Change == 'Update'" class="icon icon-sync color-orange"></i>
+                                <i ng-if="result.Change == 'Delete'" class="icon icon-wrong color-red"></i>
+                            </div>
+                            <div class="umb-table-cell">
+                                {{vm.getTypeName(result.ItemType)}}
+                            </div>
+                            <div class="umb-table-cell umb-table__name">
+                                {{result.Name}}
+                            </div>
+                            <div class="umb-table-cell">
+                                {{result.Change}}
+                            </div>
+                            <div class="umb-table-cell">
+                                {{result.Message}}
+                            </div>
+                            <div class="umb-table-cell">
+                                <umb-button type="button"
+                                            button-style="link"
+                                            label-key="usync_details"
+                                            action="vm.openDetail(result)"
+                                            ng-if="result.Details != null"></umb-button>
+                                <div ng-if="result.Details != null" class="usync-detail-count">
+                                    ({{result.Details.length}} items)
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-center items-center" ng-if="vm.countChanges(vm.results) == 0 && !vm.showAll">
+                <h4>No Changes</h4>
+            </div>
+        </umb-box-content>
+    </umb-box>
+</div>
\ No newline at end of file
diff --git a/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportViewComponent.js b/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportViewComponent.js
new file mode 100644
index 00000000..59f39848
--- /dev/null
+++ b/uSync8.BackOffice/App_Plugins/uSync8/components/uSyncReportViewComponent.js
@@ -0,0 +1,63 @@
+(function () {
+    'use strict';
+
+    var uSyncReportViewComponent = {
+        templateUrl: Umbraco.Sys.ServerVariables.application.applicationPath + 'App_Plugins/uSync8/Components/uSyncReportView.html',
+        bindings: {
+            action: '<',
+            results: '<'
+        },
+        controllerAs: 'vm',
+        controller: uSyncReportViewController
+    };
+
+    function uSyncReportViewController($scope, editorService) {
+
+        var vm = this;
+
+        vm.showChange = showChange;
+        vm.getTypeName = getTypeName;
+        vm.countChanges = countChanges;
+        vm.openDetail = openDetail;
+        vm.showAll = false; 
+
+        /////////
+
+        function showChange(change) {
+            return vm.showAll || (change !== 'NoChange' && change !== 'Removed');
+        }
+
+        function getTypeName(typeName) {
+            var umbType = typeName.substring(0, typeName.indexOf(','));
+            return umbType.substring(umbType.lastIndexOf('.') + 1);
+        }
+
+        function countChanges(changes) {
+            var count = 0;
+            angular.forEach(changes, function (val, key) {
+                if (val.Change !== 'NoChange') {
+                    count++;
+                }
+            });
+
+            return count;
+        }
+
+        function openDetail(item) {
+
+            var options = {
+                item: item,
+                title: 'uSync Change',
+                view: "/App_Plugins/uSync8/changeDialog.html",
+                close: function () {
+                    editorService.close();
+                }
+            };
+            editorService.open(options);
+        }
+
+    }
+
+    angular.module('umbraco')
+        .component('usyncReportView', uSyncReportViewComponent);
+})();
\ No newline at end of file
diff --git a/uSync8.BackOffice/App_Plugins/uSync8/components/usyncProgressViewComponent.js b/uSync8.BackOffice/App_Plugins/uSync8/components/usyncProgressViewComponent.js
new file mode 100644
index 00000000..ebebe67b
--- /dev/null
+++ b/uSync8.BackOffice/App_Plugins/uSync8/components/usyncProgressViewComponent.js
@@ -0,0 +1,30 @@
+(function () {
+    'use strict';
+
+    var uSyncProgressViewComponent = {
+        templateUrl: Umbraco.Sys.ServerVariables.application.applicationPath + 'App_Plugins/uSync8/Components/uSyncProgressView.html',
+        bindings: {
+            status: '<',
+            update: '<',
+            hideLabels: '<'
+        },
+        controllerAs: 'vm',
+        controller: uSyncProgressViewController
+    };
+
+    function uSyncProgressViewController() {
+        var vm = this;
+
+        vm.calcPercentage = calcPercentage;
+
+        function calcPercentage(status) {
+            if (status !== undefined) {
+                return (100 * status.Count) / status.Total;
+            }
+            return 1;
+        }
+    }
+
+    angular.module('umbraco')
+        .component('usyncProgressView', uSyncProgressViewComponent);
+})();
\ No newline at end of file
diff --git a/uSync8.BackOffice/App_Plugins/uSync8/package.manifest b/uSync8.BackOffice/App_Plugins/uSync8/package.manifest
index 2081eecf..07e0045f 100644
--- a/uSync8.BackOffice/App_Plugins/uSync8/package.manifest
+++ b/uSync8.BackOffice/App_Plugins/uSync8/package.manifest
@@ -7,7 +7,10 @@
 
     "~/app_plugins/uSync8/uSyncService.js",
     "~/app_plugins/uSync8/uSyncHub.js",
-    "~/app_plugins/uSync8/changeDialogController.js"
+    "~/app_plugins/uSync8/changeDialogController.js",
+
+    "~/app_plugins/uSync8/components/uSyncReportViewComponent.js",
+    "~/app_plugins/uSync8/components/uSyncProgressViewComponent.js"
   ],
   "css": [
     "~/app_plugins/uSync8/usync.css"
diff --git a/uSync8.BackOffice/App_Plugins/uSync8/settings/default.html b/uSync8.BackOffice/App_Plugins/uSync8/settings/default.html
index 6e11adba..414b601c 100644
--- a/uSync8.BackOffice/App_Plugins/uSync8/settings/default.html
+++ b/uSync8.BackOffice/App_Plugins/uSync8/settings/default.html
@@ -30,106 +30,14 @@
 
     <umb-box>
         <umb-box-content ng-if="vm.working || vm.reported">
-            <div class="flex flex-wrap justify-center items-center">
-                <div ng-repeat="handler in vm.status.Handlers"
-                     class="text-center usync-handler-icon"
-                     ng-class="{'usync-pending' : handler.Status == 0, 'usync-progress' : handler.Status == 1, 'usync-complete' : handler.Status == 2}"
-                     ng-click="vm.setFilter(handler.ItemType)">
-                    <i class="icon {{handler.Icon}}"></i>
-                    <div class="usync-handler-name">{{handler.Name}}</div>
-                    <div class="handler-badge badge type-complete" ng-if="handler.Changes > 0" title="{{handler.Changes}} changes">{{handler.Changes}}</div>
-                    <div class="handler-badge type-complete" ng-if="handler.Changes == 0 && handler.Status == 2"><i class="icon icon-check"></i></div>
-                </div>
-            </div>
-            <div class="flex justify-center">
-                <div class="text-center">
-                    <h4 class="usync-action-message">{{vm.status.Message}}</h4>
-                    <small>{{vm.update.Message}}</small>
-                    <div class="progress usync-not-animated" style="height: 3px;">
-                        <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.update)}}%;" aria-valuenow="{{vm.calcPercentage(vm.update)}}" aria-valuemin="0" aria-valuemax="100"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="progress" style="height: 1px;">
-                <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.status)}}%;" aria-valuenow="{{vm.calcPercentage(vm.status)}}" aria-valuemin="0" aria-valuemax="100"></div>
-            </div>
+            <usync-progress-view update="vm.update" 
+                                 status="vm.status"
+                                 hide-labels="false" />
         </umb-box-content>
     </umb-box>
 
-    <umb-box ng-if="vm.reported">
-        <div class="umb-box-header flex justify-between items-center">
-            <div>
-                <div class="umb-box-header-title">{{vm.action}}</div>
-                <div class="umb-box-header-description">{{vm.countChanges(vm.results)}} changes across {{vm.results.length}} items</div>
-            </div>
-            <umb-toggle checked="vm.showAll"
-                        on-click="vm.showAll = !vm.showAll"
-                        show-labels="true"
-                        label-on="Show all"
-                        label-off="Changes only"
-                        label-position="left"
-                        ng-if="vm.runMode = 'report'"></umb-toggle>
-        </div>
-        <umb-box-content>
-            <div class="umb-table" ng-show="vm.countChanges(vm.results) > 0 || vm.showAll">
-                <div class="umb-table-head">
-                    <div class="umb-table-row">
-                        <div class="umb-table-cell">
-                        </div>
-                        <div class="umb-table-cell">
-                            Type
-                        </div>
-                        <div class="umb-table-cell umb-table__name">
-                            Name
-                        </div>
-                        <div class="umb-table-cell">
-                            Change
-                        </div>
-                        <div class="umb-table-cell">
-                            Message
-                        </div>
-                        <div class="umb-table-cell"></div>
-                    </div>
-                </div>
-                <div class="umb-table-body">
-                    <div ng-repeat="result in vm.results">
-                        <div class="umb-table-row"
-                             ng-if="vm.showChange(result.Change)">
-                            <div class="umb-table-cell">
-                                <i ng-if="result.Change == 'NoChange'" class="icon icon-check color-green"></i>
-                                <i ng-if="result.Change == 'Update'" class="icon icon-sync color-orange"></i>
-                                <i ng-if="result.Change == 'Delete'" class="icon icon-wrong color-red"></i>
-                            </div>
-                            <div class="umb-table-cell">
-                                {{vm.getTypeName(result.ItemType)}}
-                            </div>
-                            <div class="umb-table-cell umb-table__name">
-                                {{result.Name}}
-                            </div>
-                            <div class="umb-table-cell">
-                                {{result.Change}}
-                            </div>
-                            <div class="umb-table-cell">
-                                {{result.Message}}
-                            </div>
-                            <div class="umb-table-cell">
-                                <umb-button type="button"
-                                            button-style="link"
-                                            label-key="usync_details"
-                                            action="vm.openDetail(result)"
-                                            ng-if="result.Details != null"></umb-button>
-                                <div ng-if="result.Details != null" class="usync-detail-count">
-                                    ({{result.Details.length}} items)
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="flex justify-center items-center" ng-if="vm.countChanges(vm.results) == 0">
-                <h4>No Changes</h4>
-            </div>
-        </umb-box-content>
-    </umb-box>
+    <div ng-if="vm.reported">
+        <usync-report-view actions="vm.actions" results="vm.results" />
+    </div>
 
 </div>
\ No newline at end of file
diff --git a/uSync8.BackOffice/uSync8.BackOffice.csproj b/uSync8.BackOffice/uSync8.BackOffice.csproj
index 17412d5a..fe7ac5e3 100644
--- a/uSync8.BackOffice/uSync8.BackOffice.csproj
+++ b/uSync8.BackOffice/uSync8.BackOffice.csproj
@@ -281,6 +281,10 @@
     <Content Include="App_Plugins\uSync8\backoffice\uSync8\uSyncDashboardController.js" />
     <Content Include="App_Plugins\uSync8\changeDialog.html" />
     <Content Include="App_Plugins\uSync8\changeDialogController.js" />
+    <Content Include="App_Plugins\uSync8\components\uSyncProgressView.html" />
+    <Content Include="App_Plugins\uSync8\components\usyncProgressViewComponent.js" />
+    <Content Include="App_Plugins\uSync8\components\uSyncReportView.html" />
+    <Content Include="App_Plugins\uSync8\components\uSyncReportViewComponent.js" />
     <Content Include="App_Plugins\uSync8\settings\default.html" />
     <Content Include="App_Plugins\uSync8\settings\expansion.html" />
     <Content Include="App_Plugins\uSync8\settings\expansionController.js" />
diff --git a/uSync8.Site/App_Plugins/uSync8/components/uSyncProgressView.html b/uSync8.Site/App_Plugins/uSync8/components/uSyncProgressView.html
new file mode 100644
index 00000000..2031c0e0
--- /dev/null
+++ b/uSync8.Site/App_Plugins/uSync8/components/uSyncProgressView.html
@@ -0,0 +1,27 @@
+<div>
+    <div class="flex flex-wrap justify-center items-center">
+        <div ng-repeat="handler in vm.status.Handlers"
+             class="text-center usync-handler-icon"
+             ng-class="{'usync-pending' : handler.Status == 0, 'usync-progress' : handler.Status == 1, 'usync-complete' : handler.Status == 2}"
+             ng-click="vm.setFilter(handler.ItemType)">
+            <i class="icon {{handler.Icon}}"></i>
+            <div class="usync-handler-name">{{handler.Name}}</div>
+            <div ng-if="!vm.hideLabels">
+                <div class="handler-badge badge type-complete" ng-if="handler.Changes > 0" title="{{handler.Changes}} changes">{{handler.Changes}}</div>
+                <div class="handler-badge type-complete" ng-if="handler.Changes == 0 && handler.Status == 2"><i class="icon icon-check"></i></div>
+            </div>
+        </div>
+    </div>
+    <div class="flex justify-center">
+        <div class="text-center">
+            <h4 class="usync-action-message">{{vm.status.Message}}</h4>
+            <small>{{vm.update.Message}}</small>
+            <div class="progress usync-not-animated" style="height: 3px;">
+                <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.update)}}%;" aria-valuenow="{{vm.calcPercentage(vm.update)}}" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+        </div>
+    </div>
+    <div class="progress" style="height: 1px;">
+        <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.status)}}%;" aria-valuenow="{{vm.calcPercentage(vm.status)}}" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/uSync8.Site/App_Plugins/uSync8/components/uSyncReportView.html b/uSync8.Site/App_Plugins/uSync8/components/uSyncReportView.html
new file mode 100644
index 00000000..4228416f
--- /dev/null
+++ b/uSync8.Site/App_Plugins/uSync8/components/uSyncReportView.html
@@ -0,0 +1,77 @@
+<div>
+    <umb-box>
+        <div class="umb-box-header flex justify-between items-center">
+            <div>
+                <div class="umb-box-header-title">{{vm.action}}</div>
+                <div class="umb-box-header-description">{{vm.countChanges(vm.results)}} changes across {{vm.results.length}} items</div>
+            </div>
+            <umb-toggle checked="vm.showAll"
+                        on-click="vm.showAll = !vm.showAll"
+                        show-labels="true"
+                        label-on="Show all"
+                        label-off="Changes only"
+                        label-position="left"
+                        ng-if="vm.runMode = 'report'"></umb-toggle>
+        </div>
+        <umb-box-content>
+            <div class="umb-table" ng-show="vm.countChanges(vm.results) > 0 || vm.showAll">
+                <div class="umb-table-head">
+                    <div class="umb-table-row">
+                        <div class="umb-table-cell">
+                        </div>
+                        <div class="umb-table-cell">
+                            Type
+                        </div>
+                        <div class="umb-table-cell umb-table__name">
+                            Name
+                        </div>
+                        <div class="umb-table-cell">
+                            Change
+                        </div>
+                        <div class="umb-table-cell">
+                            Message
+                        </div>
+                        <div class="umb-table-cell"></div>
+                    </div>
+                </div>
+                <div class="umb-table-body">
+                    <div ng-repeat="result in vm.results">
+                        <div class="umb-table-row"
+                             ng-if="vm.showChange(result.Change)">
+                            <div class="umb-table-cell">
+                                <i ng-if="result.Change == 'NoChange'" class="icon icon-check color-green"></i>
+                                <i ng-if="result.Change == 'Update'" class="icon icon-sync color-orange"></i>
+                                <i ng-if="result.Change == 'Delete'" class="icon icon-wrong color-red"></i>
+                            </div>
+                            <div class="umb-table-cell">
+                                {{vm.getTypeName(result.ItemType)}}
+                            </div>
+                            <div class="umb-table-cell umb-table__name">
+                                {{result.Name}}
+                            </div>
+                            <div class="umb-table-cell">
+                                {{result.Change}}
+                            </div>
+                            <div class="umb-table-cell">
+                                {{result.Message}}
+                            </div>
+                            <div class="umb-table-cell">
+                                <umb-button type="button"
+                                            button-style="link"
+                                            label-key="usync_details"
+                                            action="vm.openDetail(result)"
+                                            ng-if="result.Details != null"></umb-button>
+                                <div ng-if="result.Details != null" class="usync-detail-count">
+                                    ({{result.Details.length}} items)
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-center items-center" ng-if="vm.countChanges(vm.results) == 0 && !vm.showAll">
+                <h4>No Changes</h4>
+            </div>
+        </umb-box-content>
+    </umb-box>
+</div>
\ No newline at end of file
diff --git a/uSync8.Site/App_Plugins/uSync8/components/uSyncReportViewComponent.js b/uSync8.Site/App_Plugins/uSync8/components/uSyncReportViewComponent.js
new file mode 100644
index 00000000..16c41e04
--- /dev/null
+++ b/uSync8.Site/App_Plugins/uSync8/components/uSyncReportViewComponent.js
@@ -0,0 +1,63 @@
+(function () {
+    'use strict';
+
+    var uSyncReportViewComponent = {
+        templateUrl: Umbraco.Sys.ServerVariables.application.applicationPath + 'App_Plugins/uSync8/Components/uSyncReportView.html',
+        bindings: {
+            action: '<',
+            results: '<'
+        },
+        controllerAs: 'vm',
+        controller: uSyncReportViewController
+    };
+
+    function uSyncReportViewController($scope, editorService) {
+
+        var vm = this;
+
+        vm.showChange = showChange;
+        vm.getTypeName = getTypeName;
+        vm.countChanges = countChanges;
+        vm.openDetail = openDetail;
+        vm.showAll = false; 
+
+        /////////
+
+        function showChange(change) {
+            return vm.showAll || (change !== 'NoChange' && change !== 'Removed');
+        }
+
+        function getTypeName(typeName) {
+            var umbType = typeName.substring(0, typeName.indexOf(','));
+            return umbType.substring(umbType.lastIndexOf('.') + 1);
+        }
+
+        function countChanges(changes) {
+            var count = 0;
+            angular.forEach(changes, function (val, key) {
+                if (val.Change !== 'NoChange') {
+                    count++;
+                }
+            });
+
+            return count;
+        }
+
+        function openDetail(item) {
+
+            var options = {
+                item: item,
+                title: 'uSync Change',
+                view: "/App_Plugins/uSync8/changeDialog.html",
+                close: function () {
+                    editorService.close();
+                }
+            };
+            editorService.open(options);
+        }
+
+    }
+
+    angular.module('umbraco')
+        .component('usyncReportView', uSyncReportViewComponent);
+})();
\ No newline at end of file
diff --git a/uSync8.Site/App_Plugins/uSync8/components/usyncProgressViewComponent.js b/uSync8.Site/App_Plugins/uSync8/components/usyncProgressViewComponent.js
new file mode 100644
index 00000000..4ba0fcd2
--- /dev/null
+++ b/uSync8.Site/App_Plugins/uSync8/components/usyncProgressViewComponent.js
@@ -0,0 +1,30 @@
+(function () {
+    'use strict';
+
+    var uSyncProgressViewComponent = {
+        templateUrl: Umbraco.Sys.ServerVariables.application.applicationPath + 'App_Plugins/uSync8/Components/uSyncProgressView.html',
+        bindings: {
+            status: '<',
+            update: '<',
+            hideLabels: '<'
+        },
+        controllerAs: 'vm',
+        controller: uSyncProgressViewController
+    };
+
+    function uSyncProgressViewController() {
+        var vm = this;
+
+        vm.calcPercentage = calcPercentage;
+
+        function calcPercentage(status) {
+            if (status !== undefined) {
+                return (100 * status.Count) / status.Total;
+            }
+            return 1;
+        }
+    }
+
+    angular.module('umbraco')
+        .component('usyncProgressView', uSyncProgressViewComponent);
+})();
\ No newline at end of file
diff --git a/uSync8.Site/App_Plugins/uSync8/package.manifest b/uSync8.Site/App_Plugins/uSync8/package.manifest
index 2081eecf..07e0045f 100644
--- a/uSync8.Site/App_Plugins/uSync8/package.manifest
+++ b/uSync8.Site/App_Plugins/uSync8/package.manifest
@@ -7,7 +7,10 @@
 
     "~/app_plugins/uSync8/uSyncService.js",
     "~/app_plugins/uSync8/uSyncHub.js",
-    "~/app_plugins/uSync8/changeDialogController.js"
+    "~/app_plugins/uSync8/changeDialogController.js",
+
+    "~/app_plugins/uSync8/components/uSyncReportViewComponent.js",
+    "~/app_plugins/uSync8/components/uSyncProgressViewComponent.js"
   ],
   "css": [
     "~/app_plugins/uSync8/usync.css"
diff --git a/uSync8.Site/App_Plugins/uSync8/settings/default.html b/uSync8.Site/App_Plugins/uSync8/settings/default.html
index 1ddfe739..085e032a 100644
--- a/uSync8.Site/App_Plugins/uSync8/settings/default.html
+++ b/uSync8.Site/App_Plugins/uSync8/settings/default.html
@@ -30,106 +30,14 @@
 
     <umb-box>
         <umb-box-content ng-if="vm.working || vm.reported">
-            <div class="flex flex-wrap justify-center items-center">
-                <div ng-repeat="handler in vm.status.Handlers"
-                     class="text-center usync-handler-icon"
-                     ng-class="{'usync-pending' : handler.Status == 0, 'usync-progress' : handler.Status == 1, 'usync-complete' : handler.Status == 2}"
-                     ng-click="vm.setFilter(handler.ItemType)">
-                    <i class="icon {{handler.Icon}}"></i>
-                    <div class="usync-handler-name">{{handler.Name}}</div>
-                    <div class="handler-badge badge type-complete" ng-if="handler.Changes > 0" title="{{handler.Changes}} changes">{{handler.Changes}}</div>
-                    <div class="handler-badge type-complete" ng-if="handler.Changes == 0 && handler.Status == 2"><i class="icon icon-check"></i></div>
-                </div>
-            </div>
-            <div class="flex justify-center">
-                <div class="text-center">
-                    <h4 class="usync-action-message">{{vm.status.Message}}</h4>
-                    <small>{{vm.update.Message}}</small>
-                    <div class="progress usync-not-animated" style="height: 3px;">
-                        <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.update)}}%;" aria-valuenow="{{vm.calcPercentage(vm.update)}}" aria-valuemin="0" aria-valuemax="100"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="progress" style="height: 1px;">
-                <div class="bar" role="progressbar" style="width: {{vm.calcPercentage(vm.status)}}%;" aria-valuenow="{{vm.calcPercentage(vm.status)}}" aria-valuemin="0" aria-valuemax="100"></div>
-            </div>
+            <usync-progress-view update="vm.update" 
+                                 status="vm.status"
+                                 hide-labels="false" />
         </umb-box-content>
     </umb-box>
 
-    <umb-box ng-if="vm.reported">
-        <div class="umb-box-header flex justify-between items-center">
-            <div>
-                <div class="umb-box-header-title">{{vm.action}}</div>
-                <div class="umb-box-header-description">{{vm.countChanges(vm.results)}} changes across {{vm.results.length}} items</div>
-            </div>
-            <umb-toggle checked="vm.showAll"
-                        on-click="vm.showAll = !vm.showAll"
-                        show-labels="true"
-                        label-on="Show all"
-                        label-off="Changes only"
-                        label-position="left"
-                        ng-if="vm.runMode = 'report'"></umb-toggle>
-        </div>
-        <umb-box-content>
-            <div class="umb-table" ng-show="vm.countChanges(vm.results) > 0 || vm.showAll">
-                <div class="umb-table-head">
-                    <div class="umb-table-row">
-                        <div class="umb-table-cell">
-                        </div>
-                        <div class="umb-table-cell">
-                            Type
-                        </div>
-                        <div class="umb-table-cell umb-table__name">
-                            Name
-                        </div>
-                        <div class="umb-table-cell">
-                            Change
-                        </div>
-                        <div class="umb-table-cell">
-                            Message
-                        </div>
-                        <div class="umb-table-cell"></div>
-                    </div>
-                </div>
-                <div class="umb-table-body">
-                    <div ng-repeat="result in vm.results">
-                        <div class="umb-table-row"
-                             ng-if="vm.showChange(result.Change)">
-                            <div class="umb-table-cell">
-                                <i ng-if="result.Change == 'NoChange'" class="icon icon-check color-green"></i>
-                                <i ng-if="result.Change == 'Update'" class="icon icon-sync color-orange"></i>
-                                <i ng-if="result.Change == 'Delete'" class="icon icon-wrong color-red"></i>
-                            </div>
-                            <div class="umb-table-cell">
-                                {{vm.getTypeName(result.ItemType)}}
-                            </div>
-                            <div class="umb-table-cell umb-table__name">
-                                {{result.Name}}
-                            </div>
-                            <div class="umb-table-cell">
-                                {{result.Change}}
-                            </div>
-                            <div class="umb-table-cell">
-                                {{result.Message}}
-                            </div>
-                            <div class="umb-table-cell">
-                                <umb-button type="button"
-                                            button-style="link"
-                                            label-key="usync_details"
-                                            action="vm.openDetail(result)"
-                                            ng-if="result.Details != null"></umb-button>
-                                <div ng-if="result.Details != null" class="usync-detail-count">
-                                    ({{result.Details.length}} items)
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="flex justify-center items-center" ng-if="vm.countChanges(vm.results) == 0">
-                <h4>No Changes</h4>
-            </div>
-        </umb-box-content>
-    </umb-box>
+    <div ng-if="vm.reported">
+        <usync-report-view actions="vm.actions" results="vm.results" />
+    </div>
 
 </div>
\ No newline at end of file