Export CSV in batch changes

modules/portal/app/views/dnsChanges/dnsChangeDetail.scala.html

@@ -41,7 +41,9 @@
 
         <div class="row">
             <div class="col-md-12">
-                <p><strong>ID:</strong> {{batch.id}}</p>
+                <p><strong>ID:</strong> {{batch.id}}
+                    <button class="btn-right-corner" ng-click="exportToCSV(batch.id)">Export CSV</button>
+                </p>
                 <p><strong>Submitted:</strong> {{batch.createdTimestamp}}</p>
                 <p ng-if="'@rootAccountName' != batch.userName"><strong>Submitter:</strong> {{batch.userName}}</p>
                 <p ng-if="batch.comments"><strong>Description:</strong> {{batch.comments}}</p>

modules/portal/public/css/vinyldns.css

@@ -133,6 +133,11 @@ a.action-link {
     border-bottom-left-radius: 4px;
 }
 
+.btn-right-corner {
+    float: right;
+    margin-left: 10px;
+}
+
 .form-control.zone-edit {
     background: #F9F9F9;
     color:#555;

modules/portal/public/lib/dns-change/dns-change-detail.controller.js

@@ -138,6 +138,33 @@
                 $("#cancel_batch_change").modal("hide");
             }
 
+            $scope.exportToCSV = function (batchId) {
+              var filename = batchId + '.csv';
+              var csv = [];
+              var changes = document.querySelectorAll("table tr");
+              $log.debug(batchId)
+              for (var i = 0; i < changes.length; i++) {
+                var row = [], cols = changes[i].querySelectorAll("td, th");
+
+                for (var j = 0; j < cols.length; j++) {
+                  row.push('"' + cols[j].innerText + '"');
+                }
+                csv.push(row.join(","));
+              }
+              var csvFile = new Blob([csv.join("\n")], { type: "text/csv" });
+
+              // Create a link to download it
+              var downloadBatchChanges = document.createElement("a");
+              downloadBatchChanges.download = filename;
+
+              // Create a URL for the link
+              downloadBatchChanges.href = window.URL.createObjectURL(csvFile);
+              document.body.appendChild(downloadBatchChanges);
+              downloadBatchChanges.click();
+              document.body.removeChild(downloadBatchChanges);
+            }
+
+
             $timeout($scope.refresh, 0);
     });
 })();