scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-18 17:56:00 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor repositories js files [fixes SCI-1485]

Browse source
This commit is contained in:
zmagod 2017-07-17 15:05:28 +02:00
parent 77893e6bcb
commit a2b7bcda4c
8 changed files with 883 additions and 842 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/repositories/index.js
View file

@ -41,8 +41,10 @@
success: function (data) { success: function (data) {
var tabBody = $(pane.context.hash).find(".tab-content-body"); var tabBody = $(pane.context.hash).find(".tab-content-body");
tabBody.html(data.html); tabBody.html(data.html);
pane.tab('show').promise().done(function() { pane.tab('show').promise().done(function(el) {
initImportRecordsModal(); initImportRecordsModal();
RepositoryDatatable.destroy()
RepositoryDatatable.init(el.attr('data-repo-table'));
}); });
}, },
error: function (error) { error: function (error) {

10
app/assets/javascripts/repositories/my_module_repository.js Normal file
View file

@ -0,0 +1,10 @@
(function() {
'use strict';
// initialze repository datatable
$(document).ready(function() {
RepositoryDatatable.destroy()
RepositoryDatatable.init($('#content').attr('data-repo-id'));
onClickToggleAssignedRecords();
});
})();

365
app/assets/javascripts/repositories/repository_datatable.js
View file

@ -1,12 +1,18 @@
//= require jquery-ui/sortable //= require jquery-ui/sortable
// Extend datatables API with searchable options var RepositoryDatatable = (function(global) {
// (http://stackoverflow.com/questions/39912395/datatables-dynamically-set-columns-searchable) 'use strict';
$.fn.dataTable.Api.register('isColumnSearchable()', function(colSelector) {
var TABLE_ID = '';
var TABLE = {};
// Extend datatables API with searchable options
// (http://stackoverflow.com/questions/39912395/datatables-dynamically-set-columns-searchable)
$.fn.dataTable.Api.register('isColumnSearchable()', function(colSelector) {
var idx = this.column(colSelector).index(); var idx = this.column(colSelector).index();
return this.settings()[0].aoColumns[idx].bSearchable; return this.settings()[0].aoColumns[idx].bSearchable;
}); });
$.fn.dataTable.Api $.fn.dataTable.Api
.register('setColumnSearchable()', function(colSelector, value) { .register('setColumnSearchable()', function(colSelector, value) {
if (value !== this.isColumnSearchable(colSelector)) { if (value !== this.isColumnSearchable(colSelector)) {
var idx = this.column(colSelector).index(); var idx = this.column(colSelector).index();
@ -18,30 +24,29 @@ $.fn.dataTable.Api
return value; return value;
}); });
var rowsSelected = []; var rowsSelected = [];
// Tells whether we're currently viewing or editing table // Tells whether we're currently viewing or editing table
var currentMode = 'viewMode'; var currentMode = 'viewMode';
// Tells what action will execute by pressing on save button (update/create) // Tells what action will execute by pressing on save button (update/create)
var saveAction = 'update'; var saveAction = 'update';
var selectedRecord; var selectedRecord;
// Helps saving correct table state // Helps saving correct table state
var myData; var myData;
var loadFirstTime = true; var loadFirstTime = true;
var table; var originalHeader;
var originalHeader;
// Tells whether to filter only assigned repository records // Tells whether to filter only assigned repository records
var viewAssigned; var viewAssigned;
function dataTableInit() { function dataTableInit() {
// Make a copy of original repository table header // Make a copy of original repository table header
originalHeader = $('#repository-table thead').children().clone(); originalHeader = $(TABLE_ID + ' thead').children().clone();
viewAssigned = 'assigned'; viewAssigned = 'assigned';
table = $('#repository-table').DataTable({ TABLE = $(TABLE_ID).DataTable({
order: [[2, 'desc']], order: [[2, 'desc']],
dom: "R<'row'<'col-sm-9-custom toolbar'l><'col-sm-3-custom'f>>tpi", dom: "R<'row'<'col-sm-9-custom toolbar'l><'col-sm-3-custom'f>>tpi",
stateSave: true, stateSave: true,
@ -57,7 +62,7 @@ function dataTableInit() {
}, },
destroy: true, destroy: true,
ajax: { ajax: {
url: $('#repository-table').data('source'), url: $(TABLE_ID).data('source'),
data: function(d) { data: function(d) {
d.assigned = viewAssigned; d.assigned = viewAssigned;
}, },
@ -82,7 +87,6 @@ function dataTableInit() {
rowCallback: function(row, data) { rowCallback: function(row, data) {
// Get row ID // Get row ID
var rowId = data.DT_RowId; var rowId = data.DT_RowId;
// If row ID is in the list of selected row IDs // If row ID is in the list of selected row IDs
if ($.inArray(rowId, rowsSelected) !== -1) { if ($.inArray(rowId, rowsSelected) !== -1) {
$(row).find('input[type="checkbox"]').prop('checked', true); $(row).find('input[type="checkbox"]').prop('checked', true);
@ -90,7 +94,7 @@ function dataTableInit() {
} }
}, },
columns: (function() { columns: (function() {
var numOfColumns = $('#repository-table').data('num-columns'); var numOfColumns = $(TABLE_ID).data('num-columns');
var columns = []; var columns = [];
for (var i = 0; i < numOfColumns; i++) { for (var i = 0; i < numOfColumns; i++) {
var visible = (i <= 4); var visible = (i <= 4);
@ -108,7 +112,7 @@ function dataTableInit() {
animateSpinner(this, false); animateSpinner(this, false);
changeToViewMode(); changeToViewMode();
updateButtons(); updateButtons();
updateDataTableSelectAllCtrl(table); updateDataTableSelectAllCtrl();
// Prevent row toggling when selecting user smart annotation link // Prevent row toggling when selecting user smart annotation link
SmartAnnotation.preventPropagation('.atwho-user-popover'); SmartAnnotation.preventPropagation('.atwho-user-popover');
@ -127,7 +131,7 @@ function dataTableInit() {
// Send an Ajax request to the server to get the data. Note that // Send an Ajax request to the server to get the data. Note that
// this is a synchronous request since the data is expected back from the // this is a synchronous request since the data is expected back from the
// function // function
var repositoryId = $('#repository-table').data('repository-id'); var repositoryId = $(TABLE_ID).data('repository-id');
$.ajax({ $.ajax({
url: '/repositories/' + repositoryId + '/state_load', url: '/repositories/' + repositoryId + '/state_load',
data: {}, data: {},
@ -142,14 +146,14 @@ function dataTableInit() {
}, },
stateSaveCallback: function(settings, data) { stateSaveCallback: function(settings, data) {
// Send an Ajax request to the server with the state object // Send an Ajax request to the server with the state object
var repositoryId = $('#repository-table').data('repository-id'); var repositoryId = $(TABLE_ID).data('repository-id');
// Save correct data // Save correct data
if (loadFirstTime === true) { if (loadFirstTime === true) {
data = myData; data = myData;
} }
$.ajax({ $.ajax({
url: '/repositories/' + repositoryId + '/state_save', url: '/repositories/' + repositoryId + '/state_save',
data: {state: data}, data: { state: data },
dataType: 'json', dataType: 'json',
type: 'POST' type: 'POST'
}); });
@ -159,9 +163,9 @@ function dataTableInit() {
fnInitComplete: function(oSettings) { fnInitComplete: function(oSettings) {
// Reload correct column order and visibility (if you refresh page) // Reload correct column order and visibility (if you refresh page)
// First two columns are fixed // First two columns are fixed
table.column(0).visible(true); TABLE.column(0).visible(true);
table.column(1).visible(true); TABLE.column(1).visible(true);
for (var i = 2; i < table.columns()[0].length; i++) { for (var i = 2; i < TABLE.columns()[0].length; i++) {
var visibility = false; var visibility = false;
if (myData.columns[i]) { if (myData.columns[i]) {
visibility = myData.columns[i].visible; visibility = myData.columns[i].visible;
@ -169,15 +173,16 @@ function dataTableInit() {
if (typeof (visibility) === 'string') { if (typeof (visibility) === 'string') {
visibility = (visibility === 'true'); visibility = (visibility === 'true');
} }
table.column(i).visible(visibility); TABLE.column(i).visible(visibility);
table.setColumnSearchable(i, visibility); TABLE.setColumnSearchable(i, visibility);
} }
oSettings._colReorder.fnOrder(myData.ColReorder); oSettings._colReorder.fnOrder(myData.ColReorder);
table.on('mousedown', function() { TABLE.on('mousedown', function() {
$('#repository-columns-dropdown').removeClass('open'); $('#repository-columns-dropdown').removeClass('open');
}); });
initHeaderTooltip(); initHeaderTooltip();
initRowSelection(); initRowSelection();
bindExportActions();
} }
}); });
@ -186,7 +191,7 @@ function dataTableInit() {
$('div.toolbarButtons').show(); $('div.toolbarButtons').show();
// Handle click on table cells with checkboxes // Handle click on table cells with checkboxes
$('#repository-table').on('click', 'tbody td', function(e) { $(TABLE_ID).on('click', 'tbody td', function(e) {
if ($(e.target).is('.repository-row-selector')) { if ($(e.target).is('.repository-row-selector')) {
// Skip if clicking on selector checkbox // Skip if clicking on selector checkbox
return; return;
@ -194,7 +199,7 @@ function dataTableInit() {
$(this).parent().find('.repository-row-selector').trigger('click'); $(this).parent().find('.repository-row-selector').trigger('click');
}); });
table.on('column-reorder', function() { TABLE.on('column-reorder', function() {
initRowSelection(); initRowSelection();
}); });
@ -202,20 +207,19 @@ function dataTableInit() {
animateLoading(); animateLoading();
}); });
return table; // Timeout for table header scrolling
} setTimeout(function() {
TABLE.columns.adjust();
}, 10);
table = dataTableInit(); return TABLE;
}
// Timeout for table header scrolling // Enables noSearchHidden plugin
setTimeout(function() { $.fn.dataTable.defaults.noSearchHidden = true;
table.columns.adjust();
}, 10);
// Enables noSearchHidden plugin function bindExportActions() {
$.fn.dataTable.defaults.noSearchHidden = true; $('form#form-export').submit(function() {
$('form#form-export').submit(function() {
var form = this; var form = this;
if (currentMode === 'viewMode') { if (currentMode === 'viewMode') {
@ -224,7 +228,7 @@ $('form#form-export').submit(function() {
$(form).find('input[name=header_ids\\[\\]]').remove(); $(form).find('input[name=header_ids\\[\\]]').remove();
// Append visible column information // Append visible column information
$('.active table#repository-table thead tr th').each(function() { $('.active table' + TABLE_ID + ' thead tr th').each(function() {
var th = $(this); var th = $(this);
var val; var val;
switch ($(th).attr('id')) { switch ($(th).attr('id')) {
@ -257,18 +261,20 @@ $('form#form-export').submit(function() {
appendInput(form, rowId, 'row_ids[]'); appendInput(form, rowId, 'row_ids[]');
}); });
} }
}); });
}
function appendInput(form, val, name) {
function appendInput(form, val, name) {
$(form).append( $(form).append(
$('<input>') $('<input>')
.attr('type', 'hidden') .attr('type', 'hidden')
.attr('name', name) .attr('name', name)
.val(val) .val(val)
); );
} }
function initRowSelection() { function initRowSelection() {
// Handle clicks on checkbox // Handle clicks on checkbox
$('.dt-body-center .repository-row-selector').change(function(e) { $('.dt-body-center .repository-row-selector').change(function(e) {
if (currentMode !== 'viewMode') { if (currentMode !== 'viewMode') {
@ -276,7 +282,7 @@ function initRowSelection() {
} }
// Get row ID // Get row ID
var $row = $(this).closest('tr'); var $row = $(this).closest('tr');
var data = table.row($row).data(); var data = TABLE.row($row).data();
var rowId = data.DT_RowId; var rowId = data.DT_RowId;
// Determine whether row ID is in the list of selected row IDs // Determine whether row ID is in the list of selected row IDs
@ -296,7 +302,7 @@ function initRowSelection() {
$row.removeClass('selected'); $row.removeClass('selected');
} }
updateDataTableSelectAllCtrl(table); updateDataTableSelectAllCtrl();
e.stopPropagation(); e.stopPropagation();
updateButtons(); updateButtons();
@ -314,12 +320,12 @@ function initRowSelection() {
// Prevent click event from propagating to parent // Prevent click event from propagating to parent
e.stopPropagation(); e.stopPropagation();
}); });
} }
// Updates "Select all" control in a data table // Updates "Select all" control in a data table
function updateDataTableSelectAllCtrl(table) { function updateDataTableSelectAllCtrl() {
var $table = table.table().node(); var $table = TABLE.table().node();
var $header = table.table().header(); var $header = TABLE.table().header();
var $chkboxAll = $('.repository-row-selector', $table); var $chkboxAll = $('.repository-row-selector', $table);
var $chkboxChecked = $('.repository-row-selector:checked', $table); var $chkboxChecked = $('.repository-row-selector:checked', $table);
var chkboxSelectAll = $('input[name="select_all"]', $header).get(0); var chkboxSelectAll = $('input[name="select_all"]', $header).get(0);
@ -345,9 +351,9 @@ function updateDataTableSelectAllCtrl(table) {
chkboxSelectAll.indeterminate = true; chkboxSelectAll.indeterminate = true;
} }
} }
} }
function initHeaderTooltip() { function initHeaderTooltip() {
// Fix compatibility of fixed table header and column names modal-tooltip // Fix compatibility of fixed table header and column names modal-tooltip
$('.modal-tooltip').off(); $('.modal-tooltip').off();
$('.modal-tooltip').hover(function() { $('.modal-tooltip').hover(function() {
@ -360,9 +366,9 @@ function initHeaderTooltip() {
var width = 200; var width = 200;
// set tooltip params in the table body // set tooltip params in the table body
if ( $(this).parents('#repository-table').length ) { if ($(this).parents(TABLE_ID).length) {
offsetLeft = $('#repository-table').offset().left + 100; offsetLeft = $(TABLE_ID).offset().left + 100;
width = $('#repository-table').width() - 200; width = $(TABLE_ID).width() - 200;
} }
$('body').append($tooltip); $('body').append($tooltip);
$tooltip.css('background-color', '#d2d2d2'); $tooltip.css('background-color', '#d2d2d2');
@ -383,18 +389,18 @@ function initHeaderTooltip() {
$(this).append($(this).data('dropdown-tooltip')); $(this).append($(this).data('dropdown-tooltip'));
$(this).data('dropdown-tooltip').removeAttr('style'); $(this).data('dropdown-tooltip').removeAttr('style');
}); });
} }
function onClickAddRecord() { global.onClickAddRecord = function() {
changeToEditMode(); changeToEditMode();
updateButtons(); updateButtons();
saveAction = 'create'; saveAction = 'create';
var tr = document.createElement('tr'); var tr = document.createElement('tr');
if (table.column(1).visible() === false) { if (TABLE.column(1).visible() === false) {
table.column(1).visible(true); TABLE.column(1).visible(true);
} }
$('table#repository-table thead tr').children('th').each(function() { $('table' + TABLE_ID + ' thead tr').children('th').each(function() {
var th = $(this); var th = $(this);
var td; var td;
var input; var input;
@ -417,7 +423,7 @@ function onClickAddRecord() {
tr.appendChild(createTdElement('')); tr.appendChild(createTdElement(''));
} }
}); });
$('table#repository-table').prepend(tr); $('table' + TABLE_ID).prepend(tr);
selectedRecord = tr; selectedRecord = tr;
// initialize smart annotation // initialize smart annotation
@ -428,9 +434,9 @@ function onClickAddRecord() {
}); });
// Adjust columns width in table header // Adjust columns width in table header
adjustTableHeader(); adjustTableHeader();
} }
(function onClickToggleAssignedRecords() { global.onClickToggleAssignedRecords = function() {
$('.repository-assign-group > .btn').click(function() { $('.repository-assign-group > .btn').click(function() {
$('.btn-group > .btn').removeClass('active btn-primary'); $('.btn-group > .btn').removeClass('active btn-primary');
$('.btn-group > .btn').addClass('btn-default'); $('.btn-group > .btn').addClass('btn-default');
@ -439,25 +445,25 @@ function onClickAddRecord() {
$('#assigned-repo-records').on('click', function() { $('#assigned-repo-records').on('click', function() {
viewAssigned = 'assigned'; viewAssigned = 'assigned';
table.ajax.reload(function() { TABLE.ajax.reload(function() {
initRowSelection(); initRowSelection();
}, false); }, false);
}); });
$('#all-repo-records').on('click', function() { $('#all-repo-records').on('click', function() {
viewAssigned = 'all'; viewAssigned = 'all';
table.ajax.reload(function() { TABLE.ajax.reload(function() {
initRowSelection(); initRowSelection();
}, false); }, false);
}); });
})(); };
function onClickAssignRecords() { global.onClickAssignRecords = function() {
animateSpinner(); animateSpinner();
$.ajax({ $.ajax({
url: $('#assignRepositoryRecords').data('assign-url'), url: $('#assignRepositoryRecords').data('assign-url'),
type: 'POST', type: 'POST',
dataType: 'json', dataType: 'json',
data: {selected_rows: rowsSelected}, data: { selected_rows: rowsSelected },
success: function(data) { success: function(data) {
HelperModule.flashAlertMsg(data.flash, 'success'); HelperModule.flashAlertMsg(data.flash, 'success');
onClickCancel(); onClickCancel();
@ -469,9 +475,9 @@ function onClickAssignRecords() {
clearRowSelection(); clearRowSelection();
} }
}); });
} }
function onClickUnassignRecords() { global.onClickUnassignRecords = function() {
animateSpinner(); animateSpinner();
$.ajax({ $.ajax({
url: $('#unassignRepositoryRecords').data('unassign-url'), url: $('#unassignRepositoryRecords').data('unassign-url'),
@ -489,12 +495,12 @@ function onClickUnassignRecords() {
clearRowSelection(); clearRowSelection();
} }
}); });
} }
function onClickDeleteRecord() { global.onClickDeleteRecord = function() {
animateSpinner(); animateSpinner();
$.ajax({ $.ajax({
url: $('table#repository-table').data('delete-record'), url: $('table' + TABLE_ID).data('delete-record'),
type: 'POST', type: 'POST',
dataType: 'json', dataType: 'json',
data: {selected_rows: rowsSelected}, data: {selected_rows: rowsSelected},
@ -511,15 +517,15 @@ function onClickDeleteRecord() {
} }
} }
}); });
} }
// Edit record // Edit record
function onClickEdit() { global.onClickEdit = function() {
if (rowsSelected.length !== 1) { if (rowsSelected.length !== 1) {
return; return;
} }
var row = table.row('#' + rowsSelected[0]); var row = TABLE.row('#' + rowsSelected[0]);
var node = row.node(); var node = row.node();
var rowData = row.data(); var rowData = row.data();
@ -536,8 +542,8 @@ function onClickEdit() {
type: 'GET', type: 'GET',
dataType: 'json', dataType: 'json',
success: function(data) { success: function(data) {
if (table.column(1).visible() === false) { if (TABLE.column(1).visible() === false) {
table.column(1).visible(true); TABLE.column(1).visible(true);
} }
// Show save and cancel buttons in first two columns // Show save and cancel buttons in first two columns
$(node).children('td').eq(0).html($('#saveRecord').clone()); $(node).children('td').eq(0).html($('#saveRecord').clone());
@ -555,8 +561,8 @@ function onClickEdit() {
var cells = data.repository_row.repository_cells; var cells = data.repository_row.repository_cells;
$(node).children('td').each(function(i) { $(node).children('td').each(function(i) {
var td = $(this); var td = $(this);
var rawIndex = table.column.index('fromVisible', i); var rawIndex = TABLE.column.index('fromVisible', i);
var colHeader = table.column(rawIndex).header(); var colHeader = TABLE.column(rawIndex).header();
if ($(colHeader).hasClass('repository-column')) { if ($(colHeader).hasClass('repository-column')) {
// Check if cell on this record exists // Check if cell on this record exists
var cell = cells[$(colHeader).attr('id')]; var cell = cells[$(colHeader).attr('id')];
@ -591,14 +597,14 @@ function onClickEdit() {
} }
} }
}); });
} }
// Save record // Save record
function onClickSave() { global.onClickSave = function() {
var node; var node;
var rowData; var rowData;
if (saveAction === 'update') { if (saveAction === 'update') {
var row = table.row(selectedRecord); var row = TABLE.row(selectedRecord);
node = row.node(); node = row.node();
rowData = row.data(); rowData = row.data();
} else if (saveAction === 'create') { } else if (saveAction === 'create') {
@ -606,7 +612,7 @@ function onClickSave() {
} }
// First fetch all the data in input fields // First fetch all the data in input fields
var data = { var data = {
request_url: $('#repository-table').data('current-uri'), request_url: $(TABLE_ID).data('current-uri'),
repository_row_id: $(selectedRecord).attr('id'), repository_row_id: $(selectedRecord).attr('id'),
repository_row: {}, repository_row: {},
repository_cells: {} repository_cells: {}
@ -631,7 +637,7 @@ function onClickSave() {
type = 'PUT'; type = 'PUT';
} else { } else {
type = 'POST'; type = 'POST';
url = $('table#repository-table').data('create-record'); url = $('table' + TABLE_ID).data('create-record');
} }
$.ajax({ $.ajax({
url: url, url: url,
@ -690,10 +696,10 @@ function onClickSave() {
} }
} }
}); });
} }
// Enable/disable edit button // Enable/disable edit button
function updateButtons() { function updateButtons() {
if (currentMode === 'viewMode') { if (currentMode === 'viewMode') {
$('#addRepositoryRecord').removeClass('disabled'); $('#addRepositoryRecord').removeClass('disabled');
$('#addRepositoryRecord').prop('disabled', false); $('#addRepositoryRecord').prop('disabled', false);
@ -764,10 +770,10 @@ function updateButtons() {
$('.repository-row-selector').addClass('disabled'); $('.repository-row-selector').addClass('disabled');
$('.repository-row-selector').prop('disabled', true); $('.repository-row-selector').prop('disabled', true);
} }
} }
// Clear all has-error tags // Clear all has-error tags
function clearAllErrors() { function clearAllErrors() {
// Remove any validation errors // Remove any validation errors
$(selectedRecord).find('.has-error').each(function() { $(selectedRecord).find('.has-error').each(function() {
$(this).removeClass('has-error'); $(this).removeClass('has-error');
@ -775,89 +781,86 @@ function clearAllErrors() {
}); });
// Remove any alerts // Remove any alerts
$('#alert-container').find('div').remove(); $('#alert-container').find('div').remove();
} }
function clearRowSelection() { function clearRowSelection() {
$('.dt-body-center .repository-row-selector').prop('checked', false); $('.dt-body-center .repository-row-selector').prop('checked', false);
$('.dt-body-center .repository-row-selector').closest('tr') $('.dt-body-center .repository-row-selector').closest('tr')
.removeClass('selected'); .removeClass('selected');
rowsSelected = []; rowsSelected = [];
}
// Restore previous table
function onClickCancel() {
if ($('#assigned').text().length === 0) {
table.column(1).visible(false);
} }
table.ajax.reload(function() {
// Restore previous table
global.onClickCancel = function() {
if ($('#assigned').text().length === 0) {
TABLE.column(1).visible(false);
}
TABLE.ajax.reload(function() {
initRowSelection(); initRowSelection();
}, false); }, false);
changeToViewMode(); changeToViewMode();
updateButtons(); updateButtons();
SmartAnnotation.closePopup(); SmartAnnotation.closePopup();
animateSpinner(null, false); animateSpinner(null, false);
} }
// Handle enter key // Handle enter key
$(document).off('keypress').keypress(function(event) { $(document).off('keypress').keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which); var keycode = (event.keyCode ? event.keyCode : event.which);
if (currentMode === 'editMode' && keycode === '13') { if (currentMode === 'editMode' && keycode === '13') {
$('#saveRecord').click(); $('#saveRecord').click();
return false; return false;
} }
}); });
// Helper functions // Helper functions
function getColumnIndex(id) { function getColumnIndex(id) {
if (id < 0) { if (id < 0) {
return false; return false;
} }
return table.column(id).index('visible'); return TABLE.column(id).index('visible');
} }
// Takes object and surrounds it with input // Takes object and surrounds it with input
function changeToInputField(object, name, value) { function changeToInputField(object, name, value) {
return "<div class='form-group'><input class='form-control' data-object='" + return "<div class='form-group'><input class='form-control' data-object='" +
object + "' name='" + name + "' value='" + value + "'></input></div>"; object + "' name='" + name + "' value='" + value + "'></input></div>";
} }
// Return td element with content // Return td element with content
function createTdElement(content) { function createTdElement(content) {
var td = document.createElement('td'); var td = document.createElement('td');
td.innerHTML = content; td.innerHTML = content;
return td; return td;
} }
// Adjust columns width in table header // Adjust columns width in table header
function adjustTableHeader() { function adjustTableHeader() {
table.columns.adjust(); TABLE.columns.adjust();
$('.dropdown-menu').parent() $('.dropdown-menu').parent()
.on('shown.bs.dropdown hidden.bs.dropdown', function() { .on('shown.bs.dropdown hidden.bs.dropdown', function() {
table.columns.adjust(); TABLE.columns.adjust();
}); });
} }
function changeToViewMode() { function changeToViewMode() {
currentMode = 'viewMode'; currentMode = 'viewMode';
// Table specific stuff // Table specific stuff
table.button(0).enable(true); TABLE.button(0).enable(true);
} }
function changeToEditMode() { function changeToEditMode() {
currentMode = 'editMode'; currentMode = 'editMode';
// Table specific stuff // Table specific stuff
table.button(0).enable(false); TABLE.button(0).enable(false);
initHeaderTooltip(); initHeaderTooltip();
} }
/* /*
* Repository columns dropdown * Repository columns dropdown
*/ */
(function(table) {
'use strict';
var dropdown = $('#repository-columns-dropdown'); var dropdown, dropdownList;
var dropdownList = $('#repository-columns-list');
function createNewColumn() { function createNewColumn() {
// Make an Ajax request to repository_columns_controller // Make an Ajax request to repository_columns_controller
@ -893,11 +896,11 @@ function changeToEditMode() {
$('div.toolbarButtons').hide(); $('div.toolbarButtons').hide();
// Destroy datatable // Destroy datatable
table.destroy(); TABLE.destroy();
// Add number of columns // Add number of columns
$('#repository-table').data('num-columns', $(TABLE_ID).data('num-columns',
$('#repository-table').data('num-columns') + 1); $(TABLE_ID).data('num-columns') + 1);
// Add column to table (=table header) // Add column to table (=table header)
originalHeader.append( originalHeader.append(
'<th class="repository-column" id="' + data.id + '" ' + '<th class="repository-column" id="' + data.id + '" ' +
@ -909,13 +912,13 @@ function changeToEditMode() {
// Remove all event handlers as we re-initialize them later with // Remove all event handlers as we re-initialize them later with
// new table // new table
$('#repository-table').off(); $(TABLE_ID).off();
$('#repository-table thead').empty(); $(TABLE_ID +' thead').empty();
$('#repository-table thead').append(originalHeader); $(TABLE_ID + ' thead').append(originalHeader);
// Re-initialize datatable // Re-initialize datatable
table = dataTableInit(); TABLE = dataTableInit();
table.on('init.dt', function() { TABLE.on('init.dt', function() {
loadColumnsNames(); loadColumnsNames();
dropdownOverflow(); dropdownOverflow();
}); });
@ -961,10 +964,10 @@ function changeToEditMode() {
var scrollPosition = dropdownList.scrollTop(); var scrollPosition = dropdownList.scrollTop();
// Clear the list // Clear the list
dropdownList.find('li[data-position]').remove(); dropdownList.find('li[data-position]').remove();
_.each(table.columns().header(), function(el, index) { _.each(TABLE.columns().header(), function(el, index) {
if (index > 1) { if (index > 1) {
var colIndex = $(el).attr('data-column-index'); var colIndex = $(el).attr('data-column-index');
var visible = table.column(colIndex).visible(); var visible = TABLE.column(colIndex).visible();
var editable = $(el).is('[data-editable]'); var editable = $(el).is('[data-editable]');
var deletable = $(el).is('[data-deletable]'); var deletable = $(el).is('[data-deletable]');
@ -994,19 +997,19 @@ function changeToEditMode() {
'form-control" style="display: none;" />' + 'form-control" style="display: none;" />' +
'<span class="pull-right controls">' + '<span class="pull-right controls">' +
'<span class="ok glyphicon glyphicon-ok" style="display: none;" ' + '<span class="ok glyphicon glyphicon-ok" style="display: none;" ' +
'title="' + $('#repository-table').data('save-text') + '"></span>' + 'title="' + $(TABLE_ID).data('save-text') + '"></span>' +
'<span class="cancel glyphicon glyphicon-remove" ' + '<span class="cancel glyphicon glyphicon-remove" ' +
'style="display: none;" ' + 'style="display: none;" ' +
'title="' + $('#repository-table').data('cancel-text') + 'title="' + $(TABLE_ID).data('cancel-text') +
'"></span>' + '"></span>' +
'<span class="vis glyphicon ' + visClass + '" title="' + '<span class="vis glyphicon ' + visClass + '" title="' +
$('#repository-table').data('columns-visibility-text') + '">' + $(TABLE_ID).data('columns-visibility-text') + '">' +
'</span> ' + '</span> ' +
'<span class="edit glyphicon glyphicon-pencil ' + editClass + '<span class="edit glyphicon glyphicon-pencil ' + editClass +
'" title="' + $('#repository-table').data('edit-text') + '" title="' + $(TABLE_ID).data('edit-text') +
'"></span>' + '"></span>' +
'<span class="del glyphicon glyphicon-trash ' + delClass + '<span class="del glyphicon glyphicon-trash ' + delClass +
'" title="' + $('#repository-table').data('columns-delete-text') + '" title="' + $(TABLE_ID).data('columns-delete-text') +
'"></span>' + '"></span>' +
'</span><br></span></li>'; '</span><br></span></li>';
dropdownList.append(html); dropdownList.append(html);
@ -1038,27 +1041,27 @@ function changeToEditMode() {
event.stopPropagation(); event.stopPropagation();
var self = $(this); var self = $(this);
var li = self.closest('li'); var li = self.closest('li');
var column = table.column(li.attr('data-position')); var column = TABLE.column(li.attr('data-position'));
if (column.visible()) { if (column.visible()) {
self.addClass('glyphicon-eye-close'); self.addClass('glyphicon-eye-close');
self.removeClass('glyphicon-eye-open'); self.removeClass('glyphicon-eye-open');
li.addClass('col-invisible'); li.addClass('col-invisible');
column.visible(false); column.visible(false);
table.setColumnSearchable(column.index(), false); TABLE.setColumnSearchable(column.index(), false);
} else { } else {
self.addClass('glyphicon-eye-open'); self.addClass('glyphicon-eye-open');
self.removeClass('glyphicon-eye-close'); self.removeClass('glyphicon-eye-close');
li.removeClass('col-invisible'); li.removeClass('col-invisible');
column.visible(true); column.visible(true);
table.setColumnSearchable(column.index(), true); TABLE.setColumnSearchable(column.index(), true);
initHeaderTooltip(); initHeaderTooltip();
} }
// Re-filter/search if neccesary // Re-filter/search if neccesary
var searchText = $('div.dataTables_filter input').val(); var searchText = $('div.dataTables_filter input').val();
if (!_.isEmpty(searchText)) { if (!_.isEmpty(searchText)) {
table.search(searchText).draw(); TABLE.search(searchText).draw();
} }
initRowSelection(); initRowSelection();
}); });
@ -1070,7 +1073,7 @@ function changeToEditMode() {
cancel: '.new-repository-column', cancel: '.new-repository-column',
axis: 'y', axis: 'y',
update: function() { update: function() {
var reorderer = table.colReorder; var reorderer = TABLE.colReorder;
var listIds = []; var listIds = [];
// We skip first two columns // We skip first two columns
listIds.push(0, 1); listIds.push(0, 1);
@ -1107,7 +1110,7 @@ function changeToEditMode() {
dropdownList.sortable('enable'); dropdownList.sortable('enable');
$(li).clearFormErrors(); $(li).clearFormErrors();
text.html(generateColumnNameTooltip(newName)); text.html(generateColumnNameTooltip(newName));
$(table.columns().header()).filter('#' + id) $(TABLE.columns().header()).filter('#' + id)
.html(generateColumnNameTooltip(newName)); .html(generateColumnNameTooltip(newName));
originalHeader.find('#' + id).html(newName); originalHeader.find('#' + id).html(newName);
cancelEditMode(); cancelEditMode();
@ -1291,28 +1294,28 @@ function changeToEditMode() {
$('div.toolbarButtons').hide(); $('div.toolbarButtons').hide();
// Destroy datatable // Destroy datatable
table.destroy(); TABLE.destroy();
// Subtract number of columns // Subtract number of columns
$('#repository-table').data( $(TABLE_ID).data(
'num-columns', 'num-columns',
$('#repository-table').data('num-columns') - 1 $(TABLE_ID).data('num-columns') - 1
); );
// Remove column from table (=table header) & rows // Remove column from table (=table header) & rows
var th = originalHeader.find('#' + id); var th = originalHeader.find('#' + id);
var index = th.index(); var index = th.index();
th.remove(); th.remove();
$('#repository-table tbody td:nth-child(' + (index + 1) + ')').remove(); $(TABLE_ID + ' tbody td:nth-child(' + (index + 1) + ')').remove();
// Remove all event handlers as we re-initialize them later with // Remove all event handlers as we re-initialize them later with
// new table // new table
$('#repository-table').off(); $(TABLE_ID).off();
$('#repository-table thead').empty(); $(TABLE_ID + ' thead').empty();
$('#repository-table thead').append(originalHeader); $(TABLE_ID + ' thead').append(originalHeader);
// Re-initialize datatable // Re-initialize datatable
table = dataTableInit(); TABLE = dataTableInit();
loadColumnsNames(); loadColumnsNames();
// Hide modal // Hide modal
@ -1344,7 +1347,7 @@ function changeToEditMode() {
} }
function generateColumnNameTooltip(name) { function generateColumnNameTooltip(name) {
var maxLength = $('#repository-table').data('max-dropdown-length'); var maxLength = $(TABLE_ID).data('max-dropdown-length');
if ($.trim(name).length > maxLength) { if ($.trim(name).length > maxLength) {
return '<div class="modal-tooltip">' + return '<div class="modal-tooltip">' +
truncateLongString(name, maxLength) + truncateLongString(name, maxLength) +
@ -1355,7 +1358,9 @@ function changeToEditMode() {
// initialze dropdown after the table is loaded // initialze dropdown after the table is loaded
function initDropdown() { function initDropdown() {
table.on('init.dt', function() { TABLE.on('init.dt', function() {
dropdown = $('#repository-columns-dropdown');
dropdownList = $('#repository-columns-list');
initNewColumnForm(); initNewColumnForm();
initSorting(); initSorting();
toggleColumnVisibility(); toggleColumnVisibility();
@ -1372,5 +1377,19 @@ function changeToEditMode() {
}); });
} }
function init(id) {
TABLE_ID = id;
TABLE = dataTableInit();
initDropdown(); initDropdown();
})(table); }
function destroy() {
TABLE = {};
TABLE_ID = '';
}
return Object.freeze({
init: init,
destroy: destroy
});
})(window);

7
app/views/my_modules/repository.html.erb
View file

@ -31,7 +31,8 @@
<% end %> <% end %>
</div> </div>
<div id="content"> <div id="content"
data-repo-id="#repository-table-<%= @repository.id %>">
<%= render partial: "repositories/repository_table", <%= render partial: "repositories/repository_table",
locals: { locals: {
repository: @repository, repository: @repository,
@ -40,3 +41,7 @@
} }
%> %>
</div> </div>
<%= stylesheet_link_tag 'datatables' %>
<%= javascript_include_tag 'repositories/repository_datatable' %>
<%= javascript_include_tag 'repositories/my_module_repository' %>

5
app/views/repositories/_repository_table.html.erb
View file

@ -1,5 +1,5 @@
<div class="repository-table"> <div class="repository-table">
<table id="repository-table" class="table" <table id="repository-table-<%= repository.id %>" class="table"
data-current-uri="<%= request.original_url %>" data-current-uri="<%= request.original_url %>"
data-repository-id="<%= repository.id %>" data-repository-id="<%= repository.id %>"
data-source="<%= repository_index_link %>" data-source="<%= repository_index_link %>"
@ -35,6 +35,3 @@
<tbody></tbody> <tbody></tbody>
</table> </table>
</div> </div>
<%= stylesheet_link_tag 'datatables' %>
<%= javascript_include_tag('repositories/repository_datatable') %>

3
app/views/repositories/index.html.erb
View file

@ -10,6 +10,7 @@
<li role="presentation"> <li role="presentation">
<a href="#custom_repo_<%= repo.id %>" <a href="#custom_repo_<%= repo.id %>"
data-toggle="tab" data-toggle="tab"
data-repo-table="#repository-table-<%= repo.id %>"
aria-controls="custom_repo_<%= repo.id %>" aria-controls="custom_repo_<%= repo.id %>"
data-url="<%=team_repository_show_tab_path(current_team, repo)%>" data-url="<%=team_repository_show_tab_path(current_team, repo)%>"
title="<%=repo.name%>"><%= truncate(repo.name, length: Constants::NAME_TRUNCATION_LENGTH) %></a> title="<%=repo.name%>"><%= truncate(repo.name, length: Constants::NAME_TRUNCATION_LENGTH) %></a>
@ -53,4 +54,6 @@
</div> </div>
<% end %> <% end %>
<%= stylesheet_link_tag 'datatables' %>
<%= javascript_include_tag 'repositories/repository_datatable' %>
<%= javascript_include_tag "repositories/index", "data-turbolinks-track" => true %> <%= javascript_include_tag "repositories/index", "data-turbolinks-track" => true %>

5
app/views/shared/_secondary_navigation.html.erb
View file

@ -203,7 +203,10 @@
<ul class="dropdown-menu repositories-dropdown-menu" aria-labelledby="repositoriesDropdownMenuLink"> <ul class="dropdown-menu repositories-dropdown-menu" aria-labelledby="repositoriesDropdownMenuLink">
<% @my_module.experiment.project.team.repositories.order(created_at: :asc).each do |repository| %> <% @my_module.experiment.project.team.repositories.order(created_at: :asc).each do |repository| %>
<li> <li>
<a class="dropdown-item" href="<%= repository_my_module_url(id: @my_module, repository_id: repository) %>" title="<%= repository.name %>"> <a class="dropdown-item"
href="<%= repository_my_module_url(id: @my_module, repository_id: repository) %>"
title="<%= repository.name %>"
data-no-turbolink="true">
<%= truncate(repository.name) %> <%= truncate(repository.name) %>
</a> </a>
</li> </li>

2
config/initializers/assets.rb
View file

@ -76,6 +76,8 @@ Rails.application.config.assets.precompile += %w(repositories/index.js)
Rails.application.config.assets.precompile += %w(repositories/edit.js) Rails.application.config.assets.precompile += %w(repositories/edit.js)
Rails.application.config.assets.precompile += Rails.application.config.assets.precompile +=
%w(repositories/repository_datatable.js) %w(repositories/repository_datatable.js)
Rails.application.config.assets.precompile +=
%w(repositories/my_module_repository.js)
# Libraries needed for Handsontable formulas # Libraries needed for Handsontable formulas
Rails.application.config.assets.precompile += %w(lodash.js) Rails.application.config.assets.precompile += %w(lodash.js)