From 5cac120de2d9a5e7fbcc26bd6220a479f4651d2b Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Wed, 9 Aug 2017 23:54:53 +0200
Subject: [PATCH] :sparkles: Site > File Tree > Add folder toggle

---
 site/src/components/connexion/script.js             |  4 ----
 site/src/components/files-tree-file/template.html   |  2 +-
 site/src/components/files-tree-folder/index.vue     |  2 +-
 site/src/components/files-tree-folder/script.js     | 12 ++++++++++++
 site/src/components/files-tree-folder/style.styl    |  2 ++
 site/src/components/files-tree-folder/template.html |  8 +++++---
 site/src/components/files-tree/script.js            | 11 -----------
 site/src/utils/FileTree.js                          | 11 +++++------
 8 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/site/src/components/connexion/script.js b/site/src/components/connexion/script.js
index d1b05ac..f951f51 100644
--- a/site/src/components/connexion/script.js
+++ b/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)
             })
         }
     }
diff --git a/site/src/components/files-tree-file/template.html b/site/src/components/files-tree-file/template.html
index bc4d6e3..51a69b7 100644
--- a/site/src/components/files-tree-file/template.html
+++ b/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>
\ No newline at end of file
diff --git a/site/src/components/files-tree-folder/index.vue b/site/src/components/files-tree-folder/index.vue
index a6fe49a..246515d 100644
--- a/site/src/components/files-tree-folder/index.vue
+++ b/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>
\ No newline at end of file
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file
diff --git a/site/src/components/files-tree-folder/script.js b/site/src/components/files-tree-folder/script.js
index 2ec245f..698292f 100644
--- a/site/src/components/files-tree-folder/script.js
+++ b/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
+        }
     }
 }
\ No newline at end of file
diff --git a/site/src/components/files-tree-folder/style.styl b/site/src/components/files-tree-folder/style.styl
index e69de29..5ed3174 100644
--- a/site/src/components/files-tree-folder/style.styl
+++ b/site/src/components/files-tree-folder/style.styl
@@ -0,0 +1,2 @@
+.name
+    cursor pointer
\ No newline at end of file
diff --git a/site/src/components/files-tree-folder/template.html b/site/src/components/files-tree-folder/template.html
index bd36e35..1f75a1f 100644
--- a/site/src/components/files-tree-folder/template.html
+++ b/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>
\ No newline at end of file
diff --git a/site/src/components/files-tree/script.js b/site/src/components/files-tree/script.js
index d50cfde..faa2f74 100644
--- a/site/src/components/files-tree/script.js
+++ b/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)
-        }
     }
 }
\ No newline at end of file
diff --git a/site/src/utils/FileTree.js b/site/src/utils/FileTree.js
index 07bd2bf..9300b6e 100644
--- a/site/src/utils/FileTree.js
+++ b/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
     }