Add MemberExpirationDate JS helper

This helper adds a datepicker to all `js-access-expiration-date`
elements. If that element is a child of a `clearable-input` element and
has a sibling `js-clear-input` element, then it will show a working
clear button to the right of the input field.

5 files changed, 48 insertions, 19 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 9e6901962c6..846162a5a74 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -126,6 +126,7 @@
           new UsersSelect();
           break;
         case 'projects:project_members:index':
+          new MemberExpirationDate();
           new ProjectMembers();
           new UsersSelect();
           break;
diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js
new file mode 100644
index 00000000000..fdcf3b115b7
--- /dev/null
+++ b/app/assets/javascripts/member_expiration_date.js
@@ -0,0 +1,32 @@
+(function() {
+  // Add datepickers to all `js-access-expiration-date` elements. If those elements are
+  // children of an element with the `clearable-input` class, and have a sibling
+  // `js-clear-input` element, then show that element when there is a value in the
+  // datepicker, and make clicking on that element clear the field.
+  //
+  this.MemberExpirationDate = function() {
+    $('.js-access-expiration-date').each(function(i, element) {
+      var expirationDateInput = $(element);
+
+      function toggleClearInput() {
+        expirationDateInput.parent().toggleClass('has-value', !!expirationDateInput.val());
+      }
+
+      expirationDateInput.datepicker({
+        dateFormat: 'yy-mm-dd',
+        minDate: 1,
+        onSelect: toggleClearInput
+      });
+
+      expirationDateInput.on('blur', toggleClearInput);
+
+      toggleClearInput();
+
+      expirationDateInput.next('.js-clear-input').on('click', function(event) {
+        event.preventDefault();
+        expirationDateInput.datepicker('setDate', null);
+        toggleClearInput();
+      });
+    });
+  };
+}).call(this);
diff --git a/app/assets/javascripts/project_members.js b/app/assets/javascripts/project_members.js
index 8171fa8d533..78f7b48bc7d 100644
--- a/app/assets/javascripts/project_members.js
+++ b/app/assets/javascripts/project_members.js
@@ -4,17 +4,7 @@
       $('li.project_member').bind('ajax:success', function() {
         return $(this).fadeOut();
       });
-
-      $('.js-project-members-page').on('focus', '.js-access-expiration-date', function() {
-        $(this).datepicker({
-          dateFormat: 'yy-mm-dd',
-          minDate: 1
-        });
-      });
     }
-
     return ProjectMembers;
-
   })();
-
 }).call(this);
diff --git a/app/views/projects/project_members/_new_project_member.html.haml b/app/views/projects/project_members/_new_project_member.html.haml
index 0545ed07d62..96d05c7fd65 100644
--- a/app/views/projects/project_members/_new_project_member.html.haml
+++ b/app/views/projects/project_members/_new_project_member.html.haml
@@ -15,11 +15,11 @@
         %strong= link_to "here", help_page_path("user/permissions"), class: "vlink"
 
   .form-group
-    = label_tag :expires_at, 'Access expiration date', class: 'control-label'
+    = f.label :expires_at, 'Access expiration date', class: 'control-label'
     .col-sm-10
-      = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date'
-      .help-block
-        Leave it empty if you do not want this user's access to expire.
+      .clearable-input
+        = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date'
+        %i.clear-icon.js-clear-input
 
   .form-actions
     = f.submit 'Add users to project', class: "btn btn-create"
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index 7dde9442e24..c959c41b221 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -77,11 +77,17 @@
   - if show_roles
     .edit-member.hide.js-toggle-content
       %br
-      = form_for member, remote: true do |f|
-        .prepend-top-10
-          = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control'
+      = form_for member, remote: true, html: { class: 'form-horizontal' }  do |f|
+        .form-group
+          = label_tag :expires_at, 'Project access', class: 'control-label'
+          .col-sm-10
+            = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control'
         - if member.is_a?(ProjectMember)
-          .prepend-top-10
-            = f.text_field :expires_at, class: 'form-control js-access-expiration-date', placeholder: 'Access expiration date', id: "member_expires_at_#{member.id}"
+          .form-group
+            = label_tag :expires_at, 'Access expiration date', class: 'control-label'
+            .col-sm-10
+              .clearable-input
+                = f.text_field :expires_at, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date', id: "member_expires_at_#{member.id}"
+                %i.clear-icon.js-clear-input
         .prepend-top-10
           = f.submit 'Save', class: 'btn btn-save btn-sm'