@neovici/cosmoz-treenode-navigator 3.0.8 → 4.0.0

package/helpers.js

@@ -0,0 +1,252 @@
+import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
+import basicTree from './test/data/basicTree';
+import { tagged as css } from '@neovici/cosmoz-utils/lib/tagged';
+
+const tree = new DefaultTree(basicTree),
+	/**
+	 * Returns true if a given node has children
+	 * @param {Object} node - The node
+	 * @return {Boolean} - True if node has children
+	 */
+	hasChildren = node => {
+		return tree.hasChildren(node);
+	},
+	/**
+	 * Returns true, if a search string is eligable to trigger a search
+	 * @param {String} value - The search string
+	 * @param {Number} searchMinLength - The minimum length of value to be valid
+	 * @return {Boolean} - If a search should be triggered
+	 */
+	computeSearching = (value, searchMinLength) => {
+		return value && value.length >= searchMinLength && value !== '';
+	},
+	/**
+	 * Normalizes and returns an Array of nodes
+	 * with the properties name, path, parentSectionName, children
+	 * @param {Array} nodes - The input nodes
+	 * @return {Array} - The normalized nodes
+	 */
+	normalizeNodes = nodes => {
+		if (!Array.isArray(nodes)) {
+			return [];
+		}
+		return nodes.map(node => {
+			if (!node) {
+				return node;
+			}
+			const path = node.pathLocator || node.path,
+				pathLocatorSeparator = tree.pathLocatorSeparator,
+				parentPath = path.includes(pathLocatorSeparator) ? path.substring(0, path.lastIndexOf(pathLocatorSeparator)) : path;
+			return {
+				name: node[tree.searchProperty],
+				path,
+				children: node[tree.childProperty],
+				parentSectionName: tree.getPathString(parentPath, tree.searchProperty),
+				id: node.id,
+				pathLocator: node.pathLocator
+			};
+		});
+	},
+	/**
+	 * Returns the found nodes based on a search string and a given tree to be searched
+	 * @param {Boolean} searching - If true, a search should be executed
+	 * @param {String} searchString - The search string
+	 * @param {Array} renderedLevel - The node list on which the search should be executed
+	 * @param {Tree} tree - The main tree
+	 * @return {Array} - The found nodes
+	 */
+	computeDataPlane = (searching, searchString, renderedLevel, tree) => {
+		if (searching && tree) {
+			const results = tree.searchNodes(searchString, renderedLevel, false);
+			return normalizeNodes(results);
+		}
+		return renderedLevel;
+	},
+	/**
+	 * Returns a node array with the children of a node on the given path
+	 * If the node doesn't have children, the node gets returned
+	 * @param {String} pathLocator - The separated address parts of a node
+	 * @param {Tree} tree - The main tree
+	 * @return {Array} - Nodes
+	 */
+	renderLevel = (pathLocator, tree) => {
+		if (!tree) {
+			return;
+		}
+		const node = tree.getNodeByPathLocator(pathLocator),
+			children = tree.getChildren(node),
+			level = tree.hasChildren(node) ? children : node,
+			sortFunc = (a, b) => {
+				// First sort based on "folder" status (containing children)
+				if (hasChildren(a)) {
+					if (!hasChildren(b)) {
+						return -1;
+					}
+				} else if (hasChildren(b)) {
+					return 1;
+				}
+				// Then sort on searchProperty
+				const val1 = a[tree.searchProperty],
+					val2 = b[tree.searchProperty];
+
+				if (val1 > val2) {
+					return 1;
+				}
+				if (val1 < val2) {
+					return -1;
+				}
+				return 0;
+			};
+		return normalizeNodes(level)
+			.sort(sortFunc);
+	},
+	/**
+	 * Returns the classes of a row based its selection state
+	 * @param {String} classes - The default classes
+	 * @param {object} node - Node to check
+	 * @param {object} highlightedNode - Currently highlighted node
+	 * @return {String} - The CSS classes
+	 */
+	computeRowClass = (classes, node, highlightedNode) => {
+		let selected = false;
+		if (highlightedNode) {
+			selected = node === highlightedNode
+							|| node.id && node.id === highlightedNode.id
+							|| node.pathLocator === highlightedNode.pathLocator;
+		}
+		return selected ? classes + ' selected' : classes;
+	},
+	/**
+	 * Selects the doubled clicked node and dispatches an node-dblclicked event.
+	 * @param {Event} event The triggering event
+	 * @param {object} host Host
+	 * @return {undefined}
+	 */
+	onNodeDblClicked = (event, host) => {
+		host.dispatchEvent(new CustomEvent('node-dblclicked', {
+			detail: {
+				model: event.model
+			}
+		}));
+	},
+	/**
+	 * Returns the name of a given node
+	 * @param {Object} node - The node
+	 * @return {String} - The name
+	 */
+	getNodeName = node => {
+		return node[tree.searchProperty];
+	},
+	/**
+	 * Returns true, if the button should be visible
+	 * @param {Boolean} searching - If a search is currently executed
+	 * @param {String} openNodeLevelPath - The open node level
+	 * @return {Boolean} - The visibility of the button
+	 */
+	showGlobalSearchBtn = (searching, openNodeLevelPath) => {
+		return searching && openNodeLevelPath !== '';
+	},
+	/**
+	 * Returns the nodes on a path specified by a given path locator
+	 * @param {String} pathLocator - The separated address parts of a node
+	 * @param {Tree} tree - The main tree
+	 * @return {Array} - The found nodes or empty array
+	 */
+	getTreePathParts = (pathLocator, tree) => {
+		if (!tree || !pathLocator) {
+			return [];
+		}
+		return normalizeNodes(tree.getPathNodes(pathLocator));
+	},
+	/**
+	 * Returns a node based on a given path locator.
+	 * If pathLocator is empty or not defined, null gets returned.
+	 * If pathLocator is only partly valid, the last valid node gets returned.
+	 * @param {String} pathLocator - The separated address parts of a node
+	 * @param {Tree} tree - The main tree
+	 * @return {Object} - The found node
+	 */
+	getNode = (pathLocator, tree) => {
+		if (!tree || !pathLocator) {
+			return null;
+		}
+
+		const node = tree.getNodeByPathLocator(pathLocator);
+		let nodes;
+
+		if (!node) {
+			nodes = tree.getPathNodes(pathLocator).filter(n => n != null);
+		}
+		return nodes && nodes.length > 0 ? nodes.pop() : node;
+	},
+	nodeStyles = css`
+	  .section {
+			background-color: #f5f5f5;
+			padding: 5px;
+	  }
+
+		.pointer {
+			cursor: pointer;
+		}
+
+	  .item {
+			padding: 0;
+	  }
+
+	  .item[data-index] {
+			background: transparent;
+	  }
+
+	  .node-item {
+			align-items: center;
+			display: flex;
+			font-family: 'Roboto', 'Noto', sans-serif;
+			font-size: 16px;
+			font-weight: 400;
+			height: 40px;
+			line-height: 24px;
+			padding: 6px 12px;
+	  }
+
+	  .node-item-wrapper {
+			width: 100%;
+	  }
+
+	  .icon {
+			box-sizing: border-box;
+			cursor: pointer;
+			display: inline-block;
+			height: 40px;
+			line-height: 1;
+			outline: none;
+			padding: 8px;
+			position: relative;
+			user-select: none;
+			width: 40px;
+			z-index: 0;
+	  }
+
+	  .node-item.selected {
+			background-color: var(--cosmoz-listbox-active-color, var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1)));
+			transition: background-color 0.2s ease-out;
+	  }
+
+	  .node-item.selected .icon svg {
+			fill: var(--cosmoz-treenode-navigator-select-node-icon-color);
+			transition: color 0.8s ease-out;
+	  }`;
+
+export {
+	hasChildren,
+	computeSearching,
+	normalizeNodes,
+	renderLevel,
+	computeDataPlane,
+	computeRowClass,
+	onNodeDblClicked,
+	getNodeName,
+	showGlobalSearchBtn,
+	getTreePathParts,
+	getNode,
+	nodeStyles
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-treenode-navigator",
-	"version": "3.0.8",
+	"version": "4.0.0",
 	"description": "A Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
 	"keywords": [
 		"polymer",
@@ -44,27 +44,41 @@
 	"commitlint": {
 		"extends": [
 			"@commitlint/config-conventional"
-		]
+		],
+		"rules": {
+			"body-max-line-length": [
+				1,
+				"always",
+				100
+			]
+		}
 	},
 	"dependencies": {
+		"@neovici/cfg": "^1.15.2",
+		"@neovici/cosmoz-autocomplete": "^4.0.0",
 		"@neovici/cosmoz-dialog": "^3.0.0",
 		"@neovici/cosmoz-i18next": "^3.2.0",
+		"@neovici/cosmoz-input": "^2.0.0",
 		"@neovici/cosmoz-tree": "^3.0.0",
+		"@neovici/cosmoz-utils": "^4.0.0",
+		"@open-wc/lit-helpers": "^0.4.1",
 		"@polymer/iron-icons": "^3.0.0",
-		"@polymer/iron-list": "^3.1.0",
 		"@polymer/paper-button": "^3.0.0",
 		"@polymer/paper-icon-button": "^3.0.0",
 		"@polymer/paper-input": "^3.2.0",
 		"@polymer/polymer": "^3.4.0",
 		"@web/dev-server": "^0.1.25",
 		"@web/test-runner": "^0.13.19",
-		"@web/test-runner-selenium": "^0.5.2"
+		"@web/test-runner-selenium": "^0.5.2",
+		"haunted": "^5.0.0",
+		"lit": "^2.2.7",
+		"lit-html": "^2.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^13.0.0",
-		"@commitlint/config-conventional": "^13.0.0",
+		"@commitlint/cli": "^17.0.0",
+		"@commitlint/config-conventional": "^17.0.0",
 		"@neovici/eslint-config": "^1.3.0",
-		"@open-wc/testing": "^2.5.33",
+		"@open-wc/testing": "^3.0.0",
 		"@polymer/iron-ajax": "^3.0.0",
 		"@polymer/iron-component-page": "^4.0.0",
 		"@polymer/iron-demo-helpers": "^3.0.0",
@@ -75,6 +89,6 @@
 		"@webcomponents/webcomponentsjs": "^2.0.0",
 		"eslint": "^7.0.0",
 		"husky": "^6.0.0",
-		"semantic-release": "^18.0.0"
+		"semantic-release": "^19.0.3"
 	}
 }

