66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<template>
|
|
<template v-if="channel">
|
|
<Sidebar>
|
|
<template v-slot:top>
|
|
<h5 class="text-muted mt-3">Users</h5>
|
|
<UserList :channel="channel" />
|
|
</template>
|
|
</Sidebar>
|
|
<Content autoScroll>
|
|
<template v-slot:title>{{ channel.name }}</template>
|
|
<template v-slot:header>
|
|
<Key :channel="channel" />
|
|
</template>
|
|
<template v-slot:content>
|
|
<Message v-for="message in messages" :key="message.id" :message="message" />
|
|
</template>
|
|
<template v-slot:footer>
|
|
<MessageInput :channel="channel" />
|
|
</template>
|
|
</Content>
|
|
</template>
|
|
<template v-else>
|
|
<Sidebar />
|
|
<Content>
|
|
<template v-slot:title>Missing channel</template>
|
|
<template v-slot:content>
|
|
<div class="d-flex flex-column text-center">
|
|
<i class="error text-warning bi bi-cone-striped"></i>
|
|
<h2>That channel does not exist!</h2>
|
|
</div>
|
|
</template>
|
|
</Content>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
|
|
import { useChannelStore } from '../stores/channelStore'
|
|
import { useMessageStore } from '../stores/messageStore'
|
|
import Sidebar from '../components/sidebar/Sidebar.vue'
|
|
import Content from '../components/Content.vue'
|
|
import Key from '../components/common/Key.vue'
|
|
import UserList from '../components/userList/UserList.vue'
|
|
import Message from '../components/conversation/Message.vue'
|
|
import MessageInput from '../components/conversation/MessageInput.vue'
|
|
|
|
const route = useRoute()
|
|
const channelStore = useChannelStore()
|
|
const messageStore = useMessageStore()
|
|
|
|
const channel = computed(() => { return channelStore.getChannelById(route.params.channelId) })
|
|
const messages = computed(() => { return messageStore.getMessagesByChannelId(route.params.channelId) })
|
|
|
|
// Show the key.
|
|
const locked = ref(false)
|
|
onBeforeRouteUpdate(async (to, from) => { locked.value = false })
|
|
const abcdef = ref(null)
|
|
</script>
|
|
|
|
<style scoped>
|
|
i.error {
|
|
font-size: 10rem;
|
|
}
|
|
</style> |