Refresh ListView on doctype change, filter list by keyword

src/components/SearchInput.vue

@@ -1,3 +1,39 @@
 <template>
-  <input type="search" class="form-control" placeholder="Search..." autocomplete="off" spellcheck="false">
+  <div class="input-group">
+    <input
+      type="search"
+      class="form-control"
+      placeholder="Search..."
+      autocomplete="off"
+      spellcheck="false"
+      v-model="inputValue"
+      @keyup.enter="$emit('change', inputValue)"
+      aria-label="Recipient's username"
+    >
+    <div class="input-group-append">
+      <button
+        class="btn btn-outline-secondary"
+        type="button"
+        :disabled="!inputValue"
+        @click="clearInput"
+      >
+        {{ _('Clear') }}
+      </button>
+    </div>
+  </div>
 </template>
+<script>
+export default {
+  data() {
+    return {
+      inputValue: ''
+    }
+  },
+  methods: {
+    clearInput() {
+      this.inputValue = '';
+      this.$emit('change', null);
+    }
+  }
+}
+</script>

src/pages/ListView/List.vue

@@ -7,7 +7,7 @@
     </list-row>
     <list-row v-for="doc in data" :key="doc.name" @click.native="openForm(doc.name)">
       <list-cell v-for="column in columns" :key="column.label">
-        {{ column.getValue(doc) }}
+        {{ frappe.format(column.getValue(doc), column.fieldtype || {}) }}
       </list-cell>
     </list-row>
   </div>
@@ -19,6 +19,13 @@ import ListCell from './ListCell';
 export default {
   name: 'List',
   props: ['doctype'],
+  watch: {
+    doctype(oldValue, newValue) {
+      if (oldValue !== newValue) {
+        this.setupColumnsAndData();
+      }
+    }
+  },
   components: {
     ListRow,
     ListCell
@@ -29,19 +36,31 @@ export default {
       data: []
     };
   },
-  async mounted() {
-    this.prepareColumns();
-
-    this.data = await frappe.db.getAll({
-      doctype: this.doctype,
-      fields: ['*']
-    });
+  mounted() {
+    this.setupColumnsAndData();
+    frappe.listView.on('filterList', this.updateData.bind(this));
   },
   methods: {
+    setupColumnsAndData() {
+      this.prepareColumns();
+      this.updateData();
+    },
     openForm(name) {
-      console.log(name);
       this.$router.push(`/edit/${this.doctype}/${name}`);
     },
+    async updateData(keywords) {
+      let filters = null;
+      if (keywords) {
+        filters = {
+          keywords: ['like', keywords]
+        }
+      }
+      this.data = await frappe.db.getAll({
+        doctype: this.doctype,
+        fields: ['*'],
+        filters
+      });
+    },
     prepareColumns() {
       this.columns = this.meta.listView.columns.map(col => {
         if (typeof col === 'string') {
@@ -49,6 +68,7 @@ export default {
           if (!field) return null;
           return {
             label: field.label,
+            fieldtype: field.fieldtype,
             getValue(doc) {
               return doc[col];
             }

src/pages/ListView/ListToolbar.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="row">
     <div class="col-6 d-flex">
-      <search-input class="mr-2" />
-      <f-button secondary>{{ _('Add Filter') }}</f-button>
+      <search-input class="mr-2" @change="keyword => filterList(keyword)"/>
     </div>
     <div class="col-6 d-flex flex-row-reverse">
       <f-button primary @click="$emit('newClick')">{{ _('New {0}', doctype) }}</f-button>
@@ -22,6 +21,9 @@ export default {
     async newInvoice() {
       const doc = await frappe.getNewDoc('Invoice');
       this.$formModal.open(doc);
+    },
+    filterList(keyword) {
+      frappe.listView.trigger('filterList', keyword);
     }
   }
 }

src/pages/ListView/index.vue

@@ -5,6 +5,7 @@
       <list-toolbar
         :doctype="doctype"
         @newClick="openNewForm"
+        @filterList="keyword => filterList(keyword)"
         class="mb-4"
       />
       <list
@@ -15,6 +16,7 @@
 </template>
 <script>
 import frappe from 'frappejs';
+import Observable from 'frappejs/utils/observable';
 import PageHeader from '@/components/PageHeader';
 import ListToolbar from './ListToolbar';
 import List from './List';
@@ -32,6 +34,9 @@ export default {
       return frappe.getMeta(this.doctype);
     }
   },
+  created() {
+    frappe.listView = new Observable();
+  },
   methods: {
     async openNewForm() {
       const doc = await frappe.getNewDoc(this.doctype);