feat(ui): search fields

Author: Guillaume Chau

packages/@vue/cli-ui/package.json

@@ -61,7 +61,7 @@
     "@vue/cli-plugin-eslint": "^3.0.0-rc.3",
     "@vue/cli-service": "^3.0.0-rc.3",
     "@vue/eslint-config-standard": "^3.0.0-rc.3",
-    "@vue/ui": "^0.4.5",
+    "@vue/ui": "^0.4.6",
     "ansi_up": "^2.0.2",
     "cross-env": "^5.1.5",
     "eslint": "^4.16.0",

packages/@vue/cli-ui/src/views/ProjectConfigurations.vue

@@ -4,6 +4,14 @@
       :title="$t('org.vue.views.project-configurations.title')"
       class="limit-width"
     >
+      <template slot="actions">
+        <VueInput
+          v-model="search"
+          icon-left="search"
+          class="round"
+        />
+      </template>
+
       <ApolloQuery
         :query="require('../graphql/configurations.gql')"
         class="fill-height"
@@ -49,6 +57,12 @@ export default {
     }
   },
 
+  data () {
+    return {
+      search: ''
+    }
+  },
+
   bus: {
     quickOpenProject (project) {
       this.$apollo.getClient().writeQuery({
@@ -63,7 +77,11 @@ export default {
   methods: {
     generateItems (configurations) {
       if (!configurations) return []
-      return configurations.map(
+
+      const reg = this.search && new RegExp(this.search, 'i')
+      return configurations.filter(
+        item => !reg || item.name.match(reg) || item.description.match(reg)
+      ).map(
         configuration => ({
           route: {
             name: 'project-configuration-details',

packages/@vue/cli-ui/src/views/ProjectPlugins.vue

@@ -5,6 +5,12 @@
       class="limit-width"
     >
       <template slot="actions">
+        <VueInput
+          v-model="search"
+          icon-left="search"
+          class="round"
+        />
+
         <VueButton
           icon-left="add"
           :label="$t('org.vue.views.project-plugins.button')"
@@ -39,13 +45,20 @@
             class="overlay"
           />
 
-          <div v-else-if="data" class="plugins">
-            <ProjectPluginItem
-              v-for="plugin of data.plugins"
-              :key="plugin.id"
-              :plugin="plugin"
-            />
-          </div>
+          <ListFilter
+            v-else-if="data"
+            class="plugins"
+            :list="data.plugins"
+            :filter="item => !search || item.id.includes(search)"
+          >
+            <template slot-scope="{ list }">
+              <ProjectPluginItem
+                v-for="plugin of list"
+                :key="plugin.id"
+                :plugin="plugin"
+              />
+            </template>
+          </ListFilter>
         </template>
       </ApolloQuery>
     </ContentView>
@@ -69,6 +82,12 @@ export default {
     }
   },
 
+  data () {
+    return {
+      search: ''
+    }
+  },
+
   apollo: {
     projectCurrent: PROJECT_CURRENT
   },

packages/@vue/cli-ui/src/views/ProjectTasks.vue

@@ -3,6 +3,14 @@
     <ContentView
       :title="$t('org.vue.views.project-tasks.title')"
     >
+      <template slot="actions">
+        <VueInput
+          v-model="search"
+          icon-left="search"
+          class="round"
+        />
+      </template>
+
       <ApolloQuery
         :query="require('../graphql/tasks.gql')"
         class="fill-height"
@@ -50,6 +58,12 @@ export default {
     }
   },
 
+  data () {
+    return {
+      search: ''
+    }
+  },
+
   apollo: {
     $subscribe: {
       taskChanged: {
@@ -72,7 +86,9 @@ export default {
   methods: {
     generateItems (tasks) {
       if (!tasks) return []
-      return tasks.map(
+      return tasks.filter(
+        item => !this.search || item.name.includes(this.search)
+      ).map(
         task => ({
           route: {
             name: 'project-task-details',

yarn.lock

@@ -1048,9 +1048,9 @@
   dependencies:
     lodash "^4.17.4"
 
-"@vue/ui@^0.4.5":
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.4.5.tgz#003334fd98e42ef600e8f3f3fbd98733e9a9fadd"
+"@vue/ui@^0.4.6":
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.4.6.tgz#bba955547435d7471fdb9c5379ac5cc19d45605d"
   dependencies:
     focus-visible "^4.1.4"
     material-design-icons "^3.0.1"