Merge pull request #6312 from rekonder/aj_SCI_9386

Refactor export stock consumption modal [SCI-9386]

app/assets/javascripts/repositories/repository_datatable.js

@@ -435,44 +435,36 @@ var RepositoryDatatable = (function(global) {
     });
   }
 
-  function exportActionCallback(exportType, formId) {
+  function initExportActions() {
-    const exportModal = $(`#export${exportType}Modal`);
+    const exportModal = $('#exportRepositoryRowsModal');
-    $(document).on('click', `#export${exportType}Button`, function(e) {
+    $(document).on('click', '#exportRepositoryRowsButton', (e) => {
       e.preventDefault();
       e.stopPropagation();
 
       exportModal.modal('show');
     });
 
-    $(`form#${formId}`).off().submit(function() {
+    $('form#form-repository-rows-export').off().submit(function() {
       var form = this;
       if (currentMode === 'viewMode') {
         // Remove all hidden fields
         $(form).find('input[name=row_ids\\[\\]]').remove();
         $(form).find('input[name=header_ids\\[\\]]').remove();
 
-        // Append visible column information for repository export
+        // Append visible column information
-        if (formId === 'form-repository-rows-export') {
+        $(`table${TABLE_ID} thead tr th`).each(function() {
-          $('table' + TABLE_ID + ' thead tr th').each(function() {
+          const th = $(this);
-            var th = $(this);
+          const val = prepareRepositoryHeaderForExport(th);
-            var val = prepareRepositoryHeaderForExport(th);
 
-            if (val) {
+          if (val) {
-              appendInput(form, val, 'header_ids[]');
+            appendInput(form, val, 'header_ids[]');
-            }
+          }
-          });
+        });
-        }
 
         // Append records
-        const exportRows = $('#exportStockConsumptionModal').attr('data-rows');
+        $.each(rowsSelected, (index, rowId) => {
-
+          appendInput(form, rowId, 'row_ids[]');
-        if (exportRows) {
+        });
-          appendInput(form, JSON.parse(exportRows)[0], 'row_ids[]');
-        } else {
-          $.each(rowsSelected, function(index, rowId) {
-            appendInput(form, rowId, 'row_ids[]');
-          });
-        }
       }
     })
       .on('ajax:beforeSend', function() {
@@ -490,14 +482,6 @@ var RepositoryDatatable = (function(global) {
       });
   }
 
-  function initExportActions() {
-    // Stock Consumption Export Action
-    exportActionCallback('StockConsumption', 'form-stock-consumption-export');
-
-    // RepositoryRow Export Action
-    exportActionCallback('RepositoryRows', 'form-repository-rows-export');
-  }
-
   // Adjust columns width in table header
   function adjustTableHeader() {
     TABLE.columns.adjust();

app/assets/javascripts/sitewide/repository_row_info_modal.js

@@ -58,30 +58,31 @@
           animateSpinner(this);
         }
       });
-
-      // Stock Consumption Export Action
-      $(document).on('click', '.export-consumption-button', function(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        $('#modal-info-repository-row').modal('hide');
-        // set and unset data-rows value so export knows to ignore selected rows or not
-        $('#exportStockConsumptionModal')
-          .on('show.bs.modal', function() {
-            $('#exportStockConsumptionModal').attr(
-              'data-rows',
-              $('#modal-info-repository-row .print-label-button').attr('data-rows')
-            );
-          })
-          .on('hide.bs.modal', function() {
-            $('#exportStockConsumptionModal').attr('data-rows', null);
-          })
-          .modal('show');
-      });
     });
     e.preventDefault();
     return false;
   });
 
+  $(document).on('click', '.export-consumption-button', function() {
+    let selectedRows = [];
+
+    if ($(this).attr('id') === 'exportStockConsumptionButton') {
+      selectedRows = RepositoryDatatable.selectedRows();
+    } else {
+      selectedRows = $('#modal-info-repository-row .print-label-button').data('rows');
+    }
+
+    window.initExportStockConsumptionModal();
+
+    if (window.exportStockConsumptionModalComponent) {
+      window.exportStockConsumptionModalComponent.fetchRepositoryData(
+        selectedRows,
+        { repository_id: $(this).data('objectId') },
+      );
+      $('#modal-info-repository-row').modal('hide');
+    }
+  });
+
   $(document).on('click', '.print-label-button', function(e) {
     var selectedRows = $(this).data('rows');
 

app/controllers/repositories_controller.rb

@@ -378,6 +378,13 @@ class RepositoriesController < ApplicationController
     end
   end
 
+  def export_repository_stock_items_modal
+    render json: {
+      export_consumption_url: export_repository_stock_items_team_path(@repository),
+      name: @repository.name
+    }
+  end
+
   def assigned_my_modules
     my_modules = MyModule.joins(:repository_rows).where(repository_rows: { repository: @repository })
                          .readable_by_user(current_user).distinct

app/javascript/packs/vue/export_stock_consumption_modal.js

@@ -0,0 +1,21 @@
+/* global notTurbolinksPreview */
+
+import TurbolinksAdapter from 'vue-turbolinks';
+import Vue from 'vue/dist/vue.esm';
+import ExportStockConsumptionModal from '../../vue/repository_row/export_stock_consumption_modal.vue';
+
+Vue.use(TurbolinksAdapter);
+Vue.prototype.i18n = window.I18n;
+
+window.initExportStockConsumptionModal = () => {
+  if (window.exportStockConsumptionModalComponent) return;
+
+  if (notTurbolinksPreview()) {
+    new Vue({
+      el: '#exportStockConsumtionModal',
+      components: {
+        ExportStockConsumptionModal,
+      },
+    });
+  }
+};

app/javascript/vue/components/action_toolbar.vue

@@ -19,7 +19,7 @@
             </button>
             <ul class="sci-dropdown dropup dropdown-menu dropdown-menu-right px-2" aria-labelledby="<%= id %>">
               <li v-for="groupAction in action.actions" class="">
-                <a :class="`flex gap-2 items-center bg-sn-white color-sn-blue no-underline ${action.button_class}`"
+                <a :class="`flex gap-2 items-center bg-sn-white color-sn-blue no-underline ${groupAction.button_class}`"
                   :href="(['link', 'remote-modal']).includes(groupAction.type) ? groupAction.path : '#'"
                   :id="groupAction.button_id"
                   :title="groupAction.label"

app/javascript/vue/repository_row/export_stock_consumption_modal.vue

@@ -0,0 +1,82 @@
+<template>
+  <div ref="modal"
+       class="modal fade" 
+       id="exportStockConsumptionModal"
+       tabindex="-1"
+       role="dialog"
+       aria-labelledby="modal-export-stock-consumption-label">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" :aria-label="i18n.t('general.close')">
+            <i class="sn-icon sn-icon-close"></i>
+          </button>
+          <h4 class="modal-title"> {{ i18n.t('zip_export.consumption_modal_label') }} </h4>
+        </div>
+        <div class="modal-body">
+          <p>{{ i18n.t('zip_export.consumption_header_html', { repository: this.repository?.name }) }} </p>
+          <p v-html="i18n.t('zip_export.consumption_body_html')"> </p>
+          <p class='pb-0' v-html="i18n.t('zip_export.consumption_footer_html')"></p>
+        </div>
+        <div class="modal-footer">
+          <button type='button' class='btn btn-secondary' data-dismiss='modal' id='close-modal-export-stock-consumption'>
+            {{ i18n.t('general.cancel') }}
+          </button>
+          
+          <button class="btn btn-success" id="export-stock-consumption" @click="exportConsumption">
+            {{ i18n.t('zip_export.consumption_generate') }}
+          </button>
+         </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ExportStockConsumptionModal',
+    props: {
+      exportUrl: { type: String, required: true }
+    },
+    data() {
+      return {
+        repository: null,
+        selectedRows: []
+      }
+    },
+    created() {
+      window.exportStockConsumptionModalComponent = this;
+    },
+    beforeDestroy() {
+      delete window.exportStockConsumptionModalComponent;
+    },
+    methods: {
+      exportConsumption() {
+        $.post(this.repository.export_consumption_url, { row_ids: this.selectedRows })
+          .done((data) => {
+            HelperModule.flashAlertMsg(data.message, 'success');
+          })
+          .fail((data) => {
+            HelperModule.flashAlertMsg(data.responseJSON.message, 'danger');
+          })
+          .always(() => {
+            this.closeModal();
+          });
+      },
+      fetchRepositoryData(selectedRows, params) {
+        this.selectedRows = selectedRows;
+        $.get(this.exportUrl, params)
+        .done( (data) => {
+          this.repository = data;
+          this.showModal();
+        });
+      },
+      closeModal() {
+        $(this.$refs.modal).modal('hide');
+      },
+      showModal() {
+        $(this.$refs.modal).modal('show');
+      }
+    }
+  }
+</script>

app/services/toolbars/repository_rows_service.rb

@@ -121,8 +121,9 @@ module Toolbars
         name: 'export_consumption',
         label: I18n.t('repositories.exports.stock_consumption'),
         icon: 'sn-icon sn-icon-reports',
-        button_class: 'export-repository-stock-consumption-btn',
+        button_class: 'export-consumption-button',
         button_id: 'exportStockConsumptionButton',
+        item_id: @repository.id,
         type: :legacy
       }
     end

app/views/layouts/application.html.erb

@@ -122,6 +122,7 @@
       <%= render "users/sessions/session_expire_modal" %>
       <%= render "users/sessions/session_end_modal" %>
       <%= render "label_printers/label_printer_modal" %>
+      <%= render "shared/export_stock_consumption_modal" %>
     <% end %>
 
     <span style="display: none;" data-hook="application-body-end-html"></span>

app/views/repositories/_export_stock_consumption_modal.html.erb

@@ -1,27 +0,0 @@
-<div class="modal fade"
-     id="exportStockConsumptionModal"
-     tabindex="-1"
-     role="dialog"
-     aria-labelledby="modal-export-stock-consumption-label">
-  <%= form_with(url: export_repository_stock_items_team_path(repository),
-                         html: { id: 'form-stock-consumption-export' },
-                         data: { remote: true }) do |f| %>
-     <div class="modal-dialog" role="document">
-       <div class="modal-content">
-         <div class="modal-header">
-           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
-           <h4 class="modal-title"><%=t 'zip_export.consumption_modal_label' %></h4>
-         </div>
-         <div class="modal-body">
-           <p><%=t('zip_export.consumption_header_html', repository: repository.name) %></p>
-           <p><%=t 'zip_export.consumption_body_html' %></p>
-           <p class='pb-0'><%=t 'zip_export.consumption_footer_html' %></p>
-         </div>
-         <div class="modal-footer">
-           <button type='button' class='btn btn-secondary' data-dismiss='modal' id='close-modal-export-stock-consumption'><%= t('general.cancel')%></button>
-           <%= f.submit t('zip_export.consumption_generate'), id: "export-stock-consumption", class: "btn btn-success" %>
-         </div>
-       </div>
-     </div>
-   <% end %>
-</div>

app/views/repositories/_repository_row_info_modal.html.erb

@@ -116,6 +116,7 @@
           <button
             type="button"
             class="btn btn-secondary export-consumption-button"
+            data-object-id="<%= @repository_row.repository.id %>"
           >
             <%= t('repository_row.modal_info.export_consumption_label') %>
           </button>

app/views/repositories/show.html.erb

@@ -71,8 +71,6 @@
 <%= render partial: "repositories/delete_record_modal" %>
 <%= render partial: 'repositories/export_repository_rows_modal',
            locals: { repository: @repository } %>
-<%= render partial: 'repositories/export_stock_consumption_modal',
-           locals: { repository: @repository } %>
 
 <%= render partial: 'repository_columns/manage_column_modal', locals: { my_module_page: false } %>
 <%= render partial: "repository_stock_values/manage_modal" %>

app/views/shared/_export_stock_consumption_modal.html.erb

@@ -0,0 +1,5 @@
+<div id="exportStockConsumtionModal" data-behaviour="vue">
+  <export-stock-consumption-modal export-url="<%= export_repository_stock_items_modal_repositories_path %>" />
+</div>
+
+<%= javascript_include_tag('vue_components_export_stock_consumption_modal') %>

config/routes.rb

@@ -759,6 +759,7 @@ Rails.application.routes.draw do
       collection do
         get :sidebar
         post 'available_rows', to: 'repository_rows#available_rows', defaults: { format: 'json' }
+        get 'export_repository_stock_items_modal'
       end
 
       member do

config/webpack/webpack.config.js

@@ -41,7 +41,8 @@ const entryList = {
   vue_components_action_toolbar: './app/javascript/packs/vue/action_toolbar.js',
   vue_components_open_vector_editor: './app/javascript/packs/vue/open_vector_editor.js',
   vue_navigation_breadcrumbs: './app/javascript/packs/vue/navigation/breadcrumbs.js',
-  vue_protocol_file_import_modal: './app/javascript/packs/vue/protocol_file_import_modal.js'
+  vue_protocol_file_import_modal: './app/javascript/packs/vue/protocol_file_import_modal.js',
+  vue_components_export_stock_consumption_modal: './app/javascript/packs/vue/export_stock_consumption_modal.js'
 }
 
 // Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949