From dd4784f3b16218cadfa3f73dce2250d4276ffb1f Mon Sep 17 00:00:00 2001
From: Sean McGivern <sean@gitlab.com>
Date: Thu, 18 Aug 2016 14:12:48 +0100
Subject: [PATCH] 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 | 1 +
.../javascripts/member_expiration_date.js | 32 +++++++++++++++++++
app/assets/javascripts/project_members.js | 10 ------
.../_new_project_member.html.haml | 8 ++---
app/views/shared/members/_member.html.haml | 16 +++++++---
5 files changed, 48 insertions(+), 19 deletions(-)
create mode 100644 app/assets/javascripts/member_expiration_date.js
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'
--
GitLab