fix: treenode component instead of label

Neovici · Oct 25, 2024 · 3cd7295 · 3cd7295
1 parent ecb4d30
commit 3cd7295
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/cosmoz-treenode-button-view.js b/cosmoz-treenode-button-view.js
@@ -11,8 +11,10 @@ import { html } from '@polymer/polymer/lib/utils/html-tag';
 import '@neovici/cosmoz-dialog';
 import { Tree } from '@neovici/cosmoz-tree';
 import { translatable } from '@neovici/cosmoz-i18next';
+
 import './cosmoz-treenode-navigator';
 import { getNode, getTreePathParts } from './helpers';
+
 /**
 	`cosmoz-treenode-navigator`
 	Navigator through object with treelike datastructure.
@@ -95,15 +97,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 					title="[[ buttonText ]]"
 				>
 					<div class="pathToNode">
-						&lrm;<span
-							><cosmoz-treenode
-								key-property="pathLocator"
-								key-value="[[ nodePath ]]"
-								owner-tree="[[ cz.state.tree ]]"
-								show-max-nodes="1"
-							></cosmoz-treenode
-							>[[ buttonText ]]</span
-						>
+						<cosmoz-treenode
+							key-property="pathLocator"
+							key-value="[[ nodePath ]]"
+							owner-tree="[[ tree ]]"
+							fallback="Select a node"
+							show-max-nodes="1"
+						></cosmoz-treenode>
 					</div>
 				</paper-button>
 				<paper-icon-button
@@ -338,11 +338,10 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 		if (!Array.isArray(pathParts) || pathParts.length === 0) {
 			return placeholder;
 		}
-		const labels = pathParts
+		return pathParts
 			.filter((n) => n)
-			.map((part) => part[this.tree.searchProperty]);
-		console.log(labels);
-		return labels.join('/');
+			.map((part) => part[this.tree.searchProperty])
+			.join(' / ');
 	}
 	/**
 	 * Get text from a node to set on a node chip.

diff --git a/cosmoz-treenode-navigator.js b/cosmoz-treenode-navigator.js
@@ -64,14 +64,14 @@ const TreenodeNavigator = (host) => {
 		[searchValue, setSearchValue] = useState(''),
 		search = useMemo(
 			() => (searchValue?.length > searchMinLength && searchValue) || undefined,
-			[searchValue, searchMinLength]
+			[searchValue, searchMinLength],
 		),
 		/**
 		 * The currently displayed node list
 		 */
 		dataPlane = useMemo(
 			() => computeDataPlane(tree, search, openNodePath),
-			[tree, search, openNodePath]
+			[tree, search, openNodePath],
 		),
 		/**
 		 * Opens a node (renderLevel) based on a given path
@@ -84,7 +84,7 @@ const TreenodeNavigator = (host) => {
 				setSearchValue('');
 				setHighlightedNode();
 			},
-			[tree]
+			[tree],
 		),
 		listRef = useRef();
 
@@ -105,7 +105,7 @@ const TreenodeNavigator = (host) => {
 		notifyProperty(
 			host,
 			'highlightedNodePath',
-			highlightedNode?.pathLocator || ''
+			highlightedNode?.pathLocator || '',
 		);
 	}, [highlightedNode]);
 
@@ -206,7 +206,7 @@ const TreenodeNavigator = (host) => {
 								<div class="section">
 									${tree.getPathString(parentPath, tree.searchProperty)}
 								</div>
-							`
+							`,
 						))(getParentPath(tree, node))}
 					<div
 						class=${computeRowClass('node', node, highlightedNode)}
@@ -231,10 +231,10 @@ const TreenodeNavigator = (host) => {
 										</g>
 									</svg>
 								</span>
-							`
+							`,
 						)}
 					</div>
-			  </div>`
+				</div>`
 			: nothing;
 
 	return html`
@@ -260,8 +260,8 @@ const TreenodeNavigator = (host) => {
 							<span class="pointer" tabindex="0" @click=${() => openNode(node)}
 								>${node[tree.searchProperty]}</span
 							>
-						`
-					)
+						`,
+					),
 				)}
 			</h3>
 			<cosmoz-input
@@ -281,20 +281,20 @@ const TreenodeNavigator = (host) => {
 						renderItem,
 						scroller: true,
 					})}
-				</div>`
+				</div>`,
 		)}
 		${when(
 			search && openNodePath,
 			() => html`
 				<button class="btn-ghost" @click=${() => setOpenNodePath('')}>
 					${searchGlobalPlaceholder}
 				</button>
-			`
+			`,
 		)}
 	`;
 };
 
 customElements.define(
 	'cosmoz-treenode-navigator',
-	component(TreenodeNavigator)
+	component(TreenodeNavigator),
 );