Consolidate user lookup

include/staff/footer.inc.php

@@ -17,5 +17,8 @@ if(is_object($thisstaff) && $thisstaff->isStaff()) { ?>
     <h4>Please Wait!</h4>
     <p>Please wait... it will take a second!</p>
 </div>
+<div class="dialog" style="display:none;width:650px;" id="popup">
+    <div class="body"></div>
+</div>
 </body>
 </html>

include/staff/templates/user-lookup.tmpl.php

-<h3>User Lookup</h3>
-<a class="close" href=""><i class="icon-remove-circle"></i></a>
+<h3><?php echo $info['title']; ?></h3>
+<b><a class="close" href="#"><i class="icon-remove-circle"></i></a></b>
 <hr/>
-<form method="post" action="" onsubmit="javascript:
-    var form=$(this), target=$('#client-info'), target_id=$('#user_id'),
-        user_id=$(this.user_id).val();
-    if (user_id) {
-        target_id.val(user_id);
-        target.text($('#user-lookup-name').text()
-            + ' &lt;' + $('#user-lookup-email').text() + '&gt;');
-    }
-    $('#user-lookup').hide();
-    $('#overlay').hide();
-    return false;">
-<div id="dialog-body">
-<input type="text" style="width:100%" placeholder="Search" id="client-search"/>
-<br/><br/>
-<i class="icon-user icon-4x pull-left icon-border"></i>
-<div><strong id="user-lookup-name"><?php echo $user_info['name']; ?></strong></div>
-<div>&lt;<span id="user-lookup-email"><?php echo $user_info['email']; ?></span>&gt;</div>
-<input type="hidden" id="user-lookup-id" name="user_id" value=""/>
-<div class="clear"></div>
+<div><p id="msg_info"><i class="icon-info-sign"></i>&nbsp; Search existing users or add a new user.</p></div>
+<div><input type="text" style="width:100%;" placeholder="Search by email, phone or name" id="user-search"/></div>
+<?php
+if ($info['error']) {
+    echo sprintf('<p id="msg_error">%s</p>', $info['error']);
+} elseif ($info['msg']) {
+    echo sprintf('<p id="msg_notice">%s</p>', $info['msg']);
+} ?>
+<div id="selected-user-info" style="display:<?php echo $user ? 'block' :'none'; ?>;margin:5px;">
+<form method="get" class="user" action="#users/lookup">
+    <input type="hidden" id="user-id" name="id" value="<?php echo $user ? $user->getId() : 0; ?>"/>
+    <i class="icon-user icon-4x pull-left icon-border"></i>
+    <a class="action-button pull-right" style="overflow:inherit"
+        id="unselect-user"  href="#"><i class="icon-remove"></i> Add New User</a>
+    <div><strong id="user-name"><?php echo $user ? $user->getName() : ''; ?></strong></div>
+    <div>&lt;<span id="user-email"><?php echo $user ? $user->getEmail() : ''; ?></span>&gt;</div>
+    <div class="clear"></div>
+    <hr>
+    <p class="full-width">
+        <span class="buttons" style="float:left">
+            <input type="button" name="cancel" class="close"  value="Cancel">
+        </span>
+        <span class="buttons" style="float:right">
+            <input type="submit" value="Continue">
+        </span>
+     </p>
+</form>
 </div>
+<div id="new-user-form" style="display:<?php echo $user ? 'none' :'block'; ?>;">
+<form method="post" class="user" action="#users/lookup/form">
+    <table width="100%">
+    <?php
+        if(!$form) $form = UserForm::getInstance();
+        $form->render(true, 'New User Information'); ?>
+    </table>
     <hr>
     <p class="full-width">
         <span class="buttons" style="float:left">
-            <input type="button" value="Cancel" class="close">
+            <input type="reset" value="Reset">
+            <input type="button" name="cancel" class="<?php echo $user ? 'cancel' : 'close' ?>"  value="Cancel">
         </span>
         <span class="buttons" style="float:right">
-            <input type="submit" value="Update">
+            <input type="submit" value="Add User">
         </span>
      </p>
 </form>
+</div>
 <div class="clear"></div>
 <script type="text/javascript">
 $(function() {
-    $('#client-search').typeahead({
+    $('#user-search').typeahead({
         source: function (typeahead, query) {
             $.ajax({
                 url: "ajax.php/users?q="+query,
@@ -45,11 +62,28 @@ $(function() {
             });
         },
         onselect: function (obj) {
-            $('#user-lookup-name').text(obj.name);
-            $('#user-lookup-email').text(obj.email);
-            $('#user-lookup-id').val(obj.id);
+            $('#user-name').text(obj.name);
+            $('#user-email').text(obj.email);
+            $('#user-id').val(obj.id);
+            $('div#selected-user-info').show();
+            $('div#new-user-form').hide();
+            $('#user-search').val('');
         },
         property: "/bin/true"
     });
+
+    $('a#unselect-user').click( function(e) {
+        e.preventDefault();
+        $('div#selected-user-info').hide();
+        $('div#new-user-form').fadeIn();
+        return false;
+     });
+
+    $(document).on('click', 'form.user input.cancel', function (e) {
+        e.preventDefault();
+        $('div#new-user-form').hide();
+        $('div#selected-user-info').fadeIn();
+        return false;
+     });
 });
 </script>

scp/js/scp.js

@@ -390,6 +390,41 @@ $(document).ready(function(){
         $('#advanced-search').show();
     });
 
+
+    $.userLookup = function (url, callback) {
+
+        $('.dialog#popup .body').load(url, function () {
+            $('#overlay').show();
+            $('.dialog#popup').show();
+            $(document).on('submit', '.dialog#popup form.user',function(e) {
+                e.preventDefault();
+                var $form = $(this);
+                var $dialog = $form.closest('.dialog');
+                $.ajax({
+                    type:  $form.attr('method'),
+                    url: 'ajax.php/'+$form.attr('action').substr(1),
+                    data: $form.serialize(),
+                    cache: false,
+                    success: function(resp, status, xhr) {
+                        if (xhr && xhr.status == 201) {
+                            var user = $.parseJSON(xhr.responseText);
+                            $('div.body', $dialog).empty();
+                            $dialog.hide();
+                            $('#overlay').hide();
+                            if(callback) callback(user);
+                        } else {
+                            $('div.body', $dialog).html(resp);
+                            $('#msg_notice, #msg_error', $dialog).delay(5000).fadeOut();
+                        }
+                    }
+                })
+                .done(function() { })
+                .fail(function() { });
+                return false;
+            });
+         });
+     };
+
     $('#advanced-search').delegate('#status', 'change', function() {
         switch($(this).val()) {
             case 'closed':