VRFS-1110 integrated autocomplete

web/app/assets/javascripts/band_setup.js

@@ -11,13 +11,8 @@
   context.JK.BandSetupScreen = function (app) {
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
-    var friendSelectorDialog = null;
+    var inviteMusiciansUtil = null;
     var invitationDialog = null;
-    var autoComplete = null;
-    var userNames = [];
-    var userIds = [];
-    var userPhotoUrls = [];
-    var selectedFriendIds = {};
     var nilOptionText = 'n/a';
     var bandId = '';
 
@@ -61,7 +56,7 @@
       $("#band-setup-step-1").show();
       $("#band-setup-step-2").hide();
 
-      $('#band-invitee-input')
+      $('#friend-input')
         .unbind('blur')
         .attr("placeholder", "Looking up friends...")
         .prop('disabled', true)
@@ -178,16 +173,13 @@
     }
 
     function beforeShow(data) {
-      userNames = [];
-      userIds = [];
-      userPhotoUrls = [];
+      inviteMusiciansUtil.clearSelections();
       bandId = data.id == 'new' ? '' : data.id;
       resetForm();
     }
 
     function afterShow(data) {
-      friendSelectorDialog.setCallback(friendSelectorCallback);
-      loadFriends();
+      inviteMusiciansUtil.loadFriends();
 
       if (!is_new_record()) {
         $("#band-setup-title").html("edit band");
@@ -239,38 +231,6 @@
       });
     }
 
-    // TODO: this is repeated in createSession.js.erb
-    function loadFriends() {
-      rest.getFriends({ id: context.JK.currentUserId })
-        .done(function (friends) {
-          $.each(friends, function () {
-            userNames.push(this.name);
-            userIds.push(this.id);
-            userPhotoUrls.push(this.photo_url);
-          });
-
-          var autoCompleteOptions = {
-            lookup: { suggestions: userNames, data: userIds },
-            onSelect: addInvitation
-          };
-
-          $('#band-invitee-input').attr("placeholder", "Type a friend\'s name").prop('disabled', false);
-
-          if (!autoComplete) {
-            autoComplete = $('#band-invitee-input').autocomplete(autoCompleteOptions);
-          }
-          else {
-            autoComplete.setOptions(autoCompleteOptions);
-          }
-
-          $(".autocomplete").width("150px");
-        })
-        .fail(function () {
-          $('#band-invitee-input').attr("placeholder", "Unable to lookup friends");
-          app.ajaxError(arguments)
-        });
-    }
-
     function loadGenres(selectedGenres) {
       $("#band-genres").empty();
 
@@ -392,13 +352,6 @@
       }
     }
 
-    function friendSelectorCallback(newSelections) {
-      var keys = Object.keys(newSelections);
-      for (var i = 0; i < keys.length; i++) {
-        addInvitation(newSelections[keys[i]].userName, newSelections[keys[i]].userId);
-      }
-    }
-
     function addInvitation(value, data) {
       if ($('#selected-band-invitees div[user-id=' + data + ']').length === 0) {
         var template = $('#template-band-invitation').html();
@@ -461,10 +414,6 @@
 
       $('#btn-band-setup-save').click(saveBand);
 
-      $('#btn-band-choose-friends').click(function () {
-        friendSelectorDialog.showDialog(selectedFriendIds);
-      });
-
       $('#band-country').on('change', function (evt) {
         evt.stopPropagation();
         loadRegions();
@@ -492,10 +441,13 @@
       $('div[layout-id="band/setup"] .btn-facebook-invitation').click(function () {
         invitationDialog.showFacebookDialog();
       });
+
+      $('#friend-input').focus(function() { $(this).val(''); })
     }
 
-    function initialize(invitationDialogInstance, friendSelectorDialogInstance) {
-      friendSelectorDialog = friendSelectorDialogInstance;
+    function initialize(invitationDialogInstance, inviteMusiciansUtilInstance) {
+      inviteMusiciansUtil = inviteMusiciansUtilInstance;
+      inviteMusiciansUtil.inviteBandCreate('#band-setup-invite-musicians');
       invitationDialog = invitationDialogInstance;
       events();
 

web/app/assets/javascripts/inviteMusicians.js

@@ -21,6 +21,11 @@
             _appendFriendSelector($(elemSelector));
         };
 
+        this.inviteBandCreate = function(elemSelector) {
+            inviteAction = 'band';
+            _appendFriendSelector($(elemSelector));
+        };
+
         this.inviteSessionUpdate = function(elemSelector, sessionId) {
             this.clearSelections();
             updateSessionID = sessionId;
@@ -68,7 +73,7 @@
                     var autoCompleteOptions = {
                         lookup: { suggestions: userNames, data: userIds },
                         onSelect: addInvitation,
-                        serviceUrl: '/api/search.json?srch_sessinv=1',
+                        serviceUrl: '/api/search.json?srch_muscinv=1',
                         minChars: 3,
                         autoSelectFirst: true
                     };

web/app/views/clients/_band_setup.html.erb

@@ -94,7 +94,9 @@
                         <br/>
                         <h2>Step 2: Add Band Members</h2><br/>
                         <div class="left w70">If your bandmates are already on JamKazam, start typing their names in the box<br/> below, or click the Choose Friends button to select them.</div>
-                        <div class="right" layout-link="select-friends">
+                        <div id="band-setup-invite-musicians"></div>
+
+                        <!--<div class="right" layout-link="select-friends">
                             <a href="#" id="btn-band-choose-friends" class="button-grey right">CHOOSE FRIENDS</a>
                         </div>
                         <br clear="all" />
@@ -104,7 +106,7 @@
                             <div id="selected-band-invitees"></div>
                             <input id="band-invitee-input" type="text" placeholder="Looking up friends..." width="150px" />
                         </div>
-                        <br/><br/>
+                        <br/><br/>-->
                         If your bandmates are not on JamKazam yet, use any of the options below to invite them to join the service.<br/><br/>
 
                         <div class="left mr20">

web/app/views/clients/index.html.erb

@@ -179,7 +179,7 @@
             createSessionScreen.initialize(invitationDialog, inviteMusiciansUtil);
 
             var bandSetupScreen = new JK.BandSetupScreen(JK.app);
-            bandSetupScreen.initialize(invitationDialog, friendSelectorDialog);
+            bandSetupScreen.initialize(invitationDialog, inviteMusiciansUtil);
 
             var bandSetupPhotoScreen = new JK.BandSetupPhotoScreen(JK.app);
             bandSetupPhotoScreen.initialize();