51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-icon :name="chat.icon" :color="chat.color" size="md"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<div class="row no-wrap items-center justify-between">
|
|
{{ $t(chat.label) }}
|
|
<span class="text-caption text-grey text-no-wrap" v-if="time">
|
|
{{ getDate(time) }}
|
|
</span>
|
|
</div>
|
|
</q-item-label>
|
|
<q-item-label class="text-grey text-caption">
|
|
{{ $t(chat.description) }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { chatAccess, chatState } from 'utils/chats'
|
|
import { date } from 'quasar'
|
|
|
|
const props = defineProps<{
|
|
access?: 0 | 1 | 2
|
|
state?: 1 | 2 | 3 | 4
|
|
conference?: boolean
|
|
time?: number
|
|
}>()
|
|
|
|
const chat = props.access
|
|
? chatAccess(props.access)
|
|
: props.state
|
|
? chatState(props.state)
|
|
: props.conference
|
|
? { info: '', icon: 'mdi-video-box', color: 'grey', label: 'chat_type__label_conference', description: 'chat_type__description_conference' }
|
|
: { info: '', icon: '', color: '', label: '', description: '' }
|
|
|
|
function getDate (d: number) {
|
|
return new Date(d * 1000).getFullYear() === new Date(Date.now()).getFullYear()
|
|
? date.formatDate(d * 1000, 'D MMM')
|
|
: date.formatDate(d * 1000, 'D MMM YY')
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|