package/test/cosmoz-treenode-navigator.test.js

@@ -1,56 +1,85 @@
 import { assert, fixture, html } from '@open-wc/testing';
 import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
 import basicTree from './data/basicTree.js';
-import { flush } from '@polymer/polymer/lib/utils/flush';
 import '../cosmoz-treenode-navigator';
+import { computeDataPlane, computeSearching, hasChildren, renderLevel } from '../helpers';
 
 suite('cosmoz-treenode-navigator', () => {
 	let navigator;
 
 	setup(async () => {
-		navigator = await fixture(html`<cosmoz-treenode-navigator .tree=${ new DefaultTree(basicTree) }>`);
-		flush();
+		navigator = await fixture(html`
+			<cosmoz-treenode-navigator
+					.tree=${ new DefaultTree(basicTree) }
+					.searchPlaceholder="${ 'Custom search placeholder' }"
+					.searchMinLength="${ 2 }"
+			>`);
 	});
 
 	test('instantiating the element', () => {
 		assert.equal(navigator.tagName, 'COSMOZ-TREENODE-NAVIGATOR');
 	});
 
-	test('dataPlane initialised with tree', () => {
-		assert.equal(navigator.dataPlane[0].name, 'Root');
-		assert.equal(
-			navigator.dataPlane.length,
-			navigator.tree._roots.length
-		);
-	});
-
 	test('tree length and sort', () => {
 		// given a node navigator with some data
 
 		// when I enter the first node
-		navigator.shadowRoot
-			.querySelector('#ironList paper-icon-button')
-			.click();
-		flush();
+		navigator.openNodePath = '1000';
 
+		const dataPlane = computeDataPlane(
+			computeSearching(navigator.searchValue, navigator.searchMinLength),
+			navigator.searchValue,
+			renderLevel(navigator.openNodePath, navigator.tree),
+			navigator.tree
+		);
 		// then I can see the contents of the node
 		// and it is ordered folder-first, then alphabetically
-		assert.equal(navigator.dataPlane[0].name, 'Node2');
-		assert.equal(navigator.dataPlane[1].name, 'Node4');
-		assert.equal(navigator.dataPlane[2].name, 'Node');
-		assert.equal(navigator.dataPlane[3].name, 'Node');
-		assert.equal(navigator.dataPlane.length, 4);
+		assert.equal(dataPlane[0].name, 'Data');
+		assert.equal(dataPlane[1].name, 'Backup');
+		assert.equal(dataPlane.length, 2);
+	});
+
+	test('set proper search placeholder', () => {
+		assert.equal(
+			navigator.shadowRoot.querySelector('cosmoz-input')
+				.shadowRoot
+				.querySelector('input').placeholder,
+			'Custom search placeholder');
+	});
+
+	test('compute search if value is bigger than searchMinLength', () => {
+		assert.equal(computeSearching('long string', navigator.searchMinLength), true);
+		assert.equal(computeSearching('a', navigator.searchMinLength), false);
+	});
+
+	test('should check if node has children', () => {
+		const node = {
+			name: 'D:',
+			path: '1000',
+			children: { 1001: { name: 'Data', pathLocator: '1000.1001', children: { 1002: { name: 'John', pathLocator: '1000.1001.1002' }}}},
+			parentSectionName: 'D:',
+			pathLocator: '1000'
+		};
+		assert.equal(hasChildren(node), true);
+		const node2 = { name: 'Git', path: '1.5.7', parentSectionName: 'C:/Program Files', pathLocator: '1.5.7' };
+		assert.equal(hasChildren(node2), false);
 	});
 
 	test('match search string', () => {
 		// given a node navigator with some data
-		// when I search for 'ode2'
-		navigator.searchValue = 'ode2';
-		flush();
+		// when I search for 'John'
+		navigator.searchValue = 'John';
 
-		//then I can see only 1 item matching 'ode2'
-		assert.lengthOf(navigator.dataPlane, 1);
-		assert.equal(navigator.dataPlane[0].name, 'Node2');
+		const dataPlane = computeDataPlane(
+			computeSearching(navigator.searchValue, navigator.searchMinLength),
+			navigator.searchValue,
+			renderLevel('1000', navigator.tree),
+			navigator.tree
+		);
+
+		//then I can see only 1 item matching 'John'
+		assert.lengthOf(dataPlane, 1);
+		assert.equal(dataPlane[0].name, 'John');
 
 	});
 
@@ -58,9 +87,14 @@ suite('cosmoz-treenode-navigator', () => {
 		// given a node navigator with some data
 		// when I search for 'NONEXISTING'
 		navigator.searchValue = 'NONEXISTING';
-		flush();
+		const dataPlane = computeDataPlane(
+			computeSearching(navigator.searchValue, navigator.searchMinLength),
+			navigator.searchValue,
+			renderLevel('1000', navigator.tree),
+			navigator.tree
+		);
 
 		//then I can see that is no contents
-		assert.lengthOf(navigator.dataPlane, 0);
+		assert.lengthOf(dataPlane, 0);
 	});
 });

