From e3df0c7efe823b7200b8e220ae2fb6c53f41382e Mon Sep 17 00:00:00 2001
From: Carlo Barone <carlo.barone@neovici.se>
Date: Fri, 25 Oct 2024 14:21:21 +0200
Subject: [PATCH] refactor: prettier changes removed and attempt to show only
 one node

---
 cosmoz-treenode-button-view.js | 23 +++++++++++++++--------
 cosmoz-treenode-navigator.js   | 24 ++++++++++++------------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/cosmoz-treenode-button-view.js b/cosmoz-treenode-button-view.js
index af42ed7..b4e041e 100644
--- 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.
@@ -100,7 +102,7 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 								key-property="pathLocator"
 								key-value="[[ nodePath ]]"
 								owner-tree="[[ cz.state.tree ]]"
-								show-max-nodes="1"
+								show-max-nodes="[[ showMaxNodes]]"
 							></cosmoz-treenode
 							>[[ buttonText ]]</span
 						>
@@ -269,6 +271,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 				type: String,
 				value: 'Search or navigate to chosen destination',
 			},
+			/*
+			 * Maximum number of shown nodes.
+			 */
+			showMaxNodes: {
+				type: Number,
+				value: 1,
+			},
 			/*
 			 * Minimum length before an search
 			 * starts.
@@ -338,11 +347,9 @@ 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('/');
 	}
 	/**
 	 * Get text from a node to set on a node chip.
@@ -389,20 +396,20 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 
 		this.selectedNode = getNode(
 			this.highlightedNodePath || this.nodePath,
-			this.tree
+			this.tree,
 		);
 		if (this.highlightedNodePath) {
 			this.nodePath = this.highlightedNodePath;
 		}
 		this.nodesOnNodePath = getTreePathParts(
 			this.highlightedNodePath || this.nodePath,
-			this.tree
+			this.tree,
 		);
 
 		if (this.multiSelection) {
 			if (
 				!this.selectedNodes.some(
-					(node) => node.pathLocator === this.highlightedNodePath
+					(node) => node.pathLocator === this.highlightedNodePath,
 				)
 			) {
 				this.push('selectedNodes', this.selectedNode);
@@ -439,7 +446,7 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			timeOut.after(50), // 5 was enough during test
 			() => {
 				this.$.dialogTree.fit();
-			}
+			},
 		);
 	}
 
diff --git a/cosmoz-treenode-navigator.js b/cosmoz-treenode-navigator.js
index 959b365..c73298c 100644
--- 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,7 +281,7 @@ const TreenodeNavigator = (host) => {
 						renderItem,
 						scroller: true,
 					})}
-				</div>`
+				</div>`,
 		)}
 		${when(
 			search && openNodePath,
@@ -289,12 +289,12 @@ const TreenodeNavigator = (host) => {
 				<button class="btn-ghost" @click=${() => setOpenNodePath('')}>
 					${searchGlobalPlaceholder}
 				</button>
-			`
+			`,
 		)}
 	`;
 };
 
 customElements.define(
 	'cosmoz-treenode-navigator',
-	component(TreenodeNavigator)
+	component(TreenodeNavigator),
 );