From 16eddc0ad07b10d51cf9070c57d62100fd2df386 Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Sun, 3 Nov 2019 14:59:30 +0100 Subject: [PATCH] Save on click away, inline editing --- .../javascripts/users/settings/teams/show.js | 39 --------- app/views/shared/_inline_editing.html.erb | 14 +-- app/views/users/registrations/edit.html.erb | 87 ++++++------------- .../users/settings/teams/_name_modal.html.erb | 21 ----- .../settings/teams/_name_modal_body.html.erb | 6 -- app/views/users/settings/teams/show.html.erb | 27 +++--- features/settings_page/profile.feature | 16 ++-- features/settings_page/team.feature | 4 +- 8 files changed, 61 insertions(+), 153 deletions(-) delete mode 100644 app/views/users/settings/teams/_name_modal.html.erb delete mode 100644 app/views/users/settings/teams/_name_modal_body.html.erb diff --git a/app/assets/javascripts/users/settings/teams/show.js b/app/assets/javascripts/users/settings/teams/show.js index d0e22bc44..c48090d2a 100644 --- a/app/assets/javascripts/users/settings/teams/show.js +++ b/app/assets/javascripts/users/settings/teams/show.js @@ -3,44 +3,6 @@ var usersDatatable = null; - // Initialize edit name modal window - function initEditName() { - var editNameModal = $('#team-name-modal'); - var editNameModalBody = editNameModal.find('.modal-body'); - var editNameModalSubmitBtn = editNameModal.find("[data-action='submit']"); - $('.name-link').on('ajax:success', function(ev, data) { - // Set modal body - editNameModalBody.html(data.html); - - editNameModalBody.find('form') - .on('ajax:success', function() { - // Reload page - location.reload(); - }) - .on('ajax:error', function(ev2, data2) { - // Display errors if needed - editNameModalBody - .find('form') - .renderFormErrors('team', data2.responseJSON); - }); - - // Show modal - editNameModal.modal('show'); - }).on('ajax:error', function() { - // TODO - }); - - editNameModalSubmitBtn.on('click', function() { - // Submit the form inside the modal - editNameModalBody.find('form').submit(); - }); - - editNameModal.on('hidden.bs.modal', function() { - editNameModalBody.find('form').off('ajax:success ajax:error'); - editNameModalBody.html(''); - }); - } - // Initialize edit description modal window function initEditDescription() { var editDescriptionModal = $('#team-description-modal'); @@ -236,7 +198,6 @@ }); } - initEditName(); initEditDescription(); initUsersTable(); initUpdateRoles(); diff --git a/app/views/shared/_inline_editing.html.erb b/app/views/shared/_inline_editing.html.erb index fd1c187a4..8357e11fb 100644 --- a/app/views/shared/_inline_editing.html.erb +++ b/app/views/shared/_inline_editing.html.erb @@ -1,10 +1,12 @@ +<% config = defined?(local_config) ? local_config : @inline_editable_title_config %> +
<%= initial_value %>
@@ -16,5 +18,5 @@
diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb index dc95711c7..7091ff18d 100644 --- a/app/views/users/registrations/edit.html.erb +++ b/app/views/users/registrations/edit.html.erb @@ -32,67 +32,34 @@ - <%= form_for(resource, - as: resource_name, - url: registration_path(resource_name, format: :json), - remote: true, - html: { method: :put, "data-for" => "full_name", class: 'settings-page-full-name', id: 'user-full_name-field' }) do |f| %> -
-
- <%= f.label t("users.registrations.edit.name_label") %> -
- - - <%=t "general.edit" %> - -
-
-
-
-
-

<%=t "users.registrations.edit.name_title" %>

-
- <%= f.label :full_name, t("users.registrations.edit.name_label") %> - <%= f.text_field :full_name, class: "form-control", "data-role" => "edit" %> -
-
- <%=t "general.cancel" %> - <%= f.submit t("general.save"), class: "btn btn-success" %> -
-
-
- <% end %> - <%= form_for(resource, - as: resource_name, - url: registration_path(resource_name, format: :json), - remote: true, - html: { method: :put, "data-for" => "initials", class: 'settings-page-initials', id: 'user-initials-field' }) do |f| %> -
-
- <%= f.label t("users.registrations.edit.initials_label") %> -
- - - <%=t "general.edit" %> - -
-
-
-
-
-

<%=t "users.registrations.edit.initials_title" %>

