Add: 파일 이동 메뉴, 파일 드롭다운 메뉴, Fix: 파일 이동 api 버그

leehj050211 · Apr 7, 2022 · 0bac1cf · 0bac1cf
1 parent a7fa668
commit 0bac1cf
Show file tree

Hide file tree

Showing 8 changed files with 261 additions and 232 deletions.
diff --git a/public/css/pages/drive.css b/public/css/pages/drive.css
diff --git a/public/css/style.css b/public/css/style.css
@@ -113,6 +113,16 @@ body{
   background-size:cover;
   transition:background-color .5s;
 }
+@keyframes blocking_click{
+  0%{
+    pointer-events:none;
+  }
+  99%{
+  }
+  100%{
+    pointer-events:visible;
+  }
+}
 @font-face {
   font-family:'NotoSans';
   font-weight:normal;
@@ -218,6 +228,7 @@ summary{
   opacity:0;
   pointer-events:none;
   position: absolute;
+  z-index:1;
   text-align:center;
   font-size:1.6rem;
   font-weight:bold;
@@ -226,16 +237,16 @@ summary{
   background-color:var(--level-1);
   transition:all .25s;
 }
-.dropdown_content li{
+.dropdown_content .option{
   transition:.25s;
 }
-.dropdown_content li:first-child{
+.dropdown_content .option:first-child{
   border-radius:.5rem .5rem 0rem 0rem;
 }
-.dropdown_content li:last-child{
+.dropdown_content .option:last-child{
   border-radius:0rem 0rem .5rem .5rem;
 }
-.dropdown_content li:hover {
+.dropdown_content .option:hover {
   background-color:var(--hover);
 }
 .dropdown_content .option{
@@ -245,7 +256,7 @@ summary{
   cursor:pointer;
 }
 .dropdown_menu:hover .dropdown_content{
-  transform:translateY(0);
+  transform:translateY(0) !important;
   opacity:1;
   pointer-events:unset;
 }
@@ -254,7 +265,7 @@ summary{
 }
 .dropdown_menu > .select{
   position:relative;
-  z-index:1;
+  z-index:2;
   padding-right:2rem;
 }
 
@@ -300,6 +311,8 @@ input[type=number].year{
   width:15rem;
 }
 input[type=file]{
+  width:1px;
+  height:1px;
   position:fixed;
   opacity:0;
   pointer-events:none;
@@ -329,11 +342,11 @@ input[type=file]{
 }
 .delete, .button.off{
   color:var(--accent-text);
-  background-color:var(--red) !important;
+  background-color:var(--red);
 }
 .button.on{
   color:var(--accent-text);
-  background-color:var(--green) !important;
+  background-color:var(--green);
 }
 .inactive{
   color:var(--text) !important;

diff --git a/public/js/ajax.js b/public/js/ajax.js
@@ -8,12 +8,12 @@ const progress = per => {
             progressBar.classList.add('on');
             window.setTimeout(() => {
                 progressBar.style.left=`${per-100}%`;
-            }, 1)
+            }, 1);
         }
     } else {
-        if (per>=100) {
+        if (per >= 100) {
             window.setTimeout(() => {
-                if (progressBarFlag-1==0) {
+                if (progressBarFlag-1 == 0) {
                     progressBar.classList.add('remove');
                 }
                 window.setTimeout(() => {
@@ -58,7 +58,7 @@ const ajax = async ({
 }) => {
     $('.loading').classList.add("on");
     let res;
-    try{
+    try {
         const get = async () => {
             switch (method) {
                 case 'get':
@@ -75,7 +75,7 @@ const ajax = async ({
         if (!rawResPass) {
             res = res.data;
         }
-    }catch(err) {
+    } catch(err) {
         console.log(err);
         loadingInit();
         if (!err.response) {
@@ -87,7 +87,7 @@ const ajax = async ({
             return;
         }
         if (!err.response.data.statusCode) {
-            switch(err.response.status) {
+            switch (err.response.status) {
                 case 413:
                     showAlert(`HTTP ERROR ${err.response.status} 파일 크기가 너무 큽니다.`);
                     break;
@@ -99,7 +99,7 @@ const ajax = async ({
         if (errorCallback && errorCallback(err.response.data)) {
             return;
         }
-        switch(err.response.data.statusCode) {
+        switch (err.response.data.statusCode) {
             case 401:
                 popupOpen($('#login_box'));
                 break;
@@ -108,9 +108,9 @@ const ajax = async ({
         }
         return;
     }
-    try{
+    try {
         callBack(res);
-    }catch(err) {
+    } catch(err) {
         console.log(err);
         loadingInit();
         showAlert('알 수 없는 에러가 발생하였습니다');

diff --git a/public/js/drive/load.js b/public/js/drive/load.js
@@ -1,4 +1,4 @@
-let driveId, folderId;
+let driveId, folderId, lastFolderId, lastFileId;
 const dirBar = $('#dirs');
 
 const dirView = Vue.createApp({
@@ -39,12 +39,22 @@ const fileInfoView = Vue.createApp({
             drive: {
                 total: 0,
                 used: 0
-            }
+            },
+            mode: 'normal'
         }
     },
     methods: {
         formatBytes: function(bytes) {
             return formatBytes(bytes);
+        },
+        changeMode: function(mode) {
+            this.mode = mode;
+            lastFolderId = folderId;
+        },
+        cancleMode: function() {
+            this.mode = 'normal';
+            selectFile(-1);
+            enterDir(lastFolderId);
         }
     }
 }).mount('#file_info_bar');

diff --git a/public/js/drive/main.js b/public/js/drive/main.js
@@ -1,4 +1,7 @@
 const selectFile = fileIdx => {
+    if (fileInfoView.mode != 'normal') {
+        return;
+    }
     if (fileIdx == -1) {
         filesView.focus = -1;
         fileInfoView.file = {
@@ -193,4 +196,22 @@ createFolderBox.onsubmit = (event) => {
             loadFiles();
         }
     })
+}
+
+const moveFile = async (fileId) => {
+    if (!confirm('파일을 이동하시겠습니까?')) {
+        return;
+    }
+    ajax({
+        method:'post',
+        url:`drive/move/${driveId}/${lastFolderId}/${fileId}`,
+        payload:{
+            newFolderId:folderId
+        },
+        callBack:() => {
+            showToast("파일이 이동되었습니다");
+            fileInfoView.changeMode('normal');
+            refreshDir();
+        }
+    })
 }
diff --git a/src/drive/repository/file.repository.ts b/src/drive/repository/file.repository.ts
@@ -139,7 +139,7 @@ export class FileRepository extends Repository<File> {
         try {
             this.update({
                 driveId: new Buffer(driveId, 'hex'),
-                folderId: new Buffer(folderId, 'hex')
+                folderId: folderId === 'root'? null: new Buffer(folderId, 'hex')
             }, {
                 folderId: newFolderId === 'root'? null: new Buffer(newFolderId, 'hex')
             })

diff --git a/views/common/common.ejs b/views/common/common.ejs
@@ -18,7 +18,7 @@
     <h2>로그인</h2>
     <p>BSM Cloud를 이용하기위해 BSM 계정으로 로그인이 필요합니다.</p>
     <br>
-    <a href="https://bssm.kro.kr/login" class="main_button button">로그인 페이지 이동</a>
+    <a href="https://bssm.kro.kr/login" class="button accent main_button">로그인 페이지 이동</a>
 </div>
 
 <script src="/js/alert.js"></script>

diff --git a/views/pages/drive.ejs b/views/pages/drive.ejs
@@ -48,11 +48,10 @@
                     <object data="/resource/common/images/x.svg"></object>
                 </div>
                 <ul id="upload_menus">
-                    <li class="menu">
-                        <label for="upload_input">
-                            파일 업로드
-                            <input id="upload_input" type="file" onchange="uploadFile(this.files[0]);this.value=''">
-                        </label>
+                    <label for="upload_input" class="menu">
+                        파일 업로드
+                        <input id="upload_input" type="file" onchange="uploadFile(this.files[0]);this.value=''">
+                    </label>
                     </li>
                     <li class="menu" onclick="popupOpen($('#create_folder_box'))">
                         폴더 생성
@@ -80,21 +79,25 @@
                         <a :href="`https://drive.bssm.kro.kr/share/${file.fileId}`" target="blink">https://drive.bssm.kro.kr/share/{{file.fileId}}</a>
                     </details>
                 </div>
-                <div id="file_menu">
+                <div v-if="mode=='normal'" id="file_menu">
                     <button class="button main_button accent" :onclick="`downloadFile('${file.fileId}')`">다운로드</button>
-                    <button class="button" onclick="$('#file_sub_menu').toggleAttribute('open')">더보기</button>
+                    <span id="file_sub_menu" class="dropdown_menu">
+                        <span class="select button">더보기</span>
+                        <ul class="dropdown_content">
+                            <li class="option" onclick="popupOpen($('#share_file_box'))">파일 공유</li>
+                            <li class="option" v-on:click="changeMode('move')">파일 이동</li>
+                            <label class="option">
+                                업데이트
+                                <input type="file" :onchange="`uploadFile(this.files[0], '${file.fileId}');this.value=''`">
+                            </label>
+                            <li class="option delete" :onclick="`deleteFile('${file.fileId}')`">삭제</li>
+                        </ul>
+                    </span>
+                </div>
+                <div v-if="mode=='move'" id="file_menu">
+                    <button class="button main_button accent" :onclick="`moveFile('${file.fileId}')`">여기로 이동</button>
+                    <button class="button sub_button delete" v-on:click="cancleMode()">이동 취소</button>
                 </div>
-                <details id="file_sub_menu">
-                    <summary></summary>
-                    <div>
-                        <button class="button delete" :onclick="`deleteFile('${file.fileId}')`">삭제</button>
-                        <label class="button">
-                            업데이트
-                            <input type="file" :onchange="`uploadFile(this.files[0], '${file.fileId}');this.value=''`">
-                        </label>
-                        <button class="button" onclick="popupOpen($('#share_file_box'))">공유</button>
-                    </div>
-                </details>
             </div>
             <div id="drive_info">
                 <div id="total_used_bar">