feat(ui): favorite projects

Author: Guillaume Chau

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

@@ -0,0 +1,9 @@
+<script>
+export default {
+  functional: true,
+
+  render (h, { props, data }) {
+    return h('div', data.scopedSlots.default({ list: props.list.filter(props.filter) }))
+  }
+}
+</script>

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

@@ -0,0 +1,9 @@
+<script>
+export default {
+  functional: true,
+
+  render (h, { props, data }) {
+    return h('div', data.scopedSlots.default({ list: props.list.slice().sort(props.compare) }))
+  }
+}
+</script>

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

@@ -7,14 +7,37 @@
       <template slot-scope="{ result: { data } }">
         <template v-if="data">
           <div v-if="data.projects.length">
-            <ProjectSelectListItem
-              v-for="project of data.projects"
-              :key="project.id"
-              :project="project"
-              @click.native="openProject(project)"
-              @remove="removeProject(project)"
-              @favorite="toggleFavorite(project)"
-            />
+            <ListFilter
+              v-for="favorite of [true, false]"
+              :key="favorite"
+              :list="data.projects"
+              :filter="item => !!item.favorite === favorite"
+            >
+              <template slot-scope="{ list }">
+                <div
+                  v-if="data.projects.find(item => item.favorite)"
+                  class="cta-text"
+                >
+                  {{ $t(`components.project-select-list.titles.${favorite ? 'favorite' : 'other'}`) }}
+                </div>
+
+                <ListSort
+                  :list="list"
+                  :compare="compareProjects"
+                >
+                  <template slot-scope="{ list }">
+                    <ProjectSelectListItem
+                      v-for="project of list"
+                      :key="project.id"
+                      :project="project"
+                      @click.native="openProject(project)"
+                      @remove="removeProject(project)"
+                      @favorite="toggleFavorite(project)"
+                    />
+                  </template>
+                </ListSort>
+              </template>
+            </ListFilter>
           </div>
           <div v-else class="vue-ui-empty">
             <VueIcon icon="attach_file" class="empty-icon"/>
@@ -30,6 +53,7 @@
 import PROJECTS from '../graphql/projects.gql'
 import PROJECT_OPEN from '../graphql/projectOpen.gql'
 import PROJECT_REMOVE from '../graphql/projectRemove.gql'
+import PROJECT_SET_FAVORITE from '../graphql/projectSetFavorite.gql'
 
 export default {
   methods: {
@@ -62,7 +86,17 @@ export default {
     },
 
     async toggleFavorite (project) {
-      // TODO
+      await this.$apollo.mutate({
+        mutation: PROJECT_SET_FAVORITE,
+        variables: {
+          id: project.id,
+          favorite: project.favorite ? 0 : 1
+        }
+      })
+    },
+
+    compareProjects (a, b) {
+      return a.name.localeCompare(b.name)
     }
   }
 }

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

@@ -325,6 +325,16 @@ function resetCwd (context) {
   }
 }
 
+function findOne (id, context) {
+  return context.db.get('projects').find({ id }).value()
+}
+
+function setFavorite ({ id, favorite }, context) {
+  context.db.get('projects').find({ id }).assign({ favorite }).write()
+
+  return findOne(id, context)
+}
+
 module.exports = {
   list,
   getCurrent,
@@ -336,5 +346,6 @@ module.exports = {
   import: importProject,
   open,
   remove,
-  resetCwd
+  resetCwd,
+  setFavorite
 }

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

@@ -63,6 +63,7 @@ module.exports = {
     projectOpen: (root, { id }, context) => projects.open(id, context),
     projectRemove: (root, { id }, context) => projects.remove(id, context),
     projectCwdReset: (root, args, context) => projects.resetCwd(context),
+    projectSetFavorite: (root, args, context) => projects.setFavorite(args, context),
     pluginInstall: (root, { id }, context) => plugins.install(id, context),
     pluginUninstall: (root, { id }, context) => plugins.uninstall(id, context),
     pluginInvoke: (root, { id }, context) => plugins.runInvoke(id, context),

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

@@ -0,0 +1,7 @@
+#import "./projectFragment.gql"
+
+mutation projectSetFavorite ($id: ID!, $favorite: Int!) {
+  projectSetFavorite (id: $id, favorite: $favorite) {
+    ...project
+  }
+}

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

@@ -36,7 +36,11 @@
       }
     },
     "project-select-list": {
-      "empty": "No existing projects"
+      "empty": "No existing projects",
+      "titles": {
+        "favorite": "Favorite projects",
+        "other": "Other projects"
+      }
     },
     "project-select-list-item": {
       "tooltips": {

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

@@ -36,7 +36,11 @@
       }
     },
     "project-select-list": {
-      "empty": "Aucun projet"
+      "empty": "Aucun projet",
+      "titles": {
+        "favorite": "Projets favoris",
+        "other": "Autres projets"
+      }
     },
     "project-select-list-item": {
       "tooltips": {