WIP: Create a modal for inventory item assignment from inventory page [SCI-8250]

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

app/javascript/vue/assign_items_to_tasks_modal/container.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    ref="modal"
+    class="modal fade"
+    id="assign-items-to-task-modal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="assignItemsToTaskModalLabel"
+  >
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">
+            {{ i18n.t("repositories.modal_assign_items_to_task.title") }}
+          </h4>
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="description">
+            {{
+              i18n.t("repositories.modal_assign_items_to_task.body.description")
+            }}
+          </div>
+
+          <div class="project-selector">
+            <label>
+              {{ i18n.t("repositories.modal_assign_items_to_task.body.project_select.label") }}
+            </label>
+
+            <SelectSearch
+              ref="projectsSelector"
+              @change="changeProject"
+              :options="projects"
+              :placeholder="i18n.t('repositories.modal_assign_items_to_task.body.project_select.placeholder')"
+              :searchPlaceholder="i18n.t('repositories.modal_assign_items_to_task.body.project_select.placeholder')"
+            />
+          </div>
+
+          <div class="experiment-selector">
+            <label>
+              {{ i18n.t("repositories.modal_assign_items_to_task.body.experiment_select.label") }}
+            </label>
+
+            <SelectSearch
+              :disabled="!selectedProject"
+              ref="experimentsSelector"
+              @change="changeExperiment"
+              :options="experiments"
+              :placeholder="experimentsSelectorPlaceholder"
+              :searchPlaceholder="i18n.t('repositories.modal_assign_items_to_task.body.experiment_select.placeholder')"
+            />
+          </div>
+
+          <div class="task-selector">
+            <label>
+              {{ i18n.t("repositories.modal_assign_items_to_task.body.task_select.label") }}
+            </label>
+
+            <SelectSearch
+              :disabled="!selectedExperiment"
+              ref="tasksSelector"
+              @change="changeTask"
+              :options="tasks"
+              :placeholder="i18n.t('repositories.modal_assign_items_to_task.body.task_select.disabled_placeholder')"
+              :searchPlaceholder="i18n.t('repositories.modal_assign_items_to_task.body.task_select.placeholder')"
+            />
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-dismiss="modal">
+            {{
+              i18n.t("repositories.modal_assign_items_to_task.assign")
+            }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectSearch from '../shared/select_search.vue'
+
+export default {
+  name: "AssignItemsToTaskModalContainer",
+  props: {
+    visibility: Boolean,
+    urls: Object,
+  },
+  data() {
+    return {
+      projects: [
+        [1, "project1"],
+        [2, "project2"],
+        [3, "project3"],
+        [4, "project4"],
+        [5, "project5"],
+        [6, "project6"],
+        [7, "project7"],
+        [8, "project8"],
+      ],
+      experiments: [
+        [1, "experiment1"],
+        [2, "experiment2"],
+        [3, "experiment3"],
+        [4, "experiment4"],
+        [5, "experiment5"],
+        [6, "experiment6"],
+        [7, "experiment7"],
+        [8, "experiment8"],
+      ],
+      tasks: [
+        [1, "task1"],
+        [2, "task2"],
+        [3, "task3"],
+        [4, "task4"],
+        [5, "task5"],
+        [6, "task6"],
+        [7, "task7"],
+        [8, "task8"],
+      ],
+      selectedProject: null,
+      selectedExperiment: null,
+      selectedTask: null
+    };
+  },
+  components: {
+    SelectSearch
+  },
+  mounted() {
+    $.get(this.urls.projects)
+    $(this.$refs.modal).on('hidden.bs.modal', () => {
+      this.$emit('close');
+    });
+  },
+  computed: {
+    experimentsSelectorPlaceholder() {
+      if (this.selectedProject) {
+        return this.i18n.t('repositories.modal_assign_items_to_task.body.experiment_select.placeholder');
+      }
+      return this.i18n.t('repositories.modal_assign_items_to_task.body.experiment_select.disabled_placeholder')
+    },
+    tasksSelectorPlaceholder() {
+      if (this.selectedExperiment) {
+        return this.i18n.t('repositories.modal_assign_items_to_task.body.task_select.placeholder');
+      }
+      return this.i18n.t('repositories.modal_assign_items_to_task.body.task_select.disabled_placeholder')
+    }
+  },
+  watch: {
+    visibility(newVal) {
+      if (newVal) {
+        this.showModal();
+      } else {
+        this.hideModal();
+      }
+    }
+  },
+  methods: {
+    showModal() {
+      $(this.$refs.modal).modal('show');
+    },
+    hideModal(){
+      $(this.$refs.modal).modal('hide');
+    },
+    changeProject(value) {
+      const newProjectVal = value;
+      this.selectedProject = null;
+      this.selectedExperiment = null;
+      this.selectedTask = null;
+
+      setTimeout(() => {
+        this.experiments = [
+          [1, 'ex1'],
+          [2, 'ex2'],
+          [3, 'ex3'],
+          [4, 'ex4']
+        ];
+        this.selectedProject = newProjectVal;
+      }, 2000);
+
+    },
+    changeExperiment(value) {
+      this.selectedExperiment = value;
+    },
+    changeTask(value) {
+      this.selectedTask = value;
+    }
+  }
+};
+</script>

app/javascript/vue/shared/select.vue

@@ -67,6 +67,7 @@
       },
       setValue(value) {
         this.value = value;
+        this.toggle
         this.$emit('change', this.value);
       },
       updateOptionPosition() {

app/javascript/vue/shared/select_search.vue

@@ -1,5 +1,5 @@
 <template>
-  <Select class="sn-select--search" :options="currentOptions" :placeholder="placeholder" @change="change" @blur="blur" @open="open" @close="close">
+  <Select class="sn-select--search" :options="currentOptions" :placeholder="placeholder" :disabled="disabled" @change="change" @blur="blur" @open="open" @close="close">
     <input ref="focusElement" v-model="query" type="text" class="sn-select__search-input" :placeholder="searchPlaceholder" />
     <span class="sn-select__value">{{ valueLabel || (placeholder || i18n.t('general.select')) }}</span>
     <span class="sn-select__caret caret"></span>
@@ -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;
           }

app/views/repositories/_assign_items_to_task_modal.html.erb

@@ -0,0 +1,15 @@
+<div
+  class="assign-items-to-task-modal-container"
+  data-assign-url=<%= my_module_repository_path(MyModule.first) %>
+  data-projects-url=<%= project_filter_projects_path %>
+  data-experiments-url=<%= experiment_filter_experiments_path %>
+  data-tasks-url=<%= module_filter_my_modules_path %>
+     >
+  <assign-items-to-task-modal-container
+    :visibility="visibility"
+    :urls="urls"
+    @close="closeModal"
+  />
+</div>
+
+<%= javascript_include_tag 'vue_repository_assign_items_to_task_modal' %>

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

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)?"

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'
 }