Dataset.sort(..), onSort(..) 추가

src/main/webapp/resources/css/styles.css

@@ -62,7 +62,7 @@
 	padding: 0 .5rem;
 }
 
-.current-row {background-color:rgba(105, 108, 255, 0.16);}
+.current-row {background-color: rgba(105, 108, 255, 0.16);}
 .current-row td:not(:last-child) {border-right: 1px solid white;}
 
 .table th {font-size:1rem;}

src/main/webapp/resources/js/base/base.js

@@ -797,6 +797,39 @@ function inputsInRange(fromSource, toSource) {
 	to.change(compare);
 }
 
+var sorting = {
+	asc: "&#11205",
+	desc: "&#11206",
+	/**테이블 헤더에 정렬을 적용한 상태를 표시한다.
+	 * @param headers th 목록
+	 * @param sorter 데이터셋이 반환한 정렬 후 상태
+	 */
+	setHeaders: (headers, sorter) => {
+		document.querySelectorAll("th[data-field]").forEach(th => {
+			let inner = th.innerHTML;
+			
+			inner = inner.replace(/⯅/gi, "").replace(/⯆/gi, "");
+			if (th.getAttribute("data-field") == sorter.by)
+				inner += sorting[sorter.order] || "";
+			th.innerHTML = inner;
+		});
+	}
+/*
+	asc: {style: "sorting_asc", attr: "ascending"},
+	desc: {style: "sorting_desc", attr: "descending"},
+	setHeaders: (headers, sorter) => {
+		headers.forEach(th => {
+			th.classList.remove("sorting_asc", "sorting_desc");
+			th.removeAttribute("aria-sort");
+			if (th.getAttribute("data-field") != sorter.by) return;
+			
+			th.classList.add(sorting[sorter.order].style);
+			th.setAttribute("aria-sort", sorting[sorter.order].attr);
+		});
+	}	
+*/
+};
+
 function ignore() {
 	console.log.apply(console, arguments);
 }

src/main/webapp/resources/js/base/dataset.js

@@ -398,6 +398,7 @@ class Dataset {
 			return keymapper(info) || info._tmpKey;
 		};
 		this._formats = new ValueFormat(conf.formats);
+		this._sorter = {by: ""};
 		this.dataBinder = dataBinder.create(this, conf.doctx);
 		
 		if (!conf.trace)
