Merge pull request #72 from surajshetty3416/master

List Search

ui/components/Desk.vue

@@ -18,7 +18,7 @@ export default {
     FrappeSidebar: Sidebar,
     FrappeMain: Main,
     FrappeNavbar: Navbar
-  }
+  },
 };
 </script>
 <style>

ui/components/List/List.vue

@@ -29,7 +29,7 @@ import ListItem from './ListItem';
 
 export default {
   name: 'List',
-  props: ['doctype', 'filters'],
+  props: ['doctype'],
   components: {
     ListActions,
     ListItem
@@ -53,6 +53,8 @@ export default {
     frappe.db.on(`change:${this.doctype}`, () => {
       this.updateList();
     });
+    this.$root.$on('navbarSearch', this.updateList);
+    this.$root.$emit('newList');
   },
   mounted() {
     this.updateList();
@@ -62,7 +64,13 @@ export default {
       let doc = await frappe.getNewDoc(this.doctype);
       this.$router.push(`/edit/${this.doctype}/${doc.name}`);
     },
-    async updateList() {
+    async updateList(query=null) {
+      let filters = null
+      if (query) {
+        filters = {
+          keywords : ['like', query]
+        }
+      }
       const indicatorField = this.hasIndicator ? this.meta.indicators.key : null;
       const fields = [
         'name',
@@ -74,7 +82,7 @@ export default {
       const data = await frappe.db.getAll({
         doctype: this.doctype,
         fields,
-        filters: this.filters || null
+        filters: filters || null
       });
 
       this.data = data;

ui/components/Navbar.vue

@@ -1,7 +1,39 @@
 <template>
 	<nav class="frappe-navbar navbar navbar-light bg-light row no-gutters border-bottom border-top">
-        <form class="form-inline col-4 pr-3">
-            <input type="search" name="search" class="form-control shadow-none w-100" placeholder="Search...">
+		<form v-if="showSearch" class="form-inline col-4 pr-3">
+			<input type="text"
+				v-model="searchValue"
+				@input="updateSearch"
+				name="search"
+				class="form-control shadow-none w-100"
+				:placeholder="_('Search...')">
 		</form>
+		<div class="navbar-text">.</div>
 	</nav>
 </template>
+<script>
+import { debounce } from 'lodash';
+export default {
+  props: ['showSearch'],
+  data() {
+    return {
+        searchValue: ''
+    };
+  },
+  computed: {
+    showSearch() {
+      // TODO: Make this configurable
+      return /list|edit/.test(this.$route.path)
+    }
+  },
+  mounted() {
+    this.$root.$on('newList', () => this.searchValue = '')
+  },
+  methods: {
+    updateSearch: debounce(function() {
+      this.$root.$emit('navbarSearch', this.searchValue)
+    }, 500)
+  }
+};
+</script>
+

ui/pages/ListAndForm.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="frappe-list-form row no-gutters">
         <div class="col-4 border-right">
-            <frappe-list :doctype="doctype" :filters="filters" :key="doctype" />
+            <frappe-list :doctype="doctype" :key="doctype" />
         </div>
         <div class="col-8">
             <frappe-form v-if="name" :key="doctype + name" :doctype="doctype" :name="name" @save="onSave" />
@@ -13,7 +13,7 @@ import List from '../components/List/List';
 import Form from '../components/Form/Form';
 
 export default {
-    props: ['doctype', 'name', 'filters'],
+    props: ['doctype', 'name'],
     components: {
         FrappeList: List,
         FrappeForm: Form