Jingga/jsOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/jsOMS.git synced 2026-01-11 01:48:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add simple sorting for tables

Browse Source
This commit is contained in:
Dennis Eichhorn 2018-09-30 00:29:29 +02:00
parent 4dee88645a
commit 3081f667f7
7 changed files with 142 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
UI/Component/Form.js
View File

@ -78,8 +78,9 @@
length = !forms ? 0 : forms.length;
for (let i = 0; i < length; ++i) {
if (typeof forms[i].getAttribute('id') !== 'undefined' && forms[i].getAttribute('id') !== null && typeof this.ignore[forms[i].getAttribute('id')] === 'undefined') {
this.bindForm(forms[i].getAttribute('id'));
let formId = forms[i].getAttribute('id');
if (typeof formId !== 'undefined' && formId !== null && typeof this.ignore[formId] === 'undefined') {
this.bindForm(formId);
}
}
}

104
UI/Component/Table.js
View File

@ -18,9 +18,11 @@
*
* @since 1.0.0
*/
constructor(responseManager)
constructor(app)
{
this.responseManager = responseManager;
this.app = app;
this.tables = {};
this.ignore = {};
};
/**
@ -34,33 +36,113 @@
*/
bind (id)
{
if (typeof id !== 'undefined') {
const e = document.getElementById(id);
if (e) {
this.bindElement(e);
}
if (typeof id !== 'undefined' && typeof this.ignore[id] === 'undefined') {
this.bindTable(id);
} else {
const tables = document.getElementsByTagName('table'),
length = !tables ? 0 : tables.length;
for (let i = 0; i < length; ++i) {
this.bindElement(tables[i]);
let tableId = tables[i].getAttribute('id');
if (typeof tableId !== 'undefined' && tableId !== null && typeof this.ignore[tableId] === 'undefined') {
this.bindTable(tableId);
}
}
}
};
/**
* Unbind table
*
* @param {string} id Table Id
*
* @since 1.0.0
*/
unbind (id)
{
};
/**
* Bind & rebind UI element.
*
* @param {Object} [e] Element id
* @param {Object} [id] Element id
*
* @method
*
* @since 1.0.0
*/
bindElement (e)
bindTable (id)
{
if (typeof id === 'undefined' || !id) {
jsOMS.Log.Logger.instance.info('A table doesn\'t have an ID.');
return;
}
const self = this;
this.tables[id] = new jsOMS.Views.TableView(id);
this.unbind(id);
// todo: sorting: increasing / decreasing only if icons are available
// todo: filtering: equals (alphanumeric), greater, greater equals, lesser, lesser equals, contains, doesn't contain, excel like selection of elements. Amount of filtering options unlimited.
// cell value should be data-value="" and cell name should be data-name="" and cell content should be data-content="".
// if no value is defined than data-value = cell content. if no name is defined then data-name = cell content. if no content is defined then data-content = cell content.
const sorting = this.tables[id].getSorting();
let length = sorting.length;
for (let i = 0; i < length; ++i) {
sorting[i].addEventListener('click', function (event)
{
jsOMS.preventAll(event);
const table = document.getElementById(id),
rows = table.rows,
rowLength = rows.length,
cellId = this.closest('td').cellIndex;
let j, row1, row2, content1, content2,
order = false,
shouldSwitch = false;
do {
order = false;
for (j = 1; j < rowLength - 1; ++j) {
shouldSwitch = false;
row1 = rows[j].getElementsByTagName('td')[cellId];
row2 = rows[j + 1].getElementsByTagName('td')[cellId];
content1 = row1.getAttribute('data-content') !== null ? row1.getAttribute('data-content') : row1.textContent;
content2 = row2.getAttribute('data-content') !== null ? row2.getAttribute('data-content') : row2.textContent;
if (jsOMS.hasClass(this, 'sort-asc') && content1 > content2) {
shouldSwitch = true;
break;
} else if (jsOMS.hasClass(this, 'sort-desc') && content1 < content2) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[j].parentNode.insertBefore(rows[j + 1], rows[j]);
order = true;
}
} while (order);
});
}
const filters = this.tables[id].getFilter();
length = filters.length;
for (let i = 0; i < length; ++i) {
filters[i].addEventListener('click', function (event)
{
jsOMS.preventAll(event);
// filter algorithm here
});
}
};
}
}(window.jsOMS = window.jsOMS || {}));

