mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 14:45:56 +08:00
Merge pull request #6312 from rekonder/aj_SCI_9386
Refactor export stock consumption modal [SCI-9386]
This commit is contained in:
commit
40b6078ab2
|
@ -435,45 +435,37 @@ var RepositoryDatatable = (function(global) {
|
|||
});
|
||||
}
|
||||
|
||||
function exportActionCallback(exportType, formId) {
|
||||
const exportModal = $(`#export${exportType}Modal`);
|
||||
$(document).on('click', `#export${exportType}Button`, function(e) {
|
||||
function initExportActions() {
|
||||
const exportModal = $('#exportRepositoryRowsModal');
|
||||
$(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
|
||||
if (formId === 'form-repository-rows-export') {
|
||||
$('table' + TABLE_ID + ' thead tr th').each(function() {
|
||||
var th = $(this);
|
||||
var val = prepareRepositoryHeaderForExport(th);
|
||||
// Append visible column information
|
||||
$(`table${TABLE_ID} thead tr th`).each(function() {
|
||||
const th = $(this);
|
||||
const val = prepareRepositoryHeaderForExport(th);
|
||||
|
||||
if (val) {
|
||||
appendInput(form, val, 'header_ids[]');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Append records
|
||||
const exportRows = $('#exportStockConsumptionModal').attr('data-rows');
|
||||
|
||||
if (exportRows) {
|
||||
appendInput(form, JSON.parse(exportRows)[0], 'row_ids[]');
|
||||
} else {
|
||||
$.each(rowsSelected, function(index, rowId) {
|
||||
$.each(rowsSelected, (index, rowId) => {
|
||||
appendInput(form, rowId, 'row_ids[]');
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.on('ajax:beforeSend', function() {
|
||||
animateSpinner(null, true);
|
||||
|
@ -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();
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
21
app/javascript/packs/vue/export_stock_consumption_modal.js
Normal file
21
app/javascript/packs/vue/export_stock_consumption_modal.js
Normal file
|
@ -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,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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" %>
|
||||
|
|
|
@ -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') %>
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue