✨ Site > File Tree > Add folder toggle

site/src/components/connexion/script.js

@@ -49,25 +49,21 @@ export default
 
             this.projectSocket.on('update_project', (data) =>
             {
-                // console.log('update_project', data)
                 this.$store.commit('updateFiles', data.files.items)
             })
 
             this.projectSocket.on('create_file', (data) =>
             {
-                // console.log('create_file', data)
                 this.$store.commit('createFile', data)
             })
 
             this.projectSocket.on('delete_file', (data) =>
             {
-                // console.log('delete_file', data)
                 this.$store.commit('deleteFile', data)
             })
 
             this.projectSocket.on('createVersion', (data) =>
             {
-                // console.log('createVersion', data)
             })
         }
     }

site/src/components/files-tree-file/template.html

@@ -1,5 +1,5 @@
 <div>
-    <div class="name" :style="{paddingLeft:depth * 20 + 'px'}">
+    <div class="name" :style="{ paddingLeft:depth * 20 + 'px' }">
         {{ content.name }}
     </div>
 </div>

site/src/components/files-tree-folder/index.vue

@@ -1,3 +1,3 @@
 <template src="./template.html"></template>
 <script src="./script.js"></script>
-<style src="./style.styl" lang="stylus"></style>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/files-tree-folder/script.js

@@ -1,4 +1,5 @@
 import FilesTreeFile from '@/components/files-tree-file'
+
 export default
 {
     name: 'files-tree-folder',
@@ -14,11 +15,22 @@ export default
         content: { type: Object }
     },
 
+    data()
+    {
+        return {
+            open: true
+        }
+    },
+
     created()
     {
     },
 
     methods:
     {
+        onNameClick()
+        {
+            this.open = !this.open
+        }
     }
 }

site/src/components/files-tree-folder/style.styl

@@ -0,0 +1,2 @@
+.name
+    cursor pointer

site/src/components/files-tree-folder/template.html

@@ -1,7 +1,9 @@
 <div>
-    <div class="name" :style="{paddingLeft:depth * 20 + 'px'}">
+    <div class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         {{ content.name }}
     </div>
-    <files-tree-folder v-for="folder of content.folders" :key="+ new Date()" :content="folder" :depth="depth + 1"></files-tree-folder>
-    <files-tree-file v-for="file of content.files" :key="+ new Date()" :content="file" :depth="depth + 1"></files-tree-file>
+    <div v-show="open">
+        <files-tree-folder v-for="folder of content.folders" :key="folder.name" :content="folder" :depth="depth + 1"></files-tree-folder>
+        <files-tree-file v-for="file of content.files" :key="file.data.path.full" :content="file" :depth="depth + 1"></files-tree-file>
+    </div>
 </div>

site/src/components/files-tree/script.js

@@ -39,22 +39,11 @@ export default
         }
     },
 
-    watch:
-    {
-        files: 'onFilesChange'
-    },
-
     created()
     {
     },
 
     methods:
     {
-        onFilesChange(newValue, oldValue)
-        {
-            console.log('onFilesChange')
-            console.log(newValue)
-            console.log(oldValue)
-        }
     }
 }

site/src/utils/FileTree.js

@@ -40,15 +40,14 @@ class FileTree
         // Ending `/`
         path = path.replace(/\/$/, '')
 
-        console.log(path)
-
-        // Starting `.`
-        path = path.replace(/^\./, '')
-
         // Starting `/`
         path = path.replace(/^\//, '')
 
-        path = './' + path
+        // Missing starting `./`
+        if(path !== '.' && path.search('./') !== 0)
+        {
+            path = './' + path
+        }
 
         return path
     }