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'],
+  props: ['filters', 'filterDefaults'],
   data() {
     const filterValues = {};
     for (let filter of this.filters) {
-            filterValues[filter.fieldname] = '';
+      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]
+      dynamicLinkTarget: reference => {
+        return this.filterValues[reference];
       }
     };
   },
   methods: {
     updateValue(fieldname, value) {
       this.filterValues[fieldname] = value;
-            this.$emit('change', this.filterValues)
+      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'],
+  name: 'Report',
+  props: ['reportName', 'reportConfig', 'filters'],
   computed: {
     reportColumns() {
-            return utils.convertFieldsToDatatableColumns(this.reportConfig.getColumns())
+      return utils.convertFieldsToDatatableColumns(
+        this.reportConfig.getColumns()
+      );
     }
   },
   methods: {
     getReportData(filters) {
       frappe.methods[this.reportConfig.method](filters).then(data => {
         if (this.datatable) {
-                    this.datatable.refresh(data || [])
+          this.datatable.refresh(data || []);
         } else {
           this.datatable = new DataTable(this.$refs.datatable, {
             columns: this.reportColumns,
-                        data: data || [],
+            data: data || []
           });
         }
-            })
+      });
     }
   },
   components: {
-        ReportFilters,
-    }
+    ReportFilters
   }
+};
 </script>
 <style>
 </style>