refactor: new UserCard component (#489)

src/components/UserCard.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-card
+    :title="user.user_id"
+    prepend-icon="mdi-account"
+    @click="goToUser(user)">
+    <v-card-text>
+      <PriceCountChip :count="user.price_count" :withLabel="true"></PriceCountChip>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+
+export default {
+  components: {
+    'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    goToUser(user) {
+      if (this.readonly) {
+        return
+      }
+      this.$router.push({ path: `/users/${user.user_id}` })
+    },
+  }
+}
+</script>

src/views/UserDetail.vue

@@ -1,11 +1,7 @@
 <template>
   <v-row>
     <v-col cols="12" sm="6">
-      <v-card :title="username" prepend-icon="mdi-account">
-        <v-card-text>
-          <PriceCountChip :count="userPriceTotal" :withLabel="true"></PriceCountChip>
-        </v-card-text>
-      </v-card>
+      <UserCard :user="{user_id: username, price_count: userPriceTotal}" readonly></UserCard>
     </v-col>
   </v-row>
 
@@ -49,7 +45,7 @@ import constants from '../constants'
 
 export default {
   components: {
-    'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+    'UserCard': defineAsyncComponent(() => import('../components/UserCard.vue')),
     'FilterMenu': defineAsyncComponent(() => import('../components/FilterMenu.vue')),
     'OrderMenu': defineAsyncComponent(() => import('../components/OrderMenu.vue')),
     'PriceCard': defineAsyncComponent(() => import('../components/PriceCard.vue')),

src/views/UserList.vue

@@ -14,16 +14,7 @@
 
   <v-row class="mt-0">
     <v-col cols="12" sm="6" md="4" v-for="user in userList" :key="user">
-      <v-card
-        :title="user.user_id"
-        prepend-icon="mdi-account"
-        elevation="1"
-        height="100%"
-        @click="goToUser(user)">
-        <v-card-text>
-          <PriceCountChip :count="user.price_count" :withLabel="true"></PriceCountChip>
-        </v-card-text>
-      </v-card>
+      <UserCard :user="user" height="100%"></UserCard>
     </v-col>
   </v-row>
 
@@ -35,12 +26,12 @@
 </template>
 
 <script>
-import api from '../services/api'
 import { defineAsyncComponent } from 'vue'
+import api from '../services/api'
 
 export default {
   components: {
-    'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+    'UserCard': defineAsyncComponent(() => import('../components/UserCard.vue')),
   },
   data() {
     return {
@@ -71,9 +62,6 @@ export default {
           this.loading = false
         })
     },
-    goToUser(user) {
-      this.$router.push({ path: `/users/${user.user_id}` })
-    },
   }
 }
 </script>