feat(ui): tasks list

Author: Guillaume Chau

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

@@ -20,7 +20,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: false
+      default: null
     }
   }
 }

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

@@ -115,7 +115,7 @@ export default {
       editingPath: false,
       editedPath: '',
       folderCurrent: {},
-      foldersFavorite: [],
+      foldersFavorite: []
     }
   },
 

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

@@ -35,7 +35,7 @@ export default {
 
   computed: {
     query: {
-      get() {
+      get () {
         return this.searchStore.query
       },
       set (value) {

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

@@ -91,8 +91,14 @@ export default {
       await this.$apollo.mutate({
         mutation: CONSOLE_LOGS_CLEAR,
         update: store => {
-          store.writeQuery({ query: CONSOLE_LOGS, data: { consoleLogs: [] }})
-          store.writeQuery({ query: CONSOLE_LOG_LAST, data: { consoleLogLast: null }})
+          store.writeQuery({
+            query: CONSOLE_LOGS,
+            data: { consoleLogs: [] }
+          })
+          store.writeQuery({
+            query: CONSOLE_LOG_LAST,
+            data: { consoleLogLast: null }
+          })
         }
       })
       this.close()

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

@@ -0,0 +1,44 @@
+<template>
+  <div class="nav-content">
+    <NavList
+      :items="items"
+    >
+      <template slot-scope="props">
+        <slot v-bind="props"/>
+      </template>
+    </NavList>
+
+    <div class="content vue-ui-disable-scroll">
+      <router-view/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.nav-content
+  width 100%
+  height 100%
+  display grid
+  grid-template-columns 300px 1fr
+  grid-template-rows 1fr
+  grid-template-areas "nav content"
+  > .nav-list
+    grid-area nav
+  > .content
+    grid-area content
+    overflow-x hidden
+    overflow-y auto
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="nav-list vue-ui-disable-scroll">
+    <div class="content">
+      <div
+        v-for="item of items"
+        :key="item.id"
+        @click="currentRoute = item.route"
+      >
+        <slot
+          :item="item"
+          :selected="item.route === currentRoute"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isSameRoute, isIncludedRoute } from '../util/route'
+
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+
+  computed: {
+    currentRoute: {
+      get () {
+        const currentRoute = this.$route
+        const item = this.items.find(
+          item => isIncludedRoute(currentRoute, this.$router.resolve(item.route).route)
+        )
+        return item && item.route
+      },
+      set (route) {
+        if (!isSameRoute(this.$route, route)) {
+          this.$router.push(route)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.nav-list
+  overflow-x none
+  overflow-y auto
+  background darken($color-light-background, 2%)
+</style>

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

@@ -105,7 +105,6 @@ export default {
       max-width 400px
       margin-top 24px
 
-
   &:not(.loading)
     .vue-ui-loading-indicator
       >>> .animation

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

@@ -76,7 +76,7 @@ export default {
   data () {
     return {
       pluginDetails: null,
-      pluginLogo:! null,
+      pluginLogo: null,
       updating: false
     }
   },

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

@@ -126,7 +126,6 @@ export default {
 }
 </script>
 
-
 <style lang="stylus" scoped>
 @import "~@/style/imports"
 

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

@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="task-item list-item"
+    :class="{
+      selected
+    }"
+  >
+    <div class="content">
+      <ItemLogo
+        icon="assignment"
+        v-tooltip="status"
+      />
+
+      <ListItemInfo
+        :name="task.name"
+        :description="task.description || status"
+        :selected="selected"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    task: {
+      type: Object,
+      required: true
+    },
+
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    status () {
+      return this.$t(`types.task.status.${this.task.status}`)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.task-item
+  padding $padding-item
+
+  .content
+    h-box()
+    box-center()
+
+  .list-item-info
+    flex 100% 1 1
+    width 0
+</style>

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

@@ -0,0 +1,32 @@
+const cwd = require('./cwd')
+const folders = require('./folders')
+
+let tasks = []
+
+function list (context) {
+  const file = cwd.get()
+  const pkg = folders.readPackage(file, context)
+  tasks = []
+  if (pkg.scripts) {
+    tasks = Object.keys(pkg.scripts).map(
+      name => ({
+        id: `${file}${name}`,
+        name,
+        command: pkg.scripts[name],
+        status: 'idle'
+      })
+    )
+  }
+  return tasks
+}
+
+function findOne (id, context) {
+  return tasks.find(
+    t => t.id === id
+  )
+}
+
+module.exports = {
+  list,
+  findOne
+}

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

@@ -10,6 +10,7 @@ const projects = require('./connectors/projects')
 const progress = require('./connectors/progress')
 const logs = require('./connectors/logs')
 const plugins = require('./connectors/plugins')
+const tasks = require('./connectors/tasks')
 
 // Prevent code from exiting server process
 exit.exitProcess = false
@@ -44,7 +45,9 @@ module.exports = {
     projectCurrent: (root, args, context) => projects.getCurrent(context),
     projectCreation: (root, args, context) => projects.getCreation(context),
     pluginInstallation: (root, args, context) => plugins.getInstallation(context),
-    plugin: (root, { id }, context) => plugins.findOne(id, context)
+    plugin: (root, { id }, context) => plugins.findOne(id, context),
+    tasks: (root, args, context) => tasks.list(context),
+    task: (root, { id }, context) => tasks.findOne(id, context)
   },
 
   Mutation: {

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

@@ -154,6 +154,21 @@ type Progress {
   args: [String]
 }
 
+type Task {
+  id: ID!
+  status: TaskStatus!
+  name: String!
+  command: String!
+  description: String
+}
+
+enum TaskStatus {
+  idle
+  running
+  done
+  error
+}
+
 type Query {
   progress (id: ID!): Progress
   cwd: String!
@@ -166,6 +181,8 @@ type Query {
   projectCreation: ProjectCreation
   pluginInstallation: PluginInstallation
   plugin (id: ID!): Plugin
+  tasks: [Task]
+  task (id: ID!): Task
 }
 
 type Mutation {

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

@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+query task ($id: ID!) {
+  task (id: $id) {
+    ...task
+  }
+}

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

@@ -0,0 +1,7 @@
+fragment task on Task {
+  id
+  status
+  name
+  command
+  description
+}

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

@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+query tasks {
+  tasks {
+    ...task
+  }
+}

packages/@vue/cli-ui/src/locales/en.json

@@ -90,6 +90,16 @@
       "plugin-update": "Updating {arg0}..."
     }
   },
+  "types": {
+    "task": {
+      "status": {
+        "idle": "Idle",
+        "running": "Running",
+        "done": "Done",
+        "error": "Error"
+      }
+    }
+  },
   "views": {
     "project-select": {
       "title": "Vue Project Manager",
@@ -223,7 +233,8 @@
       "title": "Project configuration"
     },
     "project-tasks": {
-      "title": "Project tasks"
+      "title": "Project tasks",
+      "heading": "Scripts"
     }
   }
 }

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

@@ -7,6 +7,7 @@ import ProjectPlugins from './views/ProjectPlugins.vue'
 import ProjectPluginsAdd from './views/ProjectPluginsAdd.vue'
 import ProjectConfiguration from './views/ProjectConfiguration.vue'
 import ProjectTasks from './views/ProjectTasks.vue'
+import ProjectTaskDetails from './views/ProjectTaskDetails.vue'
 import ProjectSelect from './views/ProjectSelect.vue'
 import ProjectCreate from './views/ProjectCreate.vue'
 import About from './views/About.vue'
@@ -48,7 +49,15 @@ const router = new Router({
         {
           path: 'tasks',
           name: 'project-tasks',
-          component: ProjectTasks
+          component: ProjectTasks,
+          children: [
+            {
+              path: ':id',
+              name: 'project-task-details',
+              component: ProjectTaskDetails,
+              props: true
+            }
+          ]
         }
       ]
     },

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

@@ -98,3 +98,6 @@ ansi-colors('white', $vue-ui-color-light)
 .no-margin-y
   margin-top 0
   margin-bottom 0
+
+.fill-height
+  height 100%