#39 #40 fix Enter key up functionality by validating cve id before look up, display reference url link instead of name, reset accordian to closed state when new cve id look up executes

Author: alinh-mitre

src/components/cveRecordLookupModule.vue

@@ -2,7 +2,7 @@
   <div class="field mt-1" style="">
     <div class="field has-addons mb-1">
       <div class="control is-expanded">
-        <input v-model="cveId" @keyup.enter="lookupId" @keyup="validateCveId" @blur="removeHelpText" type="text" class="input cve-id-input"
+        <input v-model="cveId" @keyup.enter="onKeyUpEnter" @keyup="validateCveId" @blur="removeHelpText" type="text" class="input cve-id-input"
           placeholder="Enter CVE ID (CVE-YYYY-NNNN)"/>
       </div>
       <div class="control">
@@ -303,6 +303,11 @@ export default ({
 
       this.formatCveRecord();
     },
+    onKeyUpEnter() {
+      this.validateCveId();
+
+      if (!this.disabled) this.lookupId();
+    },
   },
 });
 </script>

src/views/CVERecord.vue

@@ -36,19 +36,23 @@
                 <section class="cve-accordian">
                   <div class="message">
                     <div class="message-header cve-base-light-gray-borders-bg">
-                      <p style="margin-top: auto !important; margin-bottom: auto !important">{{showRecord ? 'Hide' : 'View'}} full JSON 4.0 record</p>
-                      <button class="button" @click="toggleRecord" :aria-expanded="!true ? 'true' : 'false'" aria-controls="cve-id">
+                      <p style="margin-top: auto !important; margin-bottom: auto !important">
+                        {{this.$store.state.showJsonRecord ? 'Hide' : 'View'}} full JSON 4.0 record
+                      </p>
+                      <button class="button" @click="toggleRecord"
+                        :aria-expanded="!this.$store.state.showJsonRecord ? 'true' : 'false'" aria-controls="cve-id">
                         <span class="icon is-small">
                           <p id="cve-id-alttext" class="is-hidden">
                             {{true ? 'collapse' : 'expand'}}
                           </p>
-                          <font-awesome-icon :icon="showRecord ? 'minus' : 'plus'"
+                          <font-awesome-icon :icon="this.$store.state.showJsonRecord ? 'minus' : 'plus'"
                           aria-hidden="false" focusable="true" aria-labelledby="cve-id-alttext"/>
                         </span>
                       </button>
                     </div>
                     <div class="message-body pb-0" :class="{'is-hidden': false}" id="cve-id">
-                      <pre :class="[{'is-hidden': !showRecord}]" v-html="$sanitize(JSON.stringify(this.$store.state.recordData, null, 2))"></pre>
+                      <pre :class="[{'is-hidden': !this.$store.state.showJsonRecord}]"
+                        v-html="$sanitize(JSON.stringify(this.$store.state.recordData, null, 2))"></pre>
                     </div>
                   </div>
                 </section>
@@ -114,7 +118,7 @@
                           <ul v-for="reference in this.$store.state.recordData.reference_data" :key="reference.index">
                             <li v-if="reference.url !== undefined" class="cve-task-tile-list-item">
                               <a :href="$sanitize(reference.url)" class="cve-word-wrap" target="_blank">
-                                {{reference.name === undefined ? $sanitize(reference.url) : $sanitize(reference.name)}}
+                                {{$sanitize(reference.url)}}
                               </a>
                             </li>
                           </ul>
@@ -148,14 +152,9 @@
 <script>
 export default {
   name: 'CVERecord',
-  data() {
-    return {
-      showRecord: false,
-    };
-  },
   methods: {
     toggleRecord() {
-      this.showRecord = !this.showRecord;
+      this.$store.commit('updateState', { showJsonRecord: !this.$store.state.showJsonRecord });
     },
   },
 };