forked from geolba/tethys.backend
90 lines
2.1 KiB
Vue
90 lines
2.1 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js';
|
|
import CardBox from '@/Components/CardBox.vue';
|
|
import BaseLevel from '@/Components/BaseLevel.vue';
|
|
import PillTag from '@/Components/PillTag.vue';
|
|
import UserAvatar from '@/Components/UserAvatar.vue';
|
|
|
|
const props = defineProps({
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
login: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
email: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
date: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
progress: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const pillType = computed(() => {
|
|
if (props.type) {
|
|
return props.type;
|
|
}
|
|
|
|
if (props.progress) {
|
|
if (props.progress >= 60) {
|
|
return 'success';
|
|
}
|
|
if (props.progress >= 40) {
|
|
return 'warning';
|
|
}
|
|
|
|
return 'danger';
|
|
}
|
|
|
|
return 'info';
|
|
});
|
|
|
|
const pillIcon = computed(() => {
|
|
return {
|
|
success: mdiTrendingUp,
|
|
warning: mdiTrendingNeutral,
|
|
danger: mdiTrendingDown,
|
|
info: mdiTrendingNeutral,
|
|
}[pillType.value];
|
|
});
|
|
|
|
const pillText = computed(() => props.text ?? `${props.progress}%`);
|
|
</script>
|
|
|
|
<template>
|
|
<CardBox class="mb-6 last:mb-0" hoverable>
|
|
<BaseLevel>
|
|
<BaseLevel type="justify-start">
|
|
<UserAvatar class="w-12 h-12 mr-6" :username="props.name" />
|
|
<div class="text-center md:text-left overflow-hidden">
|
|
<h4 class="text-xl text-ellipsis">
|
|
{{ name }}
|
|
</h4>
|
|
<p class="text-gray-500 dark:text-slate-400">
|
|
<!-- {{ date }} @ {{ login }} -->
|
|
{{ email }}
|
|
</p>
|
|
</div>
|
|
</BaseLevel>
|
|
<PillTag :type="pillType" :text="pillText" small :icon="pillIcon" />
|
|
</BaseLevel>
|
|
</CardBox>
|
|
</template>
|