add buttons to regenerate and delete ical keys

src/oncall/ui/static/js/oncall.js

@@ -2844,15 +2844,23 @@ var oncall = {
         icalKeyUrl: '/api/v0/ical_key/',
         pageSource: $('#ical-key-template').html(),
         settingsSubheaderTemplate: $('#settings-subheader-template').html(),
-        subheaderWrapper: '.subheader-wrapper'
+        moduleIcalKeyTemplate: $('#module-ical-key-template').html(),
+        subheaderWrapper: '.subheader-wrapper',
+        icalKeyRow: '.ical-key-row',
+        requestIcalKey: '#request-ical-key'
       },
       init: function(){
+        Handlebars.registerHelper('capitalize', function(str){
+          return str.charAt(0).toUpperCase() + str.slice(1);
+        });
         Handlebars.registerPartial('settings-subheader', this.data.settingsSubheaderTemplate);
+        Handlebars.registerPartial('ical-key', this.data.moduleIcalKeyTemplate);
         this.getData();
         oncall.getModes();
       },
       events: function(){
         router.updatePageLinks();
+        this.data.$page.on('click', this.data.requestIcalKey, this.requestIcalKey.bind(this));
       },
       getData: function(){
         var self = this;
@@ -2867,6 +2875,7 @@ var oncall = {
             var userKeys = [],
                 teamKeys = [];
             for (var i = 0; i < icalKeys.length; i++) {
+              icalKeys[i].time_created = moment(icalKeys[i].time_created * 1000).format('YYYY/MM/DD hh:mm');
               if (icalKeys[i].type === 'user')
                 userKeys.push(icalKeys[i]);
               else if (icalKeys[i].type === 'team') {
@@ -2890,6 +2899,66 @@ var oncall = {
 
         this.data.$page.html(template(data));
         this.events();
+      },
+      requestIcalKey: function(e, data){
+        console.log(e, data);
+      },
+      updateIcalKey: function($modal, $caller){
+        var self = this,
+            $cta = $modal.find('.modal-cta'),
+            ical_key = $caller.attr('data-ical-key'),
+            ical_type = $caller.attr('data-ical-type'),
+            ical_name = $caller.attr('data-ical-name'),
+            $icalKeyRow = this.data.$page.find(this.data.icalKeyRow + '[data-id="' + ical_key + '"]')
+            url = this.data.icalKeyUrl + ical_type + '/' + ical_name;
+
+        if ((ical_type === 'user' || ical_type === 'team') && ical_name) {
+          $cta.addClass('loading disabled').prop('disabled', true);
+
+          $.ajax({
+            type: 'POST',
+            url: url,
+            dataType: 'html'
+          }).done(function(data){
+            $modal.modal('hide');
+            $icalKeyRow.find('span.ical-key').text(data.trim());
+            $icalKeyRow.find('span.ical-key-time-created').text(moment().format('YYYY/MM/DD hh:mm'));
+          }).fail(function(data){
+            var error = oncall.isJson(data.responseText) ? JSON.parse(data.responseText).description : data.responseText || 'Delete failed.';
+            oncall.alerts.createAlert(error, 'danger');
+          }).always(function(){
+            $cta.removeClass('loading disabled').prop('disabled', false);
+          });
+        } else {
+          $modal.modal('hide');
+        }
+      },
+      deleteIcalKey: function($modal, $caller){
+        var self = this,
+            $cta = $modal.find('.modal-cta'),
+            key = $caller.attr('data-ical-key'),
+            $icalKeyRow = this.data.$page.find(this.data.icalKeyRow + '[data-id="' + key + '"]')
+            url = this.data.icalKeyUrl + 'key/' + key;
+
+        if (key) {
+          $cta.addClass('loading disabled').prop('disabled', true);
+
+          $.ajax({
+            type: 'DELETE',
+            url: url,
+            dataType: 'html'
+          }).done(function(){
+            $modal.modal('hide');
+            $icalKeyRow.remove();
+          }).fail(function(data){
+            var error = oncall.isJson(data.responseText) ? JSON.parse(data.responseText).description : data.responseText || 'Delete failed.';
+            oncall.alerts.createAlert(error, 'danger');
+          }).always(function(){
+            $cta.addClass('loading disabled').prop('disabled', false);
+          });
+        } else {
+          $modal.modal('hide');
+        }
       }
     }
   },

src/oncall/ui/templates/index.html

@@ -1703,46 +1703,37 @@
     {{>settings-subheader username=name page="ical_key"}}
   </div>
   <div class="main container-fluid">
-    <h3 class="module-heading"> User Calendar <button id="request-user-ical-key" class="btn btn-primary pull-right">+ Ical Key</button></h3>
-    <div class="module">
-      <table width="100%">
-        <thead>
-          <th>User Name</th>
-          <th>Key</th>
-        </thead>
-        <tbody>
-        {{#each userKeys}}
-        <tr>
-          <td>{{this.name}}</td>
-          <td>{{this.key}}</td>
-        </tr>
-        {{/each}}
-        </tbody>
-      </table>
-    </div>
-    <h3 class="module-heading"> Team Calendar <button id="request-team-ical-key" class="btn btn-primary pull-right">+ Ical Key</button></h3>
-    <div class="module">
-      <table width="100%">
-        <thead>
-          <th>Team Name</th>
-          <th>Key</th>
-        </thead>
-        <tbody>
-        {{#each teamKeys}}
-        <tr>
-          <td>{{this.name}}</td>
-          <td>{{this.key}}</td>
-        </tr>
-        {{/each}}
-        </tbody>
-      </table>
-    </div>
+    <!-- user calendar keys -->
+    {{>ical-key key_type="user" keys=userKeys}}
+    <!-- team calendar keys -->
+    {{>ical-key key_type="team" keys=teamKeys}}
     <h4 class="module-heading">How to subscribe to your calendars</h4>
     <div>
     </div>
   </div>
 </script>
 
+<!-- // ical key view partial -->
+<script id="module-ical-key-template" type="text/x-handlebars-template">
+  <h3 class="module-heading"> {{capitalize key_type}} Calendar Keys <button id="request-ical-key" class="btn btn-primary pull-right">+ {{capitalize key_type}} Ical Key</button></h3>
+  <div class="module">
+    <table width="100%" class="table table-striped">
+      <thead><th>{{capitalize key_type}} Name</th><th>Key</th><th>Time Created</th></thead>
+      <tbody>
+        {{#each keys}}
+        <tr class="ical-key-row" data-id="{{this.key}}">
+          <td><span>{{this.name}}</span></td>
+          <td><span class="ical-key">{{this.key}}</span></td>
+          <td><span class="ical-key-time-created">{{this.time_created}}</span></td>
+          <td><button id="update-ical-key" class="btn btn-warning btn-sm pull-right" type="button" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.settings.ical_key.updateIcalKey" data-modal-title="Regenerate Ical Key for {{this.type}} {{this.name}}" data-modal-content="Regenerate an ical key will invalidate the existing key." data-ical-key="{{this.key}}" data-ical-type="{{this.type}}" data-ical-name="{{this.name}}">Regenerate</button></td>
+          <td><button id="delete-ical-key" class="btn btn-danger btn-sm pull-right" type="button" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.settings.ical_key.deleteIcalKey" data-modal-content="Invalidate key {{this.key}}?" data-modal-title="Delete Ical Key for {{this.type}} {{this.name}}" data-ical-key="{{this.key}}">Delete</button></td>
+        </tr>
+        {{/each}}
+      </tbody>
+    </table>
+  </div>
+</script>
+
 <!--// **********************
   Errors Page
 *********************** //-->