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

restructure members storage in rooms store

Browse Source
This commit is contained in:
grimhilt 2023-04-06 20:24:11 +02:00
parent 8c6a2bcfd7
commit 7c98c1eb0c
10 changed files with 76 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,10 @@ export enum RoomType {
}
export interface Message {
todo: true;
fromA: string;
subject: string;
content: string;
date: string;
}
export enum LoadingState {
@ -23,6 +26,7 @@ export interface Room {
mailboxId: number;
user: string;
userId: number;
members: Address[];
notSeen: number;
messages: Message[];
messageLoading: LoadingState;

33
front/src/store/store.ts
View File

@ -30,6 +30,7 @@ function createRoom(options: RoomFromBack): Room {
roomType: options.roomType,
mailboxId: options.mailboxId,
userId: options.userId,
members: [],
user: options.user,
notSeen: options.notSeen,
messages: [],
@ -41,7 +42,6 @@ function createRoom(options: RoomFromBack): Room {
export interface State {
rooms: Room[];
accounts: Account[];
addresses: Address[];
activeAccount: number;
activeRoom: number;
}
@ -53,31 +53,26 @@ const store = createStore<State>({
state: {
rooms: [], //createRoom({ id: 12, userId: 1, user: "user", roomName: "room name", mailboxId: 2, roomType: 1 })
accounts: [{ id: 0, email: "All", fetched: false }],
addresses: [],
activeAccount: 0,
activeRoom: 0,
},
mutations: {
setactiveAccount(state, payload) {
setActiveAccount(state, payload) {
state.activeAccount = payload;
const account = state.accounts.find((account) => account.id == payload);
store.dispatch("fetchRooms", { accountId: payload, account: account });
},
setActiveRoom(state, payload) {
state.activeRoom = payload;
console.log("set active")
// todo load room on load page
// let room;
// // const room = state.rooms.find((room) => room.id == payload);
// console.log(state.rooms.length);
// for (let i = 0; i < state.rooms.length; i++) {
// console.log(state.rooms[i].id, payload.value);
// if (state.rooms[i].id == payload.value) {
// room = state.rooms[i];
// break;
// }
// }
// console.log(room);
// store.dispatch("fetchMessages", { roomId: payload, room: room });
console.log(payload)
console.log(state.rooms)
const room = state.rooms.find((room) => room.id == payload);
console.log(room)
if (!room) return;
store.dispatch("fetchMessages", { roomId: payload, room: room });
},
addAccounts(state, payload) {
payload.forEach((account: AccountFromBack) => {
@ -97,7 +92,6 @@ const store = createStore<State>({
const parentRoom = state.rooms.find((room) => room.id == thread.parent_id); // todo debug parent_id to root_id
if (parentRoom) {
parentRoom.threadIds.push(thread.id);
console.log(parentRoom);
} else {
console.log("yep...");
}
@ -113,8 +107,10 @@ const store = createStore<State>({
},
addAddress(state, payload) {
// todo add if not exist
const room = state.rooms.find((room) => room.id == payload.roomId);
if (!room) return;
payload.addresses.forEach((address: Address) => {
state.addresses.push(address);
room.members.push(address);
});
},
},
@ -133,8 +129,9 @@ const store = createStore<State>({
},
address:
(state) =>
(addressId: number): Address | undefined => {
const address = state.addresses.find((address) => address.id == addressId);
(roomId: number, addressId: number): Address | undefined => {
const room = state.rooms.find((room) => room.id == roomId);
const address = room?.members.find((address) => address.id == addressId);
return address;
},
messages:

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

@ -1,47 +1,40 @@
<script setup lang="ts">
import store from "../../store/store";
import { defineProps, ref, watch } from "vue";
import { defineProps } from "vue";
import Badge from "@/components/Badge.vue";
import { RoomType } from "@/store/models/model";
const props = defineProps({ id: Number });
const room = ref(store.getters.room(props.id));
// todo auto load
watch(
() => props.id,
(newId) => {
room.value = store.getters.room(newId);
},
);
const props = defineProps({ id: Number, room: Object });
const roomTitle = () => {
const type = room.value?.roomType;
const type = props.room?.roomType;
if (type === RoomType.DM || type == RoomType.CHANNEL || type == RoomType.ROOM) {
return room.value?.user;
return props.room?.user;
}
return room.value?.roomName;
return props.room?.roomName;
};
</script>
<template>
<div class="main">
<div class="infos">
<Badge :value="RoomType[room?.roomType]" />
{{ roomTitle() }}
<div class="context">
<div class="infos">
<Badge :value="RoomType[room?.roomType]" />
{{ roomTitle() }}
</div>
<div class="action">action: threads message important</div>
</div>
<div class="action">action: threads message important</div>
</div>
</template>
<style scoped>
.main {
.context {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #505050;
width: 100%;
height: 51px;
height: 35px;
}
.infos {

15
front/src/views/room/MemberList.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import { defineProps } from "vue";
const props = defineProps({ type: String, members: Object });
</script>
<template>
<div class="main">
</div>
</template>
<style scoped>
</style>

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

@ -5,7 +5,15 @@ import { removeDuplicates } from "../../utils/array";
import DOMPurify from "dompurify";
import store from "@/store/store";
const props = defineProps({ data: Object });
const props = defineProps({
data: {
fromA: String,
subject: String,
content: String,
date: String,
},
members: Array
});
const iframe = ref(null);
// todo dompurify
@ -47,11 +55,10 @@ onMounted(() => {
});
const displayAddresses = (addressesId) => {
// todo store members in rooms ?
addressesId = removeDuplicates(addressesId);
let res = "";
addressesId.forEach((addressId) => {
const address = store.getters.address(addressId);
const address = props.members.find((member) => member.id == addressId);
if (address) res += address.email;
});
return res;
@ -109,8 +116,7 @@ iframe {
max-height: 300px;
width: 100%;
border: none;
padding: 2px 10px;
max-width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
max-width: 600px; /* template width being 600px to 640px up to 750px (experiment and test) */
background-color: rgb(234, 234, 234);
}

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

@ -9,30 +9,21 @@ import { RoomType } from "@/store/models/model";
const store = useStore();
const route = useRoute();
const id = ref(parseInt(route.params?.id));
// let room;
let room;
onBeforeMount(async () => {
// get data
// room = store.getters.room(id);
// if (!room || room?.fetched === false) {
// // todo
// // await store.dispatch("fetchMessages", );
// }
store.commit("setActiveRoom", id);
store.commit("setActiveRoom", id.value);
room = store.getters.room(id.value);
});
onBeforeRouteUpdate(async (to, from) => {
if (to.params.id !== from.params.id) {
id.value = parseInt(to.params.id);
console.log(id);
// room = store.getters.room(id);
// console.log(room);
store.commit("setActiveRoom", id);
store.commit("setActiveRoom", id.value);
room = await store.getters.room(id.value);
}
});
const shouldDisplayComposer = () => {
if (!id.value) return false;
const room = store.getters.room(id.value);
if (!room) return false;
return room.roomType == RoomType.THREAD || room.roomType == RoomType.GROUP;
};
@ -40,12 +31,16 @@ const shouldDisplayComposer = () => {
<template>
<div id="main">
<Header :id="id"></Header>
<Header :id="id" :room="room"></Header>
<div id="RoomViewBody">
<div class="content">
<Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
<Message
v-for="(message, index) in room?.messages"
:key="index"
:data="message"
:members="room?.members"
/>
</div>
{{ room?.roomType }}
<div id="composer" v-if="shouldDisplayComposer()">COMPOSER</div>
</div>
</div>

4
front/src/views/sidebar/accounts/Account.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="container" @click="setactiveAccount(data.id)" :class="activeAccount == data.id && 'active'">
<div class="container" @click="setActiveAccount(data.id)" :class="activeAccount == data.id && 'active'">
{{ data.email }}
</div>
</template>
@ -17,7 +17,7 @@ export default {
...mapState(["activeAccount"]),
},
methods: {
...mapMutations(["setactiveAccount"]),
...mapMutations(["setActiveAccount"]),
},
};
</script>

4
front/src/views/sidebar/rooms/Room.vue
View File

@ -14,10 +14,10 @@ const props = defineProps({
userId: Number,
notSeen: Number,
mailboxId: Number,
threadIds: [Number],
threadIds: Array,
},
});
console.log(props.data.threadIds);
// console.log(props.data.threadIds);
const router = useRouter();
</script>

1
front/src/views/sidebar/rooms/threads/Thread.vue
View File

@ -7,7 +7,6 @@ const props = defineProps({
threadId: Number,
});
const room = store.getters.room(props.threadId);
console.log(props.thread);
const router = useRouter();
</script>

2
front/src/views/sidebar/rooms/threads/ThreadList.vue
View File

@ -1,7 +1,7 @@
<script setup>
import Thread from "./Thread.vue";
import { defineProps } from "vue";
const props = defineProps({ threadIds: [Number] });
const props = defineProps({ threadIds: Array });
</script>
<template>