diff --git a/app/assets/javascripts/my_modules/tags.js b/app/assets/javascripts/my_modules/tags.js index a0a74adb6..2d51cc07e 100644 --- a/app/assets/javascripts/my_modules/tags.js +++ b/app/assets/javascripts/my_modules/tags.js @@ -146,13 +146,11 @@ }); // initialize my_module tab remote loading $('#experimentTable, .my-modules-protocols-index, #experiment-canvas') - .on('ajax:before', '.edit-tags-link', function() { - manageTagsModal.modal('show'); + .on('click', '.edit-tags-link', function() { + if($('#tagsModalComponent').length) { + $('#tagsModalComponent').data('tagsModal').open() + } }) - .on('ajax:success', '.edit-tags-link', function(e, data) { - $('#manage-module-tags-modal-module').text(data.my_module.name); - initTagsModalBody(data); - }); } bindEditTagsAjax(); diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb index 5cbcfa281..3680214bc 100644 --- a/app/assets/javascripts/projects/canvas.js.erb +++ b/app/assets/javascripts/projects/canvas.js.erb @@ -933,17 +933,9 @@ function bindEditTagsAjax(elements) { // initialize my_module tab remote loading $(elements).find("a.edit-tags-link") - .on("ajax:before", function () { - var moduleId = $(this).closest(".panel-default").attr("data-module-id"); - manageTagsModal.attr("data-module-id", moduleId); - manageTagsModal.modal('show'); - }) - .on("ajax:success", function (e, data) { - $("#manage-module-tags-modal-module").text(data.my_module.name); - initTagsModalBody(data); - }) .on('click', function(){ $(this).addClass('updated-module-tags'); + var modal = $(this).closest(".panel-default").find('.tags-modal-component').data('tagsModal').open(); }); } diff --git a/app/assets/stylesheets/shared/ag_table.scss b/app/assets/stylesheets/shared/ag_table.scss index 9282f8783..c4cf3c1a0 100644 --- a/app/assets/stylesheets/shared/ag_table.scss +++ b/app/assets/stylesheets/shared/ag_table.scss @@ -15,7 +15,6 @@ --ag-icon-font-code-checkbox-indeterminate: asset-url("checkbox/indeterminate.svg"); --ag-input-focus-box-shadow: none; --ag-cell-horizontal-padding: .75rem; - border: 0; .ag-cell { @@ -31,6 +30,10 @@ cursor: pointer; } + .ag-header-cell-resize { + width: 1rem; + } + .ag-input-field-input:focus { outline: none !important; outline-offset: 0 !important; diff --git a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss index aeb6daaf9..abf80f66f 100644 --- a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss +++ b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss @@ -90,5 +90,13 @@ input[type="checkbox"].sci-checkbox { border: $border-tertiary; } } + + &:checked + .sci-checkbox-label { + &::before { + background-color: var(--sn-sleepy-grey); + border: 1px solid var(--sn-sleepy-grey); + + } + } } } diff --git a/app/controllers/experiments_controller.rb b/app/controllers/experiments_controller.rb index 6c94aa622..9a2630d47 100644 --- a/app/controllers/experiments_controller.rb +++ b/app/controllers/experiments_controller.rb @@ -74,6 +74,8 @@ class ExperimentsController < ApplicationController .select('COUNT(DISTINCT comments.id) as task_comments_count') .select('my_modules.*').group(:id) end + + save_view_type('canvas') end def my_modules @@ -456,6 +458,12 @@ class ExperimentsController < ApplicationController params.require(:experiment).require(:view_type) end + def save_view_type(view_type) + view_state = @experiment.current_view_state(current_user) + view_state.state['my_modules']['view_type'] = view_type + view_state.save! + end + def check_read_permissions current_team_switch(@experiment.project.team) if current_team != @experiment.project.team render_403 unless can_read_experiment?(@experiment) || diff --git a/app/controllers/my_modules_controller.rb b/app/controllers/my_modules_controller.rb index 2dab50511..771cbfabd 100644 --- a/app/controllers/my_modules_controller.rb +++ b/app/controllers/my_modules_controller.rb @@ -38,6 +38,7 @@ class MyModulesController < ApplicationController meta: pagination_dict(my_modules) end format.html do + save_view_type('table') render 'my_modules/index' end end @@ -573,6 +574,12 @@ class MyModulesController < ApplicationController end end + def save_view_type(view_type) + view_state = @experiment.current_view_state(current_user) + view_state.state['my_modules']['view_type'] = view_type + view_state.save! + end + def log_activity(type_of, my_module = nil, message_items = {}) my_module ||= @my_module message_items = { my_module: my_module.id }.merge(message_items) diff --git a/app/javascript/packs/vue/legacy/tags_modal.js b/app/javascript/packs/vue/legacy/tags_modal.js new file mode 100644 index 000000000..19dd02e51 --- /dev/null +++ b/app/javascript/packs/vue/legacy/tags_modal.js @@ -0,0 +1,68 @@ +/* global I18n dropdownSelector */ + +import { createApp } from 'vue/dist/vue.esm-bundler.js'; +import TagsModal from '../../../vue/my_modules/modals/tags.vue'; +import { mountWithTurbolinks } from '../helpers/turbolinks.js'; + +window.initTagsModalComponent = (id) => { + const app = createApp({ + data() { + return { + tagsModalOpen: false + }; + }, + mounted() { + $(this.$refs.tagsModal).data('tagsModal', this); + }, + methods: { + open() { + this.tagsModalOpen = true; + }, + close() { + this.tagsModalOpen = false; + }, + syncTags(tags) { + // My module page + if ($('#module-tags-selector').length) { + const assignedTags = tags.filter((i) => i.assigned).map((i) => ( + { + value: i.id, + label: i.attributes.name, + params: { + color: i.attributes.color + } + } + )); + dropdownSelector.setData('#module-tags-selector', assignedTags); + } + + // Canvas + if ($('#canvas-container').length) { + $.ajax({ + url: $('#canvas-container').attr('data-module-tags-url'), + type: 'GET', + dataType: 'json', + success(data) { + $.each(data.my_modules, (index, myModule) => { + $(`div.panel[data-module-id='${myModule.id}']`) + .find('.edit-tags-link') + .html(myModule.tags_html); + }); + } + }); + } + } + } + }); + app.component('tags-modal', TagsModal); + app.config.globalProperties.i18n = window.I18n; + mountWithTurbolinks(app, id); +}; + +document.addEventListener('turbolinks:load', () => { + const tagsModalContainers = document.querySelectorAll('.vue-tags-modal:not(.initialized)'); + tagsModalContainers.forEach((container) => { + $(container).addClass('initialized') + window.initTagsModalComponent(`#${container.id}`); + }); +}); diff --git a/app/javascript/vue/experiments/list.vue b/app/javascript/vue/experiments/list.vue index 2a12a44a8..e90658f57 100644 --- a/app/javascript/vue/experiments/list.vue +++ b/app/javascript/vue/experiments/list.vue @@ -122,7 +122,8 @@ export default { { field: 'created_at', headerName: this.i18n.t('experiments.card.start_date'), - sortable: true + sortable: true, + minWidth: 130 }, { field: 'updated_at', diff --git a/app/javascript/vue/my_modules/list.vue b/app/javascript/vue/my_modules/list.vue index 835195161..64daed3b1 100644 --- a/app/javascript/vue/my_modules/list.vue +++ b/app/javascript/vue/my_modules/list.vue @@ -26,6 +26,7 @@ -

{{ i18n.t("experiments.canvas.modal_manage_tags.head_title") }}

+

+ {{ i18n.t("experiments.canvas.modal_manage_tags.head_title_read") }} +

-
+
{{ i18n.t("experiments.canvas.modal_manage_tags.explanatory_text") }}
-
-
+
+
{{ i18n.t("experiments.canvas.modal_manage_tags.project_tags", { project: this.projectName }) }}
+
+
+ +
+
-
- - - - -
@@ -103,7 +132,7 @@ >