scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 06:35:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Save on click away, inline editing

Browse source
This commit is contained in:
Mojca Lorber 2019-11-03 14:59:30 +01:00
parent ec66ab8654
commit 16eddc0ad0
8 changed files with 61 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
app/assets/javascripts/users/settings/teams/show.js
View file

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

14
app/views/shared/_inline_editing.html.erb
View file

@ -1,10 +1,12 @@
<% config = defined?(local_config) ? local_config : @inline_editable_title_config %>
<div
class="inline-editing-container <%= @inline_editable_title_config[:name] %>-editable-field"
data-field-to-update="<%= @inline_editable_title_config[:field_to_udpate] %>"
data-params-group="<%= @inline_editable_title_config[:params_group] %>"
data-path-to-update="<%= @inline_editable_title_config[:path_to_update] %>"
class="inline-editing-container <%= config[:name] %>-editable-field"
data-field-to-update="<%= config[:field_to_udpate] %>"
data-params-group="<%= config[:params_group] %>"
data-path-to-update="<%= config[:path_to_update] %>"
data-original-name="<%= initial_value %>"
data-label-after='<%= @inline_editable_title_config[:label_after]&.html_safe %>'
data-label-after='<%= config[:label_after]&.html_safe %>'
error="false"
>
<div class="view-mode"><%= initial_value %></div>
@ -16,5 +18,5 @@
<span class="error-block"></span>
</div>
<script>
initInlineEditing('<%= @inline_editable_title_config[:name] %>')
initInlineEditing('<%= config[:name] %>')
</script>

87
app/views/users/registrations/edit.html.erb
View file

@ -32,67 +32,34 @@
</div>
</div>
</div>
<%= 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| %>
<div data-part="view">
<div class="form-group">
<%= f.label t("users.registrations.edit.name_label") %>
<div class="input-group">
<input data-role="src" class="form-control" disabled="disabled" type="text" value="<%= @user.full_name %>" name="fake_user[full_name]" id="fake_user_full_name">
<span class="input-group-btn">
<a href="#" class="btn btn-default" data-action="edit"><%=t "general.edit" %></a>
</span>
</div>
</div>
</div>
<div data-part="edit" style="display: none;">
<div class="well">
<h4><%=t "users.registrations.edit.name_title" %></h4>
<div class="form-group">
<%= f.label :full_name, t("users.registrations.edit.name_label") %>
<%= f.text_field :full_name, class: "form-control", "data-role" => "edit" %>
</div>
<div class="align-right">
<a href="#" class="btn btn-default" data-action="cancel"><%=t "general.cancel" %></a>
<%= f.submit t("general.save"), class: "btn btn-success" %>
</div>
</div>
</div>
<% 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| %>
<div data-part="view">
<div class="form-group">
<%= f.label t("users.registrations.edit.initials_label") %>
<div class="input-group">
<input data-role="src" class="form-control" disabled="disabled" type="text" value="<%= @user.initials %>" name="fake_user[initials]" id="fake_user_initials">
<span class="input-group-btn">
<a href="#" class="btn btn-default" data-action="edit"><%=t "general.edit" %></a>
</span>
</div>
</div>
</div>
<div data-part="edit" style="display: none;">
<div class="well">
<h4><%=t "users.registrations.edit.initials_title" %></h4>
<div class="form-group">
<%= f.label :initials, t("users.registrations.edit.initials_label") %>
<%= f.text_field :initials, class: "form-control", "data-role" => "edit" %>
</div>
<div class="align-right">
<a href="#" class="btn btn-default" data-action="cancel"><%=t "general.cancel" %></a>
<%= f.submit t("general.save"), class: "btn btn-success" %>
</div>
</div>
</div>
<% end %>
<span class="settings-page-full-name" style="padding-bottom: 30px; display: block;">
<label><%= t("users.registrations.edit.name_label") %></label>
<%= 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)
}
} %>
</span>
<span class="settings-page-initials" style="padding-bottom: 30px; display: block;">
<label><%= t("users.registrations.edit.initials_label") %></label>
<%= 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)
}
} %>
</span>
<%= form_for(resource,
as: resource_name,

21
app/views/users/settings/teams/_name_modal.html.erb
View file

@ -1,21 +0,0 @@
<div class="modal"
id="team-name-modal"
tabindex="-1"
role="dialog"
aria-labelledby="team-name-modal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="team-name-modal-label">
<%= t('users.settings.teams.edit.name_title') %>
</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><%=t 'general.cancel' %></button>
<button type="button" class="btn btn-success" data-action="submit"><%=t 'general.save' %></button>
</div>
</div>
</div>
</div>

6
app/views/users/settings/teams/_name_modal_body.html.erb
View file

@ -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 %>

27
app/views/users/settings/teams/show.html.erb
View file

@ -15,17 +15,23 @@
<%= render partial: "users/settings/teams/breadcrumbs.html.erb" %>
<!-- TITLE -->
<% if can_update_team?(@team) %>
<%= link_to team_name_path(@team, format: :json),
remote: true,
class: 'name-link name-refresh',
style: 'color: inherit' do %>
<h3 id="team-name"><%= @team.name %></h3>
<h3 id="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 %>
<h3 id="team-name"><%= @team.name %></h3>
<% end %>
<br />
</h3>
<br>
<!-- End of TITLE -->
<!-- HEADER -->
@ -122,7 +128,6 @@
</div>
</div>
<%= 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',

16
features/settings_page/profile.feature
View file

@ -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

4
features/settings_page/team.feature
View file

@ -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