grimhilt/mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

load message in front

Browse Source
This commit is contained in:
grimhilt
2023-03-25 13:06:59 +01:00
parent 926dc60920
commit 4d4ef54bcb
12 changed files with 246 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/views/room/Header.vue
View File

@@ -19,7 +19,7 @@ export default {
<style scoped>
#main {
background-color: blue;
border-bottom: 1px solid #505050;
width: 100%;
height: 51px;
}

72
front/src/views/room/Message.vue
View File

@@ -1,30 +1,72 @@
<script setup>
const data = {
html: "<div dir=\"ltr\">new content<br><div><br><div class=\"gmail_quote\"><div dir=\"ltr\" class=\"gmail_attr\">---------- Forwarded message ---------<br>De : <b class=\"gmail_sendername\" dir=\"auto\">Ulysse Carlier</b> <span dir=\"auto\">&lt;<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>&gt;</span><br>Date: ven. 10 mars 2023 à 14:52<br>Subject: message to transfer<br>To: Hugueprime M &lt;<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>&gt;<br></div><br><br><div dir=\"ltr\">content to transfer<br></div>\n</div></div></div>\n",
text: "new content\n\n---------- Forwarded message ---------\nDe : Ulysse Carlier <carlierulysse@gmail.com>\nDate: ven. 10 mars 2023 à 14:52\nSubject: message to transfer\nTo: Hugueprime M <hugueprime@gmail.com>\n\n\ncontent to transfer\n",
textAsHtml: "<p>new content</p><p>---------- Forwarded message ---------<br/>De : Ulysse Carlier &lt;<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>&gt;<br/>Date: ven. 10 mars 2023 &agrave; 14:52<br/>Subject: message to transfer<br/>To: Hugueprime M &lt;<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>&gt;</p><p>content to transfer</p>",
subject: "Fwd: message to transfer",
references: "<CAAGJdR0i=4w1i2Nb9=zx5bCPqkR+2eUCs=_qbXTSzugZu4EXFQ@mail.gmail.com>",
date: "2023-03-10T13:52:21.000Z",
}
import { defineProps } from "vue";
const props = defineProps({ data: Object });
console.log(props.data.date);
const date = new Date(props.data.date);
console.log(date);
</script>
<!-- to if to is more than me
<!-- to if to is more than me
cc -->
<!-- object (channel only)
<!-- object (channel only)
content
attachments -->
<template>
<div class="message">
<!-- <div v-html="data.html"></div> -->
<!-- <div v-html="data.text"></div> -->
<div></div>
<div v-html="data.textAsHtml"></div>
<div id="context">
<div class="left" id="profile">Carrefour@emailing .carrefor.fr "carrefour"</div>
<div class="middle">{{ props.data.subject }}</div>
<div class="right" id="date">
{{
date.toLocaleString("en-GB", {
weekday: "short",
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
timezone: "UTC+1",
})
}}
</div>
</div>
<div id="content">
<div v-html="props.data.content"></div>
</div>
</div>
</template>
<style scoped>
.message {
width: 100%;
width: auto;
border: white 1px solid;
padding: 10px;
margin: 5px;
}
#context {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#content {
overflow: auto;
max-height: 300px;
width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
}
.left,
.right {
display: flex;
align-items: center;
}
.middle {
margin: 0 10px;
flex: 1;
align-self: center;
display: contents;
}
</style>

44
front/src/views/room/RoomView.vue
View File

@@ -14,7 +14,8 @@ onBeforeMount(async () => {
console.log(store.state.rooms.find((room) => room.id === id)?.fetched);
let room = store.state.rooms.find((room) => room.id === id);
if (!room || room?.fetched === false) {
await store.dispatch("fetchMessages");
// todo
// await store.dispatch("fetchMessages", );
}
store.commit("setActiveRoom", id);
});
@@ -28,20 +29,49 @@ onBeforeRouteUpdate(async (to, from) => {
</script>
<template>
<div>
<div id="main">
<Header></Header>
<div>
<Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
<b>{{ id }}</b>
{{ messages.length }}
<div id="RoomViewBody">
<div class="content">
<Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
<b>{{ id }}</b>
{{ messages.length }}
</div>
<div id="composer">COMPOSER</div>
</div>
</div>
</template>
<style scoped>
div {
#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;
/* todo composer */
height: 35px;
background-color: red;
}
.content {
display: flex;
flex-direction: column;
overflow: auto;
margin-bottom: 100px;
}
</style>