edit: ajout method open folder/file dans link pannel

src/components/LinkPannel.vue

@@ -2,6 +2,7 @@
   import CloseIcon from '../assets/icons/close.svg'
   import FolderIcon from '../assets/icons/folder.svg'
   import FileIcon from '../assets/icons/file.svg'
+  import ReloadIcon from '../assets/icons/reload.svg'
 </script>
 
 <template>
@@ -16,24 +17,35 @@
     <div class="windowTitle">
       <div class="titleContent">
         <p>./ExternalLinks.333</p>
-        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
+        <button type="button" class="titleBtn" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="dataFirstLoad" @click="dataFirstLoad">
+          <ReloadIcon name="close" class="icon"/>
+        </button>
+        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
     </div>
     <!--CONTENU-->
-    <div class="theMatrix" @mousedown.stop @touchstart.stop>
-      <div class="itemStyle" v-for="item in displayedItems" :key="item.caption">
+    <p id="emptyFolderText" class="itemCaption" v-show="emptyFolder">Oops! There is nothing to display here...</p>
+    <div class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
+      <div class="itemStyle" v-for="item in displayedItems" :key="item.caption" @click="openClickedFile(item)">
         <component :is="item.type==='folder'? FolderIcon : FileIcon" class="icon"/>
         <p class="itemCaption">{{item.caption}}</p>
       </div>
-
     </div>
   </div>
 </template>
 
 <style scoped>
   /*=====================LinkPannel CSS*/
+  #rootBtn{
+    margin-left: 60%;
+  }
+
+  #emptyFolderText{
+    pointer-events: none;
+  }
+
   .theMatrix{
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -43,6 +55,7 @@
     height: 100%;
     overflow-y: auto;
     align-items: center;
+    margin-left: 10px;
   }
 
   .itemStyle{
@@ -88,6 +101,9 @@
   #linkPannel{
     background-color: var(--dark-color);
     cursor:grab;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
   }
 
   /*=====================format pc*/
@@ -95,6 +111,10 @@
     #linkPannel{
       width:666px;
       height:666px;
+      margin-left: -333px;
+    }
+    #rootBtn{
+      margin-left: 390px;
     }
     .theMatrix{
       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -109,6 +129,9 @@
       width:333px;
       height:666px;
     }
+    #rootBtn{
+      margin-left: 59px;
+    }
     .theMatrix{
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       grid-auto-rows: 180px;
@@ -121,23 +144,37 @@
   const linksData = [
     {
       type: "folder",
-      caption: "Folder001"
-    },
-    {
+      caption: "Folder001",
+      children: [{
         type: "folder",
-      caption: "Folder002"
-    },
-    {
-      type: "folder",
-      caption: "Folder333"
-    },
-    {
-      type: "folder",
-      caption: "test"
+        caption: "test-open",
+        children: []
       },
       {
         type: "file",
-      caption: "READ-ME.txt"
+        caption: "READ-ME002.txt",
+        src: ""
+      }]
+    },
+    {
+      type: "folder",
+      caption: "Folder002",
+      children: []
+    },
+    {
+      type: "folder",
+      caption: "Folder333",
+      children: []
+    },
+    {
+      type: "folder",
+      caption: "test",
+      children: []
+    },
+    {
+      type: "file",
+      caption: "READ-ME.txt",
+      src: ""
     }
   ]
 
@@ -174,8 +211,30 @@
         observer.observe(container);
       },
       dataFirstLoad(){
-        this.displayedItems = linksData;
+        this.displayedItems = [...linksData];
         console.log(this.displayedItems);
+        this.isNotRoot = false;
+        this.checkEmptyFolder();
+      },
+      openClickedFile(e){
+        if(e.type === 'folder'){
+          this.displayedItems = [...e.children];
+          this.checkEmptyFolder();
+          this.isNotRoot = true;
+        } else {
+
+        }
+      },
+      checkEmptyFolder(){
+        if (this.displayedItems.length === 0){
+          this.emptyFolder = true;
+        }else{
+          this.emptyFolder = false;
+        }
+      },
+      closeClicked(){
+        this.dataFirstLoad();
+        this.$emit('close');
       }
   },
   data(){
@@ -184,7 +243,9 @@
       bodyWidth:0,
       coordX:0,
       coordY:0,
-      displayedItems:[]
+      displayedItems:[],
+      emptyFolder: false,
+      isNotRoot : false
     }
   },
   mounted(){