2
UI/UIManager.js
View File

@ -26,7 +26,7 @@
this.app = app;
this.formManager = new jsOMS.UI.Component.Form(this.app);
this.tabManager = new jsOMS.UI.Component.Tab(this.app.responseManager);
this.tableManager = new jsOMS.UI.Component.Table(this.app.responseManager);
this.tableManager = new jsOMS.UI.Component.Table(this.app);
this.actionManager = new jsOMS.UI.ActionManager(this.app);
this.dragNDrop = new jsOMS.UI.DragNDrop(this.app);
this.generalUI = new jsOMS.UI.GeneralUI();

10
Utils/UiUtils.js
View File

@ -28,7 +28,10 @@
*/
jsOMS.hasClass = function (ele, cls)
{
return typeof ele !== 'undefined' && ele !== null && typeof ele.className !== 'undefined' && ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
return typeof ele !== 'undefined'
&& ele !== null
&& typeof ele.className !== 'undefined'
&& ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')) !== null;
};
/**
@ -106,7 +109,10 @@
jsOMS.ready = function (func)
{
// TODO: IE problems? + Maybe interactive + loaded can cause problems since elements might not be loaded yet?!!?!!?!
if (document.readyState === 'complete' || document.readyState === 'loaded' || document.readyState === 'interactive') {
if (document.readyState === 'complete'
|| document.readyState === 'loaded'
|| document.readyState === 'interactive'
) {
func();
} else {
document.addEventListener("DOMContentLoaded", function (event)

5
Utils/oLib.js
View File

@ -150,7 +150,10 @@
*/
jsOMS.hasClass = function (ele, cls)
{
return typeof ele !== 'undefined' && ele !== null && typeof ele.className !== 'undefined' && ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
return typeof ele !== 'undefined'
&& ele !== null
&& typeof ele.className !== 'undefined'
&& ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')) !== null;
};
/**

6
Views/FormView.js
View File

@ -92,7 +92,11 @@
*/
getSubmit ()
{
return document.querySelectorAll('#' + this.id + ' input[type=submit], button[form=' + this.id + '][type=submit], #' + this.id + ' button[type=submit]');
return document.querySelectorAll(
'#' + this.id + ' input[type=submit],'
+ ' button[form=' + this.id + '][type=submit],'
+ ' #' + this.id + ' button[type=submit]'
);
};
/**

56
Views/TableView.js
View File

@ -1,40 +1,40 @@
(function (jsOMS) {
"use strict";
jsOMS.TableView = class {
constructor () {
this.table = null;
jsOMS.Autoloader.defineNamespace('jsOMS.Views');
jsOMS.Views.TableView = class {
constructor (id) {
this.id = id;
this.bind();
};
bind ()
{
const e = document.getElementById(this.id);
};
/**
* None, Pagination, Infinite
* Get sorting elements
*
* @return {Object}
*
* @since 1.0.0
*/
setExtensible () {
getSorting()
{
return document.querySelectorAll(
'#' + this.id + ' thead .sort-asc,'
+ ' #' + this.id + ' thead .sort-desc'
);
};
add (element) {
};
addCollection (collection) {
};
remove (id) {
};
get (id) {
};
filter (id) {
};
request (filter) {
getFilter()
{
return document.querySelectorAll(
'#' + this.id + ' thead .filter'
);
};
}
}(window.jsOMS = window.jsOMS || {}));