feat: track open event on technology card

Author: Dobromir Hristov

src/components/Navigator.vue

@@ -6,6 +6,7 @@
       :key="technology.path"
       :technology="technology"
       :active-path="activePath"
+      @open="handleOpenOnCard"
     />
   </div>
 </template>
@@ -72,6 +73,10 @@ export default {
     debounceInput: debounce(function debounceInput({ target: { value } }) {
       this.filter = value;
     }, 500),
+    // TODO: Add logic to fetch children async
+    handleOpenOnCard(paths) {
+      console.log(paths);
+    },
   },
 };
 </script>

src/components/Navigator/NavigatorCard.vue

@@ -17,7 +17,7 @@
           v-if="isOpen"
           :children="childrenFiltered"
           :nesting-index="3"
-          :active-path="activePathRest"
+          :active-path="activePathMinusFirst"
         />
       </TransitionExpand>
     </div>
@@ -48,26 +48,21 @@ export default {
     };
   },
   computed: {
-    activePathRest() {
-      if (this.isCurrentPage) {
-        return this.activePath.slice(1);
-      }
-      return this.activePath;
-    },
+    activePathMinusFirst: ({ activePath }) => activePath.slice(1),
+    // TODO: move this to the backend
     childrenFiltered({ technology }) {
       return technology.children.filter(child => child.kind !== 'groupMarker');
     },
     isCurrentPage({ activePath, technology }) {
-      return activePath[0] === technology.path;
+      return activePath.length === 1 && activePath[0] === technology.path;
     },
   },
   methods: {
     toggleCard() {
       this.isOpen = !this.isOpen;
-      this.emitOpenEvent(this.technology.path);
-    },
-    emitOpenEvent(path) {
-      this.$emit('open', path);
+      if (this.isOpen) {
+        this.$emit('open', this.technology.path);
+      }
     },
   },
 };

src/components/Navigator/NavigatorTreeLeaf.vue

@@ -22,7 +22,7 @@
         v-if="expanded && childrenFiltered.length"
         :children="childrenFiltered"
         :nesting-index="nestingIndex + 1"
-        :active-path="activePathRest"
+        :active-path="activePathMinusFirst"
       />
     </TransitionExpand>
   </li>
@@ -66,9 +66,7 @@ export default {
     isActive({ item, activePath }) {
       return activePath.length === 1 && item.path === activePath[0];
     },
-    activePathRest() {
-      return this.activePath.slice(1);
-    },
+    activePathMinusFirst: ({ activePath }) => activePath.slice(1),
     // TODO: move this to the backend
     childrenFiltered({ item }) {
       return item.children ? item.children.filter(child => child.kind !== 'groupMarker') : [];