Code to handle onloadFilters for reports

ui/pages/Report/ReportFilters.vue

@@ -4,40 +4,49 @@
             v-for="docfield in filters"
             :key="docfield.fieldname"
             :docfield="docfield"
-            :value="$data[docfield.fieldname]"
+            :value="$data.filterValues[docfield.fieldname]"
             @change="updateValue(docfield.fieldname, $event)"/>
     </div>
 </template>
 <script>
-import FrappeControl from 'frappejs/ui/components/controls/FrappeControl'
+import FrappeControl from 'frappejs/ui/components/controls/FrappeControl';
 
 export default {
-    props: ['filters'],
-    data () {
-        const filterValues = {};
-        for (let filter of this.filters) {
-            filterValues[filter.fieldname] = '';
-        }
-        return {filterValues};
-    },
-    provide() {
-        return {
-            dynamicLinkTarget: (reference) => {
-                return this.filterValues[reference]
-            }
-        };
-    },
-    methods: {
-        updateValue(fieldname, value) {
-            this.filterValues[fieldname] = value;
-            this.$emit('change', this.filterValues)
-        }
-    },
-    components: {
-        FrappeControl
+  props: ['filters', 'filterDefaults'],
+  data() {
+    const filterValues = {};
+    for (let filter of this.filters) {
+      filterValues[filter.fieldname] =
+        this.filterDefaults[filter.fieldname] || null;
     }
-}
+    return { filterValues };
+  },
+  created() {
+    const hasOnloadFilters = Object.values(this.filterValues).filter(
+      value => value !== null
+    ).length;
+
+    if (hasOnloadFilters) {
+      this.$emit('change', this.filterValues);
+    }
+  },
+  provide() {
+    return {
+      dynamicLinkTarget: reference => {
+        return this.filterValues[reference];
+      }
+    };
+  },
+  methods: {
+    updateValue(fieldname, value) {
+      this.filterValues[fieldname] = value;
+      this.$emit('change', this.filterValues);
+    }
+  },
+  components: {
+    FrappeControl
+  }
+};
 </script>
 <style>
-
 </style>

ui/pages/Report/index.vue

@@ -2,43 +2,46 @@
     <div>
         <div class="p-4">
             <h4 class="pb-2">{{ reportConfig.title }}</h4>
-            <report-filters v-if="reportConfig.filterFields.length" :filters="reportConfig.filterFields" @change="getReportData"></report-filters>
+            <report-filters v-if="reportConfig.filterFields.length" :filters="reportConfig.filterFields" :filterDefaults="filters" @change="getReportData"></report-filters>
             <div class="pt-2" ref="datatable" v-once></div>
         </div>
         <not-found v-if="!reportConfig" />
     </div>
 </template>
 <script>
-import DataTable from 'frappe-datatable'
-import frappe from 'frappejs'
-import ReportFilters from './ReportFilters'
-import utils from 'frappejs/client/ui/utils'
+import DataTable from 'frappe-datatable';
+import frappe from 'frappejs';
+import ReportFilters from './ReportFilters';
+import utils from 'frappejs/client/ui/utils';
 
 export default {
-    props: ['reportName', 'reportConfig'],
-    computed: {
-        reportColumns() {
-            return utils.convertFieldsToDatatableColumns(this.reportConfig.getColumns())
-        }
-    },
-    methods: {
-        getReportData(filters) {
-            frappe.methods[this.reportConfig.method](filters).then(data => {
-                if (this.datatable) {
-                    this.datatable.refresh(data || [])
-                } else {
-                    this.datatable = new DataTable(this.$refs.datatable, {
-                        columns: this.reportColumns,
-                        data: data || [],
-                    });
-                }
-            })
-        }
-    },
-    components: {
-        ReportFilters,
+  name: 'Report',
+  props: ['reportName', 'reportConfig', 'filters'],
+  computed: {
+    reportColumns() {
+      return utils.convertFieldsToDatatableColumns(
+        this.reportConfig.getColumns()
+      );
     }
-}
+  },
+  methods: {
+    getReportData(filters) {
+      frappe.methods[this.reportConfig.method](filters).then(data => {
+        if (this.datatable) {
+          this.datatable.refresh(data || []);
+        } else {
+          this.datatable = new DataTable(this.$refs.datatable, {
+            columns: this.reportColumns,
+            data: data || []
+          });
+        }
+      });
+    }
+  },
+  components: {
+    ReportFilters
+  }
+};
 </script>
 <style>
 </style>