update 2024-05-07

src/app.js

@@ -209,11 +209,16 @@ serverApp.get("/group-redirect",
             headers: {
               Authorization: `Bearer ${req.session.accessToken}`,
               ConsistencyLevel: 'eventual',
+              withCredentials:true,
             },
           };
           for (let team of teams) {
             const item = await getFetch(endPoint + "/groups/"+team.id+"/drive/items/root/children", req.session.accessToken);
             const sharePoint = await getFetch(endPoint + "/groups/"+team.id+"/drive/SharePointIds", req.session.accessToken);
+            // const image = await axios.get(endPoint + "/groups/" + team.id + "/photo/$value", options);
+            // if (image && image.data) {
+            //   team.image = image.data;
+            // }
             if (sharePoint) {
               team.sharePoint = sharePoint;
             }

src/static/styles/custom.css

@@ -578,6 +578,13 @@ html, body {
   border-bottom: 1px solid #eeeeee;
   padding: 5 0;
 }
+
+.modal .modal-move-box .right-box .content .list > div.off > div:nth-child(2) > span:hover{
+  text-decoration: none;
+}
+.modal .modal-move-box .right-box .content .list > div.off {
+  opacity: 0.5;
+}
 .modal .modal-move-box .my-file:hover{
   background-color: #eeeeee;
 }
@@ -604,11 +611,17 @@ html, body {
   opacity: 0.5;
   cursor: default;
 }
+.modal .modal-move-box .button-box > div:nth-child(2):hover,
+.modal .modal-move-box .button-box > div:nth-child(1):not(.off):hover {
+  filter:brightness(1.1);
+  cursor: pointer;
+}
+
 .modal .modal-move-box .button-box > div:nth-child(1) {
   background-color: #5b5fc7;
   color: white;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px -0.75px;
-  cursor: pointer;
+  
 }
 .modal .modal-move-box .button-box > div:nth-child(2) {
   border: 1px solid rgb(209, 209, 209);
@@ -623,36 +636,62 @@ html, body {
   width: 100%;
   height: calc(100% - 40px);
 }
+
 .modal .modal-move-box .right-box .content .header{
   display:flex; 
   width:100%; 
   height: 40px; 
   align-items:center;
   border-bottom: 1px solid #eeeeee;
+  position: sticky;
+  top: 0;
+  background-color: white;
 }
+
+.modal .modal-move-box .right-box .content .list > div > div:nth-child(2) > span:hover{
+  text-decoration: underline;
+}
+.modal .modal-move-box .right-box .content .list > div > div:nth-child(2),
 .modal .modal-move-box .right-box .content .header > div:nth-child(2) {
   box-sizing: border-box;
   width: 300px;
   padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+.modal .modal-move-box .right-box .content .list > div > div:nth-child(3),
 .modal .modal-move-box .right-box .content .header > div:nth-child(3) {
   box-sizing: border-box;
   width: 150px;
   padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+.modal .modal-move-box .right-box .content .list > div > div:nth-child(4),
 .modal .modal-move-box .right-box .content .header > div:nth-child(4) {
   box-sizing: border-box;
   width: 150px;
   padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+.modal .modal-move-box .right-box .content .list > div > div:nth-child(1),
 .modal .modal-move-box .right-box .content .header > div:nth-child(1) {
   width: 40px;
   padding: 0 10px;
   box-sizing: border-box;
 }
+
+.modal .modal-move-box .right-box .content .list > div:not(.empty-box):hover {
+  cursor: pointer;
+  background-color: #eeeeee;
+}
+.modal .modal-move-box .right-box .content .list > div.off:hover{
+  cursor: default;
+}
 .modal .modal-move-box .right-box .content .header > div:not(:first-child) {
   cursor: pointer;
 }
@@ -680,4 +719,11 @@ html, body {
   height: 59px;
   border-bottom: 1px solid #eeeeee;
   align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu-button:hover{
+  cursor: pointer;
 }

src/views/hello.html

@@ -436,8 +436,7 @@
                                       <div class="access">빠른 엑세스</div>`;
                                       if (res) {
                                         const {joinedTeams, oneDrive, sites} = res;
-                                        const groupImageUrl = '/_api/siteiconmanager/getsitelogo?type=1';
-                                        
+                                        const groupImageUrl = "/_api/siteiconmanager/getsitelogo?type='1'";
                                         if (joinedTeams.teams.length > 0) {
                                           const jTeam = joinedTeams.teams;
                                           jTeam.forEach((obj, idx)=>{
@@ -532,100 +531,183 @@
           if (itemArray.length > 0) {
             let listStr = '';
             itemArray.forEach((obj, idx)=>{
-              let isFolder = obj.folder;
-              let className = '';
-              let date = '-';
-              let name = '-';
-              let modifyName = '-';
-              if (!isFolder) {
-                className = 'off';
-              }
-
-              if (obj.name) {
-                name = obj.name;
-              }
-
-              if (obj.lastModifiedBy && obj.lastModifiedBy.user && obj.lastModifiedBy.user.displayName) {
-                modifyName = obj.lastModifiedBy.user.displayName;
-              }
-
-              if (obj.lastModifiedDateTime) {
-                date = obj.lastModifiedDateTime.substring(0, obj.lastModifiedDateTime.indexOf('T'));
+              let path = '/drive/root';
+              if (obj.parentReference && obj.parentReference.path) {
+                path = obj.parentReference.path + '/' + obj.name;
               }
-              console.log(date);
-
-              const imgData = getFileImage(obj);
-              listStr += `<div class="move_row row_${idx} ${className}">
-                            <div><img src="${imgData[0]}" alt="${imgData[1]}" width="25" height="25"></div>
-                            <div>${name}</div>
-                            <div>${date}</div>
-                            <div>${modifyName}</div>
-                          </div>`;
-              })
-              $list.html(listStr);
+              listStr += getListStr(obj, idx, siteId, path);
+            })
+            $list.html(listStr);
           }
           else {
-            $list.html(`<div class="empty-box">
-                          <img src="/static/images/empty_folder_v2.svg" alt="이미지">
-                          <div>이 폴더는 비어 있습니다.</div>
-                        </div>`);
+            $list.html(getEmptyBox());
           }
-          // let firstFolder = "";
-
-          // //하위 파일들 중 첫번째 폴더 선택
-          // for (let item of itemArray) {
-          //   if (item.folder) {
-          //     firstFolder = item;
-          //     break;
-          //   }
-          // }
-
-          // if (firstFolder && firstFolder.folder.childCount) {
-          //     const id = firstFolder.id;
-          //     const name = firstFolder.name;
-          //     const parentPath = firstFolder.parentReference.path;
-          //     const path = parentPath + '/' + name;
-          //     str+= `<div> > </div><div class="panel-item on">${name}</div>`
-          //     panel.html(str);
-          //     drawMoveItems(siteId, path, id, itemArray);
-          // }
-          // else { // 없는 경우 빈폴더를 보여준다.
-          //   panel.html(str);  
-          //   const panelItem = panel.find('.panel-item');
-          //   panelItem.addClass('on');
-          //   panelItem.attr('onclick', '').unbind('click');
-          //   $list.html(`<div class="empty-box">
-          //                 <img src="/static/images/empty_folder_v2.svg" alt="이미지">
-          //                 <div>이 폴더는 비어 있습니다.</div>
-          //               </div>`);
-          // }
         }
         else {
-        
-          $list.html(`<div class="empty-box">
-                        <img src="/static/images/empty_folder_v2.svg" alt="이미지">
-                        <div>이 폴더는 비어 있습니다.</div>
-                      </div>`);
+          $list.html(getEmptyBox());
         }
       });
     }
 
-    function drawMoveItems(siteId, path, id) {
-      callApi('get', '/sites/' +siteId +'/drive/items/' + id + '/children', (childrenData)=>{
-          const items = childrenData.value;
+    function drawMoveItems(siteId, path) {
+        const $panel = $('.modal .modal-move-box .right-box .panel');
+        const imgSrc = $('#move_' + siteId+ ' img').attr('src');
+        const text = $('#move_' + siteId).text().trim();
+        let onOff = 'on';
+        if (path && path.includes('/drive/root:')) {
+          onOff = '';
+        }
+      
+        let str = "";
+        if (path && path.includes('/drive/root:')) {
+          str = `<div class="panel-item" onclick="drawMoveItems('${siteId}', '/drive/root')">`
+          if (text !== '내 파일') {
+            str +=`<img width="24" height="24" src="${imgSrc}" alt="아이콘">&nbsp;&nbsp;`
+          }
+          str +=`${text}</div>`;
+          let itemPath = path.replace('/drive/root:/', '');
+          let pathArr = itemPath.split('/');
+          if (pathArr && pathArr.length > 0) {
+            let directoryRoot = '';
+            pathArr.forEach((directory, idx)=>{
+              if (directory) {
+                onOff = '';
+                if (idx === pathArr.length - 1) {
+                  onOff = 'on'
+                }
+                directoryRoot += `/${directory}`;
+                str += `<div> > </div><div class="panel-item ${onOff}" onclick="drawMoveItems('${siteId}', '/drive/root:${directoryRoot}')">${directory}</div>`
+              }
+            })
+          }
+        }
+        else {
+          str = `<div class="panel-item on">`
+          if (text !== '내 파일') {
+            str +=`<img width="24" height="24" src="${imgSrc}" alt="아이콘">&nbsp;&nbsp;`
+          }
+          str +=`${text}</div>`;
+        }
+        
+        $panel.html(str);
+        const menuWidth =  $('.modal .modal-move-box .right-box').width() - 40;
+        const menuArr = $panel.children();
+        console.log(menuArr);
+        let totalWidth = 0;
+        for (let ii = 0; ii < menuArr.length; ii++) {
+          const menu = menuArr.eq(ii);
+          console.log('width:', menu.width() + 10, ', text:', menu.text().trim());
+          let gap = 10;
+          if ( menuArr.length-1 === ii) {
+            gap = 0;
+          }
+          totalWidth += menu.width() + gap;
+        }
+        if (menuWidth < totalWidth) {
+          let div = '<div class="toggle-button" style="display:none; position:absolute; top:100px; padding:10px; border:1px solid #eeeeee; width:auto;">';
+          for (let ii = 0; ii < menuArr.length; ii++) {
+            const menu = menuArr.eq(ii);
+            
+            totalWidth -= menu.width() + 10;
+            if (menu.attr('class') && menu.attr('class').trim() === 'panel-item') {
+                div += `<div onclick="${menu.attr('onclick')}">${menu.text().trim()}</div>`;
+            }
+            menu.css('display', 'none');
+
+            if (menuWidth - 30 >= totalWidth && !menu.attr('class')) {
+              console.log(menu.attr('class') !== 'panel-item');
+              console.log('마지막 메뉴 :',menu.text());
+              console.log('마지막 class :',menu.attr('class'));
+              div += '</div>';
+              break;
+            }
+          }
+          console.log(div);
+          $panel.prepend($(`<div class="menu-button"><img src="/static/images/dote.png" width="20" height="20"></div>
+            ${div}
+          `));
+          $('.menu-button').off('click');
+          $('.menu-button').on('click', ()=>{
+            $('.toggle-button').toggle();
+          })
+        }
+        callApi('get', '/sites/' + siteId + path, (parentData)=>{
           const $list = $('.modal-move-box .right-box .content .list');
-          console.log(items);
-          if (items && items.length > 0) {
-
+          if (parentData && parentData.folder && parentData.folder.childCount) {
+            callApi('get', '/sites/' +siteId +'/drive/items/' + parentData.id + '/children', (childrenData)=>{
+              const items = childrenData.value;
+              if (items && items.length > 0) {
+                let listStr = "";
+                for (let idx in items) {
+                  const item = items[idx];
+                  let itemPath = '/drive/root';
+                  if (item.parentReference && item.parentReference.path) {
+                    itemPath = item.parentReference.path + '/' + item.name;
+                  }
+                  listStr += getListStr(item, idx, siteId, itemPath);
+                }
+                $list.html(listStr);
+              }
+              else {
+                listStr = getListStr(null, null, siteId);
+                $list.html(listStr);
+              }
+            })
           }
           else {
-            $list.html(`<div class="empty-box">
-                          <img src="/static/images/empty_folder_v2.svg" alt="이미지">
-                          <div>이 폴더는 비어 있습니다.</div>
-                        </div>`)
+            $list.html(getEmptyBox());
           }
-      })
+          
+        })
+    }
+
+    function getListStr(obj, idx, siteId, itemPath) {
+      if (obj && !isNaN(Number(idx)) && siteId){
+        let isFolder = obj.folder;
+        let className = '';
+        let date = '-';
+        let name = '-';
+        let modifyName = '-';
+        let path = '/drive/root';
+        let method = `drawMoveItems('${siteId}', '${itemPath}')`;
+        if (!isFolder) {
+          className = 'off';
+          method = '';
+        }
+
+        if (obj.name) {
+          name = obj.name;
+        }
+
+        if (obj.lastModifiedBy && obj.lastModifiedBy.user && obj.lastModifiedBy.user.displayName) {
+          modifyName = obj.lastModifiedBy.user.displayName;
+        }
+
+        if (obj.lastModifiedDateTime) {
+          date = obj.lastModifiedDateTime.substring(0, obj.lastModifiedDateTime.indexOf('T'));
+        }
+
+        const imgData = getFileImage(obj);
+        return  `<div class="move_row row_${idx} ${className}">
+                      <div><img src="${imgData[0]}" alt="${imgData[1]}" width="25" height="25"></div>
+                      <div><span onclick="${method}">${name}</span></div>
+                      <div>${date}</div>
+                      <div>${modifyName}</div>
+                    </div>`;
+        
+      }
+      else {
+        return getEmptyBox();
+      }
     }
+
+    function getEmptyBox() {
+      return `<div class="empty-box">
+                <img src="/static/images/empty_folder_v2.svg" alt="이미지">
+                <div>이 폴더는 비어 있습니다.</div>
+              </div>`
+    }
+
     //새로고침 이벤트
     function refreshDrive() {
         const selectedDrive = $('.panel-item.on');
@@ -1203,7 +1285,7 @@
       group.empty();
       if (jsonData) {
           _listData = jsonData;
-          const groupImageUrl = '/_api/siteiconmanager/getsitelogo?type=1';
+          const groupImageUrl = "/_api/siteiconmanager/getsitelogo?type='1'";
           const {oneDrive, joinedTeams, sites} = jsonData;
           let parentId = '';
           let siteId = '';