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.

app/assets/javascripts/dispatcher.js

@@ -126,6 +126,7 @@
           new UsersSelect();
           break;
         case 'projects:project_members:index':
+          new MemberExpirationDate();
           new ProjectMembers();
           new UsersSelect();
           break;

app/assets/javascripts/member_expiration_date.js

+(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);

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);

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
+      .clearable-input
         = 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.
+        %i.clear-icon.js-clear-input
 
   .form-actions
     = f.submit 'Add users to project', class: "btn btn-create"

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
+      = 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'