Port API info modal to Angular directive

public/directives/editUserApiInfoModal.html

@@ -0,0 +1,33 @@
+<div class="modal fade" id="edit-user-api-info-{{ userId }}" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title">Edit User API Settings</h4>
+            </div>
+            <div class="modal-body">
+                <p>
+                    <span>API Active</span>:
+
+                    <code class='status-display'>
+                        {{apiActive}}
+                    </code>
+
+                    <a ng-click="toggleAPIStatus($event)" class='btn btn-xs btn-success'>toggle</a>
+                </p>
+
+                <p>
+                    <span>API Key: </span><code class='status-display' ng-bind="apiKey">{{api_key}}</code>
+                    <a ng-click="parentGenerateNewAPIKey($event)" class='btn btn-xs btn-danger'>reset</a>
+                </p>
+
+                <p>
+                    <span>API Quota (req/min, -1 for unlimited):</span> <input type='number' class='form-control api-quota' ng-model="apiQuota">
+                    <a ng-click="updateAPIQuota()" class='btn btn-xs btn-warning'>change</a>
+                </p>
+            </div>
+        </div> <!-- /.modal-content -->
+    </div> <!-- /.modal-dialog -->
+</div> <!-- /.modal -->

public/js/AdminCtrl.js

@@ -33,6 +33,62 @@ polr.directive('editLongLinkModal', function () {
     };
 });
 
+polr.directive('editUserApiInfoModal', function () {
+    return {
+        scope: {
+            userId: '=',
+            apiActive: '=',
+            apiKey: '=',
+            apiQuota: '=',
+            generateNewApiKey: '=',
+            cleanModals: '='
+        },
+        templateUrl: '/directives/editUserApiInfoModal.html',
+        transclude: true,
+        controller: function ($scope, $element, $timeout) {
+            $scope.init = function () {
+                // Destroy directive and clean modal on close
+                $element.find('.modal').on("hidden.bs.modal", function () {
+                    $scope.$destroy();
+                    $scope.cleanModals();
+                });
+
+                $scope.apiActive = res_value_to_text($scope.apiActive);
+            }
+
+            // Toggle API access status
+            $scope.toggleAPIStatus = function($event) {
+                var el = $($event.target);
+                var status_display_elem = el.prevAll('.status-display');
+
+                apiCall('admin/toggle_api_active', {
+                    'user_id': $scope.userId,
+                }, function(new_status) {
+                    new_status = res_value_to_text(new_status);
+                    status_display_elem.text(new_status);
+                });
+            };
+
+            // Generate new API key for user_id
+            $scope.parentGenerateNewAPIKey = function($event) {
+                $scope.generateNewApiKey($event, $scope.userId, false);
+            };
+
+            // Update user API quotas
+            $scope.updateAPIQuota = function() {
+                apiCall('admin/edit_api_quota', {
+                    'user_id': $scope.userId,
+                    'new_quota': parseInt($scope.apiQuota)
+                }, function(next_action) {
+                    toastr.success("Quota successfully changed.", "Success");
+                });
+            };
+
+            $scope.init();
+        }
+    };
+});
+
 polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
     /* Initialize $scope variables */
     $scope.state = {
@@ -40,7 +96,8 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
     };
     $scope.datatables = {};
     $scope.modals = {
-        editLongLink: []
+        editLongLink: [],
+        editUserApiInfo: []
     };
     $scope.newUserParams = {
         username: '',
@@ -137,22 +194,6 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
         $scope.datatables['admin_users_table'].ajax.reload(null, false);
     };
 
-    // Append modals to Angular root
-    $scope.appendModal = function(html, id) {
-        id = esc_selector(id);
-
-        $(".ng-root").append(html);
-        var modal_ele = $("#" + id);
-
-        modal_ele.append(html);
-        modal_ele.modal();
-        $compile(modal_ele)($scope);
-
-        $("body").delegate("#" + id, "hidden.bs.modal", function() {
-            modal_ele.remove();
-        });
-    };
-
     /*
         User Management
     */
@@ -173,6 +214,26 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
         });
     }
 
+    // Generate new API key for user_id
+    $scope.generateNewAPIKey = function($event, user_id, is_dev_tab) {
+        var el = $($event.target);
+        var status_display_elem = el.prevAll('.status-display');
+
+        if (is_dev_tab) {
+            status_display_elem = el.parent().prev().children();
+        }
+
+        apiCall('admin/generate_new_api_key', {
+            'user_id': user_id,
+        }, function(new_status) {
+            if (status_display_elem.is('input')) {
+                status_display_elem.val(new_status);
+            } else {
+                status_display_elem.text(new_status);
+            }
+        });
+    };
+
     $scope.checkNewUserFields = function() {
         var response = true;
 
@@ -228,72 +289,20 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
         });
     };
 