-
- <%= f.label :initials, t("users.registrations.edit.initials_label") %> - <%= f.text_field :initials, class: "form-control", "data-role" => "edit" %> -
-
- <%=t "general.cancel" %> - <%= f.submit t("general.save"), class: "btn btn-success" %> -
-
-
- <% end %> + + + <%= render partial: "shared/inline_editing", + locals: { + initial_value: @user.full_name, + local_config: { + name: 'user_full_name', + params_group: 'user', + field_to_udpate: 'full_name', + path_to_update: registration_path(resource_name, format: :json) + } + } %> + + + + + <%= render partial: "shared/inline_editing", + locals: { + initial_value: @user.initials, + local_config: { + name: 'user_initials', + params_group: 'user', + field_to_udpate: 'initials', + path_to_update: registration_path(resource_name, format: :json) + } + } %> + <%= form_for(resource, as: resource_name, diff --git a/app/views/users/settings/teams/_name_modal.html.erb b/app/views/users/settings/teams/_name_modal.html.erb deleted file mode 100644 index c0b7f79ab..000000000 --- a/app/views/users/settings/teams/_name_modal.html.erb +++ /dev/null @@ -1,21 +0,0 @@ - diff --git a/app/views/users/settings/teams/_name_modal_body.html.erb b/app/views/users/settings/teams/_name_modal_body.html.erb deleted file mode 100644 index 5d81d3495..000000000 --- a/app/views/users/settings/teams/_name_modal_body.html.erb +++ /dev/null @@ -1,6 +0,0 @@ -<%= bootstrap_form_for team, - url: update_team_path(team, format: :json), - remote: :true, - method: :put do |f| %> - <%= f.text_field :name, label: t('users.settings.teams.edit.name_label') %> -<% end %> diff --git a/app/views/users/settings/teams/show.html.erb b/app/views/users/settings/teams/show.html.erb index cb9c7d660..6a4566db8 100644 --- a/app/views/users/settings/teams/show.html.erb +++ b/app/views/users/settings/teams/show.html.erb @@ -15,17 +15,23 @@ <%= render partial: "users/settings/teams/breadcrumbs.html.erb" %> - <% if can_update_team?(@team) %> - <%= link_to team_name_path(@team, format: :json), - remote: true, - class: 'name-link name-refresh', - style: 'color: inherit' do %> -

<%= @team.name %>

+

+ <% if can_update_team?(@team) %> + <%= render partial: "shared/inline_editing", + locals: { + initial_value: @team.name, + local_config: { + name: 'team_name', + params_group: 'team', + field_to_udpate: 'name', + path_to_update: update_team_path(@team, format: :json) + } + } %> + <% else %> + <%= @team.name %> <% end %> - <% else %> -

<%= @team.name %>

- <% end %> -
+ +
@@ -122,7 +128,6 @@ -<%= render partial: 'users/settings/teams/name_modal.html.erb' %> <%= render partial: 'users/settings/teams/description_modal.html.erb' %> <%= render( partial: 'shared/invite_users_modal.html.erb', diff --git a/features/settings_page/profile.feature b/features/settings_page/profile.feature index 74ebb3802..e2bc02aed 100644 --- a/features/settings_page/profile.feature +++ b/features/settings_page/profile.feature @@ -29,26 +29,26 @@ Scenario: Successful upload avatar image @javascript Scenario: Successfully changes user full name Given I'm on the profile page - Then I click on Edit on ".settings-page-full-name" input field + Then I click on ".settings-page-full-name" element And I fill in "Karli Novak Novakovic" in ".settings-page-full-name" input field - Then I click "Save" button - And I should see "Karli Novak Novakovic" in ".settings-page-full-name" input field + Then I click on ".save-button" element + And I should see "Karli Novak Novakovic" on ".settings-page-full-name" element @javascript Scenario: Unsuccessfully changes user initials, text is too long Given I'm on the profile page - Then I click on Edit on ".settings-page-initials" input field + Then I click on ".settings-page-initials" element And I fill in "KNOCK" in ".settings-page-initials" input field - Then I click "Save" button + Then I click on ".save-button" element And I should see "is too long (maximum is 4 characters)" error message @javascript Scenario: Successfully changes user initials Given I'm on the profile page - Then I click on Edit on ".settings-page-initials" input field + Then I click on ".settings-page-initials" element And I fill in "KN" in ".settings-page-initials" input field - Then I click "Save" button - And I should see "KN" in ".settings-page-initials" input field + Then I click on ".save-button" element + And I should see "KN" on ".settings-page-initials" element @javascript Scenario: Successfully changes user email diff --git a/features/settings_page/team.feature b/features/settings_page/team.feature index 3716ff51b..4863c1247 100644 --- a/features/settings_page/team.feature +++ b/features/settings_page/team.feature @@ -19,8 +19,8 @@ Feature: Team settings Scenario: Successfully changes team name Given I'm on "BioSistemika Process" team settings page Then I click on team title - And I change "BioSistemika Process" with "BioSistemika Process Company" in "team-name-modal" input field - Then I click "Save" button + And I change "BioSistemika Process" with "BioSistemika Process Company" in "team-name" input field + Then I click on ".save-button" element And I should see "BioSistemika Process Company" on "#team-name" element @javascript