feat(ui): FolderExplorer

Author: Guillaume Chau

packages/@vue/cli-ui/src/App.vue

@@ -3,3 +3,8 @@
     <router-view/>
   </div>
 </template>
+
+<style lang="stylus">
+@import "~@vue/ui/dist/vue-ui.css"
+
+</style>

packages/@vue/cli-ui/src/components/FolderExplorer.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="folder-explorer">
+    <div class="toolbar">
+      <VueButton
+        class="icon-button"
+        icon-left="keyboard_arrow_up"
+        @click="openParentFolder"
+      />
+
+      <ApolloQuery
+        :query="require('@/graphql/cwd.gql')"
+        class="current-path"
+      >
+        <ApolloSubscribeToMore
+          :document="require('@/graphql/cwdChanged.gql')"
+          :update-query="cwdChangedUpdate"
+        />
+
+        <template slot-scope="{ result: { data } }">
+          <span v-if="data">{{ data.cwd }}</span>
+        </template>
+      </ApolloQuery>
+    </div>
+
+    <ApolloQuery
+      :query="require('@/graphql/folderCurrent.gql')"
+      class="folders"
+    >
+      <template slot-scope="{ result: { data } }">
+        <template v-if="data">
+          <FolderExplorerItem
+            v-for="folder of data.folderCurrent.children"
+            :key="folder.name"
+            :folder="folder"
+            @click.native="openFolder(folder)"
+          />
+        </template>
+      </template>
+    </ApolloQuery>
+  </div>
+</template>
+
+<script>
+import FolderExplorerItem from './FolderExplorerItem'
+import FOLDER_OPEN from '@/graphql/folderOpen.gql'
+import FOLDER_OPEN_PARENT from '@/graphql/folderOpenParent.gql'
+import FOLDER_CURRENT from '@/graphql/folderCurrent.gql'
+
+export default {
+  components: {
+    FolderExplorerItem,
+  },
+
+  methods: {
+    openFolder (folder) {
+      this.$apollo.mutate({
+        mutation: FOLDER_OPEN,
+        variables: {
+          path: folder.path
+        },
+        update: (store, { data: { folderOpen } }) => {
+          store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderOpen } })
+        }
+      })
+    },
+
+    openParentFolder (folder) {
+      this.$apollo.mutate({
+        mutation: FOLDER_OPEN_PARENT,
+        update: (store, { data: { folderOpenParent } }) => {
+          store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderOpenParent } })
+        }
+      })
+    },
+
+    cwdChangedUpdate (previousResult, { subscriptionData }) {
+      return {
+        cwd: subscriptionData.data.cwd
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.toolbar
+  padding 12px
+  background rgba($vue-color-light-neutral, .2)
+  h-box()
+  align-items center
+
+.current-path
+  flex 100% 1 1
+  ellipsis()
+  margin-left 12px
+</style>

packages/@vue/cli-ui/src/components/FolderExplorerItem.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="foder-explorer-item">
+    <VueIcon icon="folder" class="folder-icon big"/>
+    <div class="folder-name">{{ folder.name }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    folder: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.folder-icon
+  margin 0 4px
+  >>> svg
+    fill $vue-color-primary
+
+.folder-name
+  flex 100% 1 1
+  margin-left 12px
+  ellipsis()
+
+.foder-explorer-item
+  padding 12px
+  h-box()
+  align-items center
+  user-select none
+  cursor pointer
+
+  &:hover
+    background rgba($vue-color-primary, .1)
+</style>

packages/@vue/cli-ui/src/graphql-api/connectors/projects.js

@@ -0,0 +1,14 @@
+let currentProject = null
+
+function list (context) {
+  return context.db.get('projects').value()
+}
+
+function getCurrent (context) {
+  return currentProject
+}
+
+module.exports = {
+  list,
+  getCurrent
+}

packages/@vue/cli-ui/src/graphql-api/resolvers.js

@@ -1,6 +1,7 @@
 const channels = require('./channels')
 const cwd = require('./connectors/cwd')
 const folders = require('./connectors/folders')
+const projects = require('./connectors/projects')
 
 module.exports = {
   Folder: {
@@ -9,7 +10,9 @@ module.exports = {
 
   Query: {
     cwd: () => cwd.get(),
-    folderCurrent: (root, args, context) => folders.getCurrent(args, context)
+    folderCurrent: (root, args, context) => folders.getCurrent(args, context),
+    projects: (root, args, context) => projects.list(context),
+    projectCurrent: (root, args, context) => projects.getCurrent(context)
   },
 
   Mutation: {

packages/@vue/cli-ui/src/graphql/cwd.gql

@@ -0,0 +1,3 @@
+{
+  cwd
+}

packages/@vue/cli-ui/src/graphql/cwdChanged.gql

@@ -0,0 +1,3 @@
+subscription {
+  cwd: cwdChanged
+}

packages/@vue/cli-ui/src/graphql/folderCurrent.gql

@@ -0,0 +1,10 @@
+{
+  folderCurrent {
+    name
+    path
+    children {
+      name
+      path
+    }
+  }
+}

packages/@vue/cli-ui/src/graphql/folderOpen.gql

@@ -0,0 +1,10 @@
+mutation ($path: String!) {
+  folderOpen(path: $path) {
+    name
+    path
+    children {
+      name
+      path
+    }
+  }
+}

packages/@vue/cli-ui/src/graphql/folderOpenParent.gql

@@ -0,0 +1,10 @@
+mutation {
+  folderOpenParent {
+    name
+    path
+    children {
+      name
+      path
+    }
+  }
+}

packages/@vue/cli-ui/src/main.js

@@ -3,6 +3,9 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import { apolloProvider } from './vue-apollo'
+import VueUi from '@vue/ui'
+
+Vue.use(VueUi)
 
 Vue.config.productionTip = false
 

packages/@vue/cli-ui/src/style/imports.styl

@@ -0,0 +1 @@
+@import "~@vue/ui/src/style/imports"

packages/@vue/cli-ui/src/style/main.styl

@@ -1,11 +1,17 @@
 <template>
   <div class="home">
-
+    <FolderExplorer/>
   </div>
 </template>
 
 <script>
+import FolderExplorer from '../components/FolderExplorer'
+
 export default {
-  name: 'home'
+  name: 'home',
+
+  components: {
+    FolderExplorer
+  }
 }
 </script>