Merge pull request #395 from CVEProject/tat-39-40

#40 fix accordion toggle

Author: Nick-P-Orr

src/components/cveRecordLookupModule.vue

@@ -128,6 +128,7 @@ export default ({
       this.$store.commit('updateState', { serverError: false });
       this.$store.commit('updateState', { showHelpText: false });
       this.$store.commit('updateState', { isSearching: false });
+      this.$store.commit('updateState', { showJsonRecord: false });
     },
     lookupId() {
       const self = this;

src/store/index.js

@@ -17,6 +17,7 @@ export default new Vuex.Store({
     error: false,
     serverError: false,
     showHelpText: false,
+    showJsonRecord: false
   },
   mutations: {
     hideNotificationBanner(state) {

src/views/CVERecord.vue

@@ -33,7 +33,7 @@
               </div>
               <div v-else>
                 <h2 class="title">{{this.$store.state.recordData.ID}} Detail</h2>
-                <section class="cve-accordian">
+                <section class="cve-accordian mb-1">
                   <div class="message">
                     <div class="message-header cve-base-light-gray-borders-bg">
                       <p style="margin-top: auto !important; margin-bottom: auto !important">
@@ -43,16 +43,15 @@
                         :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'}}
+                            {{this.$store.state.showJsonRecord ? 'collapse' : 'expand'}}
                           </p>
                           <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': !this.$store.state.showJsonRecord}]"
-                        v-html="$sanitize(JSON.stringify(this.$store.state.recordData, null, 2))"></pre>
+                    <div class="message-body pb-0" :class="[{'is-hidden': !this.$store.state.showJsonRecord}]" id="cve-json">
+                      <pre v-html="$sanitize(JSON.stringify(this.$store.state.recordData, null, 2))"></pre>
                     </div>
                   </div>
                 </section>
@@ -101,7 +100,7 @@
                               </li>
                               <li v-if="ProductVersion.vendor_version.version_value && ProductVersion.vendor_version.version_value.length > 0
                                 && ProductVersion.vendor_version.version_value[0] !== ''">
-                                <span class="has-text-weight-bold">Versions:</span>
+                                <span class="has-text-weight-bold">Versions: </span>
                                 <span v-html="$sanitize(ProductVersion.vendor_version.version_value.join(', '))"></span>
                               </li>
                               <li v-if="ProductVersion.vendor_version.version_affected && ProductVersion.vendor_version.version_affected.length > 0">