NEW

frontend/src/components/dashboardCardList.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-card class="mx-auto" max-width="400">
+    <v-img class="align-end text-white" height="200" :src="image" cover>
+      <v-card-title
+        ><v-chip size="x-large">{{ t(caption) }}</v-chip></v-card-title
+      >
+    </v-img>
+
+    <v-card-text>
+      <v-list>
+        <v-list-item
+          style="min-height: 0px; padding-top: 0px; padding-bottom: 0px"
+        >
+          {{t("tag")}}
+          <template v-slot:append> {{t("Remark")}}</template>
+        </v-list-item>
+        <v-divider></v-divider>
+
+        <v-list-item
+          v-for="item in data"
+          style="min-height: 0px; padding-top: 0px; padding-bottom: 0px"
+          @click="open(item.label)"
+        >
+          {{ item.label }}
+          <template v-slot:append> {{ item.remark }}</template>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import router from "../router";
+import {  t } from "@/services/service";
+
+export default {
+  name: "dashboardCardNumbers",
+  props: {
+    data: {},
+    caption: String,
+    image: String,
+  },
+  methods: {
+    open(tag) {
+      router.push("animal/" + tag);
+    },
+  },
+  computed: {
+    sum() {
+      var r = 0;
+      for (const c in this.data) {
+        r = r + this.data[c].count * 1;
+      }
+      return r;
+    },
+  },
+  setup(props) {
+    return {t};
+  },
+};
+</script>