From b1df8c9aa76f4150e6fdbc798a88a38ea71ac6a9 Mon Sep 17 00:00:00 2001 From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:17:34 +0100 Subject: [PATCH] Adding inline editing to experiment title, project title and task title [SCI-3059] (#1524) * Adding inline editing to experiment title, project title and task title --- app/assets/javascripts/application.js.erb | 1 + .../javascripts/shared/inline_editing.js | 63 +++++++++++++ .../stylesheets/partials/_inline_editing.scss | 94 +++++++++++++++++++ app/controllers/experiments_controller.rb | 6 +- app/views/experiments/canvas.html.erb | 11 ++- .../_team_selection.html.erb | 4 + app/views/global_activities/index.html.erb | 31 ++++++ app/views/my_modules/protocols.html.erb | 11 ++- app/views/projects/show.html.erb | 11 ++- app/views/shared/_inline_editing.html.erb | 19 ++++ .../shared/_secondary_navigation.html.erb | 16 +++- 11 files changed, 259 insertions(+), 8 deletions(-) create mode 100644 app/assets/javascripts/shared/inline_editing.js create mode 100644 app/assets/stylesheets/partials/_inline_editing.scss create mode 100644 app/views/global_activities/_team_selection.html.erb create mode 100644 app/views/global_activities/index.html.erb create mode 100644 app/views/shared/_inline_editing.html.erb diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index 48d14fdfa..040f57363 100644 --- a/app/assets/javascripts/application.js.erb +++ b/app/assets/javascripts/application.js.erb @@ -38,6 +38,7 @@ //= require users/settings/teams/invite_users_modal //= require select2.min //= require select2_customization +//= require shared/inline_editing //= require turbolinks diff --git a/app/assets/javascripts/shared/inline_editing.js b/app/assets/javascripts/shared/inline_editing.js new file mode 100644 index 000000000..72d46a1d2 --- /dev/null +++ b/app/assets/javascripts/shared/inline_editing.js @@ -0,0 +1,63 @@ +function initInlineEditing(title) { + var editBlock = $('.' + title + '-editable-field'); + var inputString = editBlock.find('input'); + + function updateField() { + var params = {}; + + if (inputString[0].value === editBlock[0].dataset.originalName) { + inputString[0].disabled = true; + return false; + } + params[editBlock[0].dataset.paramsGroup] = {}; + params[editBlock[0].dataset.paramsGroup][editBlock[0].dataset.fieldToUpdate] = inputString[0].value; + $.ajax({ + url: editBlock[0].dataset.pathToUpdate, + type: 'PUT', + dataType: 'json', + data: params, + success: function() { + editBlock[0].dataset.originalName = inputString[0].value; + editBlock[0].dataset.error = false; + inputString[0].disabled = true; + }, + error: function(response) { + var errors = response.responseJSON; + editBlock[0].dataset.error = true; + if (response.responseJSON.errors === undefined) { + errors = errors[editBlock[0].dataset.fieldToUpdate][0]; + } else { + errors = errors.errors[editBlock[0].dataset.fieldToUpdate][0]; + } + editBlock.find('.error-block')[0].innerHTML = errors; + inputString.focus(); + } + }); + } + + editBlock.click(e => { + if (inputString[0].disabled) { + inputString[0].disabled = false; + inputString.focus(); + } + e.stopPropagation(); + }); + + $(window).click(() => { + if (inputString[0].disabled === false) { + updateField(); + } + }); + + $(editBlock.find('.save-button')).click(e => { + updateField(); + e.stopPropagation(); + }); + + $(editBlock.find('.cancel-button')).click(e => { + inputString[0].disabled = true; + editBlock[0].dataset.error = false; + inputString[0].value = editBlock[0].dataset.originalName; + e.stopPropagation(); + }); +} diff --git a/app/assets/stylesheets/partials/_inline_editing.scss b/app/assets/stylesheets/partials/_inline_editing.scss new file mode 100644 index 000000000..835a5867f --- /dev/null +++ b/app/assets/stylesheets/partials/_inline_editing.scss @@ -0,0 +1,94 @@ +@import "constants"; +@import "mixins"; + + +.inline-editing-container { + position: relative; + + .button-container { + height: 44px; + line-height: 44px; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + width: 72px; + + span { + color: $color-silver; + cursor: pointer; + display: inline-block; + position: absolute; + text-align: center; + width: 36px; + + &:nth-child(1) {left: 0;} + + &:nth-child(2) {right: 0;} + } + } + + .error-block { + bottom: 3px; + color: $brand-danger; + display: none; + font-size: $font-size-small; + left: 5px; + line-height: 12px; + position: absolute; + + } + + &[data-error="true"] { + + .error-block { + display: block; + } + + input { + padding-bottom: 16px; + padding-top: 0; + } + } + + input { + border: 1px solid $color-silver; + border-radius: $border-radius-small; + cursor: pointer; + line-height: 20px; + padding: 8px 5px; + padding-right: 36px; + width: calc(100% - 36px); + + &:focus { + outline: 0; + } + + &:disabled { + background: transparent; + border: 1px solid transparent; + cursor: pointer; + user-select: none; + + + .button-container { + display: none; + + } + + &:hover { + border: 1px solid $color-gainsboro; + } + } + } +} + +.nav-name.editable { + margin: 0; + + .inline-editing-container { + + input { + line-height: 26px; + } + } +} diff --git a/app/controllers/experiments_controller.rb b/app/controllers/experiments_controller.rb index e3b4a4b00..140b7b76c 100644 --- a/app/controllers/experiments_controller.rb +++ b/app/controllers/experiments_controller.rb @@ -119,24 +119,24 @@ class ExperimentsController < ApplicationController ) ) @experiment.touch(:workflowimg_updated_at) - flash[:success] = t('experiments.update.success_flash', - experiment: @experiment.name) respond_to do |format| format.json do render json: {}, status: :ok end format.html do + flash[:success] = t('experiments.update.success_flash', + experiment: @experiment.name) redirect_to project_path(@experiment.project) end end else - flash[:alert] = t('experiments.update.error_flash') respond_to do |format| format.json do render json: @experiment.errors, status: :unprocessable_entity end format.html do + flash[:alert] = t('experiments.update.error_flash') redirect_back(fallback_location: root_path) end end diff --git a/app/views/experiments/canvas.html.erb b/app/views/experiments/canvas.html.erb index 2769de66f..ae85ee762 100644 --- a/app/views/experiments/canvas.html.erb +++ b/app/views/experiments/canvas.html.erb @@ -1,6 +1,15 @@ <% provide(:head_title, t("experiments.canvas.head_title", project: h(@project.name)).html_safe) %> <%= render partial: "shared/sidebar", locals: { current_experiment: @experiment, page: 'canvas' } %> -<%= render partial: "shared/secondary_navigation" %> +<%= render partial: "shared/secondary_navigation" , locals: { + editable: { + name: 'title', + active: true, + width: 'calc(100% - 500px)', + params_group: 'experiment', + field_to_udpate: 'name', + path_to_update: experiment_path(@experiment) + } +}%>
diff --git a/app/views/global_activities/_team_selection.html.erb b/app/views/global_activities/_team_selection.html.erb new file mode 100644 index 000000000..2350b3c65 --- /dev/null +++ b/app/views/global_activities/_team_selection.html.erb @@ -0,0 +1,4 @@ +
Team
+ diff --git a/app/views/global_activities/index.html.erb b/app/views/global_activities/index.html.erb new file mode 100644 index 000000000..b8dc746ae --- /dev/null +++ b/app/views/global_activities/index.html.erb @@ -0,0 +1,31 @@ +
+
+
+

Global activities

+
+ +
+
+ Expand All +    + Colapse All +
+
+
+ + + + +
+
+
+

list of activities

+
+ +
+ +
+ <%= render "team_selection" %> +
+ +
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb index d073f8645..ca785c909 100644 --- a/app/views/my_modules/protocols.html.erb +++ b/app/views/my_modules/protocols.html.erb @@ -2,7 +2,16 @@ <%= render partial: 'shared/drag_n_drop_overlay' %> <%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %> -<%= render partial: "shared/secondary_navigation" %> +<%= render partial: "shared/secondary_navigation", locals: { + editable: { + name: 'title', + active: true, + width: 'calc(100% - 580px)', + params_group: 'my_module', + field_to_udpate: 'name', + path_to_update: my_module_path(@my_module) + } +} %>
<%= render partial: "module_header" %> diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb index 89c689ad9..b3bcb8543 100644 --- a/app/views/projects/show.html.erb +++ b/app/views/projects/show.html.erb @@ -1,6 +1,15 @@ <% provide(:head_title, t("projects.show.head_title", project: h(@project.name)).html_safe) %> <%= render partial: "shared/sidebar", locals: { current_project: @project, page: 'project' } %> -<%= render partial: "shared/secondary_navigation" %> +<%= render partial: "shared/secondary_navigation", locals: { + editable: { + name: 'title', + active: true, + width: 'calc(100% - 500px)', + params_group: 'project', + field_to_udpate: 'name', + path_to_update: project_path(@project) + } +}%>
diff --git a/app/views/shared/_inline_editing.html.erb b/app/views/shared/_inline_editing.html.erb new file mode 100644 index 000000000..6d078fc03 --- /dev/null +++ b/app/views/shared/_inline_editing.html.erb @@ -0,0 +1,19 @@ +
+ +
+ + +
+ +
+ \ No newline at end of file diff --git a/app/views/shared/_secondary_navigation.html.erb b/app/views/shared/_secondary_navigation.html.erb index 3ff0a346d..9387ca785 100644 --- a/app/views/shared/_secondary_navigation.html.erb +++ b/app/views/shared/_secondary_navigation.html.erb @@ -149,9 +149,21 @@ -

- <%= truncate(title_element.name, + <% editable = false if local_assigns[:editable].nil? %> +

+ <% if editable && editable[:active] %> + <%= render partial: "shared/inline_editing", locals: { + initial_value: truncate(title_element.name, length: Constants::MAX_EDGE_LENGTH), + width: editable[:width] || '100%', + name: editable[:name], + field_to_udpate: editable[:field_to_udpate], + path_to_update: editable[:path_to_update], + params_group: editable[:params_group] + } %> + <% else %> + <%= truncate(title_element.name, length: Constants::MAX_EDGE_LENGTH) %> + <% end %>