From 125b3f5cb1bf2688e784bca558652fc5194097b8 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 24 Apr 2018 13:26:28 +0530
Subject: [PATCH] Fix Reportpage filter layout

---
 backends/database.js         |  2 +-
 client/desk/reportpage.js    | 17 +++++++++--------
 client/view/controls/date.js |  4 +++-
 client/view/formLayout.js    | 10 +++++++++-
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/backends/database.js b/backends/database.js
index a12096ad..ffcf68d6 100644
--- a/backends/database.js
+++ b/backends/database.js
@@ -434,7 +434,7 @@ module.exports = class Database extends Observable {
                 comparisonValue.map(v => '?').join(', ') :
                 '?';
 
-            return `${field} ${operator} (${placeholder})`;
+            return `ifnull(${field}, '') ${operator} (${placeholder})`;
         });
 
         let values = filtersArray.reduce((acc, filter) => {
diff --git a/client/desk/reportpage.js b/client/desk/reportpage.js
index 38c1e7e7..040d4ec0 100644
--- a/client/desk/reportpage.js
+++ b/client/desk/reportpage.js
@@ -1,5 +1,5 @@
 const Page = require('frappejs/client/view/page');
-const Form = require('frappejs/client/view/form');
+const FormLayout = require('frappejs/client/view/formLayout');
 const DataTable = require('frappe-datatable');
 const frappe = require('frappejs');
 const utils = require('frappejs/client/ui/utils');
@@ -35,18 +35,19 @@ module.exports = class ReportPage extends Page {
     }
 
     makeFilters() {
-        this.form = new Form({
+        this.filters = new FormLayout({
             parent: this.filterWrapper,
-            meta: { fields: this.filterFields },
+            fields: this.filterFields,
             doc: new Observable(),
-            inline: true,
-            container: this
+            inline: true
         });
+
+        this.filterWrapper.appendChild(this.filters.form);
     }
 
     getFilterValues() {
         const values = {};
-        for (let control of this.form.formLayout.controlList) {
+        for (let control of this.filters.controlList) {
             values[control.fieldname] = control.getInputValue();
             if (control.required && !values[control.fieldname]) {
                 frappe.ui.showAlert({message: frappe._('{0} is mandatory', control.label), color: 'red'});
@@ -64,8 +65,8 @@ module.exports = class ReportPage extends Page {
     async run() {
         if (frappe.params && frappe.params.filters) {
             for (let key in frappe.params.filters) {
-                if (this.form.controls[key]) {
-                    this.form.controls[key].setInputValue(frappe.params.filters[key]);
+                if (this.filters.controls[key]) {
+                    this.filters.controls[key].setInputValue(frappe.params.filters[key]);
                 }
             }
         }
diff --git a/client/view/controls/date.js b/client/view/controls/date.js
index 60df660a..04decf9f 100644
--- a/client/view/controls/date.js
+++ b/client/view/controls/date.js
@@ -11,7 +11,9 @@ class DateControl extends BaseControl {
             'mm/dd/yyyy': 'm/d/Y',
             'mm-dd-yyyy': 'm-d-Y'
         }
-        let altFormat = dateFormat[frappe.SystemSettings.dateFormat];
+        let altFormat = frappe.SystemSettings ?
+            dateFormat[frappe.SystemSettings.dateFormat] :
+            dateFormat['yyyy-mm-dd'];
 
         super.make();
         this.input.setAttribute('type', 'text');
diff --git a/client/view/formLayout.js b/client/view/formLayout.js
index ef11c1e5..c5e551bb 100644
--- a/client/view/formLayout.js
+++ b/client/view/formLayout.js
@@ -3,7 +3,7 @@ const controls = require('./controls');
 const Observable = require('frappejs/utils/observable');
 
 module.exports = class FormLayout extends Observable {
-    constructor({fields, doc, layout, events = []}) {
+    constructor({fields, doc, layout, inline = false, events = []}) {
         super();
         Object.assign(this, arguments[0]);
         this.controls = {};
@@ -14,6 +14,11 @@ module.exports = class FormLayout extends Observable {
         this.form = document.createElement('div');
         this.form.classList.add('form-body');
 
+        if (this.inline) {
+            this.form.classList.add('row');
+            this.form.classList.add('p-0');
+        }
+
         this.makeLayout();
 
         if (doc) {
@@ -63,6 +68,9 @@ module.exports = class FormLayout extends Observable {
                 let control = controls.makeControl({field: field, form: this, parent: parent});
                 this.controlList.push(control);
                 this.controls[field.fieldname] = control;
+                if (this.inline) {
+                    control.inputContainer.classList.add('col');
+                }
             }
         }
     }