diff --git a/app/javascript/packs/vue/assign_items_to_task_modal.js b/app/javascript/packs/vue/assign_items_to_task_modal.js new file mode 100644 index 000000000..1c0775e76 --- /dev/null +++ b/app/javascript/packs/vue/assign_items_to_task_modal.js @@ -0,0 +1,37 @@ +import TurbolinksAdapter from 'vue-turbolinks'; +import Vue from 'vue/dist/vue.esm'; +import AssignItemsToTaskModalContainer from '../../vue/assign_items_to_tasks_modal/container.vue'; + +Vue.use(TurbolinksAdapter); +Vue.prototype.i18n = window.I18n; + +function initAssignItemsToTaskModalComponent() { + const container = $('.assign-items-to-task-modal-container'); + if (container.length) { + window.AssignItemsToTaskModalComponent = new Vue({ + el: '.assign-items-to-task-modal-container', + name: 'AssignItemsToTaskModalComponent', + components: { + 'assign-items-to-task-modal-container': AssignItemsToTaskModalContainer + }, + data() { + return { + visibility: false, + urls: { + assign: container.data('assign-url'), + projects: container.data('projects-url'), + experiments: container.data('experiments-url'), + tasks: container.data('tasks-url'), + } + }; + }, + methods: { + closeModal() { + this.visibility = false; + } + } + }); + } +} + +initAssignItemsToTaskModalComponent(); diff --git a/app/javascript/vue/assign_items_to_tasks_modal/container.vue b/app/javascript/vue/assign_items_to_tasks_modal/container.vue new file mode 100644 index 000000000..bffb2b02f --- /dev/null +++ b/app/javascript/vue/assign_items_to_tasks_modal/container.vue @@ -0,0 +1,198 @@ + + + + + + + {{ i18n.t("repositories.modal_assign_items_to_task.title") }} + + + × + + + + + {{ + i18n.t("repositories.modal_assign_items_to_task.body.description") + }} + + + + + {{ i18n.t("repositories.modal_assign_items_to_task.body.project_select.label") }} + + + + + + + + {{ i18n.t("repositories.modal_assign_items_to_task.body.experiment_select.label") }} + + + + + + + + {{ i18n.t("repositories.modal_assign_items_to_task.body.task_select.label") }} + + + + + + + + + + + + diff --git a/app/javascript/vue/shared/select.vue b/app/javascript/vue/shared/select.vue index 9cb048dfa..2438a8b8f 100644 --- a/app/javascript/vue/shared/select.vue +++ b/app/javascript/vue/shared/select.vue @@ -67,6 +67,7 @@ }, setValue(value) { this.value = value; + this.toggle this.$emit('change', this.value); }, updateOptionPosition() { diff --git a/app/javascript/vue/shared/select_search.vue b/app/javascript/vue/shared/select_search.vue index 44827b109..b20e73179 100644 --- a/app/javascript/vue/shared/select_search.vue +++ b/app/javascript/vue/shared/select_search.vue @@ -1,5 +1,5 @@ - + {{ valueLabel || (placeholder || i18n.t('general.select')) }} @@ -15,7 +15,8 @@ options: { type: Array, default: () => [] }, optionsUrl: { type: String }, placeholder: { type: String }, - searchPlaceholder: { type: String } + searchPlaceholder: { type: String }, + disabled: { type: Boolean } }, components: { Select }, data() { @@ -55,6 +56,7 @@ }, change(value) { this.value = value; + this.isOpen = false; this.$emit('change', this.value); }, open() { @@ -66,7 +68,7 @@ this.$emit('close'); }, fetchOptions() { - $.get(`${this.optionsUrl}?query=${this.query}`, + $.get(`/${this.optionsUrl}?query=${this.query}`, (data) => { this.currentOptions = data; } diff --git a/app/views/repositories/_assign_items_to_task_modal.html.erb b/app/views/repositories/_assign_items_to_task_modal.html.erb new file mode 100644 index 000000000..c9faf59a8 --- /dev/null +++ b/app/views/repositories/_assign_items_to_task_modal.html.erb @@ -0,0 +1,15 @@ + + data-projects-url=<%= project_filter_projects_path %> + data-experiments-url=<%= experiment_filter_experiments_path %> + data-tasks-url=<%= module_filter_my_modules_path %> + > + + + +<%= javascript_include_tag 'vue_repository_assign_items_to_task_modal' %> diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb index ab253d69b..ab3d4302a 100644 --- a/app/views/repositories/show.html.erb +++ b/app/views/repositories/show.html.erb @@ -105,6 +105,7 @@ <%= render partial: 'repository_columns/manage_column_modal', locals: { my_module_page: false } %> <%= render partial: "repository_stock_values/manage_modal" %> <%= render partial: "toolbar_buttons" %> +<%= render partial: "assign_items_to_task_modal" %> <% if @repository.is_a?(BmtRepository) %> <%= render partial: 'save_bmt_filter_modal' %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 7682c69a5..ecb0b74f0 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1966,6 +1966,22 @@ en: columns_delete: "Delete" columns_changed: "Someone removed/added a new column to the inventory in use. To prevent data inconsistency we will reload this page for you." columns_visibility: "Visible columns" + modal_assign_items_to_task: + title: "Assign to task" + body: + description: "Type in the fields below to find the right task." + project_select: + label: "Project" + placeholder: "Enter project name" + experiment_select: + label: "Experiment" + placeholder: "Enter Experiment name" + disabled_placeholder: "Select Project to enable Experiment" + task_select: + label: "Task" + placeholder: "Enter Task name" + disabled_placeholder: "Select Experiment to enable Task" + assign: "Assign to this task" modal_delete_record: title: "Delete items" notice: "Are you sure you want to delete the selected item(s)?" diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js index 25a33e9fb..8a60826af 100644 --- a/config/webpack/webpack.config.js +++ b/config/webpack/webpack.config.js @@ -31,6 +31,7 @@ const entryList = { vue_protocol: './app/javascript/packs/vue/protocol.js', vue_repository_filter: './app/javascript/packs/vue/repository_filter.js', vue_repository_print_modal: './app/javascript/packs/vue/repository_print_modal.js', + vue_repository_assign_items_to_task_modal: './app/javascript/packs/vue/assign_items_to_task_modal.js', vue_navigation_top_menu: './app/javascript/packs/vue/navigation/top_menu.js' }