feat: added key to click contents; feat: added value array onclick wh…

…en using max-depth
pennions · Jun 26, 2024 · d0ae098 · d0ae098
1 parent 21b2e92
commit d0ae098
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/flightkit/components/tree-navigation.js b/flightkit/components/tree-navigation.js
@@ -65,12 +65,27 @@ export class FlightkitTreeNavigation extends HTMLElement {
         const trail = item.split('.');
 
         for (const crumb of trail) {
-            data = data[crumb];
+            if (data[crumb]) {
+                data = data[crumb];
+            }
+            else {
+                /** Dealing with an array of objects */
+                let extractedData = [];
+
+                for (const obj of data) {
+                    if (obj[crumb]) {
+                        extractedData.push(obj[crumb])
+                    }
+                }
+                data = extractedData;
+            }
         }
 
         /** because of internal array, we have to do a substring. */
         const path = item.substring(item.indexOf('.') + 1);
-        flkElement._emit('tree-click', flkElement, { path, data, branch: typeof data === 'object' });
+
+        let leafText = flkElement.createLeafText(trail.reverse()[0])
+        flkElement._emit('tree-click', flkElement, { path, data, key: `${leafText.titleText} ${leafText.commentText}`.trim(), branch: typeof data === 'object' });
     }
 
     convertJsonKeyToTitle(jsonKey) {
@@ -191,30 +206,49 @@ export class FlightkitTreeNavigation extends HTMLElement {
         this.filterTree();
     }
 
-    createTextTag(text, element) {
+
+    createLeafText(text) {
         let hasComment = typeof text === 'string' ? text.includes('(') || text.includes('[') : false;
 
+        let titleText = '';
+        let commentText = ''
+
         if (hasComment) {
-            let tagContainer = document.createElement('div');
             let roundBracketIndex = text.indexOf('(');
             let squareBracketIndex = text.indexOf('[');
-
             let indexToCut = squareBracketIndex === -1 ? roundBracketIndex : squareBracketIndex;
 
+            titleText = this.convertJsonKeyToTitle(text.substring(0, indexToCut));
+            commentText = text.substring(indexToCut);
+        }
+        else {
+            titleText = this.convertJsonKeyToTitle(text);
+        }
+
+        return { titleText, commentText }
+    }
+
+    createTextTag(text, element) {
+        let leafText = this.createLeafText(text);
+
+        if (leafText.commentText) {
+            let tagContainer = document.createElement('div');
             let mainTitleElement = document.createElement('span');
 
-            mainTitleElement.innerText = this.convertJsonKeyToTitle(text.substring(0, indexToCut));
+            mainTitleElement.innerText = leafText.titleText;
 
             let commentElement = document.createElement('small');
-            commentElement.innerText = text.substring(indexToCut);
+            commentElement.innerText = leafText.commentText;
             commentElement.style.marginLeft = '1rem';
+
             tagContainer.append(mainTitleElement, commentElement);
             tagContainer.style.display = 'inline-flex';
             tagContainer.style.alignItems = 'center';
+
             element.append(tagContainer);
         }
         else {
-            element.innerText = this.convertJsonKeyToTitle(text);
+            element.innerText = leafText.titleText;
         }
     }
 

diff --git a/flightkit/htmlbuilder/icons.js b/flightkit/htmlbuilder/icons.js
diff --git a/flightkit/index.html b/flightkit/index.html
@@ -22,7 +22,7 @@
 
     <hr />
 
-    <flk-tree-nav id="databases" icon-set="database" max-depth="2"> </flk-tree-nav>
+    <flk-tree-nav id="databases" icon-set="database" max-depth="3" e-tree-click="clicky"> </flk-tree-nav>
 
     <script>
         function clicky(e) {