apply difference between mailbox and account
This commit is contained in:
grimhilt
parent
62dd43c3d5
commit
5447557f91
@ -88,8 +88,10 @@ async function getMessages(roomId) {
|
||||
) content ON msg.message_id = content.message_id
|
||||
|
||||
INNER JOIN message ON message.message_id = msg.message_id
|
||||
|
||||
WHERE msg.room_id = ?
|
||||
GROUP BY msg.message_id;
|
||||
GROUP BY msg.message_id
|
||||
ORDER BY message.idate;
|
||||
`;
|
||||
const values = [roomId];
|
||||
return await execQueryAsync(query, values);
|
||||
|
||||
7
front/src/store/models/Account.js
Normal file
7
front/src/store/models/Account.js
Normal file
@ -0,0 +1,7 @@
|
||||
export default class Account {
|
||||
constructor(_id, _mail) {
|
||||
this.id = _id;
|
||||
this.email = _mail;
|
||||
this.fetched = false;
|
||||
}
|
||||
}
|
||||
@ -1,44 +1,23 @@
|
||||
import API from "@/services/imapAPI";
|
||||
import { createStore } from "vuex";
|
||||
import Room from "./models/Room";
|
||||
import Account from "./models/Account";
|
||||
|
||||
const store = createStore({
|
||||
state() {
|
||||
return {
|
||||
rooms: [
|
||||
new Room(1, "clemence", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 1),
|
||||
new Room(2, "laurance", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 2),
|
||||
new Room(3, "mathilde", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 1),
|
||||
],
|
||||
rooms: [],
|
||||
messages: [],
|
||||
mailboxes: [],
|
||||
activeMailbox: 0,
|
||||
accounts: [new Account(0, "ALL")],
|
||||
activeAccount: 0,
|
||||
activeRoom: 0,
|
||||
};
|
||||
},
|
||||
mutations: {
|
||||
setActiveMailbox(state, payload) {
|
||||
state.activeMailbox = payload;
|
||||
|
||||
// todo call actions
|
||||
// fetch rooms for this mailboxes if not already fetched
|
||||
const mailbox = state.mailboxes.find((mailbox) => mailbox.id == payload);
|
||||
// todo fetched mailbox all
|
||||
if (mailbox?.fetched == false) {
|
||||
console.log(payload)
|
||||
API.getRooms(payload)
|
||||
.then((res) => {
|
||||
// todo add if not exist
|
||||
console.log(res.data)
|
||||
mailbox.fetched = true;
|
||||
res.data.forEach((room) => {
|
||||
state.rooms.push(new Room(room.id, room.user, room.userId, room.roomName, room.mailboxId));
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
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;
|
||||
@ -60,11 +39,15 @@ const store = createStore({
|
||||
});
|
||||
}
|
||||
},
|
||||
addMailboxes(state, payload) {
|
||||
console.log(payload)
|
||||
payload.forEach((mailbox) => {
|
||||
mailbox.fetched = false;
|
||||
state.mailboxes.push(mailbox);
|
||||
addAccounts(state, payload) {
|
||||
payload.forEach((account) => {
|
||||
state.accounts.push(new Account(account.id, account.email));
|
||||
});
|
||||
},
|
||||
addRooms(state, payload) {
|
||||
// todo add if not exist
|
||||
payload.rooms.forEach((room) => {
|
||||
state.rooms.push(new Room(room.id, room.user, room.userId, room.roomName, room.mailboxId));
|
||||
});
|
||||
},
|
||||
addMessages(state, payload) {
|
||||
@ -73,37 +56,48 @@ const store = createStore({
|
||||
room.messages.push(message);
|
||||
});
|
||||
room.messagesFetched = true;
|
||||
console.log(room.messages)
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
rooms: (state) => () => {
|
||||
if (state.activeMailbox === 0) return state.rooms;
|
||||
return state.rooms.filter((room) => room.mailboxId == state.activeMailbox);
|
||||
if (state.activeAccount === 0) return state.rooms;
|
||||
return state.rooms.filter((room) => room.mailboxId == state.activeAccount);
|
||||
},
|
||||
messages: (state) => (roomId) => {
|
||||
const room = state.rooms.find((room) => room.id == roomId);
|
||||
if (!room.messagesFetched) {
|
||||
console.log("fetched Messages")
|
||||
store.dispatch("fetchMessages", { roomId: room.id });
|
||||
}
|
||||
return room.messages;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
fetchMailboxes: async (context) => {
|
||||
fetchAccounts: async (context) => {
|
||||
API.getAccounts()
|
||||
.then((res) => {
|
||||
context.commit("addMailboxes", res.data);
|
||||
context.commit("addAccounts", res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
fetchRooms: async (context, data) => {
|
||||
if (data.account?.fetched == false) {
|
||||
API.getRooms(data.accountId)
|
||||
.then((res) => {
|
||||
data.account.fetched = true;
|
||||
context.commit("addRooms", { rooms: res.data });
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
},
|
||||
fetchMessages: async (context, data) => {
|
||||
console.log(data)
|
||||
API.getMessages(data.roomId)
|
||||
.then((res) => {
|
||||
console.log(res.data)
|
||||
console.log(res.data);
|
||||
context.commit("addMessages", { messages: res.data, roomId: data.roomId });
|
||||
})
|
||||
.catch((err) => {
|
||||
|
||||
@ -64,7 +64,7 @@ function checkError() {
|
||||
}
|
||||
}
|
||||
|
||||
function addMailboxRequest() {
|
||||
function addAccountRequest() {
|
||||
checkError();
|
||||
|
||||
const data = {
|
||||
@ -113,7 +113,7 @@ function mailChange() {
|
||||
</button>
|
||||
<Modal
|
||||
v-if="modal"
|
||||
title="Add mailbox"
|
||||
title="Add new account"
|
||||
@close-modal="modal = false"
|
||||
>
|
||||
<template v-slot:body>
|
||||
@ -145,7 +145,7 @@ function mailChange() {
|
||||
</div>
|
||||
<!-- tls -->
|
||||
<div>
|
||||
<button :disabled="error != ''" @click="addMailboxRequest">Add</button>
|
||||
<button :disabled="error != ''" @click="addAccountRequest">Add</button>
|
||||
{{ error }}
|
||||
</div>
|
||||
</template>
|
||||
@ -2,9 +2,7 @@
|
||||
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
|
||||
cc -->
|
||||
|
||||
@ -8,7 +8,6 @@ import Message from "./Message.vue";
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
let { id } = route.params;
|
||||
let messages = [];
|
||||
onBeforeMount(async () => {
|
||||
// get data
|
||||
console.log(store.state.rooms.find((room) => room.id === id)?.fetched);
|
||||
@ -34,8 +33,6 @@ onBeforeRouteUpdate(async (to, from) => {
|
||||
<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>
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<Mailboxes />
|
||||
<Accounts />
|
||||
<Rooms id="rooms"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Mailboxes from './mailboxes/Mailboxes'
|
||||
import Accounts from './accounts/Accounts'
|
||||
import Rooms from './rooms/Rooms.vue'
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
components: {
|
||||
Mailboxes,
|
||||
Accounts,
|
||||
Rooms,
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="container" @click="setActiveMailbox(data.id)" :class="activeMailbox == data.id && 'active'">
|
||||
<div class="container" @click="setactiveAccount(data.id)" :class="activeAccount == data.id && 'active'">
|
||||
{{ data.email }}
|
||||
</div>
|
||||
</template>
|
||||
@ -8,17 +8,17 @@
|
||||
import { mapMutations, mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Mailbox',
|
||||
name: 'Account',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
data: {mail: String, id: Number}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['activeMailbox'])
|
||||
...mapState(['activeAccount'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setActiveMailbox'])
|
||||
...mapMutations(['setactiveAccount'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -4,33 +4,31 @@
|
||||
<!-- deconnect -->
|
||||
</div>
|
||||
<span class="divider"></span>
|
||||
<Mailbox :data="{'id': 0, 'email': 'all'}"/>
|
||||
<Mailbox v-for="(mailbox, index) in mailboxes" :key="index" :data="mailbox"/>
|
||||
<Account v-for="(account, index) in accounts" :key="index" :data="account"/>
|
||||
<span class="divider"></span>
|
||||
|
||||
<AddMailboxModal />
|
||||
<AddAccountModal />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Mailbox from './Mailbox'
|
||||
import AddMailboxModal from '../../modals/AddMailboxModal'
|
||||
import Account from './Account'
|
||||
import AddAccountModal from '../../modals/AddAccountModal'
|
||||
import store from '@/store/store'
|
||||
|
||||
export default {
|
||||
name: 'Mailboxes',
|
||||
name: 'Accounts',
|
||||
components: {
|
||||
Mailbox,
|
||||
AddMailboxModal
|
||||
Account,
|
||||
AddAccountModal
|
||||
},
|
||||
computed: {
|
||||
...mapState(['mailboxes'])
|
||||
...mapState(['accounts'])
|
||||
},
|
||||
created() {
|
||||
console.log("call api get mailboxes");
|
||||
store.dispatch('fetchMailboxes');
|
||||
store.dispatch('fetchAccounts');
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user