feat(tree-nav): comment style can now be selected and is off by default

pennions · Jul 30, 2024 · b700ad8 · b700ad8
1 parent 8ad93b0
commit b700ad8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/flightkit/components/table.js b/flightkit/components/table.js
@@ -7,15 +7,15 @@ export class FlightkitTable extends HTMLElement {
     base;
     /** to render */
     component = null;
+    properties = new Set();
+    uniqueEntriesByProperties = {};
+    propertyLabelDictionary = {};
     _contents = [];
     _orderBy = [];
-    properties = new Set();
     _columnOrder = [];
     _filter = '';
     _selectionProperty = ''; /** must be an unique property on the element to select on. */
     _selectedIds = new Set(); /** used to sync selections */
-    uniqueEntriesByProperties = {};
-    propertyLabelDictionary = {};
     _templates = {}; /** html templates to use for columns and caption/tfoot */
     _templateClasses = {};
 

diff --git a/flightkit/components/tree-navigation.js b/flightkit/components/tree-navigation.js
@@ -7,6 +7,7 @@ export class FlightkitTreeNavigation extends HTMLElement {
     contents;
     component;
     listType = 'ul';
+    commentType = ''
     // currently just by adding this, it will change the iconset to database.
     iconSet;
     filter = { value: '', caseSensitive: false };
@@ -44,8 +45,8 @@ export class FlightkitTreeNavigation extends HTMLElement {
         this.base = new BaseComponent();
         /** Check if there is contents already there. */
         this.setContents(this.getAttribute('contents'));
-
-        this.iconSet = this.getAttribute('icon-set') ? this.getAttribute('icon-type') : 'file';
+        this.commentType = this.getAttribute('comment') ?? '';
+        this.iconSet = this.getAttribute('icon-set') ?? 'file';
         this.maxDepth = this.getAttribute('max-depth') ? parseInt(this.getAttribute('max-depth')) : -1;
         this.setFilter(this.getAttribute('filter'));
 
@@ -266,18 +267,15 @@ export class FlightkitTreeNavigation extends HTMLElement {
 
 
     createLeafText(text) {
-        let hasComment = typeof text === 'string' ? text.includes('(') || text.includes('[') : false;
+        let hasComment = typeof text === 'string' && this.commentType.length ? text.includes(this.commentType[0]) : false;
 
         let titleText = '';
         let commentText = ''
 
         if (hasComment) {
-            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);
+            let commentBracketIndex = text.indexOf(this.commentType[0]);
+            titleText = this.convertJsonKeyToTitle(text.substring(0, commentBracketIndex));
+            commentText = text.substring(commentBracketIndex + 1, text.length - 1).trim();
         }
         else {
             titleText = this.convertJsonKeyToTitle(text);

diff --git a/flightkit/index.html b/flightkit/index.html
@@ -16,21 +16,22 @@
         code {
             width: fit-content;
         }
+
     </style>
 </head>
 
 <body class="row gap-5 p-3">
     <div>
-        <input type="text" id="table-filter" placeholder="filter">
-        <flk-table id="db-table"></flk-table>
+        <input class="mb-2" type="text" id="table-filter" placeholder="filter">
+        <flk-table class="bg-white striped" id="db-table"></flk-table>
     </div>
 
     <flk-tree-nav id="tree-nav" e-tree-click="clicky"></flk-tree-nav>
     <div>
         <button class="bg-gray-light" type="button" id="deselect">Deselect database tree</button>
 
         <input id="search" class="m-2" type="text" placeholder="search" />
-        <flk-tree-nav id="db-nav" class="mt-5" icon-set="database" e-tree-click="clicky" max-depth="4"></flk-tree-nav>
+        <flk-tree-nav id="db-nav" class="mt-5" icon-set="database" comment="(" e-tree-click="clicky" max-depth="4"></flk-tree-nav>
     </div>
 
     <flk-tree-nav id="databases" icon-set="database" max-depth="3" e-tree-click="clicky"> </flk-tree-nav>