support adding connect user

dashboard-ui/scripts/supporterkeypage.js

@@ -124,6 +124,36 @@ $(document).on('pageshow', "#supporterKeyPage", SupporterKeyPage.onPageShow);
 
 (function () {
 
+    var connectSupporterInfo;
+
+    function showAddUserForm(page) {
+
+        $('.popupAddUser', page).popup('open');
+
+        $('#selectUserToAdd', page).html(connectSupporterInfo.EligibleUsers.map(function (u) {
+
+            return '<option value="' + u.ConnectUserId + '">' + u.Name + '</option>';
+
+        }).join('')).selectmenu('refresh');
+    }
+
+    function addUser(page, id) {
+
+        Dashboard.showLoadingMsg();
+
+        ApiClient.ajax({
+            type: "POST",
+            url: ApiClient.getUrl('Connect/Supporters', {
+                Id: id
+            })
+
+        }).done(function () {
+
+            $('.popupAddUser', page).popup('close');
+            loadConnectSupporters(page);
+        });
+    }
+
     function removeUser(page, id) {
 
         Dashboard.confirm(Globalize.translate('MessageConfirmRemoveConnectSupporter'), Globalize.translate('HeaderConfirmRemoveUser'), function (result) {
@@ -195,6 +225,8 @@ $(document).on('pageshow', "#supporterKeyPage", SupporterKeyPage.onPageShow);
 
     function loadConnectSupporters(page) {
 
+        Dashboard.showLoadingMsg();
+
         Dashboard.suppressAjaxErrors = true;
 
         ApiClient.ajax({
@@ -204,8 +236,11 @@ $(document).on('pageshow', "#supporterKeyPage", SupporterKeyPage.onPageShow);
 
         }).done(function (result) {
 
+            connectSupporterInfo = result;
             renderUsers(page, result);
 
+            Dashboard.hideLoadingMsg();
+
         }).fail(function () {
 
             $('.supporters', page).html('<p>' + Globalize.translate('MessageErrorLoadingSupporterInfo') + '</p>');
@@ -218,10 +253,28 @@ $(document).on('pageshow', "#supporterKeyPage", SupporterKeyPage.onPageShow);
 
     }
 
-    $(document).on('pageshow', "#supporterKeyPage", function () {
+    $(document).on('pageinit', "#supporterKeyPage", function () {
+
+        var page = this;
+        $('#btnAddConnectUser', page).on('click', function () {
+            showAddUserForm(page);
+        });
+
+    }).on('pageshow', "#supporterKeyPage", function () {
 
         var page = this;
         loadConnectSupporters(page);
     });
 
+    window.SupporterKeyPage.onAddConnectUserSubmit = function () {
+
+        var page = $(this).parents('.page');
+
+        var id = $('#selectUserToAdd', page).val();
+
+        addUser(page, id);
+
+        return false;
+    };
+
 })();

dashboard-ui/supporterkey.html

@@ -98,15 +98,44 @@
                     <div class="supporters">
 
                     </div>
-                    <button type="button" id="btnAddConnectUser" data-icon="plus">Add User</button>
+                    <button type="button" id="btnAddConnectUser" data-icon="plus">${ButtonAddUser}</button>
                 </div>
             </div>
         </div>
+        <div data-role="popup" class="popupAddUser popup" data-theme="a">
+
+            <div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
+
+                <h3 class="identificationHeader">${HeaderAddUser}</h3>
+            </div>
+
+            <div data-role="content">
+
+                <form class="popupAddUserForm" style="max-width:350px;padding-top:.5em;">
+                    <div>
+                        <label for="selectUserToAdd">${LabelUser}</label>
+                        <select id="selectUserToAdd" required="required"></select>
+                        <div class="fieldDescription">${LabelAddConnectSupporterHelp}</div>
+                    </div>
+                    <br />
+                    <p>
+                        <button type="submit" data-theme="b" data-icon="check">
+                            ${ButtonSubmit}
+                        </button>
+                        <button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');">
+                            ${ButtonCancel}
+                        </button>
+                    </p>
+                </form>
+            </div>
+
+        </div>
 
         <script type="text/javascript">
             $('#supporterKeyForm').on('submit', SupporterKeyPage.updateSupporterKey);
             $('#lostKeyForm').on('submit', SupporterKeyPage.retrieveSupporterKey);
             $('#linkKeysForm').on('submit', SupporterKeyPage.linkSupporterKeys);
+            $('.popupAddUserForm').on('submit', SupporterKeyPage.onAddConnectUserSubmit).on('submit', SupporterKeyPage.onAddConnectUserSubmit);
         </script>
     </div>
 </body>