2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
Hong
19fc1500 2 parents 3cd95620 d88f6a1e

Merge branch 'share,favorite' of http://khuhub.khu.ac.kr/2020-1-CloudComputing/D… 

…_Team_Khuloud into share,favorite
Inline Side-by-side
Showing 8 changed files with 1270 additions and 143 deletions
......@@ -18,7 +18,7 @@ function folder(curData) {
return axios.get('/api/folder/show', {
params: {
id: curData.id,
cur: curData.cur,
folder_id: curData.folder_id,
},
});
}
......@@ -39,7 +39,7 @@ function file(curData) {
return axios.get('/api/file', {
params: {
id: curData.id,
cur: curData.cur,
folder_id: curData.cur,
},
});
}
......@@ -109,6 +109,14 @@ function addFavoriteFile(fileData) {
return axios.post('api/favorites/addfile', fileData);
}
function getFavoriteList(userId) {
return axios.get('api/favorites/show', {
params: {
id: userId,
},
});
}
export {
registerUser,
loginUser,
......@@ -128,4 +136,5 @@ export {
accessedList,
detailFile,
modifyFile,
getFavoriteList,
};
......
<template>
<v-card max-width="98%" class="mx-auto">
<v-toolbar color="light-blue" dark>
<v-toolbar-title>즐겨찾기</v-toolbar-title>
<div>
<v-toolbar flat>
<v-toolbar-title>내 드라이브</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line subheader>
<v-list-item v-for="item in items" :key="item.title" @click="">
<!-- <v-subheader inset>Folders</v-subheader> -->
<!-- Folder view -->
<v-list-item v-if="this.$store.state.cur !== '/'" @click="moveParent"
>...</v-list-item
>
<v-list-item
v-for="item in this.$store.getters.favFolderL"
:key="item.title"
@click.right="show(item, $event)"
@click=""
@dblclick="$router.push(`/file/${item.folder_id}`)"
>
<v-list-item-avatar>
<v-icon :class="[item.iconClass]" v-text="item.icon"></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.folder_name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
<v-icon v-if="item.favorite === 0">
mdi-star-outline
</v-icon>
<v-icon v-else>
mdi-star
</v-icon>
</v-list-item-action>
</v-list-item>
<v-list-item v-for="item in items2" :key="item.title" @click="">
<!-- File view -->
<v-list-item
v-for="item in this.$store.getters.favFileL"
:key="item.title"
@click.right="showF(item, $event)"
@dblclick="
detailF(item, $event);
file_detail(item);
"
@click=""
>
<v-list-item-avatar>
<v-icon :class="[item.iconClass]" v-text="item.icon"></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.file_name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
<v-icon v-if="item.favorite === 0">
mdi-star-outline
</v-icon>
<v-icon v-else>
mdi-star
</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
<!--file detial -->
<v-dialog v-model="showdetailF" max-width="290">
<v-card>
<v-card-title class="headline">
<v-text-field v-model="current_filename"></v-text-field>
</v-card-title>
<v-card-text>
<v-text-field v-model="current_filedata"></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="green darken-1"
text
@click="
showdetailF = false;
modify_file();
"
>
save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- Move Folder -->
<v-dialog v-model="dialog2" width="500px">
<v-card>
<v-card-title class="grey darken-2">
Move Folder
</v-card-title>
<v-container>
<v-list>
<v-list-item
v-for="item2 in folders"
:key="item2.folder_id"
@click.left="transferF(item2.folder_name)"
v-if="item2.folder_name !== curfName.folder_name"
>
<v-list-item-avatar>
<v-icon>mdi-folder</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title
v-text="item2.folder_name"
></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- sub menu for folder -->
<v-menu
v-model="showMenu"
:position-x="x"
:position-y="y"
absolute
offset-y
>
<v-list dense>
<v-list-item @click.prevent="dialog2 = !dialog2">
<v-list-item-icon>
<v-icon>mdi-send</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>이동</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item @click.prevent="deleteF">
<v-list-item-icon>
<v-icon>mdi-delete</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>삭제</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="curfName.favorite === 1" @click="delete_favorite">
<v-list-item-icon>
<v-icon>mdi-star-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="curfName.favorite === 0" @click="add_favorite">
<v-list-item-icon>
<v-icon>mdi-star</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>즐겨 찾기 추가</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
<!-- -->
<!-- Move File -->
<v-dialog v-model="dialog3" width="500px">
<v-card>
<v-card-title class="grey darken-2">
Move File
</v-card-title>
<v-container>
<v-list>
<v-list-item
v-for="item2 in folders"
:key="item2.folder_id"
@click.left="transferFile(item2.folder_name)"
>
<v-list-item-avatar>
<v-icon>mdi-folder</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title
v-text="item2.folder_name"
></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- sub menu for file -->
<v-menu
v-model="showMenuF"
:position-x="x"
:position-y="y"
absolute
offset-y
>
<v-list dense>
<v-list-item @click.prevent="dialog3 = !dialog3">
<v-list-item-icon>
<v-icon>mdi-send</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>이동</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item @click.prevent="delete_file">
<v-list-item-icon>
<v-icon>mdi-delete</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>삭제</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item @click.prevent="download_file">
<v-list-item-icon>
<v-icon>mdi-download</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>다운로드</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item
v-if="cfilename.favorite === 1"
@click="delete_favorite_file"
>
<v-list-item-icon>
<v-icon>mdi-star-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="cfilename.favorite === 0" @click="add_favorite_file">
<v-list-item-icon>
<v-icon>mdi-star</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>즐겨 찾기 추가</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
import {
folder,
makeFolder,
deleteFolder,
moveFolder,
file,
uploadFile,
deleteFile,
downloadFile,
delFavorite,
addFavorite,
moveFile,
delFavoriteFile,
addFavoriteFile,
detailFile,
modifyFile,
getFavoriteList,
} from '../api/index';
import Axios from 'axios';
export default {
data: () => ({
items: [
{
icon: 'folder',
iconClass: 'grey lighten-1 white--text',
title: 'Photos',
subtitle: 'Jan 9, 2014',
},
{
icon: 'folder',
iconClass: 'grey lighten-1 white--text',
title: 'Recipes',
subtitle: 'Jan 17, 2014',
},
{
icon: 'folder',
iconClass: 'grey lighten-1 white--text',
title: 'Work',
subtitle: 'Jan 28, 2014',
},
],
items2: [
{
icon: 'assignment',
iconClass: 'blue white--text',
title: 'Vacation itinerary',
subtitle: 'Jan 20, 2014',
},
{
icon: 'call_to_action',
iconClass: 'amber white--text',
title: 'Kitchen remodel',
subtitle: 'Jan 10, 2014',
},
],
}),
props: {
folderId: Object,
},
data() {
return {
uploadedfile: null,
foldername: '',
curfName: {},
cfilename: {},
folders: [],
files: [],
id: '',
current_filename: null, //파일 상세정보 (이름)
current_filedata: null, //파일 상세정보 (내용)
dialog: false,
howMenu: false,
showMenu: false,
showMenuF: false, //파일 관련 메뉴
showdetailF: false, //txt 파일 상세정보 및 수정
x: 0,
y: 0,
dialog2: false,
dialog3: false, //파일 관련 메뉴
detail: {
dataname: null,
date: null,
owner_id: null,
datasize: null,
datatype: null,
},
};
},
async created() {
try {
const response = await getFavoriteList(this.$store.state.id);
console.log(response.data);
this.$store.commit('setfavFolderList', response.data.folders);
this.$store.commit('setfavFileList', response.data.files);
} catch (error) {
console.log('에러');
console.log(error);
}
},
methods: {
handleFileUpload() {
this.uploadedfile = this.$refs.uploadedfile.files[0];
console.log(this.uploadedfile);
},
initFolderName() {
this.foldername = '';
},
cancelMove() {
this.curfName = {};
this.cfilename = {};
this.dialog2 = false;
this.dialog3 = false;
},
async moveF(folder_name, location) {
try {
const curData = {
id: this.$store.state.id,
cur: location,
};
const response = await folder(curData);
const file_response = await file(curData);
console.log(response.data);
this.$store.commit('setfavFolderList', response.data.folders);
this.$store.commit('setfavFileList', file_response.data.files);
this.$store.commit('setCur', location);
this.$store.commit('setParent', response.data.parentPath);
this.folders = this.$store.getters.folderL;
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error.response.data);
}
},
async moveParent() {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.parent,
};
const response = await folder(cData);
const file_response = await file(cData);
console.log(response.data);
this.$store.commit('setFolder', response.data.folders);
this.$store.commit('setFile', file_response.data.files);
this.$store.commit('setCur', response.data.cur);
this.$store.commit('setParent', response.data.parentPath);
this.folders = this.$store.getters.folderL;
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error.response.data);
}
},
async deleteF() {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
folder_name: this.curfName.folder_name,
};
const response = await deleteFolder(cData);
console.log(response);
this.$store.commit('setFolder', response.data.folders);
this.folders = this.$store.getters.folderL;
} catch (error) {
console.log('에러');
console.log(error.response.data);
} finally {
this.curfName = '';
}
},
async download_file() {
try {
const currentData = {
fileName: this.cfilename.file_name,
id: this.$store.state.id,
cur: this.$store.state.cur,
};
const result = await downloadFile(currentData);
console.log(result);
} catch (error) {
console.log('에러');
console.log(error);
}
},
async delete_favorite() {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.curfName.folder_name,
};
console.log(cData);
const response = await delFavorite(cData);
this.$store.commit('setFolder', response.data.folders);
} catch (error) {
console.log('에러');
}
},
async add_favorite() {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.curfName.folder_name,
};
console.log(cData);
const response = await addFavorite(cData);
this.$store.commit('setFolder', response.data.folders);
} catch (error) {
console.log('에러');
}
},
async delete_favorite_file() {
try {
const fData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.cfilename.file_name,
};
console.log(fData);
const response = await delFavoriteFile(fData);
this.$store.commit('setFile', response.data.files);
} catch (error) {
console.log('에러');
}
},
async add_favorite_file() {
try {
const fData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.cfilename.file_name,
};
console.log(fData);
const response = await addFavoriteFile(fData);
this.$store.commit('setFile', response.data.files);
} catch (error) {
console.log('에러');
}
},
async transferFile(folderName) {
try {
const fData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.cfilename.file_name,
isfolder: false,
newPath: this.$store.state.cur + folderName + '/',
};
const response = await moveFile(fData);
console.log(response);
this.$store.commit('setFile', response.data.files);
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error.response.data);
} finally {
this.cfilename = {};
this.dialog3 = false;
}
},
async file_detail() {
try {
const currentData = {
id: this.cfilename.user_id,
cur: this.cfilename.location,
fileName: this.cfilename.file_name,
};
const detailData = await detailFile(currentData);
this.current_filename = detailData.data.file_name;
this.current_filedata = detailData.data.content;
console.log(this.current_filename);
console.log(this.current_filedata);
} catch (error) {
console.log('에러');
console.log(error);
}
},
async modify_file() {
try {
const modifyData = {
user_id: this.cfilename.user_id,
cur: this.cfilename.location,
name: this.current_filename,
content: this.current_filedata,
};
const result = await modifyFile(modifyData);
const after_data = {
id: this.cfilename.user_id,
cur: this.cfilename.location,
fileName: this.current_filename,
};
const detailData = await detailFile(after_data);
} catch (error) {
console.log('에러');
console.log(error);
}
},
show(folderObj, e) {
e.preventDefault();
this.curfName = folderObj;
this.showMenu = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.showMenu = true;
});
},
showF(fileObj, e) {
e.preventDefault();
this.cfilename = fileObj;
this.showMenuF = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.showMenuF = true;
});
},
detailF(fileObj, e) {
e.preventDefault();
this.cfilename = fileObj;
this.showdetailF = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.showdetailF = true;
});
},
},
};
</script>
......
......@@ -19,11 +19,17 @@
>
<v-list-item
v-for="item in this.$store.getters.folderL"
:key="item.title"
:key="item.folder_id"
:search="search"
@click.right="show(item, $event)"
@click=""
@dblclick="moveF(item.folder_name)"
@dblclick="
$router.push({
name: 'Folder',
params: { id: item.folder_id },
props: { folderId: item.id },
})
"
>
<v-list-item-avatar>
<v-icon>mdi-folder</v-icon>
......@@ -341,7 +347,7 @@ export default {
try {
const curData = {
id: this.$store.state.id,
cur: '/',
folder_id: -1,
};
console.log(curData);
const response = await folder(curData);
......
<template>
<div>
<v-toolbar flat>
<v-toolbar-title>내 드라이브</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<!-- <v-subheader inset>Folders</v-subheader> -->
<!-- Folder view -->
<v-list-item v-if="this.$store.state.cur !== '/'" @click="moveParent"
>...</v-list-item
>
<v-list-item
v-for="item in this.$store.getters.folderL"
:key="item.folder_id"
:search="search"
@click.right="show(item, $event)"
@click=""
@dblclick="
$router.push({
name: 'Folder',
params: { id: item.folder_id },
props: { folderId: item.folder_name },
})
"
>
<v-list-item-avatar>
<v-icon>mdi-folder</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.folder_name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon v-if="item.favorite === 0">
mdi-star-outline
</v-icon>
<v-icon v-else>
mdi-star
</v-icon>
</v-list-item-action>
</v-list-item>
<!-- File view -->
<v-list-item
v-for="item in this.$store.getters.fileL"
:key="item.title"
@click.right="showF(item, $event)"
@dblclick="
detailF(item, $event);
file_detail(item);
"
@click=""
>
<v-list-item-avatar>
<v-icon> mdi-file</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.file_name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon v-if="item.favorite === 0">
mdi-star-outline
</v-icon>
<v-icon v-else>
mdi-star
</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
<!--file detial -->
<v-dialog v-model="showdetailF" max-width="290">
<v-card>
<v-card-title class="headline">
<v-text-field v-model="current_filename"></v-text-field>
</v-card-title>
<v-card-text>
<v-text-field v-model="current_filedata"></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="green darken-1"
text
@click="
showdetailF = false;
modify_file();
"
>
save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- Move Folder -->
<v-dialog v-model="dialog2" width="500px">
<v-card>
<v-card-title class="grey darken-2">
Move Folder
</v-card-title>
<v-container>
<v-list>
<v-list-item
v-for="item2 in folders"
:key="item2.folder_id"
@click.left="transferF(item2.folder_name)"
v-if="item2.folder_name !== curfName.folder_name"
>
<v-list-item-avatar>
<v-icon>mdi-folder</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title
v-text="item2.folder_name"
></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- sub menu for folder -->
<v-menu
v-model="showMenu"
:position-x="x"
:position-y="y"
absolute
offset-y
>
<v-list dense>
<v-list-item @click.prevent="dialog2 = !dialog2">
<v-list-item-icon>
<v-icon>mdi-send</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>이동</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item @click.prevent="deleteF">
<v-list-item-icon>
<v-icon>mdi-delete</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>삭제</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="curfName.favorite === 1" @click="delete_favorite">
<v-list-item-icon>
<v-icon>mdi-star-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="curfName.favorite === 0" @click="add_favorite">
<v-list-item-icon>
<v-icon>mdi-star</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>즐겨 찾기 추가</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
<!-- -->
<!-- Move File -->
<v-dialog v-model="dialog3" width="500px">
<v-card>
<v-card-title class="grey darken-2">
Move File
</v-card-title>
<v-container>
<v-list>
<v-list-item
v-for="item2 in folders"
:key="item2.folder_id"
@click.left="transferFile(item2.folder_name)"
>
<v-list-item-avatar>
<v-icon>mdi-folder</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title
v-text="item2.folder_name"
></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- sub menu for file -->
<v-menu
v-model="showMenuF"
:position-x="x"
:position-y="y"
absolute
offset-y
>
<v-list dense>
<v-list-item @click.prevent="dialog3 = !dialog3">
<v-list-item-icon>
<v-icon>mdi-send</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>이동</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item @click.prevent="delete_file">
<v-list-item-icon>
<v-icon>mdi-delete</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>삭제</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item @click.prevent="download_file">
<v-list-item-icon>
<v-icon>mdi-download</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>다운로드</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item
v-if="cfilename.favorite === 1"
@click="delete_favorite_file"
>
<v-list-item-icon>
<v-icon>mdi-star-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="cfilename.favorite === 0" @click="add_favorite_file">
<v-list-item-icon>
<v-icon>mdi-star</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>즐겨 찾기 추가</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
<input
id="file-selector"
ref="uploadedfile"
type="file"
v-on:change="handleFileUpload()"
/>
<br />
<v-btn color="blue" @click="upload_file">upload</v-btn>
<v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog">
<v-icon>mdi-plus</v-icon>
</v-btn>
<!-- Create Folder -->
<v-dialog v-model="dialog" width="500px">
<v-card>
<v-card-title class="grey darken-2">
Create Folder
</v-card-title>
<v-container>
<div>
<v-icon>mdi-folder</v-icon>
<v-text-field
placeholder="name"
id="foldername"
type="text"
v-model="foldername"
></v-text-field>
</div>
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="dialog = false">Cancel</v-btn>
<v-btn text @click="makeF">Create</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import {
folder,
makeFolder,
deleteFolder,
moveFolder,
file,
uploadFile,
deleteFile,
downloadFile,
delFavorite,
addFavorite,
moveFile,
delFavoriteFile,
addFavoriteFile,
detailFile,
modifyFile,
} from '../api/index';
import Axios from 'axios';
export default {
props: {
folderId: Number,
},
data() {
return {
folder_id: this.folderId,
uploadedfile: null,
foldername: '',
curfName: {},
cfilename: {},
folders: [],
files: [],
search: '',
id: '',
current_filename: null, //파일 상세정보 (이름)
current_filedata: null, //파일 상세정보 (내용)
dialog: false,
howMenu: false,
showMenu: false,
showMenuF: false, //파일 관련 메뉴
showdetailF: false, //txt 파일 상세정보 및 수정
x: 0,
y: 0,
dialog2: false,
dialog3: false, //파일 관련 메뉴
detail: {
dataname: null,
date: null,
owner_id: null,
datasize: null,
datatype: null,
},
};
},
async created() {
try {
const curData = {
id: this.$store.state.id,
folder_id: this.folder_id,
};
console.log(curData);
const response = await folder(curData);
// const file_response = await file(curData);
this.$store.commit('setFolder', response.data.folders);
this.$store.commit('setCur', response.data.cur);
this.$store.commit('setParent', response.data.parentPath);
this.$store.commit('setFile', response.data.files);
this.folders = this.$store.getters.folderL;
console.log(this.$store.getters.fileL);
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error);
}
},
methods: {
handleFileUpload() {
this.uploadedfile = this.$refs.uploadedfile.files[0];
console.log(this.uploadedfile);
},
initFolderName() {
this.foldername = '';
},
cancelMove() {
this.curfName = {};
this.cfilename = {};
this.dialog2 = false;
this.dialog3 = false;
},
async makeF() {
try {
const folderData = {
user_id: this.$store.state.id,
cur: this.$store.state.cur,
folder_name: this.foldername,
};
const response = await makeFolder(folderData);
console.log(response.data);
console.log('폴더 생성 완료');
this.$store.commit('setFolder', response.data.folders);
this.folders = response.data.folders;
} catch (error) {
console.log('에러');
console.log(error.response.data);
} finally {
this.initFolderName();
this.dialog = false;
}
},
async moveF(move_folder_name) {
try {
const curData = {
id: this.$store.state.id,
cur: this.$store.state.cur + move_folder_name + '/',
};
const response = await folder(curData);
const file_response = await file(curData);
console.log(response.data);
this.$store.commit('setFolder', response.data.folders);
this.$store.commit('setFile', file_response.data.files);
this.$store.commit('setCur', response.data.cur);
this.$store.commit('setParent', response.data.parentPath);
this.folders = this.$store.getters.folderL;
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error.response.data);
}
},
async moveParent() {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.parent,
};
const response = await folder(cData);
const file_response = await file(cData);
console.log(response.data);
this.$store.commit('setFolder', response.data.folders);
this.$store.commit('setFile', file_response.data.files);
this.$store.commit('setCur', response.data.cur);
this.$store.commit('setParent', response.data.parentPath);
this.folders = this.$store.getters.folderL;
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error.response.data);
}
},
async deleteF() {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
folder_name: this.curfName.folder_name,
};
const response = await deleteFolder(cData);
console.log(response);
this.$store.commit('setFolder', response.data.folders);
this.folders = this.$store.getters.folderL;
} catch (error) {
console.log('에러');
console.log(error.response.data);
} finally {
this.curfName = '';
}
},
async transferF(folderName) {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.curfName.folder_name,
isfolder: true,
newPath: this.$store.state.cur + folderName + '/',
};
const response = await moveFolder(cData);
console.log(response);
this.$store.commit('setFolder', response.data.folders);
this.folders = this.$store.getters.folderL;
} catch (error) {
console.log('에러');
console.log(error.response.data);
} finally {
this.curfName = {};
this.dialog2 = false;
}
},
async upload_file() {
try {
const formData = new FormData();
formData.append('file', this.uploadedfile);
formData.append('user_id', this.$store.state.id);
formData.append('cur', this.$store.state.cur);
const currentData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
};
console.log(currentData);
const response = await uploadFile(formData);
const filelist = await file(currentData);
console.log(filelist.data.files);
this.$store.commit('setFile', filelist.data.files);
console.log(this.$store.getters.fileL);
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error);
}
},
async delete_file() {
try {
var itemlist = this.$store.getters.fileL;
const currentData = {
fileName: null,
user_id: null,
cur: this.$store.state.cur,
};
for (var i = 0; i < itemlist.length; i++) {
if (itemlist[i].file_name == this.cfilename.file_name) {
currentData.fileName = itemlist[i].file_name;
currentData.user_id = itemlist[i].user_id;
}
}
const filelistData = {
id: currentData.user_id,
cur: currentData.cur,
};
const response = await deleteFile(currentData);
setTimeout(function() {}, 500);
const filelist = await file(filelistData);
this.$store.commit('setFile', filelist.data.files);
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error);
}
},
async download_file() {
try {
const currentData = {
fileName: this.cfilename.file_name,
id: this.$store.state.id,
cur: this.$store.state.cur,
};
const result = await downloadFile(currentData);
console.log(result);
} catch (error) {
console.log('에러');
console.log(error);
}
},
async delete_favorite() {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.curfName.folder_name,
};
console.log(cData);
const response = await delFavorite(cData);
this.$store.commit('setFolder', response.data.folders);
} catch (error) {
console.log('에러');
}
},
async add_favorite() {
try {
const cData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.curfName.folder_name,
};
console.log(cData);
const response = await addFavorite(cData);
this.$store.commit('setFolder', response.data.folders);
} catch (error) {
console.log('에러');
}
},
async delete_favorite_file() {
try {
const fData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.cfilename.file_name,
};
console.log(fData);
const response = await delFavoriteFile(fData);
this.$store.commit('setFile', response.data.files);
} catch (error) {
console.log('에러');
}
},
async add_favorite_file() {
try {
const fData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.cfilename.file_name,
};
console.log(fData);
const response = await addFavoriteFile(fData);
this.$store.commit('setFile', response.data.files);
} catch (error) {
console.log('에러');
}
},
async transferFile(folderName) {
try {
const fData = {
id: this.$store.state.id,
cur: this.$store.state.cur,
name: this.cfilename.file_name,
isfolder: false,
newPath: this.$store.state.cur + folderName + '/',
};
const response = await moveFile(fData);
console.log(response);
this.$store.commit('setFile', response.data.files);
this.files = this.$store.getters.fileL;
} catch (error) {
console.log('에러');
console.log(error.response.data);
} finally {
this.cfilename = {};
this.dialog3 = false;
}
},
async file_detail() {
try {
const currentData = {
id: this.cfilename.user_id,
cur: this.cfilename.location,
fileName: this.cfilename.file_name,
};
const detailData = await detailFile(currentData);
this.current_filename = detailData.data.file_name;
this.current_filedata = detailData.data.content;
console.log(this.current_filename);
console.log(this.current_filedata);
} catch (error) {
console.log('에러');
console.log(error);
}
},
async modify_file() {
try {
const modifyData = {
user_id: this.cfilename.user_id,
cur: this.cfilename.location,
name: this.current_filename,
content: this.current_filedata,
};
const result = await modifyFile(modifyData);
const after_data = {
id: this.cfilename.user_id,
cur: this.cfilename.location,
fileName: this.current_filename,
};
const detailData = await detailFile(after_data);
} catch (error) {
console.log('에러');
console.log(error);
}
},
show(folderObj, e) {
e.preventDefault();
this.curfName = folderObj;
this.showMenu = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.showMenu = true;
});
},
showF(fileObj, e) {
e.preventDefault();
this.cfilename = fileObj;
this.showMenuF = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.showMenuF = true;
});
},
detailF(fileObj, e) {
e.preventDefault();
this.cfilename = fileObj;
this.showdetailF = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.showdetailF = true;
});
},
},
};
</script>
......@@ -67,9 +67,10 @@ export default new VueRouter({
component: () => import('../views/Feedback.vue'),
},
{
path: '/folder',
path: '/file/:id',
name: 'Folder',
component: () => import('../views/FolderPage.vue'),
props: true,
},
],
});
......
......@@ -11,6 +11,8 @@ export default new Vuex.Store({
cur: '/',
parent: '/',
recentList: [],
favFolderList: [],
favFileList: [],
},
mutations: {
setId(state, userid) {
......@@ -34,6 +36,12 @@ export default new Vuex.Store({
setRecentList(state, list) {
state.recentList = list;
},
setfavFolderList(state, fflist) {
state.favFolderList = fflist;
},
setfavFileList(state, fflist) {
state.favFileList = fflist;
},
},
getters: {
isLogin(state) {
......@@ -60,5 +68,11 @@ export default new Vuex.Store({
setFile(state, filelist) {
state.files = filelist;
},
favFolderL(state) {
return state.favFolderList;
},
favFileL(state) {
return state.favFileList;
},
},
});
......
<template>
<div>
<v-toolbar flat>
<v-toolbar-title>즐겨찾기</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="즐겨찾기 검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<v-list-item v-for="item in items" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon>{{ item.iconClass }}</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-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item v-for="item in items2" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon> {{ item.iconClass }}</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-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
<Fav_list></Fav_list>
</div>
</template>
<script>
import Fav_list from '../components/Fav_list';
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',
components: {
Fav_list,
},
],
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>
<style></style>
......
<template>
<div>
<folderc></folderc>
</div>
</template>
<script>
import folderc from '../components/folderc';
export default {
components: {
folderc,
},
};
</script>
<style></style>
......