✨ Site > Add file tree

site/src/components/application/script.js

@@ -1,5 +1,6 @@
 import Connexion from '@/components/connexion'
 import ProjectsHub from '@/components/projects-hub'
+import Project from '@/components/project'
 
 export default
 {
@@ -8,7 +9,8 @@ export default
     components:
     {
         Connexion,
-        ProjectsHub
+        ProjectsHub,
+        Project
     },
 
     data()
@@ -27,7 +29,7 @@ export default
 
         project()
         {
-            return this.$store.state.currentProject
+            return this.$store.state.project
         }
     },
 

site/src/components/application/template.html

@@ -2,7 +2,5 @@
     {{ counter }}
     <connexion></connexion>
     <projects-hub></projects-hub>
-    <div v-if="project">
-        {{ project.name }}
-    </div>
+    <project v-if="project"></project>
 </div>

site/src/components/connexion/script.js

@@ -4,19 +4,71 @@ export default
 {
     name: 'connexion',
 
+    computed:
+    {
+        project()
+        {
+            return this.$store.state.project
+        }
+    },
+
+    watch:
+    {
+        project: 'onProjectChange'
+    },
+
     created()
     {
-        this.url = `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1571'}/projects`
-        this.socket = socketIoClient(this.url)
+        const projectsUrl = `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1571'}/projects`
+        this.projectsSocket = socketIoClient(projectsUrl)
 
-        this.socket.on('connect', () =>
+        this.projectsSocket.on('connect', () =>
         {
-            console.log('connected')
+            // console.log('projects connected')
         })
 
-        this.socket.on('update_projects', (data) =>
+        this.projectsSocket.on('update_projects', (data) =>
         {
+            // console.log('update_projects', data)
             this.$store.commit('updateProjects', data.all)
         })
+    },
+
+    methods:
+    {
+        onProjectChange(value)
+        {
+            const projectURL = `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1571'}/project/${value.slug}`
+
+            this.projectSocket = socketIoClient(projectURL)
+
+            this.projectSocket.on('connect', () =>
+            {
+                // console.log('project connected')
+            })
+
+            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/index.vue

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

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

@@ -0,0 +1,18 @@
+export default
+{
+    name: 'files-tree-file',
+
+    props:
+    {
+        depth: { type: Number, default: 0 },
+        content: { type: Object }
+    },
+
+    created()
+    {
+    },
+
+    methods:
+    {
+    }
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import FilesTreeFile from '@/components/files-tree-file'
+export default
+{
+    name: 'files-tree-folder',
+
+    components:
+    {
+        FilesTreeFile
+    },
+
+    props:
+    {
+        depth: { type: Number, default: 0 },
+        content: { type: Object }
+    },
+
+    created()
+    {
+    },
+
+    methods:
+    {
+    }
+}

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

@@ -0,0 +1,7 @@
+<div>
+    <div class="name" :style="{paddingLeft:depth * 20 + 'px'}">
+        {{ 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>

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

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

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

@@ -0,0 +1,60 @@
+import FilesTreeFile from '@/components/files-tree-file'
+import FilesTreeFolder from '@/components/files-tree-folder'
+import FileTree from '@/utils/FileTree'
+
+// const fileTree = new FileTree({ autoWash: true })
+// fileTree.addFolder('./toto', { hey: 'hoy' })
+// fileTree.addFolder('./toto/uhuh', { hey: 'a' })
+// fileTree.addFolder('./lorem')
+// fileTree.addFile('./test-1.txt')
+// fileTree.addFile('./test-2.txt')
+
+// window.setInterval(() =>
+// {
+//     fileTree.addFile('./toto/uhuh/' + new Date())
+//     fileTree.removeFolder('./lorem')
+//     fileTree.removeFile('./test-1.txt')
+// }, 1000)
+
+export default
+{
+    name: 'files-tree',
+
+    components:
+    {
+        FilesTreeFile,
+        FilesTreeFolder
+    },
+
+    data()
+    {
+        return {}
+    },
+
+    computed:
+    {
+        files()
+        {
+            return this.$store.state.files
+        }
+    },
+
+    watch:
+    {
+        files: 'onFilesChange'
+    },
+
+    created()
+    {
+    },
+
+    methods:
+    {
+        onFilesChange(newValue, oldValue)
+        {
+            console.log('onFilesChange')
+            console.log(newValue)
+            console.log(oldValue)
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+<div>
+    <files-tree-folder v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
+</div>

site/src/components/project/index.vue

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

site/src/components/project/script.js

@@ -0,0 +1,27 @@
+import FilesTree from '@/components/files-tree'
+
+export default
+{
+    name: 'project',
+
+    components:
+    {
+        FilesTree
+    },
+
+    computed:
+    {
+        project()
+        {
+            return this.$store.state.project
+        }
+    },
+
+    created()
+    {
+    },
+
+    methods:
+    {
+    }
+}

site/src/components/project/template.html

@@ -0,0 +1,4 @@
+<div>
+    {{ project.name }}
+    <files-tree></files-tree>
+</div>

site/src/components/projects-hub/script.js

@@ -19,7 +19,7 @@ export default
     {
         onProjectClick(projectSlug)
         {
-            this.$store.commit('setCurrentProject', projectSlug)
+            this.$store.commit('setProject', projectSlug)
         }
     }
 }