feat: inserted treenode component in treenode navigator

Neovici · Oct 25, 2024 · 7a47b35 · 7a47b35
1 parent 2598c93
commit 7a47b35
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 20 deletions.
diff --git a/cosmoz-treenode-button-view.js b/cosmoz-treenode-button-view.js
@@ -11,10 +11,8 @@ 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.
@@ -96,7 +94,17 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 					on-click="openDialogTree"
 					title="[[ buttonText ]]"
 				>
-					<div class="pathToNode">&lrm;<span>[[ buttonText ]]</span></div>
+					<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
+						>
+					</div>
 				</paper-button>
 				<paper-icon-button
 					part="clear"
@@ -330,13 +338,11 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 		if (!Array.isArray(pathParts) || pathParts.length === 0) {
 			return placeholder;
 		}
-		let labels = pathParts
+		const labels = pathParts
 			.filter((n) => n)
 			.map((part) => part[this.tree.searchProperty]);
-
-		return pathParts.length === 1
-			? labels[0]
-			: '.../' + labels[pathParts.length - 1];
+		console.log(labels);
+		return labels.join('/');
 	}
 	/**
 	 * Get text from a node to set on a node chip.

diff --git a/cosmoz-treenode-navigator.js b/cosmoz-treenode-navigator.js
@@ -23,6 +23,9 @@ import {
 	onNodeDblClicked,
 } from './helpers';
 import styles from './cosmoz-treenode-navigator.styles';
+import '@neovici/cosmoz-treenode';
+
+customElements.get('cosmoz-treenode');
 
 const TreenodeNavigator = (host) => {
 	const {
@@ -61,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
@@ -81,7 +84,7 @@ const TreenodeNavigator = (host) => {
 				setSearchValue('');
 				setHighlightedNode();
 			},
-			[tree],
+			[tree]
 		),
 		listRef = useRef();
 
@@ -102,7 +105,7 @@ const TreenodeNavigator = (host) => {
 		notifyProperty(
 			host,
 			'highlightedNodePath',
-			highlightedNode?.pathLocator || '',
+			highlightedNode?.pathLocator || ''
 		);
 	}, [highlightedNode]);
 
@@ -203,7 +206,7 @@ const TreenodeNavigator = (host) => {
 								<div class="section">
 									${tree.getPathString(parentPath, tree.searchProperty)}
 								</div>
-							`,
+							`
 						))(getParentPath(tree, node))}
 					<div
 						class=${computeRowClass('node', node, highlightedNode)}
@@ -228,10 +231,10 @@ const TreenodeNavigator = (host) => {
 										</g>
 									</svg>
 								</span>
-							`,
+							`
 						)}
 					</div>
-				</div>`
+			  </div>`
 			: nothing;
 
 	return html`
@@ -257,8 +260,8 @@ const TreenodeNavigator = (host) => {
 							<span class="pointer" tabindex="0" @click=${() => openNode(node)}
 								>${node[tree.searchProperty]}</span
 							>
-						`,
-					),
+						`
+					)
 				)}
 			</h3>
 			<cosmoz-input
@@ -278,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)
 );