From 8399838538c2f74ce84926e4d8ba060bbcefa357 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Mon, 5 Mar 2018 17:53:21 +0100
Subject: [PATCH] feat(ui): Project Create details form

---
 .../@vue/cli-ui/src/components/StatusBar.vue  |  50 +++-
 .../@vue/cli-ui/src/components/StepWizard.vue |  78 +++++++
 .../@vue/cli-ui/src/graphql-api/type-defs.js  |   7 +
 packages/@vue/cli-ui/src/router.js            |   6 +
 packages/@vue/cli-ui/src/style/main.styl      |   9 +
 .../@vue/cli-ui/src/views/ProjectCreate.vue   | 214 ++++++++++++++++++
 .../@vue/cli-ui/src/views/ProjectSelect.vue   |  32 +--
 7 files changed, 377 insertions(+), 19 deletions(-)
 create mode 100644 packages/@vue/cli-ui/src/components/StepWizard.vue
 create mode 100644 packages/@vue/cli-ui/src/views/ProjectCreate.vue

diff --git a/packages/@vue/cli-ui/src/components/StatusBar.vue b/packages/@vue/cli-ui/src/components/StatusBar.vue
index 690951eca..8d9bd7407 100644
--- a/packages/@vue/cli-ui/src/components/StatusBar.vue
+++ b/packages/@vue/cli-ui/src/components/StatusBar.vue
@@ -1,10 +1,39 @@
 <template>
   <div class="status-bar">
-    <div class="section current-project">
-      <span>Current Project:</span>
+    <div
+      class="section current-project"
+      v-tooltip="'Current project'"
+      @click="$emit('project')"
+    >
+      <VueIcon icon="work"/>
+      <span v-if="projectCurrent">{{ projectCurrent.name }}</span>
+      <span v-else class="label">No project</span>
     </div>
 
-    <div class="section console-log" v-tooltip="'Console'">
+    <ApolloQuery
+      :query="require('@/graphql/cwd.gql')"
+      class="section current-path"
+      v-tooltip="'Current Working Directory'"
+      @click.native="$emit('cwd')"
+    >
+      <ApolloSubscribeToMore
+        :document="require('@/graphql/cwdChanged.gql')"
+        :update-query="(previousResult, { subscriptionData }) => ({
+          cwd: subscriptionData.data.cwd
+        })"
+      />
+
+      <template slot-scope="{ result: { data } }">
+        <VueIcon icon="folder"/>
+        <span v-if="data">{{ data.cwd }}</span>
+      </template>
+    </ApolloQuery>
+
+    <div
+      class="section console-log"
+      v-tooltip="'Console'"
+      @click="$emit('console')"
+    >
       <VueIcon icon="subtitles"/>
       <span>{{ consoleLog }}</span>
     </div>
@@ -12,11 +41,18 @@
 </template>
 
 <script>
+import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
+
 export default {
   data () {
     return {
-      consoleLog: ''
+      consoleLog: '',
+      projectCurrent: null
     }
+  },
+
+  apollo: {
+    projectCurrent: PROJECT_CURRENT
   }
 }
 </script>
@@ -42,4 +78,10 @@ export default {
     &:hover
       opacity 1
       background lighten(@background, 40%)
+
+    > .vue-icon + *
+      margin-left 4px
+
+    .label
+      color lighten($vue-color-dark, 20%)
 </style>
diff --git a/packages/@vue/cli-ui/src/components/StepWizard.vue b/packages/@vue/cli-ui/src/components/StepWizard.vue
new file mode 100644
index 000000000..4de4fd390
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/StepWizard.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="step-wizard">
+    <div class="header">
+      <div v-if="title" class="title">{{ title }}</div>
+    </div>
+
+    <VueTabs
+      ref="tabs"
+      class="main-tabs"
+      group-class="accent"
+    >
+      <slot/>
+    </VueTabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null
+    }
+  },
+
+  methods: {
+    next () {
+      const tabs = this.$refs.tabs
+      tabs.activateChild(tabs.activeChildIndex + 1)
+    },
+    previous () {
+      const tabs = this.$refs.tabs
+      tabs.activateChild(tabs.activeChildIndex - 1)
+    },
+  }
+}
+</script>
+
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.step-wizard
+  v-box()
+
+  .main-tabs
+    height 100%
+    flex auto 1 1
+
+  .header,
+  >>> .tabs
+    background $vue-color-light-neutral
+
+  >>> .tabs-content
+    height 0
+
+  &,
+  >>> .vue-tab,
+  >>> .vue-tab-content
+    height 100%
+
+  >>> .vue-tab-content
+    overflow-y auto
+    v-box()
+
+    > .content
+      flex 100% 1 1
+
+    > .actions-bar
+      justify-content space-between
+
+  .title
+    padding 12px
+    font-size 24px
+    text-align center
+    font-weight lighter
+
+</style>
diff --git a/packages/@vue/cli-ui/src/graphql-api/type-defs.js b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
index 31adbcc7a..5397ae677 100644
--- a/packages/@vue/cli-ui/src/graphql-api/type-defs.js
+++ b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
@@ -16,6 +16,11 @@ enum ConsoleLogType {
   done
 }
 
