Add assign button to item cards [SCI-9158] (#6326)

2024-09-20 06:35:56 +08:00 · 2023-10-12 15:46:13 +02:00 · 2023-10-12 15:46:13 +02:00 · 04a898760a
parent 9e67b20b38
commit 04a898760a
10 changed files with 90 additions and 40 deletions
--- a/app/assets/javascripts/repositories/repository_datatable.js
+++ b/app/assets/javascripts/repositories/repository_datatable.js
@ -284,10 +284,6 @@ var RepositoryDatatable = (function(global) {
    });
  }

-  function updateSelectedRowsForAssignments() {
-    window.AssignItemsToTaskModalComponent.setShowCallback(() => rowsSelected);
-  }
-
  function checkAvailableColumns() {
    $.ajax({
      url: $(TABLE_ID).data('available-columns'),
@ -887,7 +883,6 @@ var RepositoryDatatable = (function(global) {
    })

    initRowSelection();
-    updateSelectedRowsForAssignments();

    return TABLE;
  }
@ -1023,7 +1018,7 @@ var RepositoryDatatable = (function(global) {
      e.preventDefault();
      e.stopPropagation();

-      window.AssignItemsToTaskModalComponentContainer.showModal();
+      window.AssignItemsToTaskModalComponentContainer.showModal(rowsSelected);
    })
    .on('click', '#deleteRepositoryRecords', function(e) {
      e.preventDefault();
--- a/app/assets/javascripts/sitewide/repository_row_card.js
+++ b/app/assets/javascripts/sitewide/repository_row_card.js
@ -4,11 +4,13 @@
  'use strict';

  $(document).on('click', '.record-info-link', function(e) {
+    const myModuleId = $('.my-modules-protocols-index').data('task-id');
+    const repositoryRowURL = $(this).attr('href');
+
    e.stopPropagation();
    e.preventDefault();

-    const repositoryRowURL = $(this).attr('href');
-    window.repositoryItemSidebarComponent.toggleShowHideSidebar(repositoryRowURL);
+    window.repositoryItemSidebarComponent.toggleShowHideSidebar(repositoryRowURL, myModuleId);
  });

  $(document).on('click', '.print-label-button', function(e) {
@ -30,8 +32,8 @@

  $(document).on('click', '.assign-inventory-button', function(e) {
    e.preventDefault();
-    let assignUrl = $(this).data('assignUrl');
-    let repositoryRowId = $(this).data('repositoryRowId');
+    const assignUrl = $(this).attr('data-assign-url');
+    const repositoryRowId = $(this).attr('data-repository-row-id');

    $.ajax({
      url: assignUrl,
@ -44,6 +46,7 @@
        if (typeof MyModuleRepositories !== 'undefined') {
          MyModuleRepositories.reloadRepositoriesList(repositoryRowId);
        }
+        window.repositoryItemSidebarComponent.reload();
      },
      error: function(error) {
        HelperModule.flashAlertMsg(error.responseJSON.flash, 'danger');
--- a/app/assets/stylesheets/tailwind/buttons.css
+++ b/app/assets/stylesheets/tailwind/buttons.css
@ -137,4 +137,18 @@
  .btn.btn-danger.disabled {
    @apply bg-sn-delete-red-disabled;
  }
+
+  .btn-text-link {
+    @apply text-sn-blue text-sm cursor-pointer
+  }
+
+  .btn-text-link:visited,
+  .btn-text-link:hover {
+    @apply text-sn-blue no-underline
+  }
+
+  .btn-text-link.disabled,
+  .btn-text-link:disabled {
+    @apply text-sn-sleepy-grey
+  }
 }
--- a/app/controllers/repository_rows_controller.rb
+++ b/app/controllers/repository_rows_controller.rb
@ -46,7 +46,9 @@ class RepositoryRowsController < ApplicationController
    @repository_row = @repository.repository_rows.find_by(id: params[:id])
    return render_404 unless @repository_row

-    @my_module = @repository_row.my_modules.find_by(id: params[:my_module_id])
+    @my_module = if params[:my_module_id].present?
+                   MyModule.repository_row_assignable_by_user(current_user).find_by(id: params[:my_module_id])
+                 end
    return render_403 if @my_module && !can_read_my_module?(@my_module)

    if @my_module
--- a/app/javascript/packs/vue/assign_items_to_task_modal.js
+++ b/app/javascript/packs/vue/assign_items_to_task_modal.js
@ -20,6 +20,7 @@ function initAssignItemsToTaskModalComponent() {
      data() {
        return {
          visibility: false,
+          rowsToAssign: [],
          urls: {
            assign: container.data('assign-url'),
            projects: container.data('projects-url'),
@ -29,7 +30,8 @@ function initAssignItemsToTaskModalComponent() {
        };
      },
      methods: {
-        showModal() {
+        showModal(repositoryRows) {
+          this.rowsToAssign = repositoryRows;
          this.visibility = true;
        },
        closeModal() {
--- a/app/javascript/vue/assign_items_to_tasks_modal/container.vue
+++ b/app/javascript/vue/assign_items_to_tasks_modal/container.vue
@ -145,11 +145,11 @@ export default {
  name: "AssignItemsToTaskModalContainer",
  props: {
    visibility: Boolean,
-    urls: Object
+    urls: Object,
+    rowsToAssign: Array
  },
  data() {
    return {
-      rowsToAssign: [],
      projects: [],
      experiments: [],
      tasks: [],
@ -159,15 +159,11 @@ export default {
      projectsLoading: null,
      experimentsLoading: null,
      tasksLoading: null,
-      showCallback: null
    };
  },
  components: {
    SelectSearch
  },
-  created() {
-    window.AssignItemsToTaskModalComponent = this;
-  },
  mounted() {
    $(this.$refs.modal).on("shown.bs.modal", () => {
      this.projectsLoading = true;
@ -239,8 +235,6 @@ export default {
  methods: {
    showModal() {
      $(this.$refs.modal).modal("show");
-
-      this.rowsToAssign = this.showCallback();
    },
    hideModal() {
      $(this.$refs.modal).modal("hide");
@ -317,11 +311,9 @@ export default {
      }).always(() => {
        this.resetSelectors();
        this.reloadTable();
+        window.repositoryItemSidebarComponent.reload();
      });
    },
-    setShowCallback(callback) {
-      this.showCallback = callback;
-    },
    reloadTable() {
      $('.repository-row-selector:checked').trigger('click');
      $('.repository-table')
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@ -114,12 +114,21 @@
            <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px"></div>

            <!-- ASSIGNED -->
-            <section id="assigned_wrapper" class="flex flex-col ">
-              <div class="text-base font-semibold w-[350px] my-3 leading-7" ref="assigned-label">
+            <section id="assigned_wrapper" class="flex flex-col">
+              <div class="flex flex-row text-base font-semibold w-[350px] pb-4 leading-7 items-center justify-between" ref="assigned-label">
                {{ i18n.t('repositories.item_card.section.assigned', {
                  count: assignedModules ?
                    assignedModules.total_assigned_size : 0
                }) }}
+                <a v-if="actions?.assign_repository_row || (inRepository && !defaultColumns?.archived)"
+                  class="btn-text-link font-normal"
+                  :class= "{'assign-inventory-button': actions?.assign_repository_row,
+                            'disabled': actions?.assign_repository_row && actions.assign_repository_row.disabled }"
+                  :data-assign-url="actions?.assign_repository_row ? actions.assign_repository_row.assign_url : ''"
+                  :data-repository-row-id="repositoryRowId"
+                  @click="showRepositoryAssignModal">
+                  {{ i18n.t('repositories.item_card.assigned.assign') }}
+                </a>
              </div>
              <div v-if="assignedModules && assignedModules.total_assigned_size > 0">
                <div v-if="privateModuleSize() > 0" class="pb-6">
@ -233,7 +242,11 @@ export default {
      assignedModules: null,
      isShowing: false,
      barCodeSrc: null,
-      permissions: null
+      permissions: null,
+      repositoryRowUrl: null,
+      actions: null,
+      myModuleId: null,
+      inRepository: false
    }
  },
  created() {
@ -242,6 +255,7 @@ export default {
  mounted() {
    // Add a click event listener to the document
    document.addEventListener('click', this.handleOutsideClick);
+    this.inRepository = $('.assign-items-to-task-modal-container').length > 0;
  },
  beforeDestroy() {
    delete window.repositoryItemSidebarComponent;
@ -257,30 +271,34 @@ export default {
        this.toggleShowHideSidebar(null)
      }
    },
-    toggleShowHideSidebar(repositoryRowUrl) {
+    toggleShowHideSidebar(repositoryRowUrl, myModuleId = null) {
      // initial click
      if (this.currentItemUrl === null) {
-        this.isShowing = true
-        this.loadRepositoryRow(repositoryRowUrl)
-        this.currentItemUrl = repositoryRowUrl
+        this.myModuleId = myModuleId;
+        this.isShowing = true;
+        this.loadRepositoryRow(repositoryRowUrl);
+        this.currentItemUrl = repositoryRowUrl;
        return
      }
      // click on the same item - should just open/close it
      else if (this.currentItemUrl === repositoryRowUrl) {
-        this.isShowing = false
-        this.currentItemUrl = null
+        this.isShowing = false;
+        this.currentItemUrl = null;
+        this.myModuleId = null;
        return
      }
      // explicit close (from emit)
      else if (repositoryRowUrl === null) {
-        this.isShowing = false
-        this.currentItemUrl = null
+        this.isShowing = false;
+        this.currentItemUrl = null;
+        this.myModuleId = null;
        return
      }
      // click on a different item - should just fetch new data
      else {
-        this.loadRepositoryRow(repositoryRowUrl)
-        this.currentItemUrl = repositoryRowUrl
+        this.myModuleId = myModuleId;
+        this.loadRepositoryRow(repositoryRowUrl);
+        this.currentItemUrl = repositoryRowUrl;
        return
      }
    },
@ -289,14 +307,16 @@ export default {
      $.ajax({
        method: 'GET',
        url: repositoryRowUrl,
+        data: { my_module_id: this.myModuleId },
        dataType: 'json',
        success: (result) => {
          this.repositoryRowId = result.id;
          this.repository = result.repository;
          this.defaultColumns = result.default_columns;
          this.customColumns = result.custom_columns;
-          this.dataLoading = false
+          this.dataLoading = false;
          this.assignedModules = result.assigned_modules;
+          this.actions = result.actions;
          this.permissions = result.permissions
          this.$nextTick(() => {
            this.generateBarCode(this.defaultColumns.code);
@ -304,6 +324,16 @@ export default {
        }
      });
    },
+    reload() {
+      if(this.isShowing) {
+        this.loadRepositoryRow(this.currentItemUrl);
+      }
+    },
+    showRepositoryAssignModal() {
+      if (this.inRepository) {
+        window.AssignItemsToTaskModalComponentContainer.showModal([this.repositoryRowId]);
+      }
+    },
    generateBarCode(text) {
      if(!text) return;
      const barCodeCanvas = bwipjs.toCanvas('bar-code-canvas', {
--- a/app/views/repositories/_assign_items_to_task_modal.html.erb
+++ b/app/views/repositories/_assign_items_to_task_modal.html.erb
@ -7,6 +7,7 @@
     >
  <assign-items-to-task-modal-container
    :visibility="visibility"
+    :rows-to-assign="rowsToAssign"
    :urls="urls"
    @close="closeModal"
  />
--- a/app/views/repository_rows/show.json.jbuilder
+++ b/app/views/repository_rows/show.json.jbuilder
@ -10,6 +10,16 @@ end
 json.permissions do
  json.can_export_repository_stock can_export_repository_stock?(@repository_row.repository)
 end
+
+json.actions do
+  if @my_module.present?
+    json.assign_repository_row do
+      json.assign_url my_module_repositories_path(@my_module.id)
+      json.disabled @my_module_assign_error.present?
+    end
+  end
+end
+
 json.default_columns do
  json.name @repository_row.name
  json.code @repository_row.code
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -2152,7 +2152,7 @@ en:
          disabled_placeholder: "Select Experiment to enable Task"
          no_options_placeholder: "No tasks available to assign items"
      assign:
-        text: "Assign to this task"
+        text: "Assign to task"
        flash_all_assignments_success: "Successfully assigned %{count} item(s) to the task."
        flash_some_assignments_success: "Successfully assigned %{assigned_count} item(s) to the task. %{skipped_count} item(s) were already assigned to the task."
        flash_assignments_failure: "Failed to assign item(s) to task."
@ -2227,6 +2227,7 @@ en:
      print_label: "Print label"
      assigned:
        empty: "This item is not assigned to any task."
+        assign: "Assign to task"
        private:
          one: "Assigned to %{count} private task"
          other: "Assigned to %{count} private tasks"
@ -2476,7 +2477,7 @@ en:
      no_tasks: "This item in not assigned to any task."
      amount: "Amount: %{value}"
      unit: "Unit: %{unit}"
-      assign_to_task: "Assign to this task"
+      assign_to_task: "Assign to task"
      assign_to_task_error:
        no_access: "You can only view this task"
        already_assigned: "This item is already assigned to this task"
@ -3500,7 +3501,7 @@ en:
      description: "Once you create items in the inventory, they will appear here."
    buttons:
      insert: "Insert"
-      assign: "Assign to this task"
+      assign: "Assign to task"
    projects: PROJECTS
    experiments: EXPERIMENTS
    tasks: TASKS