@@ -410,7 +411,8 @@ class Dataset {
 			"onModify",
 			"onReplace",
 			"onRemove",
-			"onDirtiesChange"
+			"onDirtiesChange",
+			"onSort"
 		].forEach(on => {
 			let handler = conf[on]
 			if (handler && "function" == typeof handler)
@@ -507,6 +509,7 @@ class Dataset {
 		let data = this._getDataItems(obj);
 		this._items = data.items;
 		this._byKeys = data.byKeys;
+		this._sorter = {by: ""};
 		/*
 		obj = obj || {};
 		let array = Array.isArray(obj) ? obj : this.conf.dataGetter(obj) || [];
@@ -578,6 +581,73 @@ class Dataset {
 		
 		return this;
 	}
+	
+	/**Sorts the Dataset's items by the given property in the given order.
+	 * @param {string} by name of the Dataset's property
+	 * @param {boolean}
+	 * <ul><li>true to sort in ascending order</li>
+	 *     <li>false to sort in descending order</li>
+	 * </ul>
+	 * @returns {object} consequent {@link Dataset#sorter sorting status}
+	 * @example
+	 * let dataset = ...;
+	 * //To sort a Dataset's items by the 'prop0' property in ascending order.
+	 * dataset.sort("prop0", true);
+	 * //To sort a Dataset's items by the 'prop0' property in descending order.
+	 * dataset.sort("prop0", false);
+	 * //To toggle between ascending and descending order
+	 * dataset.sort("prop0");   
+	 */
+	sort(by, asc) {
+		if (this.empty || !by)
+			return this.sorter;
+
+		if (this._sorter.by != by) {
+			this._sorter.by = by;
+			this._sorter.asc = asc !== undefined ? asc : true;
+		} else {
+			this._sorter.asc = asc !== undefined ? asc : !this._sorter.asc;
+		}
+
+		let state = this.state;
+		
+		this._items.sort((item0, item1) => {
+			let val0 = (item0.data || {})[by],
+				val1 = (item1.data || {})[by];
+			if (val0 === undefined || val1 === undefined)
+				throw "Property not found: " + by;
+				
+			if (isEmpty(val0) && isEmpty(val1)) return 0;
+			if (!this._sorter.asc)
+				[val0, val1] = [val1, val0];
+			
+			if (!isEmpty(val0)) {
+				if ("string" == typeof val0)
+					return val0.localeCompare(val1);
+				else
+					return val0 - val1;
+			} else
+				return -1;
+		});
+		
+		this.setState(state);
+	}
+	
+	/**Returns the sorting staus of the Dataset.
+	 * @returns {object} sorting staus of the Dataset
+	 */
+	get sorter() {
+		let order = "";
+		if (this._sorter.asc)
+			order = "asc";
+		else if (this._sorter.asc === false)
+			order = "desc";
+		
+		return {
+			by: this._sorter.by,
+			order: order 
+		};
+	}
 
 	/**Clears the Dataset's user data.
 	 * @returns {Dataset} the Dataset  
@@ -677,6 +747,7 @@ class Dataset {
 	 */
 	setState(state) {
 		if (this.empty) {
+			this.onSort(this.sorter);
 			this.onCurrentChange(null);
 			this.onSelectionChange([]);
 			this.onDirtiesChange(false);
@@ -684,6 +755,7 @@ class Dataset {
 			state = state || this.state;
 			let current = this.getData(state.currentKey) || this.getDataset()[0],
 				currentKey = this.getKey(current);
+			this.onSort(this.sorter);
 			this.setCurrent(currentKey, true);
 			this.select(state.selectedKeys || [], true, true);
 		}
@@ -1257,6 +1329,11 @@ class Dataset {
 	 * </ul>
 	 */
 	onDirtiesChange(dirty){this.log("Dirties change", dirty);}
+	
+	/**Handler called back on the sort event.
+	 * @param {object} status {@link Dataset#sorter sorting status}
+	 */
+	onSort(status) {this.log("Data sorted", status);}
 }
 
 class DatasetControl {
@@ -1284,6 +1361,7 @@ class DatasetControl {
 			this.onModify(props, modified, current);
 		};
 		conf.onReplace = obj => this.onReplace(obj);
+		conf.onSort = status => this.onSort(status);
 
 		this.dataset = new Dataset(conf);
 		
@@ -1372,6 +1450,10 @@ class DatasetControl {
 	addData(obj, option) {
 		this.dataset.addData(obj, option);
 	}
+	
+	sort(by, asc) {
+		this.dataset.sort(by, asc);
+	}
 
 	onDatasetChange(obj, option) {
 		debug("onDatasetChange", obj, option);
@@ -1457,6 +1539,10 @@ class DatasetControl {
 		debug("on replace", replacing);
 	}
 	
+	onSort(status) {
+		debug("on sort", status);
+	}
+	
 	save(info) {
 		if (!info) return;
 		let item = this.getCurrent("item"),
@@ -1566,7 +1652,7 @@ var dataBinder = {
 			};
 			
 		let obj = {
-				selector: (selector) => doctx ? "[data-doctx='" + doctx + "'] " + selector : selector,
+				selector: (selector) => doctx ? doctx.split(",").map(str => str + " " + selector).join(",") : selector,
 				querySelector: (selector) => document.querySelector(obj.selector(selector)),
 				querySelectorAll: (selector) => Array.from(document.querySelectorAll(obj.selector(selector))),
 				inputs: () => obj.querySelectorAll("[data-map]"),

src/main/webapp/resources/js/base/user.js

@@ -1,4 +1,4 @@
-function newUserControl(doctx = "user") {
+function newUserControl(doctx = "[data-doctx='user']") {
 	let ctrl = new DatasetControl({
 		doctx: doctx,
 		prefix:"user",