2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
2f7e0b6f 1 parent b32ea4a4

add folders

Inline Side-by-side
Showing 7 changed files with 112 additions and 22 deletions
......@@ -8,6 +8,7 @@
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<noscript>
......
......@@ -14,4 +14,8 @@ function registerUser(userData) {
return axios.post('/api/login', userData);
}
export { registerUser, loginUser };
\ No newline at end of file
function dropbox(userData){
return axios.get('/api/dropbox', userData);
}
export { registerUser, loginUser, dropbox };
\ No newline at end of file
......
......@@ -17,19 +17,16 @@
<v-subheader inset>Folders</v-subheader>
<v-list-item
v-for="item in items"
v-for="item in this.$store.getters.folderL"
:key="item.title"
@click=""
@click="$router.push({name: 'Folder'})"
>
<v-list-item-avatar>
<v-icon
>{{item.iconClass}}</v-icon>
<v-icon>mdi-folder</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
<v-list-item-title v-text="item"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
......@@ -49,12 +46,11 @@
@click=""
>
<v-list-item-avatar>
<v-icon> {{item.iconClass}}</v-icon>
<v-icon> mdi-file</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
<v-list-item-title v-text="item"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
......@@ -98,17 +94,40 @@
</template>
<script>
import { dropbox } from '../api/index';
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
data() {
return {
folders: [],
files: [],
search:'',
}
},
async created(){
try {
const userData = {
user_id: this.$store.getters.userId,
cur: '/',
};
const { data } = await dropbox(userData);
console.log(data);
this.$store.commit('setFolder', data.folders);
this.$store.commit('setFile', data.files);
} catch (error) {
console.log("에러");
console.log(error.response.data);
}
}
// data: () => ({
// items: [
// { icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' },
// { icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' },
// { icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' },
// ],
// items2: [
// { icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
// { icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
// ],
// }),
}
</script>
......
<template>
<div>
<v-list>
<v-icon>mdi-folder</v-icon>
<v-header>Folders</v-header>
<v-list-item
v-for="item in items"
:key="item.files">
</v-list-item>
</v-list>
</div>
</template>
<script>
export default {
props:{
}
}
</script>
<style>
</style>
\ No newline at end of file
......@@ -66,6 +66,11 @@ export default new VueRouter ({
path:'/feedback',
name:'Feedback',
component: () => import('../views/Feedback.vue')
},
{
path: '/folder',
name: 'Folder',
component: () => import('../views/FolderPage.vue')
}
]
......
......@@ -6,6 +6,8 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
id: '',
folders: [],
files: [],
},
mutations: {
setId(state, userid){
......@@ -13,11 +15,26 @@ export default new Vuex.Store({
},
clearid(state){
state.id= '';
},
setFolder(state, folderlist){
state.folders = folderlist;
},
setFile(state, filelist){
state.files = fileList;
}
},
getters: {
isLogin(state){
return state.id !== '';
},
userID(state){
return state.id;
},
folderL(state){
return state.folders;
},
fileL(state){
return state.files;
}
}
})
......
<template>
<div>
<FolderList></FolderList>
</div>
</template>
<script>
import FolderList from '../components/FolderList'
export default {
components: {
FolderList,
}
}
</script>
<style>
</style>
\ No newline at end of file