Added Chats
This commit is contained in:
119
pages/chats/create.vue
Normal file
119
pages/chats/create.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<script setup>
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const profiles = ref([])
|
||||
|
||||
const itemInfo = ref({})
|
||||
const selectedProfiles = ref([])
|
||||
|
||||
const setup = async () => {
|
||||
profiles.value = await useSupabaseSelect("profiles")
|
||||
selectedProfiles.value = [dataStore.activeProfile.id]
|
||||
}
|
||||
|
||||
setup()
|
||||
|
||||
const createChat = async () => {
|
||||
const {data,error} = await supabase.from("chats").insert({
|
||||
tenant: dataStore.currentTenant,
|
||||
name: itemInfo.value.name
|
||||
}).select()
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else if(data){
|
||||
console.log(data)
|
||||
|
||||
let memberships = selectedProfiles.value.map(i => {
|
||||
return {
|
||||
profile_id: i,
|
||||
chat_id: data[0].id
|
||||
}
|
||||
})
|
||||
|
||||
const {error} = await supabase.from("chatmembers").insert(memberships)
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
navigateTo("/chats")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar>
|
||||
<template #left>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="navigateTo(`/chats`)"
|
||||
>
|
||||
Chats
|
||||
</UButton>
|
||||
</template>
|
||||
<template #center>
|
||||
<h1
|
||||
v-if="itemInfo"
|
||||
class="text-xl font-medium"
|
||||
>Chat Erstellen</h1>
|
||||
</template>
|
||||
<template #right>
|
||||
<UButton
|
||||
@click="createChat"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="navigateTo(`/chats`)"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardPanelContent>
|
||||
<UForm>
|
||||
<UFormGroup
|
||||
label="Name:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.name"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Beteiligte Benutzer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="selectedProfiles"
|
||||
:options="profiles"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
multiple
|
||||
:search-attributes="['fullName']"
|
||||
>
|
||||
<template #label>
|
||||
{{selectedProfiles.length > 0 ? selectedProfiles.map(i => dataStore.getProfileById(i).fullName).join(", ") : "Keine Benutzer ausgewählt"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</UDashboardPanelContent>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
125
pages/chats/index.vue
Normal file
125
pages/chats/index.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/chats/create")
|
||||
},
|
||||
'Enter': {
|
||||
usingInput: true,
|
||||
handler: () => {
|
||||
router.push(`/chats/show/${filteredRows.value[selectedItem.value].id}`)
|
||||
}
|
||||
},
|
||||
'arrowdown': () => {
|
||||
if(selectedItem.value < filteredRows.value.length - 1) {
|
||||
selectedItem.value += 1
|
||||
} else {
|
||||
selectedItem.value = 0
|
||||
}
|
||||
},
|
||||
'arrowup': () => {
|
||||
if(selectedItem.value === 0) {
|
||||
selectedItem.value = filteredRows.value.length - 1
|
||||
} else {
|
||||
selectedItem.value -= 1
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const items = ref([])
|
||||
const selectedItem = ref(0)
|
||||
|
||||
const setup = async () => {
|
||||
items.value = await useSupabaseSelect("chats","*, profiles(*)")
|
||||
//items.value = await useSupabaseSelect("chats","*, profiles(*), chatmessages(*)")
|
||||
}
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Name"
|
||||
},{
|
||||
key: "profiles",
|
||||
label: "Mitglieder"
|
||||
},
|
||||
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
|
||||
return useListFilter(searchString.value, items.value)
|
||||
})
|
||||
|
||||
setup()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Chats" :badge="filteredRows.length">
|
||||
<template #right>
|
||||
<UInput
|
||||
id="searchinput"
|
||||
v-model="searchString"
|
||||
icon="i-heroicons-funnel"
|
||||
autocomplete="off"
|
||||
placeholder="Suche..."
|
||||
class="hidden lg:block"
|
||||
@keydown.esc="$event.target.blur()"
|
||||
>
|
||||
<template #trailing>
|
||||
<UKbd value="/" />
|
||||
</template>
|
||||
</UInput>
|
||||
|
||||
<UButton @click="router.push(`/chats/create`)">+ Chat</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #right>
|
||||
<USelectMenu
|
||||
v-model="selectedColumns"
|
||||
icon="i-heroicons-adjustments-horizontal-solid"
|
||||
:options="templateColumns"
|
||||
multiple
|
||||
class="hidden lg:block"
|
||||
by="key"
|
||||
>
|
||||
<template #label>
|
||||
Spalten
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/chats/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Chats anzuzeigen' }"
|
||||
>
|
||||
<template #name-data="{row}">
|
||||
<span class="text-primary-500 font-bold" v-if="row === filteredRows[selectedItem]">{{row.name}}</span>
|
||||
<span v-else>{{row.name}}</span>
|
||||
</template>
|
||||
<template #profiles-data="{row}">
|
||||
{{row.profiles.map(i => i.fullName).join(", ")}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
121
pages/chats/show/[id].vue
Normal file
121
pages/chats/show/[id].vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<script setup>
|
||||
import { format, isToday } from 'date-fns'
|
||||
import dayjs from "dayjs"
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
' ': () => {
|
||||
document.getElementById("textinput").focus()
|
||||
},
|
||||
})
|
||||
|
||||
const itemInfo = ref({})
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const setup = async () => {
|
||||
itemInfo.value = await useSupabaseSelectSingle("chats",useRoute().params.id,"*, profiles(*), chatmessages(*)")
|
||||
|
||||
let unseenMessages = itemInfo.value.chatmessages.filter(i => !i.seenBy.includes(dataStore.activeProfile.id))
|
||||
|
||||
|
||||
for await (const message of unseenMessages){
|
||||
await supabase.from("chatmessages").update({seenBy: [...message.seenBy, dataStore.activeProfile.id]}).eq("id",message.id)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
setup()
|
||||
|
||||
const messageText = ref("")
|
||||
const sendMessage = async () => {
|
||||
if(messageText.value.length > 0) {
|
||||
const message = {
|
||||
origin: dataStore.activeProfile.id,
|
||||
destinationchat: itemInfo.value.id,
|
||||
text: messageText.value,
|
||||
tenant: dataStore.currentTenant
|
||||
}
|
||||
|
||||
const {data,error} = await supabase.from("chatmessages").insert(message)
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
//Reset
|
||||
messageText.value = ""
|
||||
//Create Notifications
|
||||
let notifications = itemInfo.value.profiles.filter(i => i.id !== dataStore.activeProfile.id).map(i => {
|
||||
return {
|
||||
tenant: dataStore.currentTenant,
|
||||
profile: i.id,
|
||||
initiatingProfile: dataStore.activeProfile.id,
|
||||
title: `Sie wurden im Chat ${itemInfo.value.name} erwähnt`,
|
||||
link: `/chats/show/${itemInfo.value.id}`,
|
||||
message: message.text
|
||||
}
|
||||
})
|
||||
|
||||
console.log(notifications)
|
||||
|
||||
const {error} = await supabase.from("notifications").insert(notifications)
|
||||
|
||||
setup()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="itemInfo.name">
|
||||
<template #center>
|
||||
|
||||
</template>
|
||||
<template #right>
|
||||
<UAvatarGroup size="sm" :max="2">
|
||||
<UAvatar
|
||||
v-if="itemInfo.profiles"
|
||||
v-for="avatar in itemInfo.profiles.map(i => i.fullName)"
|
||||
:alt="avatar" size="sm" />
|
||||
</UAvatarGroup>
|
||||
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<div class="scrollList p-5">
|
||||
<UAlert
|
||||
:color="message.seenBy.includes(dataStore.activeProfile.id) ? 'white' : 'primary'"
|
||||
:variant="message.seenBy.includes(dataStore.activeProfile.id) ? 'solid' : 'outline'"
|
||||
class="my-2"
|
||||
v-for="message in itemInfo.chatmessages"
|
||||
:description="message.text"
|
||||
:avatar="{ alt: dataStore.getProfileById(message.origin).fullName }"
|
||||
:title="`${dataStore.getProfileById(message.origin).fullName} - ${isToday(new Date(message.created_at)) ? dayjs(message.created_at).format('HH:mm') : dayjs(message.created_at).format('DD.MM.YYYY HH:mm')}`"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="flex flex-row justify-between p-5">
|
||||
<UInput
|
||||
class="flex-auto mr-2"
|
||||
v-model="messageText"
|
||||
@keyup.enter="sendMessage"
|
||||
placeholder="Deine Nachricht"
|
||||
id="textinput"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-double-right-solid"
|
||||
@click="sendMessage"
|
||||
:disabled="messageText.length === 0"
|
||||
>
|
||||
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user