From 4b33e67514dd8f1adb19964f5d93cdbfa6b3f5da Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:26:18 +0100
Subject: [PATCH] fix: misc component issues

---
 app/src/App.vue                               |  2 +-
 .../globals/formItems/TagsSelectizeItem.vue   |  2 +-
 app/src/store/data.js                         | 19 +++++++++++--------
 app/src/views/app/AppCatalog.vue              |  5 ++++-
 app/src/views/domain/DomainList.vue           | 11 +----------
 5 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 8347c71a..d5e7ae7b 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -142,7 +142,7 @@ export default {
       if (key === copypastaCode[copypastastep++]) {
         if (copypastastep === copypastaCode.length) {
           document
-            .getElementsByClassName('unselectable')
+            .querySelectorAll('.unselectable')
             .forEach((element) => element.classList.remove('unselectable'))
           copypastastep = 0
         }
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 685576c4..b85566c0 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -175,7 +175,7 @@ export default {
       // Allow to start searching after dropdown opening
       if (
         !['Tab', 'Space'].includes(e.code) &&
-        e.target === this.$refs.dropdown.$el.lastElementChild
+        e.target === this.$refs.dropdown.$el.firstElementChild
       ) {
         this.$refs['search-input'].focus()
       }
diff --git a/app/src/store/data.js b/app/src/store/data.js
index c868490e..e778f72e 100644
--- a/app/src/store/data.js
+++ b/app/src/store/data.js
@@ -1,6 +1,7 @@
 import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 import { stratify } from '@/helpers/data/tree'
+import { reactive } from 'vue'
 
 export function getParentDomain(domain, domains, highest = false) {
   const method = highest ? 'lastIndexOf' : 'indexOf'
@@ -277,14 +278,16 @@ export default {
       // action when state.domain change)
       const domains = getters.orderedDomains
       if (!domains) return
-      const dataset = domains.map((name) => ({
-        // data to build a hierarchy
-        name,
-        parent: getParentDomain(name, domains),
-        // utility data that will be used by `RecursiveListGroup` component
-        to: { name: 'domain-info', params: { name } },
-        opened: true,
-      }))
+      const dataset = reactive(
+        domains.map((name) => ({
+          // data to build a hierarchy
+          name,
+          parent: getParentDomain(name, domains),
+          // utility data that will be used by `RecursiveListGroup` component
+          to: { name: 'domain-info', params: { name } },
+          opened: true,
+        })),
+      )
       return stratify(dataset)
     },
 
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 5948d4ca..7f87ec1a 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -80,7 +80,10 @@
         class="category-card"
       >
         <BCardTitle>
-          <BLink @click="updateQuery('category', cat.value)" class="card-link">
+          <BLink
+            @click.prevent="updateQuery('category', cat.value)"
+            class="card-link"
+          >
             <YIcon :iname="cat.icon" /> {{ cat.text }}
           </BLink>
         </BCardTitle>
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index b42367a1..1b3b7399 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -6,7 +6,6 @@
     items-name="domains"
     :queries="queries"
     :filtered-items="hasFilteredItems"
-    @queries-response="onQueriesResponse"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'domain-add' }">
@@ -63,12 +62,11 @@ export default {
     return {
       queries: [['GET', { uri: 'domains', storeKey: 'domains' }]],
       search: '',
-      domainsTree: undefined,
     }
   },
 
   computed: {
-    ...mapGetters(['domains', 'mainDomain']),
+    ...mapGetters(['domains', 'mainDomain', 'domainsTree']),
 
     tree() {
       if (!this.domainsTree) return
@@ -86,12 +84,5 @@ export default {
       return this.tree.children || null
     },
   },
-
-  methods: {
-    onQueriesResponse() {
-      // Add the tree to `data` to make it reactive
-      this.domainsTree = this.$store.getters.domainsTree
-    },
-  },
 }
 </script>