initial commit

frontend/views/partials/TreeNode.vue

@@ -0,0 +1,78 @@
+<template>
+  <li class="node-tree">
+      <b-button :type="button_type" size="is-small" @click="toggleButton(node)">
+        <span class="icon"><i :class="icon"></i></span>
+      </b-button>
+      &nbsp; <a @click="$emit('selected', node)">{{ node.name }}</a>
+
+    <ul v-if="node.children && node.children.length">
+      <TreeNode v-for="child in node.children" :node="child" @selected="$emit('selected', $event)"></TreeNode>
+    </ul>
+  </li>
+</template>
+
+<script>
+import api from '../../api/api'
+
+export default {
+  name: "TreeNode",
+  props: {
+    node: Object
+  },
+  data() {
+    return {
+      active: false,
+      button_type: 'is-primary'
+    }
+  },
+  mounted() {
+    if (this.node.path == '/') {
+      this.$store.commit('resetTree')
+      this.toggleButton(this.node)
+    }
+  },
+  computed: {
+    icon() {
+      return {
+        'fas': true,
+        'mdi-24px': true,
+        'fa-plus': ! this.active,
+        'fa-minus': this.active,
+      }
+    },
+  },
+  methods: {
+    toggleButton(node) {
+      if (! this.active) {
+        this.active = true
+        this.button_type = 'is-primary is-loading'
+        api.getDir({
+          dir: node.path
+        })
+          .then(ret => {
+            this.$store.commit('updateTreeNode', {
+              children: _.filter(ret.files, ['type', 'dir']),
+              path: node.path,
+            })
+            this.$forceUpdate()
+            this.button_type = 'is-primary'
+          })
+          .catch(error => this.handleError(error))
+      } else {
+        this.active = false
+        this.$store.commit('updateTreeNode', {
+          children: [],
+          path: node.path,
+        })
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+a {
+  color: #373737;
+  font-weight: bold;
+}
+</style>