+enum PackageManager {
+  npm
+  yarn
+}
+
 type Folder {
   name: String!
   path: String!
@@ -36,6 +41,8 @@ type Project {
 
 input ProjectCreateInput {
   path: String!
+  force: Boolean!
+  packageManager: PackageManager
 }
 
 input ProjectImportInput {
diff --git a/packages/@vue/cli-ui/src/router.js b/packages/@vue/cli-ui/src/router.js
index a5ab98a27..cc4763c09 100644
--- a/packages/@vue/cli-ui/src/router.js
+++ b/packages/@vue/cli-ui/src/router.js
@@ -4,6 +4,7 @@ import { apolloClient } from './vue-apollo'
 
 import Home from './views/Home.vue'
 import ProjectSelect from './views/ProjectSelect.vue'
+import ProjectCreate from './views/ProjectCreate.vue'
 import About from './views/About.vue'
 
 import PROJECT_CURRENT from './graphql/projectCurrent.gql'
@@ -26,6 +27,11 @@ const router = new Router({
       name: 'project-select',
       component: ProjectSelect
     },
+    {
+      path: '/project/create',
+      name: 'project-create',
+      component: ProjectCreate
+    },
     {
       path: '/about',
       name: 'about',
diff --git a/packages/@vue/cli-ui/src/style/main.styl b/packages/@vue/cli-ui/src/style/main.styl
index b8142c534..7b4a749d4 100644
--- a/packages/@vue/cli-ui/src/style/main.styl
+++ b/packages/@vue/cli-ui/src/style/main.styl
@@ -11,3 +11,12 @@ body,
   margin 24px auto
   width 48px
   height @width
+
+.actions-bar
+  padding 12px
+  background $color-light-background
+  h-box()
+  box-center()
+
+  > *
+    space-between-x(12px)
diff --git a/packages/@vue/cli-ui/src/views/ProjectCreate.vue b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
new file mode 100644
index 000000000..2d99dacc3
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="project-create page">
+    <div class="content">
+      <StepWizard
+        ref="wizard"
+        title="Create a new project"
+      >
+        <VueTab
+          id="details"
+          label="Details"
+          icon="subject"
+        >
+          <div class="content">
+            <div class="project-details vue-grid col-1 big-gap">
+              <VueFormField
+                title="Project folder"
+              >
+                <VueInput
+                  v-model="folder"
+                  placeholder="my-app"
+                  icon-left="folder"
+                  class="big"
+                />
+
+                <VueButton
+                  label="Change current working directory"
+                  :to="{ name: 'project-select', query: { tab: 'create' } }"
+                />
+              </VueFormField>
+
+              <VueFormField
+                title="Package manager"
+              >
+                <VueSelect
+                  v-model="packageManager"
+                >
+                  <VueSelectButton
+                    :value="undefined"
+                    label="Default"
+                  />
+                  <VueSelectButton
+                    value="npm"
+                    label="npm"
+                  />
+                  <VueSelectButton
+                    value="yarn"
+                    label="yarn"
+                  />
+                </VueSelect>
+              </VueFormField>
+
+              <VueFormField
+                title="Additional options"
+              >
+                <VueSwitch
+                  v-model="force"
+                  class="extend-left"
+                >
+                  Overwrite target directory if it exists
+                </VueSwitch>
+              </VueFormField>
+            </div>
+          </div>
+
+          <div class="actions-bar">
+            <VueButton
+              :to="{ name: 'project-select' }"
+              icon-left="close"
+              label="Cancel"
+              class="big"
+            />
+
+            <VueButton
+              icon-right="arrow_forward"
+              label="Next"
+              class="big primary"
+              :disabled="!detailsValid"
+              @click="$refs.wizard.next()"
+            />
+          </div>
+        </VueTab>
+
+        <VueTab
+          id="presets"
+          label="Presets"
+          icon="check_circle"
+          :disabled="!detailsValid"
+        >
+          <div class="content">
+
+          </div>
+
+          <div class="actions-bar">
+            <VueButton
+              icon-left="arrow_back"
+              label="Previous"
+              class="big"
+              @click="$refs.wizard.previous()"
+            />
+
+            <VueButton
+              icon-right="arrow_forward"
+              label="Next"
+              class="big primary"
+              @click="$refs.wizard.next()"
+            />
+          </div>
+        </VueTab>
+
+        <VueTab
+          id="features"
+          label="Features"
+          icon="widgets"
+          :disabled="!detailsValid"
+        >
+          <div class="content">
+
+          </div>
+
+          <div class="actions-bar">
+            <VueButton
+              icon-left="arrow_back"
+              label="Previous"
+              class="big"
+              @click="$refs.wizard.previous()"
+            />
+
+            <VueButton
+              icon-right="arrow_forward"
+              label="Next"
+              class="big primary"
+              @click="$refs.wizard.next()"
+            />
+          </div>
+        </VueTab>
+
+        <VueTab
+          id="config"
+          label="Configuration"
+          icon="settings_applications"
+          :disabled="!detailsValid"
+        >
+          <div class="content">
+
+          </div>
+
+          <div class="actions-bar">
+            <VueButton
+              icon-left="arrow_back"
+              label="Previous"
+              class="big"
+              @click="$refs.wizard.previous()"
+            />
+
+            <VueButton
+              icon-left="done"
+              label="Create project"
+              class="big primary"
+            />
+          </div>
+        </VueTab>
+      </StepWizard>
+    </div>
+
+    <StatusBar cwd/>
+  </div>
+</template>
+
+<script>
+import StepWizard from '../components/StepWizard'
+import StatusBar from '../components/StatusBar'
+
+export default {
+  components: {
+    StepWizard,
+    StatusBar
+  },
+
+  data () {
+    return {
+      folder: '',
+      force: false,
+      packageManager: undefined
+    }
+  },
+
+  computed: {
+    detailsValid () {
+      return !!this.folder
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-create
+  display grid
+  grid-template-columns 1fr
+  grid-template-rows auto 28px
+  grid-template-areas "content" "footer"
+
+.content
+  grid-area content
+
+.status-bar
+  grid-area footer
+
+.project-details
+  max-width 400px
+  width 100%
+  margin 42px auto
+</style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectSelect.vue b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
index 8d781a109..0230f572d 100644
--- a/packages/@vue/cli-ui/src/views/ProjectSelect.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="project-select page">
-    <VueTabs class="main-tabs" group-class="accent">
+    <VueTabs
+      :tab-id.sync="tab"
+      class="main-tabs"
+      group-class="accent"
+    >
       <VueTab
         id="existing"
         label="Projects"
@@ -16,11 +20,12 @@
       >
         <FolderExplorer/>
 
-        <div class="actions">
+        <div class="actions-bar">
           <VueButton
             icon-left="add"
-            label="Create new project here"
+            label="Create a new project here"
             class="big primary"
+            :to="{ name: 'project-create' }"
           />
         </div>
       </VueTab>
@@ -32,7 +37,7 @@
       >
         <FolderExplorer/>
 
-        <div class="actions">
+        <div class="actions-bar">
           <VueButton
             icon-left="unarchive"
             label="Import this folder"
@@ -59,12 +64,18 @@ export default {
 
   data () {
     return {
-      folderCurrent: {}
+      folderCurrent: {},
+      tab: undefined
     }
   },
 
   apollo: {
     folderCurrent: FOLDER_CURRENT
+  },
+
+  async mounted () {
+    await this.$nextTick()
+    this.tab = this.$route.query.tab
   }
 }
 </script>
@@ -76,11 +87,8 @@ export default {
   height 100%
   >>> .tabs
     background $vue-color-light-neutral
-    .vue-icon
-      width 24px
-      height @width
 
-  >>>.tabs-content
+  >>> .tabs-content
     height 0
 
 .vue-tab,
@@ -95,12 +103,6 @@ export default {
 .folder-explorer
   flex 100% 1 1
 
-.actions
-  padding 12px
-  background $color-light-background
-  h-box()
-  box-center()
-
 .project-select
   height 100%
 </style>