List Component: Adds the ability to navigate on row click

demo/components/magazines/CreateMagazines.vue

@@ -2,10 +2,7 @@
   <v-layout>
     <v-flex xs12 sm6 offset-sm3>
       <v-card>
-        <v-img
-          src="banner.png"
-          aspect-ratio="4"
-        />
+        <v-img src="banner.png" aspect-ratio="4" />
         <v-card-title primary-title>
           <h3 class="headline mb-2">New Magazine</h3>
         </v-card-title>

demo/components/magazines/ShowMagazines.vue

@@ -2,10 +2,7 @@
   <v-layout>
     <v-flex xs12 sm6 offset-sm3>
       <v-card>
-        <v-img
-          src="banner.png"
-          aspect-ratio="4"
-        />
+        <v-img src="banner.png" aspect-ratio="4" />
         <v-card-title primary-title>
           <h3 class="headline mb-2">Magazine</h3>
         </v-card-title>

demo/va-auth-adapter/axios.adapter.js

@@ -8,24 +8,22 @@ export default (client, options = {}) => {
       AUTH_CHECK_REQUEST,
     } = AuthActionTypes
 
-    const {
-      authFields,
-      authUrl,
-      storageKey,
-      userField,
-    } = Object.assign({
-      authFields: { username: 'username', password: 'password' },
-      storageKey: 'token',
-      userField: 'user',
-    }, options);
+    const { authFields, authUrl, storageKey, userField } = Object.assign(
+      {
+        authFields: { username: 'username', password: 'password' },
+        storageKey: 'token',
+        userField: 'user',
+      },
+      options
+    )
 
     switch (type) {
       case AUTH_LOGIN_REQUEST:
         return new Promise((resolve, reject) => {
           const headers = {
             'Content-Type': 'application/x-www-form-urlencoded',
             [authFields.username]: params.username,
-            [authFields.password]: params.password
+            [authFields.password]: params.password,
           }
           const method = 'post'
           const url = authUrl
@@ -53,31 +51,30 @@ export default (client, options = {}) => {
         })
 
       case AUTH_CHECK_REQUEST:
-      return new Promise((resolve, reject) => {
-        const token = localStorage.getItem(storageKey)
-        if (token) {
-          const url = authUrl
-          const headers = {
-            'Content-Type': 'application/x-www-form-urlencoded',
-            token,
+        return new Promise((resolve, reject) => {
+          const token = localStorage.getItem(storageKey)
+          if (token) {
+            const url = authUrl
+            const headers = {
+              'Content-Type': 'application/x-www-form-urlencoded',
+              token,
+            }
+            const method = 'get'
+            client({ url, headers, method })
+              .then(response => {
+                const { data } = response
+                const { [userField]: user } = data
+                resolve(user)
+              })
+              .catch(error => {
+                reject(error)
+              })
+          } else {
+            reject('Authentication failed.')
           }
-          const method = 'get'
-          client({ url, headers, method })
-            .then(response => {
-              const { data } = response
-              const { [userField]: user } = data
-              resolve(user)
-            })
-            .catch(error => {
-              reject(error)
-            })
-        } else {
-          reject('Authentication failed.')
-        }
-      })
-
+        })
       default:
-        return Promise.reject(`Unsupported @va-auth action type: ${type}`);
+        return Promise.reject(`Unsupported @va-auth action type: ${type}`)
     }
   }
 }

src/components/Actions/List/List.vue

@@ -42,33 +42,24 @@
             v-for="(item, index) in items"
             :key="keys.containerFields(item[resourceIdName])"
             :name="names.containerFields(index)"
+            @click="onRowClicked(item[resourceIdName])"
           >
             <td
               class="text-xs-left"
               v-for="field in fields"
               :key="keys.elementField(label(field), index)"
               :name="names.elementField(label(field), index)"
             >
-              <a
-                :name="names.elementField(resourceIdName, index)"
-                v-if="label(field) === resourceIdName && hasShow"
-                @click="onIdClick(item[resourceIdName])"
-              >
-                <component
-                  :name="names.elementField(label(field))"
-                  :is="type(field)"
-                  v-bind:value="item[label(field)]"
-                  v-bind="args(field)"
-                />
-              </a>
-              <span v-else>
-                <component
-                  :name="names.elementField(label(field), index)"
-                  :is="type(field)"
-                  v-bind:value="item[label(field)]"
-                  v-bind="args(field)"
-                />
-              </span>
+              <component
+                :name="
+                  label(field) === resourceIdName
+                    ? names.elementField(label(field))
+                    : names.elementField(label(field), index)
+                "
+                :is="type(field)"
+                v-bind:value="item[label(field)]"
+                v-bind="args(field)"
+              />
             </td>
             <td>
               <EditButton
@@ -256,8 +247,10 @@ export default {
     onCreateClick() {
       this.$router.push({ name: `${this.resourceName}/create` })
     },
-    onIdClick(id) {
-      this.$router.push({ name: `${this.resourceName}/show`, params: { id } })
+    onRowClicked(id) {
+      if (this.hasShow) {
+        this.$router.push({ name: `${this.resourceName}/show`, params: { id } })
+      }
     },
   },
   created() {

src/components/UiComponents/DeleteButton/DeleteButton.vue

@@ -4,7 +4,7 @@
       <v-btn
         v-bind="buttonProps"
         :name="names.deleteButton"
-        @click="onDelete()"
+        @click.stop="onDelete()"
         icon
         v-on="on"
       >

src/components/UiComponents/EditButton/EditButton.vue

@@ -1,7 +1,13 @@
 <template>
   <v-tooltip bottom>
     <template v-slot:activator="{ on }">
-      <v-btn v-bind="buttonProps" :name="name" @click="onEdit()" icon v-on="on">
+      <v-btn
+        v-bind="buttonProps"
+        :name="name"
+        @click.stop="onEdit()"
+        icon
+        v-on="on"
+      >
         <v-icon v-bind="iconProps">{{
           UI_CONTENT.RESOURCE_EDIT_BUTTON
         }}</v-icon>