pass showKeys as prop to merchant-details child and use emit to toggle (#105)

previously, index and its child compoment merchant-details had their own
booleans and their values were not synched. Using a prop avoids this
problem

static/components/merchant-details/merchant-details.html

@@ -15,7 +15,7 @@
           >
         </q-item-section>
       </q-item>
-      <q-item @click="toggleMerchantKeys" clickable v-close-popup>
+      <q-item @click="toggleShowKeys" clickable v-close-popup>
         <q-item-section>
           <q-item-label v-if="!showKeys">Show Keys</q-item-label>
           <q-item-label v-else>Hide Keys</q-item-label>

static/components/merchant-details/merchant-details.js

@@ -2,18 +2,16 @@ async function merchantDetails(path) {
   const template = await loadTemplateAsync(path)
   Vue.component('merchant-details', {
     name: 'merchant-details',
-    props: ['merchant-id', 'adminkey', 'inkey'],
+    props: ['merchant-id', 'adminkey', 'inkey','showKeys'],
     template,
 
     data: function () {
       return {
-        showKeys: false
       }
     },
     methods: {
-      toggleMerchantKeys: async function () {
-        this.showKeys = !this.showKeys
-        this.$emit('show-keys', this.showKeys)
+      toggleShowKeys: async function () {
+        this.$emit('toggle-show-keys')
       },
 
       republishMerchantData: async function () {

static/js/index.js

@@ -58,8 +58,8 @@ const merchant = async () => {
       showImportKeysDialog: async function () {
         this.importKeyDialog.show = true
       },
-      toggleMerchantKeys: function (value) {
-        this.showKeys = value
+      toggleShowKeys: function () {
+        this.showKeys = !this.showKeys
       },
       toggleMerchantState: async function () {
         const merchant = await this.getMerchant()