107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: "default"
|
|
})
|
|
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
|
const supabase = useSupabaseClient()
|
|
const user = useSupabaseUser()
|
|
|
|
const dataStore = useDataStore()
|
|
const selectedChat = ref({})
|
|
const messageText = ref("")
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-full">
|
|
<div class="w-1/5 mr-2 scrollList">
|
|
<a
|
|
v-for="chat in dataStore.chats"
|
|
@click="selectedChat = chat"
|
|
>
|
|
<UAlert
|
|
:title="chat.title ? chat.title : chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')"
|
|
:avatar="{alt: chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')}"
|
|
:color="selectedChat.id === chat.id ? 'primary' : 'white'"
|
|
variant="outline"
|
|
>
|
|
<template #title="{title}">
|
|
{{title}} <!-- TODO: Add Unread Counter <UBadge class="ml-1">{{dataStore.getMessagesByChatId(chat.id).filter(i => !i.read ).length}}</UBadge>-->
|
|
</template>
|
|
</UAlert>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="w-full h-full px-5 flex flex-col justify-between" v-if="selectedChat.id">
|
|
<div class="flex flex-col mt-5 scrollList">
|
|
|
|
<div
|
|
v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
|
|
>
|
|
<div class="flex justify-end mb-4" v-if="message.origin === user.id">
|
|
<div
|
|
class="mr-2 py-3 px-4 bg-primary-400 rounded-bl-3xl rounded-tl-3xl rounded-tr-xl text-white"
|
|
>
|
|
{{message.text}}
|
|
</div>
|
|
<UAvatar
|
|
:alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
|
|
size="md"
|
|
/>
|
|
</div>
|
|
<div class="flex justify-start mb-4" v-else>
|
|
<UAvatar
|
|
:alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
|
|
size="md"
|
|
/>
|
|
<div
|
|
class="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white"
|
|
>
|
|
{{message.text}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="py-5">
|
|
<UButtonGroup class="w-full">
|
|
<UInput
|
|
variant="outline"
|
|
color="primary"
|
|
placeholder="Neue Nachricht"
|
|
v-model="messageText"
|
|
@keyup.enter="dataStore.createNewItem('messages',{
|
|
text: messageText,
|
|
origin: user.id,
|
|
destination: selectedChat.id
|
|
})"
|
|
class="flex-auto"
|
|
/>
|
|
<UButton
|
|
@click="dataStore.createNewItem('messages',{
|
|
text: messageText,
|
|
origin: user.id,
|
|
destination: selectedChat.id
|
|
})"
|
|
>
|
|
Senden
|
|
</UButton>
|
|
</UButtonGroup>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |