filter enhancements

backends/database.js

@@ -396,6 +396,9 @@ module.exports = class Database extends Observable {
             const value = filters[key];
             if (value instanceof Array) {
                 // if its like, we should add the wildcard "%" if the user has not added
+                if (value[0].toLowerCase()==='includes') {
+                    value[0] = 'like';
+                }
                 if (['like', 'includes'].includes(value[0].toLowerCase()) && !value[1].includes('%')) {
                     value[1] = `%${value[1]}%`;
                 }

client/desk/tablepage.js

@@ -6,11 +6,13 @@ module.exports = class TablePage extends Page {
     constructor(doctype) {
         let meta = frappe.getMeta(doctype);
         super({title: `${meta.label || meta.name}`, hasRoute: true});
+        this.filterWrapper = frappe.ui.add('div', 'filter-toolbar', this.body);
+        this.fitlerButton = frappe.ui.add('button', 'btn btn-sm btn-outline-secondary', this.filterWrapper, 'Set Filters');
         this.tableWrapper = frappe.ui.add('div', 'table-page-wrapper', this.body);
         this.doctype = doctype;
         this.fullPage = true;
 
-        this.addButton('Set Filters', 'btn-secondary', async () => {
+        this.fitlerButton.addEventListener('click', async () => {
             const formModal = await frappe.desk.showFormModal('FilterSelector');
             formModal.form.once('apply-filters', () => {
                 formModal.hide();
@@ -28,6 +30,11 @@ module.exports = class TablePage extends Page {
             this.filterSelector.reset(this.doctype);
         }
 
+        if (frappe.flags.filters) {
+            this.filterSelector.setFilters(frappe.flags.filters);
+            frappe.flags.filters = null;
+        }
+
         if (!this.modelTable) {
             this.modelTable = new ModelTable({
                 doctype: this.doctype,
@@ -40,6 +47,7 @@ module.exports = class TablePage extends Page {
     }
 
     async run() {
+        this.displayFilters();
         const data = await frappe.db.getAll({
             doctype: this.doctype,
             fields: ['*'],
@@ -49,4 +57,8 @@ module.exports = class TablePage extends Page {
         });
         this.modelTable.refresh(data);
     }
+
+    displayFilters() {
+        this.fitlerButton.textContent = this.filterSelector.getText();
+    }
 }

client/style/style.scss

@@ -53,10 +53,6 @@ html {
 
 	.page-links {
 		padding: $spacer-3 $spacer-4;
-
-		.page-link {
-			display: inline-block;
-		}
 	}
 
 	.page-error {
@@ -160,6 +156,10 @@ html {
 	padding: $spacer-3 $spacer-4;
 }
 
+.filter-toolbar {
+	padding: $spacer-3 $spacer-4;
+}
+
 .table-wrapper {
 	margin-top: $spacer-4;
 	margin-bottom: $spacer-4;

client/view/page.js

@@ -21,7 +21,7 @@ module.exports = class Page extends Observable {
         this.wrapper = frappe.ui.add('div', 'page hide', this.parent);
         this.head = frappe.ui.add('div', 'page-nav clearfix hide', this.wrapper);
         this.titleElement = frappe.ui.add('h3', 'page-title', this.wrapper);
-        this.linksElement = frappe.ui.add('div', 'page-links hide', this.wrapper);
+        this.linksElement = frappe.ui.add('div', 'btn-group page-links hide', this.wrapper);
         this.body = frappe.ui.add('div', 'page-body', this.wrapper);
     }
 
@@ -38,7 +38,7 @@ module.exports = class Page extends Observable {
     }
 
     addLink(label, action, unhide = true) {
-        const link = frappe.ui.add('a', 'page-link', this.linksElement, label);
+        const link = frappe.ui.add('button', 'btn btn-sm btn-outline-secondary', this.linksElement, label);
         link.addEventListener('click', action);
         if (unhide) {
             this.linksElement.classList.remove('hide');

model/meta.js

@@ -28,6 +28,10 @@ module.exports = class BaseMeta extends BaseDocument {
         return this._field_map[fieldname];
     }
 
+    getLabel(fieldname) {
+        return this.getField(fieldname).label;
+    }
+
     getTableFields() {
         if (this._tableFields===undefined) {
             this._tableFields = this.fields.filter(field => field.fieldtype === 'Table');

models/doctype/FilterSelector/FilterSelectorDocument.js

@@ -3,7 +3,9 @@ const frappe = require('frappejs');
 
 module.exports = class FormSelector extends BaseDocument {
     reset(doctype) {
-        this.forDocType = doctype;
+        if (doctype) {
+            this.forDocType = doctype;
+        }
         this.items = [];
         this.filterGroup = '';
         this.filterGroupName = '';
@@ -12,12 +14,33 @@ module.exports = class FormSelector extends BaseDocument {
     getFilters() {
         const filters = {};
         for (let item of (this.items || [])) {
-            if (item.condition === 'Equals') item.condition = '=';
-            filters[item.field] = [item.condition, item.value];
+            filters[item.field] = [(item.condition === 'Equals') ? '=' : item.condition,
+                item.value];
         }
         return filters;
     }
 
+    setFilters(filters) {
+        this.reset();
+        for (let key in filters) {
+            let value  = filters[key];
+            if (value instanceof Array) {
+                this.items.push({field: key, condition: value[0], value: value[1]});
+            } else {
+                this.items.push({field: key, condition: 'Equals', value: value});
+            }
+        }
+    }
+
+    getText() {
+        if (this.items && this.items.length) {
+            this.forMeta = frappe.getMeta(this.forDocType);
+            return this.items.map(v => `${this.forMeta.getLabel(v.field)} ${v.condition} ${v.value}`).join(', ');
+        } else {
+            return 'Set Filters';
+        }
+    }
+
     async update() {
         // save new group filter
         if (frappe.isServer) {