package/test/data/basicTree.js

@@ -1,61 +1,118 @@
 export default {
 	1: {
-		id: '11111111-1111-1111-1111-111111111111',
-		name: 'Root',
+		name: 'C:',
 		pathLocator: '1',
 		children: {
-			6: {
-				id: '2b577550-b874-4228-9395-a4fb00f31245',
-				name: 'Node',
-				pathLocator: '1.6',
-				children: {}
-			},
-			7: {
-				id: '2b577550-b874-4228-9395-a4fb00f31245',
-				name: 'Node',
-				pathLocator: '1.7',
-				children: {}
+			2: {
+				name: 'Windows',
+				pathLocator: '1.2',
+				children: {
+					3: {
+						name: 'System',
+						pathLocator: '1.2.3',
+						children: {}
+					},
+					4: {
+						name: 'Microsoft.NET',
+						pathLocator: '1.2.4',
+						children: {}
+					}
+				}
 			},
-			4: {
-				id: '177d1485-7d4f-4c7d-86cd-a4fb00f31245',
-				name: 'Node4',
-				pathLocator: '1.2.3.4',
+			5: {
+				name: 'Program Files',
+				pathLocator: '1.5',
 				children: {
-					5: {
-						id: '3a7754f1-e3e6-49c7-b6a8-a4fb00f31245',
-						name: 'Node5',
-						pathLocator: '1.2.3.4.5',
-						children: {
-							501: {
-								id: '3a7754f1-e3e6-49c7-b6a8-a4fb00f31245',
-								name: 'Node501',
-								pathLocator: '1.2.3.4.5.501',
-								children: {}
-							}
-						}
+					6: {
+						name: 'Microsoft VS Code',
+						pathLocator: '1.5.6'
+					},
+					7: {
+						name: 'Git',
+						pathLocator: '1.5.7'
 					}
 				}
 			},
-			2: {
-				id: '167d1485-7d4f-4c7d-86cd-a4fb00f31245',
-				name: 'Node2',
-				pathLocator: '1.2',
+			100: {
+				name: 'Users',
+				pathLocator: '1.100',
 				children: {
-					3: {
-						id: '3a7654f1-e3e6-49c7-b6a8-a4fb00f31245',
-						name: 'Node3',
-						pathLocator: '1.2.3',
+					200: {
+						name: 'Default',
+						pathLocator: '1.100.200',
+						children: {
+							201: {
+								name: 'Documents',
+								pathLocator: '1.100.200.201'
+							},
+							202: {
+								name: 'Music',
+								pathLocator: '1.100.200.202'
+							},
+							203: {
+								name: 'Pictures',
+								pathLocator: '1.100.200.203'
+							}
+						}
+					},
+					300: {
+						name: 'John',
+						pathLocator: '1.100.300',
 						children: {
 							301: {
-								id: '3a7654f1-e3e6-49c7-b6a8-a4fb00f31245',
-								name: 'Node301',
-								pathLocator: '1.2.3.301',
-								children: {}
+								name: 'Documents',
+								pathLocator: '1.100.300.301'
+							},
+							302: {
+								name: 'Music',
+								pathLocator: '1.100.300.302'
+							},
+							303: {
+								name: 'Pictures',
+								pathLocator: '1.100.300.303'
+							}
+						}
+					},
+					400: {
+						name: 'Public',
+						pathLocator: '1.100.400',
+						children: {
+							401: {
+								name: 'Public Documents',
+								pathLocator: '1.100.400.401'
+							},
+							402: {
+								name: 'Public Music',
+								pathLocator: '1.100.400.402'
+							},
+							403: {
+								name: 'Public Pictures',
+								pathLocator: '1.100.400.403'
 							}
 						}
 					}
 				}
 			}
 		}
+	},
+	1000: {
+		name: 'D:',
+		pathLocator: '1000',
+		children: {
+			1001: {
+				name: 'Data',
+				pathLocator: '1000.1001',
+				children: {
+					1002: {
+						name: 'John',
+						pathLocator: '1000.1001.1002'
+					}
+				}
+			},
+			1002: {
+				name: 'Backup',
+				pathLocator: '1000.1002'
+			}
+		}
 	}
 };

package/web-test-runner.config.mjs

@@ -1,28 +1 @@
-import { chromeLauncher } from '@web/test-runner';
-import { seleniumLauncher } from '@web/test-runner-selenium';
-import webdriver from 'selenium-webdriver';
-import firefox from 'selenium-webdriver/firefox.js';
-
-export default {
-	nodeResolve: true,
-	coverageConfig: {
-		reportDir: 'coverage',
-		threshold: {
-			statements: 70,
-			branches: 70,
-			functions: 50,
-			lines: 70
-		}
-	},
-	files: [
-		'**!(node_modules)/*.test.js'
-	],
-	testFramework: { config: { ui: 'tdd' }},
-	browsers: [
-		chromeLauncher(),
-		seleniumLauncher({
-			driverBuilder: new webdriver.Builder().forBrowser('firefox').setFirefoxOptions(new firefox.Options().headless())
-		})
-	]
-
-};
+export { default } from '@neovici/cfg/web/test-runner.mjs';