scinote-web/app/assets/javascripts/repository_columns/index.js

421 lines
15 KiB
JavaScript
Raw Normal View History

/* global I18n HelperModule truncateLongString animateSpinner RepositoryListColumnType RepositoryStockColumnType */
/* global RepositoryDatatable RepositoryStatusColumnType RepositoryChecklistColumnType dropdownSelector RepositoryDateTimeColumnType */
/* global RepositoryDateColumnType RepositoryDatatable */
2019-10-21 18:40:53 +08:00
/* eslint-disable no-restricted-globals */
//= require jquery-ui/widgets/sortable
2019-10-14 21:27:03 +08:00
var RepositoryColumns = (function() {
var TABLE_ID = '';
var TABLE = null;
var columnsList = '#repository-columns-list';
2019-11-11 15:44:08 +08:00
var manageModal = '#manage-repository-column';
2019-11-19 23:07:10 +08:00
var columnTypeClassNames = {
RepositoryListValue: 'RepositoryListColumnType',
2019-11-26 16:31:32 +08:00
RepositoryStatusValue: 'RepositoryStatusColumnType',
2019-11-28 22:56:34 +08:00
RepositoryDateValue: 'RepositoryDateColumnType',
2019-11-26 16:31:32 +08:00
RepositoryDateTimeValue: 'RepositoryDateTimeColumnType',
RepositoryTimeValue: 'RepositoryTimeColumnType',
2019-12-09 23:38:21 +08:00
RepositoryChecklistValue: 'RepositoryChecklistColumnType',
RepositoryStockValue: 'RepositoryStockColumnType',
2019-12-09 23:38:21 +08:00
RepositoryNumberValue: 'RepositoryNumberColumnType'
2019-11-19 23:07:10 +08:00
};
2019-10-15 22:11:37 +08:00
function reloadDataTablePartial() {
// Append buttons for inventory datatable
2020-01-28 21:11:11 +08:00
$('div.toolbar-filter-buttons').appendTo('.repository-show');
$('div.toolbar-filter-buttons').hide();
// destroy datatable and remove partial
TABLE.destroy();
$('.repository-table').remove();
// reload datatable partial and intialize DataTable
$.get($('.repository-show').data('table-url'), (response) => {
$(response.html).appendTo($('.repository-show'));
RepositoryDatatable.init('#' + $('.repository-table table').attr('id'));
RepositoryDatatable.redrawTableOnSidebarToggle();
});
}
2019-10-21 18:40:53 +08:00
function initColumnTypeSelector() {
var $manageModal = $(manageModal);
2019-11-28 21:26:21 +08:00
$manageModal.on('change', '#repository-column-data-type', function() {
2019-10-21 18:40:53 +08:00
$('.column-type').hide();
2019-11-28 21:03:57 +08:00
$('[data-column-type="' + $(this).val() + '"]').show();
2019-10-14 21:27:03 +08:00
});
}
2019-10-21 18:40:53 +08:00
function initDeleteSubmitAction() {
var $manageModal = $(manageModal);
2019-11-28 21:26:21 +08:00
$manageModal.on('click', '#delete-repo-column-submit', function() {
2019-10-14 21:27:03 +08:00
animateSpinner();
2019-10-21 18:40:53 +08:00
$.ajax({
url: $(this).data('delete-url'),
type: 'DELETE',
dataType: 'json',
success: (result) => {
reloadDataTablePartial();
2019-10-21 18:40:53 +08:00
animateSpinner(null, false);
HelperModule.flashAlertMsg(result.message, 'success');
2019-10-21 18:40:53 +08:00
},
error: (result) => {
animateSpinner(null, false);
HelperModule.flashAlertMsg(result.responseJSON.error, 'danger');
}
2019-10-14 21:27:03 +08:00
});
});
}
2019-11-11 05:36:17 +08:00
function checkData() {
var status = true;
2019-11-19 22:05:54 +08:00
var currentPartial = $('#repository-column-data-type').val();
if ($('#repository-column-name').val().length === 0) {
$('#repository-column-name').parent().addClass('error');
status = false;
} else {
$('#repository-column-name').parent().removeClass('error');
}
2019-11-19 23:07:10 +08:00
if (columnTypeClassNames[currentPartial]) {
status = eval(columnTypeClassNames[currentPartial]).checkValidation() && status;
2019-11-11 16:04:36 +08:00
}
return status;
2019-11-11 05:36:17 +08:00
}
2019-11-19 23:07:10 +08:00
function addSpecificParams(type, params) {
var allParams = params;
var columnParams;
var specificParams;
var currentPartial = $('#repository-column-data-type').val();
if (columnTypeClassNames[currentPartial]) {
specificParams = eval(columnTypeClassNames[currentPartial]).loadParams();
columnParams = Object.assign(params.repository_column, specificParams);
allParams.repository_column = columnParams;
}
return allParams;
}
2019-10-14 21:27:03 +08:00
2019-10-21 18:40:53 +08:00
function initCreateSubmitAction() {
var $manageModal = $(manageModal);
2019-11-28 21:26:21 +08:00
$manageModal.on('click', '#new-repo-column-submit', function() {
2019-10-21 18:40:53 +08:00
var url = $('#repository-column-data-type').find(':selected').data('create-url');
var params = { repository_column: { name: $('#repository-column-name').val() } };
2019-11-19 22:05:54 +08:00
var selectedType = $('#repository-column-data-type').val();
2019-11-19 23:07:10 +08:00
params = addSpecificParams(selectedType, params);
2019-11-20 22:24:16 +08:00
if (!checkData()) return;
2019-11-11 05:36:17 +08:00
$.ajax({
url: url,
type: 'POST',
data: JSON.stringify(params),
contentType: 'application/json',
success: function(result) {
reloadDataTablePartial();
HelperModule.flashAlertMsg(result.data.attributes.message, 'success');
},
error: function(error) {
$('#new-repository-column').renderFormErrors('repository_column', error.responseJSON.repository_column, true);
}
2019-10-22 17:18:31 +08:00
});
2019-10-16 19:31:14 +08:00
});
}
2019-10-21 18:40:53 +08:00
function initEditSubmitAction() {
var $manageModal = $(manageModal);
2019-11-28 21:26:21 +08:00
$manageModal.on('click', '#update-repo-column-submit', function() {
2019-10-25 16:39:12 +08:00
var url = $('#repository-column-data-type').find(':selected').data('edit-url');
var params = { repository_column: { name: $('#repository-column-name').val() } };
2019-11-19 22:05:54 +08:00
var selectedType = $('#repository-column-data-type').val();
2019-11-19 23:07:10 +08:00
params = addSpecificParams(selectedType, params);
2019-11-20 22:24:16 +08:00
if (!checkData()) return;
2019-11-11 05:36:17 +08:00
2019-10-25 16:39:12 +08:00
$.ajax({
url: url,
type: 'PUT',
data: JSON.stringify(params),
dataType: 'json',
contentType: 'application/json',
2019-10-25 16:39:12 +08:00
success: function(result) {
reloadDataTablePartial();
HelperModule.flashAlertMsg(result.data.attributes.message, 'success');
2019-10-25 16:39:12 +08:00
},
error: function(error) {
$('#new-repository-column').renderFormErrors('repository_column', error.responseJSON.repository_column, true);
}
});
2019-10-21 18:40:53 +08:00
});
}
2019-10-15 22:11:37 +08:00
function initManageColumnAction() {
2019-10-21 18:40:53 +08:00
var $manageModal = $(manageModal);
$manageModal.on('click', '.manage-repo-column', function() {
2019-10-21 18:40:53 +08:00
var button = $(this);
var modalUrl = button.data('modal-url');
var columnType;
var delimiterOptionsRender = function(data) {
return `<span class='icon'>${data.params.icon}</span>${data.label}`;
};
var delimiterDropdownConfig = {
singleSelect: true,
noEmptyOption: true,
selectAppearance: 'simple',
closeOnSelect: true,
optionClass: 'delimiter-icon-dropdown',
optionLabel: delimiterOptionsRender,
tagClass: 'delimiter-icon-dropdown',
tagLabel: delimiterOptionsRender,
disableSearch: true,
labelHTML: true
};
2019-10-21 18:40:53 +08:00
$.get(modalUrl, (data) => {
$manageModal.find('.modal-content').html(data.html)
2019-10-21 18:40:53 +08:00
.find('#repository-column-name')
.focus();
if (button.data('action') !== 'destroy') {
columnType = $('#repository-column-data-type').val();
dropdownSelector.init('#repository-column-data-type', {
noEmptyOption: true,
singleSelect: true,
closeOnSelect: true,
optionClass: 'custom-option',
selectAppearance: 'simple',
disableSearch: true,
labelHTML: true,
optionLabel: function(option) {
return `<div class="column-type-option" data-disabled="${option.params.disabled}">
<span>${option.label}</span>
<span class="text-description">${option.params.text_description || ''}</span>
</div>`
}
});
dropdownSelector.init('.list-column-type .delimiter', delimiterDropdownConfig);
RepositoryListColumnType.initListDropdown();
RepositoryListColumnType.initListPlaceholder();
RepositoryDateTimeColumnType.initReminderUnitDropdown();
RepositoryDateColumnType.initReminderUnitDropdown();
dropdownSelector.init('.checklist-column-type .delimiter', delimiterDropdownConfig);
RepositoryChecklistColumnType.initChecklistDropdown();
RepositoryChecklistColumnType.initChecklistPlaceholder();
RepositoryStockColumnType.initStockUnitDropdown();
$manageModal
.trigger('columnModal::partialLoadedFor' + columnType);
RepositoryStatusColumnType.updateLoadedEmojies();
if (button.data('action') === 'new') {
$('[data-column-type="RepositoryTextValue"]').show();
$('#new-repo-column-submit').show();
} else {
$('#update-repo-column-submit').show();
$('[data-column-type="' + columnType + '"]').show();
}
2019-10-21 18:40:53 +08:00
}
}).fail(function() {
HelperModule.flashAlertMsg(I18n.t('libraries.repository_columns.no_permissions'), 'danger');
2019-10-14 21:27:03 +08:00
});
});
}
function generateColumnNameTooltip(name) {
var maxLength = $(TABLE_ID).data('max-dropdown-length');
if ($.trim(name).length > maxLength) {
2020-01-14 23:46:48 +08:00
return `<div class="modal-tooltip">
${truncateLongString(name, maxLength)}
<span class="modal-tooltiptext">${name}</span>
</div>`;
}
return name;
}
function toggleColumnVisibility() {
var lis = $(columnsList).find('.vis');
lis.on('click', function(event) {
var self = $(this);
var li = self.closest('li');
var column = TABLE.column(li.attr('data-position'));
event.stopPropagation();
if (column.header.id !== 'row-name') {
if (column.visible()) {
self.addClass('fa-eye-slash');
self.removeClass('fa-eye');
li.addClass('col-invisible');
column.visible(false);
TABLE.setColumnSearchable(column.index(), false);
} else {
self.addClass('fa-eye');
self.removeClass('fa-eye-slash');
li.removeClass('col-invisible');
column.visible(true);
TABLE.setColumnSearchable(column.index(), true);
}
}
// Re-filter/search if neccesary
let searchText = $('div.dataTables_filter input').val();
if (!_.isEmpty(searchText)) {
TABLE.search(searchText).draw();
}
});
}
function getColumnTypeText(el) {
let colType = $(el).attr('data-type');
if (!colType) return '';
return I18n.t('libraries.manange_modal_column.select.' + colType.split(/(?=[A-Z])/).join('_')
.toLowerCase());
}
// loads the columns names in the manage columns modal index
function loadColumnsNames() {
var $columnsList = $(columnsList);
var scrollPosition = $columnsList.scrollTop();
// Clear the list
$columnsList.find('li[data-position]').remove();
_.each(TABLE.columns().header(), function(el, index) {
if (!el.dataset.unmanageable) {
2020-01-14 23:46:48 +08:00
let colId = $(el).attr('id');
let colIndex = $(el).attr('data-column-index');
let visible = TABLE.column(colIndex).visible();
let visClass = (visible) ? 'fa-eye' : 'fa-eye-slash';
let visLi = (visible) ? '' : 'col-invisible';
2020-01-14 23:46:48 +08:00
let visText = $(TABLE_ID).data('columns-visibility-text');
let customColumn = ($(el).attr('data-type')) ? 'editable' : '';
let editableRow = ($(el).attr('data-editable-row') === 'true') ? 'has-permissions' : '';
2020-01-14 23:46:48 +08:00
let editUrl = $(el).attr('data-edit-column-url');
let destroyUrl = $(el).attr('data-destroy-column-url');
let thederName;
if ($(el).find('.modal-tooltiptext').length > 0) {
thederName = $(el).find('.modal-tooltiptext').text();
} else {
thederName = el.innerText;
}
if (['row-name', 'archived-by', 'archived-on'].includes(el.id)) {
2020-01-14 23:46:48 +08:00
visClass = '';
visText = '';
}
let destroyButton = '';
if (destroyUrl) {
destroyButton = `<button class="btn icon-btn btn-light delete-repo-column manage-repo-column"
data-action="destroy"
data-modal-url="${destroyUrl}">
<span class="fas fa-trash" title="Delete"></span>
</button>`;
}
let listItem = `<li class="col-list-el ${visLi} ${customColumn} ${editableRow}" data-position="${colIndex}" data-id="${colId}">
2020-01-14 23:46:48 +08:00
<i class="grippy"></i>
<span class="vis-controls">
<span class="vis fas ${visClass}" title="${visText}"></span>
</span>
<span class="text">${generateColumnNameTooltip(thederName)}</span>
<span class="column-type pull-right">${getColumnTypeText(el, colId)}</span>
<span class="sci-btn-group manage-controls pull-right" data-view-mode="active">
2020-01-14 23:46:48 +08:00
<button class="btn icon-btn btn-light edit-repo-column manage-repo-column"
data-action="edit"
data-modal-url="${editUrl}">
<span class="fas fa-pencil-alt" title="Edit"></span>
</button>
${destroyButton}
2020-01-14 23:46:48 +08:00
</span>
<br>
</li>`;
$columnsList.append(listItem);
}
});
$columnsList.scrollTop(scrollPosition);
toggleColumnVisibility();
}
function initSorting() {
var $columnsList = $(columnsList);
$columnsList.sortable({
2020-01-14 23:46:48 +08:00
items: 'li',
scrollSpeed: 10,
axis: 'y',
update: function() {
var reorderer = TABLE.colReorder;
var listIds = [];
// We skip first two columns
listIds.push(0, 1);
$columnsList.find('li[data-position]').each(function() {
listIds.push($(this).first().data('position'));
});
reorderer.order(listIds, false);
loadColumnsNames();
}
});
}
function initManageColumnModal(button) {
var modalUrl = button.data('modal-url');
$.get(modalUrl, (data) => {
// show modal
$(manageModal).modal('show').find('.modal-content').html(data.html);
TABLE_ID = '#repository-table-' + data.id;
TABLE = $(TABLE_ID).DataTable();
initSorting();
toggleColumnVisibility();
loadColumnsNames();
RepositoryDatatable.checkAvailableColumns();
}).fail(function() {
HelperModule.flashAlertMsg(I18n.t('libraries.repository_columns.no_permissions'), 'danger');
});
}
function initBackToManageColumns() {
var $manageModal = $(manageModal);
$manageModal.on('click', '.back-to-column-modal', function() {
var button = $(this);
initManageColumnModal(button);
});
}
function initColumnsButton() {
$('.repo-datatables-buttons').on('click', '.manage-repo-column-index', function() {
var button = $(this);
initManageColumnModal(button);
});
}
2019-10-14 21:27:03 +08:00
return {
init: () => {
if ($('.repo-datatables-buttons').length > 0) {
2019-10-21 18:40:53 +08:00
initColumnTypeSelector();
initCreateSubmitAction();
initEditSubmitAction();
2019-10-21 18:40:53 +08:00
initDeleteSubmitAction();
initBackToManageColumns();
initColumnsButton();
initManageColumnAction();
2019-10-25 23:38:15 +08:00
RepositoryListColumnType.init();
2019-11-06 23:45:07 +08:00
RepositoryStatusColumnType.init();
RepositoryStockColumnType.init();
2019-12-09 20:38:40 +08:00
RepositoryChecklistColumnType.init();
RepositoryDateTimeColumnType.init();
RepositoryDateColumnType.init();
2019-10-15 16:59:43 +08:00
}
2019-10-14 21:27:03 +08:00
}
};
}());
2019-10-14 21:27:03 +08:00
$(document).on('turbolinks:load', function() {
RepositoryColumns.init();
});