add exemple routing and store
This commit is contained in:
grimhilt
parent
75dd9afdaf
commit
0692f8caa5
128
front/package-lock.json
generated
128
front/package-lock.json
generated
@ -8,9 +8,11 @@
|
||||
"name": "mail",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.3.4",
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.1.6"
|
||||
"vue-router": "^4.1.6",
|
||||
"vuex": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
@ -3546,6 +3548,11 @@
|
||||
"lodash": "^4.17.14"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/at-least-node": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
|
||||
@ -3590,6 +3597,16 @@
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
|
||||
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-loader": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
|
||||
@ -4213,6 +4230,17 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
|
||||
@ -4974,6 +5002,14 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
|
||||
@ -6055,7 +6091,6 @@
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
@ -6072,6 +6107,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
|
||||
@ -7510,7 +7558,6 @@
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
@ -7520,7 +7567,6 @@
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
@ -9060,6 +9106,11 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/pseudomap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
|
||||
@ -10903,6 +10954,17 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vuex": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
|
||||
"integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.0.0-beta.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
|
||||
@ -13930,6 +13992,11 @@
|
||||
"lodash": "^4.17.14"
|
||||
}
|
||||
},
|
||||
"asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"at-least-node": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
|
||||
@ -13950,6 +14017,16 @@
|
||||
"postcss-value-parser": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"axios": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
|
||||
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"babel-loader": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
|
||||
@ -14375,6 +14452,14 @@
|
||||
"integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
|
||||
"dev": true
|
||||
},
|
||||
"combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"requires": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"commander": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
|
||||
@ -14876,6 +14961,11 @@
|
||||
"object-keys": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
|
||||
},
|
||||
"depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
|
||||
@ -15654,8 +15744,17 @@
|
||||
"follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
|
||||
},
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
},
|
||||
"forwarded": {
|
||||
"version": "0.2.0",
|
||||
@ -16658,14 +16757,12 @@
|
||||
"mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
|
||||
},
|
||||
"mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mime-db": "1.52.0"
|
||||
}
|
||||
@ -17665,6 +17762,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"pseudomap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
|
||||
@ -18941,6 +19043,14 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vuex": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
|
||||
"integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.0.0-beta.11"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
|
||||
|
||||
@ -8,9 +8,11 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.3.4",
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.1.6"
|
||||
"vue-router": "^4.1.6",
|
||||
"vuex": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
@ -33,7 +35,9 @@
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {"vue/multi-word-component-names": "off"}
|
||||
"rules": {
|
||||
"vue/multi-word-component-names": "off"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
@ -1,11 +1,19 @@
|
||||
<script setup>
|
||||
import { RouterView } from "vue-router";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Sidebar />
|
||||
<RoomView />
|
||||
<div id="app">
|
||||
<!-- <router-link to="/">Home</router-link> -->
|
||||
<RouterView/>
|
||||
<Sidebar />
|
||||
<RoomView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Sidebar from './components/sidebar/Sidebar';
|
||||
import RoomView from './components/room/RoomView';
|
||||
import Sidebar from './views/sidebar/Sidebar';
|
||||
import RoomView from './views/room/RoomView';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
@ -22,4 +30,5 @@ export default {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,11 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
import roomsStore from './store/rooms'
|
||||
|
||||
const routes = [
|
||||
// { path: '/', component: Home },
|
||||
// { path: '/about', component: About },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
});
|
||||
|
||||
const app = createApp({});
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
app.use(roomsStore);
|
||||
|
||||
app.mount('#app');
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
||||
26
front/src/router/index.js
Normal file
26
front/src/router/index.js
Normal file
@ -0,0 +1,26 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import Home from "../views/Home";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
name: "About",
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "about" */ "../views/About.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
52
front/src/store/rooms.js
Normal file
52
front/src/store/rooms.js
Normal file
@ -0,0 +1,52 @@
|
||||
import { createStore } from "vuex";
|
||||
|
||||
const roomsStore = createStore({
|
||||
state() {
|
||||
return {
|
||||
rooms: [
|
||||
{
|
||||
users: "clemnce",
|
||||
object:
|
||||
"Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
|
||||
mailbox: 1,
|
||||
},
|
||||
{
|
||||
users: "juliette",
|
||||
object:
|
||||
"Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
|
||||
mailbox: 1,
|
||||
},
|
||||
{
|
||||
users: "jean",
|
||||
object:
|
||||
"Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
|
||||
mailbox: 2,
|
||||
},
|
||||
{
|
||||
users: "luc",
|
||||
object:
|
||||
"Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
|
||||
mailbox: 2,
|
||||
},
|
||||
],
|
||||
mailboxes: [
|
||||
{ mail: "mail@domain.com", id: 1 },
|
||||
{ mail: "name@example.com", id: 2 },
|
||||
],
|
||||
activeMailbox: -1
|
||||
};
|
||||
},
|
||||
mutations: {
|
||||
setActiveMailbox(state, payload) {
|
||||
state.activeMailbox = payload;
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
folderRooms: (state) => () => {
|
||||
if (state.activeMailbox == -1) return state.rooms;
|
||||
return state.rooms.filter(room => room.mailbox == state.activeMailbox);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default roomsStore;
|
||||
3
front/src/views/About.vue
Normal file
3
front/src/views/About.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<h1>About</h1>
|
||||
</template>
|
||||
3
front/src/views/Home.vue
Normal file
3
front/src/views/Home.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<h1>home</h1>
|
||||
</template>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<img :src="require('../../../assets/'+ url)" >
|
||||
<img :src="require('../../assets/'+ url)" >
|
||||
</template>
|
||||
|
||||
<script>
|
||||
26
front/src/views/room/Header.vue
Normal file
26
front/src/views/room/Header.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
header -> sender
|
||||
-> thread
|
||||
-> single click open side
|
||||
-> double click open plain
|
||||
is thread
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Header',
|
||||
components: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#main {
|
||||
background-color: blue;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
Room
|
||||
<Header></Header>
|
||||
<div>
|
||||
|
||||
Room
|
||||
is thread
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from './Header.vue'
|
||||
|
||||
export default {
|
||||
name: 'RoomView',
|
||||
components: {
|
||||
Header
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
flex-grow: 1;
|
||||
background-color: #1D1D23;
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,6 +26,7 @@ div {
|
||||
|
||||
#users {
|
||||
max-width: 300px;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
/* todo setup max size */
|
||||
23
front/src/views/sidebar/folders/Account.vue
Normal file
23
front/src/views/sidebar/folders/Account.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<div id="userMenu">
|
||||
<!-- deconnect -->
|
||||
</div>
|
||||
<span class="divider"></span>
|
||||
<!-- <h5>Accounts: </h5> -->
|
||||
<span class="divider"></span>
|
||||
<!-- <h5>Folders: </h5> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Account',
|
||||
components: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
18
front/src/views/sidebar/folders/All.vue
Normal file
18
front/src/views/sidebar/folders/All.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
jij
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'All',
|
||||
components: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
35
front/src/views/sidebar/folders/Folder.vue
Normal file
35
front/src/views/sidebar/folders/Folder.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div id="main" @click="setActiveMailbox(data.id)">
|
||||
{{ data.mail }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Folder',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
data: {mail: String, id: Number}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setActiveMailbox'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#main {
|
||||
max-width: 32px;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
padding: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div:hover {
|
||||
background-color: aqua !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,20 +1,27 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<div id="userMenu">
|
||||
|
||||
<!-- deconnect -->
|
||||
</div>
|
||||
<span class="divider"></span>
|
||||
<!-- <h5>Accounts: </h5> -->
|
||||
<Folder :data="{'id': -1, 'mail': 'all'}"/>
|
||||
<Folder v-for="(mailbox, index) in mailboxes" :key="index" :data="mailbox"/>
|
||||
<span class="divider"></span>
|
||||
<!-- <h5>Folders: </h5> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Folder from './Folder.vue'
|
||||
|
||||
export default {
|
||||
name: 'Folders',
|
||||
components: {
|
||||
Folder
|
||||
},
|
||||
computed: {
|
||||
...mapState(['mailboxes'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<BaseAvatar url="vue.png"/>
|
||||
<div id="content">
|
||||
<div id="sender">{{ sender }}</div>
|
||||
<div id="object">{{ object }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ThreadList />
|
||||
<div>
|
||||
<div id="user">
|
||||
<BaseAvatar url="vue.png"/>
|
||||
<div id="content">
|
||||
<div id="sender">{{ sender }}</div>
|
||||
<div id="object">{{ object }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ThreadList />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseAvatar from '../../views/avatars/BaseAvatar.vue'
|
||||
import BaseAvatar from '../../avatars/BaseAvatar.vue'
|
||||
import ThreadList from './threads/ThreadList.vue'
|
||||
|
||||
export default {
|
||||
@ -29,16 +29,17 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#main {
|
||||
#user {
|
||||
box-sizing: border-box;
|
||||
contain: content;
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#main:hover {
|
||||
#user:hover {
|
||||
background-color: #41474f;;
|
||||
border-radius: 8px;
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<User sender="Clemence" object="Proident sunt voluptate enim nisi duis fugiat veniam consequat do irure irure irure id. "/>
|
||||
<User v-for="(room, index) in folderRooms()" :key="index" :sender="room.users" :object="room.object" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import User from './User'
|
||||
|
||||
export default {
|
||||
@ -14,6 +15,9 @@ export default {
|
||||
},
|
||||
components: {
|
||||
User
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['folderRooms'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1602,7 +1602,7 @@
|
||||
optionalDependencies:
|
||||
"prettier" "^1.18.2 || ^2.0.0"
|
||||
|
||||
"@vue/devtools-api@^6.4.5":
|
||||
"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.4.5":
|
||||
"integrity" "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
|
||||
"resolved" "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz"
|
||||
"version" "6.5.0"
|
||||
@ -1980,6 +1980,11 @@
|
||||
dependencies:
|
||||
"lodash" "^4.17.14"
|
||||
|
||||
"asynckit@^0.4.0":
|
||||
"integrity" "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
"resolved" "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
|
||||
"version" "0.4.0"
|
||||
|
||||
"at-least-node@^1.0.0":
|
||||
"integrity" "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
|
||||
"resolved" "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz"
|
||||
@ -1997,6 +2002,15 @@
|
||||
"picocolors" "^1.0.0"
|
||||
"postcss-value-parser" "^4.2.0"
|
||||
|
||||
"axios@^1.3.4":
|
||||
"integrity" "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ=="
|
||||
"resolved" "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz"
|
||||
"version" "1.3.4"
|
||||
dependencies:
|
||||
"follow-redirects" "^1.15.0"
|
||||
"form-data" "^4.0.0"
|
||||
"proxy-from-env" "^1.1.0"
|
||||
|
||||
"babel-loader@^8.2.2":
|
||||
"integrity" "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q=="
|
||||
"resolved" "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz"
|
||||
@ -2372,6 +2386,13 @@
|
||||
"resolved" "https://registry.npmmirror.com/colorette/-/colorette-2.0.19.tgz"
|
||||
"version" "2.0.19"
|
||||
|
||||
"combined-stream@^1.0.8":
|
||||
"integrity" "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="
|
||||
"resolved" "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
|
||||
"version" "1.0.8"
|
||||
dependencies:
|
||||
"delayed-stream" "~1.0.0"
|
||||
|
||||
"commander@^2.20.0":
|
||||
"integrity" "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||
"resolved" "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz"
|
||||
@ -2704,6 +2725,11 @@
|
||||
"has-property-descriptors" "^1.0.0"
|
||||
"object-keys" "^1.1.1"
|
||||
|
||||
"delayed-stream@~1.0.0":
|
||||
"integrity" "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
|
||||
"resolved" "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
|
||||
"version" "1.0.0"
|
||||
|
||||
"depd@~1.1.2":
|
||||
"integrity" "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="
|
||||
"resolved" "https://registry.npmmirror.com/depd/-/depd-1.1.2.tgz"
|
||||
@ -3284,11 +3310,20 @@
|
||||
"resolved" "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz"
|
||||
"version" "3.2.7"
|
||||
|
||||
"follow-redirects@^1.0.0":
|
||||
"follow-redirects@^1.0.0", "follow-redirects@^1.15.0":
|
||||
"integrity" "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
|
||||
"resolved" "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz"
|
||||
"version" "1.15.2"
|
||||
|
||||
"form-data@^4.0.0":
|
||||
"integrity" "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww=="
|
||||
"resolved" "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
|
||||
"version" "4.0.0"
|
||||
dependencies:
|
||||
"asynckit" "^0.4.0"
|
||||
"combined-stream" "^1.0.8"
|
||||
"mime-types" "^2.1.12"
|
||||
|
||||
"forwarded@0.2.0":
|
||||
"integrity" "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
|
||||
"resolved" "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz"
|
||||
@ -4157,7 +4192,7 @@
|
||||
"resolved" "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz"
|
||||
"version" "1.52.0"
|
||||
|
||||
"mime-types@^2.1.27", "mime-types@^2.1.31", "mime-types@~2.1.17", "mime-types@~2.1.24", "mime-types@~2.1.34":
|
||||
"mime-types@^2.1.12", "mime-types@^2.1.27", "mime-types@^2.1.31", "mime-types@~2.1.17", "mime-types@~2.1.24", "mime-types@~2.1.34":
|
||||
"integrity" "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="
|
||||
"resolved" "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz"
|
||||
"version" "2.1.35"
|
||||
@ -4931,6 +4966,11 @@
|
||||
"forwarded" "0.2.0"
|
||||
"ipaddr.js" "1.9.1"
|
||||
|
||||
"proxy-from-env@^1.1.0":
|
||||
"integrity" "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
"resolved" "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
|
||||
"version" "1.1.0"
|
||||
|
||||
"pseudomap@^1.0.2":
|
||||
"integrity" "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
|
||||
"resolved" "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz"
|
||||
@ -5914,7 +5954,7 @@
|
||||
"resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
|
||||
"version" "1.9.1"
|
||||
|
||||
"vue@*", "vue@^2 || ^3.2.13", "vue@^3.2.0", "vue@^3.2.13", "vue@3.2.47":
|
||||
"vue@*", "vue@^2 || ^3.2.13", "vue@^3.0.2", "vue@^3.2.0", "vue@^3.2.13", "vue@3.2.47":
|
||||
"integrity" "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ=="
|
||||
"resolved" "https://registry.npmmirror.com/vue/-/vue-3.2.47.tgz"
|
||||
"version" "3.2.47"
|
||||
@ -5925,6 +5965,13 @@
|
||||
"@vue/server-renderer" "3.2.47"
|
||||
"@vue/shared" "3.2.47"
|
||||
|
||||
"vuex@^4.0.2":
|
||||
"integrity" "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q=="
|
||||
"resolved" "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz"
|
||||
"version" "4.0.2"
|
||||
dependencies:
|
||||
"@vue/devtools-api" "^6.0.0-beta.11"
|
||||
|
||||
"watchpack@^2.4.0":
|
||||
"integrity" "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg=="
|
||||
"resolved" "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user