add confirm

Author: mzanoni

samples/UmbracoV9/App_Plugins/Relewise.Dashboard/dashboard.controller.js

@@ -18,6 +18,26 @@
         });
     }
 
+    vm.exportContentPermanentlyDelete = function () {
+        const confirmed = confirm("Are you sure, you want to perform an full export and remove deleted content items?");
+        if (!confirmed) {
+            return;
+        }
+
+        vm.exportLoading = true;
+        vm.errorMessage = "";
+        vm.success = "";
+        relewiseDashboardResources.exportContentWithDelete().then(() => {
+            vm.exportLoading = false;
+            vm.success = "Content was successfully exported to Relewise";
+            vm.errorMessage = "";
+        }, () => {
+            vm.exportLoading = false;
+            vm.success = "";
+            vm.errorMessage = "Unexpected error while exporting data happened";
+        });
+    }
+
     function init() {
         relewiseDashboardResources.getConfiguration().then((response) => {
             if (response.status === 200) {

samples/UmbracoV9/App_Plugins/Relewise.Dashboard/dashboard.html

@@ -2,14 +2,17 @@
     <h2>Relewise</h2>
     <umb-box>
         <umb-box-content>
-
             <p>
                 Welcome to the Relewise dashboard - Here you can perform export functions get all your content exported into Relewise.<br />
                 It's also possible to see the settings for Relewise directly here.
             </p>
-            <div>
+            <div class="button-box">
                 <button class="btn btn-primary" ng-click="vm.exportContent()" ng-disabled="vm.exportLoading">
-                    Full content export
+                    Export content
+                </button>
+
+                <button class="btn btn-danger" ng-click="vm.exportContentPermanentlyDelete()" ng-disabled="vm.exportLoading">
+                    Export content and remove old data
                 </button>
             </div>
             <div class="error mt-10" ng-if="vm.errorMessage">{{vm.errorMessage}}</div>

samples/UmbracoV9/App_Plugins/Relewise.Dashboard/relewise.resources.js

@@ -5,6 +5,9 @@
                 exportContent: function () {
                     return $http.post("/umbraco/backoffice/Relewise/DashboardApi/ContentExport");
                 },
+                exportContentWithDelete: function () {
+                    return $http.post("/umbraco/backoffice/Relewise/DashboardApi/ContentExport?permanentlyDelete=true");
+                },
                 getConfiguration: function () {
                     return $http.get("/umbraco/backoffice/Relewise/DashboardApi/Configuration");
                 }

samples/UmbracoV9/App_Plugins/Relewise.Dashboard/styles.css

@@ -29,3 +29,8 @@ h5 {
 .pl-20 {
     padding-left: 20px;
 }
+
+.button-box {
+    display: flex;
+    justify-content: space-between;
+}

src/Integrations.Umbraco/App_Plugins/Relewise.Dashboard/dashboard.controller.js

@@ -19,6 +19,11 @@
     }
 
     vm.exportContentPermanentlyDelete = function () {
+        const confirmed = confirm("Are you sure, you want to perform an full export and remove deleted content items?");
+        if (!confirmed) {
+            return;
+        }
+
         vm.exportLoading = true;
         vm.errorMessage = "";
         vm.success = "";

src/Integrations.Umbraco/App_Plugins/Relewise.Dashboard/dashboard.html

@@ -2,22 +2,18 @@
     <h2>Relewise</h2>
     <umb-box>
         <umb-box-content>
-
             <p>
                 Welcome to the Relewise dashboard - Here you can perform export functions get all your content exported into Relewise.<br />
                 It's also possible to see the settings for Relewise directly here.
             </p>
-            <div>
+            <div class="button-box">
                 <button class="btn btn-primary" ng-click="vm.exportContent()" ng-disabled="vm.exportLoading">
                     Export content
                 </button>
 
-                <span class="pl-20">
-                    <button class="btn btn-danger" ng-click="vm.exportContentPermanentlyDelete()" ng-disabled="vm.exportLoading">
-                        Export content and remove old data
-                    </button>
-                </span>
-
+                <button class="btn btn-danger" ng-click="vm.exportContentPermanentlyDelete()" ng-disabled="vm.exportLoading">
+                    Export content and remove old data
+                </button>
             </div>
             <div class="error mt-10" ng-if="vm.errorMessage">{{vm.errorMessage}}</div>
             <div class="export-success mt-10" ng-if="vm.success">{{vm.success}}</div>

src/Integrations.Umbraco/App_Plugins/Relewise.Dashboard/styles.css

@@ -29,3 +29,8 @@ h5 {
 .pl-20 {
     padding-left: 20px;
 }
+
+.button-box {
+    display: flex;
+    justify-content: space-between;
+}