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

move message to typescript

Browse Source
This commit is contained in:
grimhilt
2023-04-07 15:15:49 +02:00
parent 7e0e27c2b6
commit 649bccb01e
6 changed files with 182 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/store/models/model.ts
View File

@@ -8,6 +8,8 @@ export enum RoomType {
export interface Message {
fromA: string;
toA: string;
ccA?: string;
subject: string;
content: string;
date: string;

4
front/src/utils/array.ts
View File

@@ -1,5 +1,5 @@
export function removeDuplicates(array: []) {
const unique: [] = [];
export function removeDuplicates(array: any[]) {
const unique: any[] = [];
for (let i = 0; i < array.length; i++) {
if (!unique.includes(array[i])) {
unique.push(array[i]);

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

@@ -1,23 +1,19 @@
<script setup>
import { defineProps, onMounted, ref, watch } from "vue";
<script setup lang="ts">
import { defineProps, onMounted, ref, watch, PropType, Prop } from "vue";
import { decodeEmojis } from "../../utils/string";
import { removeDuplicates } from "../../utils/array";
import DOMPurify from "dompurify";
import { Address, Message } from "@/store/models/model";
const props = defineProps({
data: {
fromA: String,
subject: String,
content: String,
date: String,
},
members: Array,
data: Object as PropType<Message>,
members: Array as PropType<Address[]>,
});
const iframe = ref(null);
const iframe = ref<HTMLIFrameElement>();
// todo dompurify
// background vs color
const htmlDefault = (html) => {
const htmlDefault = (html: string) => {
return `
<!DOCTYPE html>
<html lang="en">
@@ -34,8 +30,11 @@ const htmlDefault = (html) => {
`;
};
function setIframeContent(content) {
const doc = iframe.value.contentDocument || iframe.value.contentWindow.document;
function setIframeContent(content: string | undefined) {
if (!iframe.value) return;
if (!content) return;
const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document;
if (!doc) return;
const html = DOMPurify.sanitize(content);
doc.open();
doc.write(htmlDefault(html));
@@ -44,20 +43,21 @@ function setIframeContent(content) {
watch(
() => props.data,
(newData) => {
setIframeContent(newData.content);
(newData: Message | undefined) => {
setIframeContent(newData?.content);
},
);
onMounted(() => {
setIframeContent(props.data.content);
setIframeContent(props.data?.content);
});
const displayAddresses = (addressesId) => {
addressesId = removeDuplicates(addressesId);
const displayAddresses = (addressIds: string[] | undefined): string => {
if (!addressIds) return "";
addressIds = removeDuplicates(addressIds);
let res = "";
addressesId.forEach((addressId) => {
const address = props.members.find((member) => member.id == addressId);
addressIds.forEach((addressId) => {
const address = props.members?.find((member) => member.id === parseInt(addressId));
if (address) res += address.email;
});
return res;
@@ -72,19 +72,19 @@ const displayAddresses = (addressesId) => {
<div class="message">
<div id="context">
<div class="left" id="profile">
{{ displayAddresses(props.data.fromA?.split(",")) }} - {{ props.data.fromA }}
{{ displayAddresses(props.data?.fromA?.split(",")) }} - {{ props.data?.fromA }}
</div>
<div class="middle">{{ decodeEmojis(props.data.subject) }}</div>
<div class="middle">{{ decodeEmojis(props.data?.subject) }}</div>
<div class="right" id="date">
{{
new Date(props.data.date).toLocaleString("en-GB", {
new Date(props.data?.date ?? "").toLocaleString("en-GB", {
weekday: "short",
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
timezone: "UTC+1",
timeZone: "Europe/Paris",
})
}}
</div>