From 6352a4dd048ad9c2d1d9c8cf5a9e2356742a9436 Mon Sep 17 00:00:00 2001 From: artoscinote <85488244+artoscinote@users.noreply.github.com> Date: Tue, 3 May 2022 15:18:48 +0200 Subject: [PATCH] Implement protocol options dropdown [SCI-6750, SCI-6751] (#4066) * Implement protocol options dropdown [SCI-6750, SCI-6751] * Implement simple API error handling for step status update [SCI-6354] --- .../stylesheets/my_modules/protocol.scss | 10 ++ app/controllers/my_modules_controller.rb | 4 +- app/javascript/packs/vue/protocol.js | 1 + app/javascript/vue/protocol/container.vue | 57 +++-------- .../vue/protocol/protocolOptions.vue | 98 +++++++++++++++++++ app/javascript/vue/protocol/step.vue | 8 +- app/serializers/protocol_serializer.rb | 43 ++++++++ config/locales/en.yml | 3 +- 8 files changed, 176 insertions(+), 48 deletions(-) create mode 100644 app/javascript/vue/protocol/protocolOptions.vue create mode 100644 app/serializers/protocol_serializer.rb diff --git a/app/assets/stylesheets/my_modules/protocol.scss b/app/assets/stylesheets/my_modules/protocol.scss index 2f2feb43d..9b76a9850 100644 --- a/app/assets/stylesheets/my_modules/protocol.scss +++ b/app/assets/stylesheets/my_modules/protocol.scss @@ -27,4 +27,14 @@ } } } + .protocol-options-dropdown { + a { + cursor: pointer; + + &.disabled { + cursor: default; + pointer-events: none; + } + } + } } diff --git a/app/controllers/my_modules_controller.rb b/app/controllers/my_modules_controller.rb index adabaebaa..f52786623 100644 --- a/app/controllers/my_modules_controller.rb +++ b/app/controllers/my_modules_controller.rb @@ -263,14 +263,14 @@ class MyModulesController < ApplicationController end def protocol - render json: @my_module.protocol + render json: @my_module.protocol, serializer: ProtocolSerializer end def update_protocol protocol = @my_module.protocol protocol.update!(protocol_params) - render json: protocol + render json: protocol, serializer: ProtocolSerializer end def results diff --git a/app/javascript/packs/vue/protocol.js b/app/javascript/packs/vue/protocol.js index c5d096670..abd5f4836 100644 --- a/app/javascript/packs/vue/protocol.js +++ b/app/javascript/packs/vue/protocol.js @@ -9,6 +9,7 @@ Vue.prototype.i18n = window.I18n; window.initProtocolComponent = () => { Vue.prototype.dateFormat = $('#protocolContainer').data('date-format'); + new Vue({ el: '#protocolContainer', components: { diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue index 5b606ca28..a85a69560 100644 --- a/app/javascript/vue/protocol/container.vue +++ b/app/javascript/vue/protocol/container.vue @@ -6,8 +6,8 @@

{{ i18n.t('Protocol') }}

- - [{{ protocol.name }}] + + [{{ protocol.attributes.name }}] [{{ i18n.t('my_modules.protocols.protocol_status_bar.unlinked') }}] @@ -16,52 +16,20 @@
- New step + {{ i18n.t("protocols.steps.new_step") }} - Print + {{ i18n.t("protocols.print.button") }} -
- - -
+
import InlineEdit from 'vue/shared/inline_edit.vue' import Step from 'vue/protocol/step' + import ProtocolOptions from 'vue/protocol/protocolOptions' export default { name: 'ProtocolContainer', @@ -116,16 +85,18 @@ required: true } }, - components: { Step, InlineEdit }, + components: { Step, InlineEdit, ProtocolOptions }, data() { return { - protocol: {}, + protocol: { + attributes: {} + }, steps: {} } }, created() { - $.get(this.protocolUrl, (data) => { - this.protocol = data; + $.get(this.protocolUrl, (result) => { + this.protocol = result.data; }); $.get(this.stepsUrl, (result) => { this.steps = result.data @@ -133,7 +104,7 @@ }, methods: { updateName(newName) { - this.protocol.name = newName; + this.protocol.attributes.name = newName; $.ajax({ type: 'PATCH', url: this.protocolUrl, diff --git a/app/javascript/vue/protocol/protocolOptions.vue b/app/javascript/vue/protocol/protocolOptions.vue new file mode 100644 index 000000000..cafd8664c --- /dev/null +++ b/app/javascript/vue/protocol/protocolOptions.vue @@ -0,0 +1,98 @@ + + + diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue index ad9c91b34..82af563b8 100644 --- a/app/javascript/vue/protocol/step.vue +++ b/app/javascript/vue/protocol/step.vue @@ -107,8 +107,12 @@ }); }, changeState() { - $.post(this.step.attributes.urls.state_url, {completed: !this.step.attributes.completed}, (result) => { - this.$emit('step:update', result.data.attributes) + this.step.attributes.completed = !this.step.attributes.completed; + this.$emit('step:update', this.step) + $.post(this.step.attributes.urls.state_url, {completed: this.step.attributes.completed}).error(() => { + this.step.attributes.completed = !this.step.attributes.completed; + this.$emit('step:update', this.step) + HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger'); }) }, updateName(newName) { diff --git a/app/serializers/protocol_serializer.rb b/app/serializers/protocol_serializer.rb new file mode 100644 index 000000000..74abadd5a --- /dev/null +++ b/app/serializers/protocol_serializer.rb @@ -0,0 +1,43 @@ +# frozen_string_literal: true + +class ProtocolSerializer < ActiveModel::Serializer + include Canaid::Helpers::PermissionsHelper + include Rails.application.routes.url_helpers + + attributes :name, :id, :urls + + def urls + { + load_from_repo_url: load_from_repo_url, + save_to_repo_url: save_to_repo_url, + export_url: export_url, + import_url: import_url + } + end + + private + + def load_from_repo_url + return unless can_manage_protocol_in_module?(object) + + load_from_repository_modal_protocol_path(object, format: :json) + end + + def save_to_repo_url + return unless can_read_protocol_in_module?(object) && can_create_protocols_in_repository?(object.team) + + copy_to_repository_modal_protocol_path(object, format: :json) + end + + def import_url + return unless can_manage_protocol_in_module?(object) + + load_from_file_protocol_path(object, format: :json) + end + + def export_url + return unless can_read_protocol_in_module?(object) + + export_protocols_path(protocol_ids: object.id, my_module_id: object.my_module.id) + end +end diff --git a/config/locales/en.yml b/config/locales/en.yml index 10dd0f723..b876cb9a9 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -178,7 +178,8 @@ en: attributes: output_id: creates_cycle: "mustn't create cycle" - + errors: + general: "Something went wrong." helpers: label: team: