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.

4 files changed, 32 insertions, 3 deletions

diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js
index fdcf3b115b7..93c34d5ccd7 100644
--- a/app/assets/javascripts/member_expiration_date.js
+++ b/app/assets/javascripts/member_expiration_date.js
@@ -8,6 +8,8 @@
     $('.js-access-expiration-date').each(function(i, element) {
       var expirationDateInput = $(element);
 
+      if (expirationDateInput.hasClass('hasDatepicker')) { return; }
+
       function toggleClearInput() {
         expirationDateInput.parent().toggleClass('has-value', !!expirationDateInput.val());
       }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 4409477916f..abda079ad4c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -714,3 +714,29 @@ pre.light-well {
     width: 300px;
   }
 }
+
+.clearable-input {
+  position: relative;
+
+  .clear-icon {
+    @extend .fa-times;
+    display: none;
+    position: absolute;
+    right: 7px;
+    top: 7px;
+    color: $location-icon-color;
+
+    &:before {
+      font-family: FontAwesome;
+      font-weight: normal;
+      font-style: normal;
+    }
+  }
+
+  &.has-value {
+    .clear-icon {
+      cursor: pointer;
+      display: block;
+    }
+  }
+}
diff --git a/app/views/projects/project_members/update.js.haml b/app/views/projects/project_members/update.js.haml
index 45f8ef89060..833954bc039 100644
--- a/app/views/projects/project_members/update.js.haml
+++ b/app/views/projects/project_members/update.js.haml
@@ -1,2 +1,3 @@
 :plain
   $("##{dom_id(@project_member)}").replaceWith('#{escape_javascript(render('shared/members/member', member: @project_member))}');
+  new MemberExpirationDate();
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index c959c41b221..1c081bcdc17 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -79,12 +79,12 @@
       %br
       = form_for member, remote: true, html: { class: 'form-horizontal' }  do |f|
         .form-group
-          = label_tag :expires_at, 'Project access', class: 'control-label'
+          = label_tag "member_access_level_#{member.id}", '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'
+            = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control', id: "member_access_level_#{member.id}"
         - if member.is_a?(ProjectMember)
           .form-group
-            = label_tag :expires_at, 'Access expiration date', class: 'control-label'
+            = label_tag "member_expires_at_#{member.id}", '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}"