157 lines
4.2 KiB
Vue
157 lines
4.2 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("")
|
|
const createMessage = async () => {
|
|
const {data,error} = await supabase
|
|
.from("messages")
|
|
.insert([{
|
|
text: messageText.value,
|
|
origin: user.value.id,
|
|
destination: selectedChat.value.id
|
|
}])
|
|
.select()
|
|
|
|
if(error) {
|
|
console.log(error)
|
|
}
|
|
messageText.value = ""
|
|
console.log("OK")
|
|
dataStore.fetchMessages()
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-full">
|
|
<div class="w-1/5 mr-2">
|
|
<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"
|
|
/>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="w-full">
|
|
<!-- <UCard class="h-full" v-if="selectedChat.id">
|
|
<template #header>
|
|
<Placeholder class="h-8"/>
|
|
</template>
|
|
|
|
<div class="h-full">
|
|
<UAlert
|
|
v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
|
|
:color="message.origin === user.id ? 'primary' : 'white'"
|
|
variant="outline"
|
|
:avatar="{alt: dataStore.getProfileById(message.origin).fullName}"
|
|
:title="message.text"
|
|
:description="dayjs(message.created_at).isSame(dayjs(), 'day') ? dayjs(message.created_at).format('HH:mm') : dayjs(message.created_at).format('DD.MM.YY HH:mm')"
|
|
class="mb-3"
|
|
/>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="h-8">
|
|
<UButtonGroup class="w-full">
|
|
<UInput
|
|
class="flex-auto"
|
|
placeholder="Neue Nachricht"
|
|
v-model="messageText"
|
|
@keyup.enter="createMessage"
|
|
/>
|
|
<UButton
|
|
@click="createMessage"
|
|
>
|
|
Senden
|
|
</UButton>
|
|
</UButtonGroup>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
</UCard>-->
|
|
|
|
<div class="w-full h-full px-5 flex flex-col justify-between" v-if="selectedChat.id">
|
|
<div class="flex flex-col mt-5">
|
|
|
|
<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="createMessage"
|
|
class="flex-auto"
|
|
/>
|
|
<UButton
|
|
@click="createMessage"
|
|
>
|
|
Senden
|
|
</UButton>
|
|
</UButtonGroup>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |