Files
establo/frontend/src/components/dashboardCardAnimalesPerGroup.vue
2024-08-13 16:46:44 -04:00

67 lines
1.5 KiB
Vue

<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("Groups") }}</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("Group")}}
<template v-slot:append> {{t("Count")}} </template>
</v-list-item>
<v-divider></v-divider>
<v-list-item
style="min-height: 0px; padding-top: 0px; padding-bottom: 0px"
v-for="item in inputData"
:key="item.selectedGroups"
>
{{ getGroupObject(item.selectedGroups).label }}
<template v-slot:append> {{ item.count }} </template>
</v-list-item>
<v-list-item>
{{ t("Sum")}}
<template v-slot:append> {{ sum }} </template>
</v-list-item>
</v-list>
</v-card-text>
</v-card>
</template>
<script>
import { getLabel, t,getGroupObject } from "@/services/service";
export default {
name: "dashboardCardNumbers",
props: {
inputData: {},
caption: String,
image: String,
},
methods: {
getLabel(id) {
return getLabel("group", id);
},
},
computed: {
sum() {
var r = 0;
for (const c in this.inputData) {
r = r + this.inputData[c].count * 1;
}
return r;
},
},
setup(props) {
return {t,getGroupObject};
},
};
</script>