DatasetSupport (TableSupport, PagingSupport, CurrentDataSupport) 추가
parent
e337b0cc7a
commit
6e7649bc16
@ -0,0 +1,387 @@
|
||||
/* Copyright (c) 2020 Emjay Khan. All rights reserved. */
|
||||
|
||||
/**Base class of DatasetSupport.
|
||||
* It has empty implementations of methods called back in response to a Dataset's events.
|
||||
* A DatasetSupport extension implements some of the call-back methods to achieve its purpose.
|
||||
*/
|
||||
class DatasetSupport {
|
||||
/**Creates a DatasetSupport with the given configuration.
|
||||
* @param {object} conf configuration.
|
||||
* <ul><li>css selector for a containing element, optional</li>
|
||||
* <li>css selector for elements the DatasetSupport works with primarily</li>
|
||||
* </ul>
|
||||
*/
|
||||
constructor(conf) {
|
||||
this.selector = conf.selector || null;
|
||||
this.dataset = conf.ctrl.dataset;
|
||||
this._doq = conf.ctrl.doq;
|
||||
}
|
||||
|
||||
get doq() {
|
||||
return this._doq;
|
||||
}
|
||||
|
||||
init() {}
|
||||
|
||||
get keymapped() {
|
||||
return this.dataset ? this.dataset.keymapped : false;
|
||||
}
|
||||
|
||||
getSelector(...selectors) {
|
||||
return this.doq.selector(...selectors);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} selector
|
||||
* @param {boolean} strict
|
||||
*/
|
||||
find(...selector) {
|
||||
return this.doq.find(...selector);
|
||||
}
|
||||
|
||||
findAll(...selector) {
|
||||
return this.doq.findAll(...selector);
|
||||
}
|
||||
}
|
||||
|
||||
class TableSupport extends DatasetSupport {
|
||||
constructor(conf) {
|
||||
super(conf);
|
||||
|
||||
this.selector = conf.table;
|
||||
this.tr = conf.tr;
|
||||
this.notFound = conf.notFound;
|
||||
|
||||
this.formatter = conf.formatter;
|
||||
this.selectionToggler = conf.selectionToggler || "";
|
||||
this.refreshOnModify = conf.refreshOnModify || [];
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.body = this.find(this.selector + " tbody");
|
||||
|
||||
if (this.tr) {
|
||||
let template = this.find(this.tr);
|
||||
this.tr = (template || {}).innerHTML || "";
|
||||
}
|
||||
if (this.notFound) {
|
||||
let template = this.find(this.notFound);
|
||||
this.notFound = (template || {}).innerHTML || "";
|
||||
}
|
||||
|
||||
if (!this.tr && !this.notFound) {
|
||||
let templates = this.findAll(this.selector + " template");
|
||||
if (templates.length < 1)
|
||||
log("WARNING: ", this.selector + " must have a template for a data row");
|
||||
this.tr = (templates[0] || {}).innerHTML;
|
||||
this.notFound = (templates[1] || {}).innerHTML;
|
||||
}
|
||||
|
||||
let sort = evt => {
|
||||
let th = evt.target;
|
||||
this.dataset.sort(th.getAttribute("data-sort"));
|
||||
};
|
||||
this.sortables().forEach(th => th.addEventListener("click", sort));
|
||||
}
|
||||
|
||||
sortables() {
|
||||
return this.findAll(this.selector + " thead th[data-sort]");
|
||||
}
|
||||
|
||||
updateSortables(sorter) {
|
||||
this.sortables().forEach(th => {
|
||||
th.classList.remove(
|
||||
TableSupport.cssClass.sortable,
|
||||
TableSupport.cssClass.asc,
|
||||
TableSupport.cssClass.desc
|
||||
);
|
||||
if (th.getAttribute("data-sort") == sorter.by)
|
||||
th.classList.add(TableSupport.cssClass[sorter.order]);
|
||||
else
|
||||
th.classList.add(TableSupport.cssClass.sortable);
|
||||
});
|
||||
if (sorter.by)
|
||||
this.draw();
|
||||
}
|
||||
|
||||
/**Handler called back on the dataset change event.
|
||||
* @param {Dataset} dataset this Dataset
|
||||
* @param {object} option optional information
|
||||
*/
|
||||
renderList(option = {}) {
|
||||
this.draw(option);
|
||||
|
||||
this.findAll(".enable-onfound").forEach(e => e.disabled = this.dataset.empty);
|
||||
}
|
||||
|
||||
draw(option = {}) {
|
||||
let empty = this.dataset.empty,
|
||||
trs = !empty ? this.dataset.inStrings(this.tr, this.formatter) : [this.notFound];
|
||||
this.body.innerHTML = trs.join("");
|
||||
|
||||
if (!this.selectionToggler) return;
|
||||
|
||||
let toggler = this.find(this.selectionToggler);
|
||||
toggler.checked = false;
|
||||
toggler.disabled = empty;
|
||||
}
|
||||
|
||||
/**Handler called back on the current change event.
|
||||
* @param {DataItem} item current DataItem
|
||||
*/
|
||||
setCurrentRow(item) {
|
||||
if (!item) return;
|
||||
|
||||
let index = item.index;
|
||||
this.findAll(this.selector + " tbody tr").forEach(tr => {
|
||||
let dataIndex = tr.getAttribute("data-index"),
|
||||
current = index == dataIndex;
|
||||
if (current)
|
||||
tr.classList.add(TableSupport.cssClass.current);
|
||||
else
|
||||
tr.classList.remove(TableSupport.cssClass.current);
|
||||
});
|
||||
}
|
||||
|
||||
/**Handler called back on the selection change event
|
||||
* @param {array} selected selected DataItems
|
||||
*/
|
||||
setSelections(selected) {
|
||||
let selectedIndex = selected.map(item => item.index);
|
||||
this.findAll(this.selector + " tbody input[name='data-index']")
|
||||
.forEach(input => {
|
||||
input.checked = selectedIndex.includes(input.value)
|
||||
});
|
||||
|
||||
this.findAll(".enable-onselect")
|
||||
.forEach(e => e.disabled = selected.length < 1);
|
||||
}
|
||||
|
||||
/**Handler called back on the modify event
|
||||
* @param {array} changed names of the changed properties
|
||||
* @param {DataItem} item owner DataItem of the changed properties
|
||||
* @param {boolean} current whether the event is on the current item
|
||||
*/
|
||||
updateModified(changed) {
|
||||
if (this.refreshOnModify.length < 1) return;
|
||||
|
||||
let refresh = false;
|
||||
for (let prop of changed) {
|
||||
refresh = this.refreshOnModify.includes(prop);
|
||||
if (refresh)
|
||||
break;
|
||||
}
|
||||
if (!refresh) return;
|
||||
|
||||
this.draw();
|
||||
this.dataset.setState();
|
||||
}
|
||||
}
|
||||
TableSupport.cssClass = {
|
||||
current: "current-row",
|
||||
sortable: "sortable",
|
||||
asc: "sort-asc",
|
||||
desc: "sort-desc"
|
||||
};
|
||||
|
||||
class CurrentDataSupport extends DatasetSupport {
|
||||
constructor(conf) {
|
||||
super(conf);
|
||||
if (!this.selector)
|
||||
this.selector = "[data-field]";
|
||||
}
|
||||
|
||||
type(input) {
|
||||
return input ? (input.getAttribute("type") || input.tagName).toLowerCase() : "";
|
||||
}
|
||||
|
||||
dataField(input) {
|
||||
return input.getAttribute("data-field");
|
||||
}
|
||||
|
||||
property(input) {
|
||||
return this.dataField(input)
|
||||
|| input.name
|
||||
|| input.id;
|
||||
}
|
||||
|
||||
update(input, value) {
|
||||
switch (this.type(input)) {
|
||||
case "radio":
|
||||
case "checkbox":
|
||||
if (isEmpty(value)) {
|
||||
input.checked = false;
|
||||
} else {
|
||||
switch (typeof value) {
|
||||
case "string":
|
||||
input.checked = input.value == value || value.split(",").includes(input.value);
|
||||
break;
|
||||
case "number":
|
||||
case "boolean":
|
||||
input.checked = input.value == value.toString();
|
||||
break;
|
||||
default:
|
||||
if (value instanceof Array)
|
||||
input.checked = value.includes(input.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "select":
|
||||
for (let option of input.options) {
|
||||
option.selected = option.value === value;
|
||||
}
|
||||
break;
|
||||
case "img": input.src = value; break;
|
||||
case "button": input.innerHTML = value; break;
|
||||
default:
|
||||
if (input.value !== undefined)
|
||||
input.value = value;
|
||||
else
|
||||
input.innerHTML = value;
|
||||
}
|
||||
}
|
||||
|
||||
setChanged(evt) {
|
||||
let input = evt.target,
|
||||
type = this.type(input),
|
||||
prop = this.property(input),
|
||||
val = input.value;
|
||||
|
||||
switch (type) {
|
||||
case "checkbox":
|
||||
case "radio":
|
||||
let attrs = input.getAttributeNames()
|
||||
.filter(attr => ['data-field', 'name'].includes(attr))
|
||||
.map(attr => "[" + attr + "=\"" + input.getAttribute(attr) + "\"]")
|
||||
.join("");
|
||||
let inputs = this.findAll("[type=\"" + type + "\"]" + attrs);
|
||||
switch (inputs.length) {
|
||||
case 0: return;
|
||||
case 1:
|
||||
let cb = inputs[0];
|
||||
if (cb.checked) break;
|
||||
|
||||
switch (val) {
|
||||
case "true": val = "false"; break;
|
||||
case "y": val = "n"; break;
|
||||
case "Y": val = "N"; break;
|
||||
case "yes": val = "no"; break;
|
||||
default: val = ""; break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
val = inputs.filter(cb => cb.checked).map(cb => cb.value).join(",");
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default: break;
|
||||
}
|
||||
|
||||
this.dataset.setValue(prop, val);
|
||||
}
|
||||
|
||||
setCurrent(item) {
|
||||
if (!item) return;
|
||||
|
||||
this.findAll(this.selector).forEach(input => {
|
||||
let prop = this.property(input);
|
||||
if (!prop) return;
|
||||
|
||||
let evt = !["checkbox", "radio"].includes(this.type(input)) ? "change" : "click",
|
||||
handler = (evt) => this.setChanged(evt)
|
||||
|
||||
input.removeEventListener(evt, handler);
|
||||
this.update(input, item.getValue(prop));
|
||||
input.addEventListener(evt, handler);
|
||||
});
|
||||
this.enableOnDirty(item);
|
||||
this.enableOnNew(item);
|
||||
}
|
||||
|
||||
updateModified(changed, item) {
|
||||
if (!item) return;
|
||||
|
||||
this.findAll(this.selector).forEach(input => {
|
||||
let prop = this.property(input);
|
||||
if (!changed.includes(prop)) return;
|
||||
|
||||
this.update(input, item.getValue(prop));
|
||||
});
|
||||
this.enableOnDirty(item);
|
||||
}
|
||||
|
||||
/**Enables the HTML elements of '.enable-ondirtyitem' if the item is dirty.
|
||||
* @param {DataItem} item a DataItem
|
||||
*/
|
||||
enableOnDirty(item) {
|
||||
let dirty = item.dirty;
|
||||
|
||||
this.findAll(".enable-ondirtyitem")
|
||||
.forEach(e => e.disabled = !dirty);
|
||||
}
|
||||
|
||||
/**Enables the HTML elements of '.enable-onnewitem' if the item is new.
|
||||
* @param {DataItem} item a DataItem
|
||||
*/
|
||||
enableOnNew(item) {
|
||||
let isnew = item.isNew();
|
||||
|
||||
this.findAll(".enable-onnewitem")
|
||||
.forEach(e => e.disabled = !isnew);
|
||||
}
|
||||
|
||||
newData(init) {
|
||||
let data = this.findAll(this.selector).reduce((data, input) => {
|
||||
let prop = this.property(input);
|
||||
if (prop)
|
||||
data[prop] = null;
|
||||
return data;
|
||||
}, {});
|
||||
if (init)
|
||||
init(data);
|
||||
return data;
|
||||
}
|
||||
|
||||
getData(item = this.dataset.getCurrent("item")) {
|
||||
return this.findAll(this.selector).reduce((data, input) => {
|
||||
let dataField = this.dataField(input),
|
||||
property = input.getAttribute("name") || input.getAttribute("id"),
|
||||
val = item.data[dataField];
|
||||
if (property && val !== undefined)
|
||||
data[property] = val;
|
||||
return data;
|
||||
}, {});
|
||||
}
|
||||
}
|
||||
|
||||
class PagingSupport extends DatasetSupport {
|
||||
constructor(conf) {
|
||||
super(conf);
|
||||
|
||||
this.prefix = conf.ctrl.prefix;
|
||||
this.sizeOffset = conf.sizeOffset || 0;
|
||||
|
||||
this.linkContainer = conf.linkContainer;
|
||||
this.func = conf.func;
|
||||
|
||||
this.statusContainer = conf.statusContainer;
|
||||
this.statusContent = conf.statusContent;
|
||||
}
|
||||
|
||||
setPaging(option) {
|
||||
let pagination = option ? option.pagination : null;
|
||||
if (!pagination) return;
|
||||
|
||||
pagination.prefix = this.prefix;
|
||||
pagination.dataSize = pagination.dataSize + this.sizeOffset;
|
||||
|
||||
if (this.linkContainer) {
|
||||
pagination.func = this.func;
|
||||
pagination.added = option.added;
|
||||
$(this.doq.selector(this.linkContainer)).setPaging(pagination);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue