73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<script setup>
|
|
import { useStore } from "vuex";
|
|
import { useRoute, onBeforeRouteUpdate } from "vue-router";
|
|
import { onBeforeMount, ref } from "vue";
|
|
import Header from "./Header.vue";
|
|
import Message from "./Message.vue";
|
|
|
|
const store = useStore();
|
|
const route = useRoute();
|
|
const id = ref(parseInt(route.params?.id));
|
|
onBeforeMount(async () => {
|
|
console.log(id);
|
|
// get data
|
|
let room = store.getters.room(id);
|
|
if (!room || room?.fetched === false) {
|
|
// todo
|
|
// await store.dispatch("fetchMessages", );
|
|
}
|
|
store.commit("setActiveRoom", id);
|
|
});
|
|
|
|
onBeforeRouteUpdate(async (to, from) => {
|
|
if (to.params.id !== from.params.id) {
|
|
id.value = parseInt(to.params.id);
|
|
console.log(id);
|
|
store.commit("setActiveRoom", id);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div id="main">
|
|
<Header :id="id"></Header>
|
|
<div id="RoomViewBody">
|
|
<div class="content">
|
|
<Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
|
|
</div>
|
|
<div id="composer">COMPOSER</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#main {
|
|
background-color: #1d1d23;
|
|
color: white;
|
|
width: 100%;
|
|
}
|
|
|
|
#RoomViewBody {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
#composer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding-top: 10px;
|
|
|
|
height: 35px;
|
|
background-color: red;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
overflow: auto;
|
|
margin-bottom: 100px;
|
|
}
|
|
</style>
|