Keydown events & router navigation on ENter

web2/src/components/Namespaces.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 import { useNamespacesStore } from '@/stores/namespaces';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import Loader from './Loader.vue'
@@ -8,64 +9,46 @@ import NamespacesList from './NamespacesList.vue'
 import RecentNamespacesList from './RecentNamespacesList.vue'
 
 const store = useNamespacesStore()
+const router = useRouter();
+const route = useRoute();
 
 const keyup = 38;
 const keydown = 40;
 const keyenter = 13;
 const keychars = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 109]
 
-
 const isLoading = ref(true)
 const isError = ref(false)
 const error = ref(null)
 const activeNamespace = ref(0)
-
 const searchString = ref('')
 
 onMounted(() => {
   store.getNamespaces()
+  window.addEventListener("keydown", handlePress);
 })
 
-// onMounted
-// window.addEventListener("keydown", handlePress);
-//store.getNamespaces()
-//store.getNamespaces().then(() => {
-//  this.isLoading = false
-//}).catch(error => {
-//  this.isError = true
-//  this.error = error
-//}).finally(() => {
-//  this.isLoading = false;
-//})
-
-// Before destroy
-//window.removeEventListener("keydown", this.handlePress);
-// function handlePress() {
-//
-//   // Up down
-//   if (event.keyCode == keyup && activeNamespace > 0) {
-//     activeNamespace.value--
-//   } else if (event.keyCode == keydown && activeNamespace < (store.namespaces.length-1)) {
-//     activeNamespace.value++
-//   } else if (keychars.indexOf(event.keyCode) > -1) {
-//     activeNamespace.value = 0;
-//     this.$el.querySelector('input').focus();
-//   }
-//
-//   // Enter
-//   if (event.keyCode == keyenter) {
-//     let i = this.items[this.activeNamespace].metadata.name;
-//     this.$router.push({ path: `/namespaces/${i}/pods` })
-//   }
-//
-//   // Blur and clear input
-//   if (event.keyCode == 27) {
-//     this.$el.querySelector('input').blur();
-//     this.str = "";
-//   }
-//
-// }
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handlePress);
+})
+
+function handlePress(e) {
+
+  // Up/Down
+  if(e.keyCode == keyup && activeNamespace.value > 0) {
+    activeNamespace.value--;
+  } else if (e.keyCode == keydown && activeNamespace.value < store.filteredNamespaces.length-1) {
+    activeNamespace.value++;
+  } else if (keychars.indexOf(event.keyCode) > -1) {
 
+  }
+
+  // Enter
+  if(e.keyCode == keyenter) {
+    let i = store.filteredNamespaces[activeNamespace.value].metadata.name;
+    router.push({ path: `/namespaces/${i}/pods`})
+  }
+}
 
 function isSortDown() {
    return store.nsSort == 'asc' ? true : false

web2/src/components/NamespacesList.vue

@@ -1,39 +1,18 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, defineProps } from 'vue';
 import PodCount from './PodCount.vue'
 import { useNamespacesStore } from '@/stores/namespaces';
 
 const store = useNamespacesStore();
-const active = ref(0);
+// const active = ref(0);
+const props = defineProps(['active']);
 
 onMounted(() => {
   store.getNamespaces();
 });
 
-// export default {
-//   name: 'NamespacesList',
-//   components: {
-//     PodCount
-//   },
-//   props: {
-//     items: {
-//       type: Array,
-//       required: true,
-//       default: () => {
-//         return [];
-//       }
-//     },
-//     active: {
-//       type: Number,
-//       default: () => {
-//         return 0
-//       }
-//     }
-//   }
-// }
-
 function getActive(index) {
-  if(active.value == index) {
+  if(props.active == index) {
     return 'active'
   }
   return ''

web2/src/stores/namespaces.js

@@ -69,9 +69,7 @@ export const useNamespacesStore = defineStore("namespaces", () => {
 
   async function getPods(namespace) {
     return axios.get(`${apiUrl}/namespaces/${namespace}/pods`).then((res) => {
-      // pods.value[namespace] = res.data.items;
       pods.value.set(namespace, res.data.items);
-      // pods.value = res.data.items;
     });
   }