-
-    // Generate new API key for user_id
-    $scope.generateNewAPIKey = function($event, user_id, is_dev_tab) {
-        var el = $($event.target);
-        var status_display_elem = el.prevAll('.status-display');
-
-        if (is_dev_tab) {
-            status_display_elem = el.parent().prev().children();
-        }
-
-        apiCall('admin/generate_new_api_key', {
-            'user_id': user_id,
-        }, function(new_status) {
-            if (status_display_elem.is('input')) {
-                status_display_elem.val(new_status);
-            } else {
-                status_display_elem.text(new_status);
-            }
-        });
-    };
-
-    // Toggle API access status
-    $scope.toggleAPIStatus = function($event, user_id) {
-        var el = $($event.target);
-        var status_display_elem = el.prevAll('.status-display');
-
-        apiCall('admin/toggle_api_active', {
-            'user_id': user_id,
-        }, function(new_status) {
-            new_status = res_value_to_text(new_status);
-            status_display_elem.text(new_status);
-        });
-    };
-
-    // Update user API quotas
-    $scope.updateAPIQuota = function($event, user_id) {
-        var el = $($event.target);
-        var new_quota = el.prevAll('.api-quota').val();
-
-        apiCall('admin/edit_api_quota', {
-            'user_id': user_id,
-            'new_quota': parseInt(new_quota)
-        }, function(next_action) {
-            toastr.success("Quota successfully changed.", "Success");
-        });
-    };
-
     // Open user API settings menu
     $scope.openAPIModal = function($event, username, api_key, api_active, api_quota, user_id) {
         var el = $($event.target);
-        var markup = $('#api-modal-template').html();
 
-        var modal_id = "api-modal-" + username;
+        $scope.modals.editUserApiInfo.push({
-        var modal_context = {
+            apiKey: api_key,
-            id: modal_id,
+            apiQuota: parseInt(api_quota),
-            api_key: api_key,
+            userId: user_id,
-            api_active: parseInt(api_active),
+            apiActive: api_active
-            api_quota: api_quota,
+        });
-            user_id: user_id,
+
-            title: "API Information for " + username,
+        $timeout(function () {
-            body: markup
+            $('#edit-user-api-info-' + user_id).modal('show');
-        };
+        });
-        var mt_html = $scope.modal_template(modal_context);
-        var compiled_mt = Handlebars.compile(mt_html);
-        mt_html = compiled_mt(modal_context);
-        $scope.appendModal(mt_html, modal_id);
     };
 
     /*
@@ -341,9 +350,7 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
         });
 
         $timeout(function () {
-            console.log(link_ending);
             $('#edit-long-link-' + link_ending).modal('show');
-            // XXX refresh table when done
         });
     }
 
@@ -354,7 +361,6 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
     // Initialise AdminCtrl
     $scope.init = function() {
         var modal_source = $("#modal-template").html();
-        $scope.modal_template = Handlebars.compile(modal_source);
 
         $('.admin-nav a').click(function(e) {
             e.preventDefault();

resources/views/admin.blade.php

@@ -127,6 +127,9 @@
     <div class="angular-modals">
         <edit-long-link-modal ng-repeat="modal in modals.editLongLink" link-ending="modal.linkEnding"
             old-long-link="modal.oldLongLink" clean-modals="cleanModals"></edit-long-link-modal>
+        <edit-user-api-info-modal ng-repeat="modal in modals.editUserApiInfo" user-id="modal.userId"
+            api-quota="modal.apiQuota" api-active="modal.apiActive" api-key="modal.apiKey"
+            generate-new-api-key="generateNewAPIKey" clean-modals="cleanModals"></edit-user-api-info>
     </div>
 </div>
 
@@ -138,31 +141,7 @@
 @include('snippets.modals')
 
 {{-- Include extra JS --}}
-<script src='/js/handlebars-v4.0.5.min.js'></script>
 <script src='/js/datatables.min.js'></script>
 <script src='/js/api.js'></script>
 <script src='/js/AdminCtrl.js'></script>
-
-{{-- Extra templating --}}
-<script id="api-modal-template" type="text/x-handlebars-template">
-    <div>
-        <p>
-            <span>API Active</span>:
-
-            <code class='status-display'>
-                @{{#if api_active}}True@{{else}}False@{{/if}}</code>
-
-            <a ng-click="toggleAPIStatus($event, '@{{user_id}}')" class='btn btn-xs btn-success'>toggle</a>
-        </p>
-        <p>
-            <span>API Key: </span><code class='status-display'>@{{api_key}}</code>
-            <a ng-click="generateNewAPIKey($event, '@{{user_id}}', false)" class='btn btn-xs btn-danger'>reset</a>
-        </p>
-        <p>
-            <span>API Quota (req/min, -1 for unlimited):</span> <input type='number' class='form-control api-quota' value='@{{api_quota}}'>
-            <a ng-click="updateAPIQuota($event, '@{{user_id}}')" class='btn btn-xs btn-warning'>change</a>
-        </p>
-    </div>
-</script>
-
 @endsection