add Buefy package; ReportRequestForNonCNAs: add auto-complete CNA search box

Author: rlxdev

package-lock.json

@@ -22,6 +22,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "axios": "^1.6.5",
+    "buefy": "npm:@ntohq/buefy-next@^0.1.4",
     "bulma": "^0.9.4",
     "bulma-timeline": "^3.0.5",
     "lodash": "^4.17.21",

package.json

@@ -1,5 +1,7 @@
 
 import { createApp } from 'vue';
+import Buefy from 'buefy';
+import 'buefy/dist/buefy.css';
 import { createPinia } from 'pinia';
 import VueGtag from 'vue-gtag';
 import LoadScript from 'vue-plugin-load-script';
@@ -31,6 +33,7 @@ library.add(
 
 
 const app = createApp(App);
+app.use(Buefy);
 const pinia = createPinia();
 pinia.use(({ store }) => {
   store.router = router;

src/main.ts

@@ -31,7 +31,8 @@
                       <h4 class="title">Find the CVE Numbering Authority (CNA)</h4>
                       <p>
                         Find the CNA partner whose scope includes the product affected by the vulnerability on the
-                        <router-link to="/PartnerInformation/ListofPartners">List of Partners</router-link> page or in the search box below.
+                        <router-link to="/PartnerInformation/ListofPartners">List of Partners</router-link>
+                        page or in the search box below.
                       </p>
                       <b-field>
                         <b-autocomplete
@@ -188,17 +189,34 @@ export default {
   },
   computed: {
     filteredDataObj() {
-      const results = this.data.filter((option) => (
-        option.organizationName
-          .toString()
-          .toLowerCase()
-          .indexOf(this.name.toLowerCase()) >= 0
-      ));
+      const normalizedName = this.name.toLowerCase();
+      if (!normalizedName.length)
+        return;
 
-      if (results.length > 10) {
-        return results.splice(0, 10);
+      let results = this.data.filter((option) => (
+        option.organizationName.toLowerCase()
+          .indexOf(normalizedName) >= 0));
+
+      function cmp(cna1, cna2) {
+        // Sorts the list of organization names based on the characters
+        // entered by the user in the search box.  For example, if the user
+        // has entered "br", then "Brocade Communications" is listed before
+        // "Jetbrains" because "br" is closest to the beginning of the
+        // string in "Brocade Communications".
+
+        const cna1NormalName = cna1.organizationName.toLowerCase();
+        const cna2NormalName = cna2.organizationName.toLowerCase()
+        const cna1Index = cna1NormalName.indexOf(normalizedName);
+        const cna2Index = cna2NormalName.indexOf(normalizedName);
+
+        return cna1Index < cna2Index ? -1 : cna1Index > cna2Index ? 1 :
+        cna1NormalName.localeCompare(cna2NormalName);
       }
-      return results;
+
+      // Limit the choices presented to the user to the first 10 organizations
+      // in the list.
+
+      return results.sort(cmp).slice(0, 10);
     },
   },
   methods: {