Report Actions

package.json

@@ -30,6 +30,7 @@
     "electron-debug": "^2.0.0",
     "electron-devtools-installer": "^2.2.4",
     "express": "^4.16.2",
+    "file-saver": "^2.0.2",
     "feather-icons": "^4.7.3",
     "file-loader": "^1.1.11",
     "flatpickr": "^4.3.2",

ui/components/Form/FormLayout.vue

@@ -1,7 +1,10 @@
 <template>
   <form :class="['frappe-form-layout', { 'was-validated': invalid }]">
-    <div class="form-row" v-if="layoutConfig"
-      v-for="(section, i) in layoutConfig.sections" :key="i"
+    <div
+      class="form-row"
+      v-if="layoutConfig"
+      v-for="(section, i) in layoutConfig.sections"
+      :key="i"
       v-show="showSection(i)"
     >
       <div class="col" v-for="(column, j) in section.columns" :key="j">
@@ -84,15 +87,17 @@ export default {
 
       if (!layout) {
         const fields = this.fields.map(df => df.fieldname);
-        layout = [{
+        layout = [
+          {
             columns: [{ fields }]
-        }];
+          }
+        ];
       }
 
       if (Array.isArray(layout)) {
         layout = {
           sections: layout
-        }
+        };
       }
       return layout;
     }

ui/components/controls/FrappeControl.vue

@@ -7,10 +7,12 @@
     :disabled="isDisabled"
     :autofocus="autofocus"
     :doc="doc"
+    :config="dateConfig"
     @change="$emit('change', $event)"
   />
 </template>
 <script>
+import frappe from 'frappejs';
 import Base from './Base';
 import Autocomplete from './Autocomplete';
 import Check from './Check';
@@ -62,6 +64,32 @@ export default {
         Time
       }[this.docfield.fieldtype];
     },
+    dateConfig() {
+      if (this.docfield.fieldtype === 'Date') {
+        if (frappe.SystemSettings) {
+          let systemDateFormat = frappe.SystemSettings.dateFormat;
+          let divider = systemDateFormat.indexOf('/') != -1 ? '/' : '-';
+          let flatPickrFormat = '';
+          for (let char of systemDateFormat) {
+            if (
+              !flatPickrFormat.includes(char.toLowerCase()) &&
+              !flatPickrFormat.includes(char.toUpperCase())
+            ) {
+              if (char.toLowerCase() !== 'y')
+                flatPickrFormat += char.toLowerCase() + divider;
+              else flatPickrFormat += char.toUpperCase() + divider;
+            }
+          }
+
+          return {
+            dateFormat: flatPickrFormat.slice(0, -1)
+          };
+        }
+        return {
+          dateFormat: 'Y/m/d'
+        };
+      }
+    },
     isDisabled() {
       let disabled = this.docfield.disabled;
 

ui/pages/Report/ReportFilters.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="row pb-4">
-        <frappe-control class="col-4"
+    <frappe-control
+      class="col-3"
       v-for="docfield in filters"
       :key="docfield.fieldname"
       :docfield="docfield"
       :value="$data.filterValues[docfield.fieldname]"
       :doc="$data.filterValues"
-            @change="updateValue(docfield.fieldname, $event)"/>
+      @change="updateValue(docfield.fieldname, $event)"
+    />
   </div>
 </template>
 <script>

ui/pages/Report/ReportLinks.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="row">
+    <div class="col-12 text-right" v-for="link of links" :key="link.label">
+      <f-button primary @click="link.handler">{{ link.label }}</f-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['links']
+};
+</script>
+
+<style>
+</style>

ui/pages/Report/index.vue

@@ -2,7 +2,16 @@
   <div>
     <div class="p-4">
       <h4 class="pb-2">{{ reportConfig.title }}</h4>
-            <report-filters v-if="filtersExists" :filters="reportConfig.filterFields" :filterDefaults="filters" @change="getReportData"></report-filters>
+      <div class="row pb-4">
+        <report-filters
+          :class="linksExists ? 'col-10' : 'col-12'"
+          v-if="filtersExists"
+          :filters="reportConfig.filterFields"
+          :filterDefaults="filters"
+          @change="getReportData"
+        ></report-filters>
+        <report-links class="col-2" v-if="linksExists" :links="links"></report-links>
+      </div>
       <div class="pt-2" ref="datatable" v-once></div>
     </div>
     <not-found v-if="!reportConfig" />
@@ -12,6 +21,7 @@
 import DataTable from 'frappe-datatable';
 import frappe from 'frappejs';
 import ReportFilters from './ReportFilters';
+import ReportLinks from './ReportLinks';
 import utils from 'frappejs/client/ui/utils';
 
 export default {
@@ -20,8 +30,20 @@ export default {
   computed: {
     filtersExists() {
       return (this.reportConfig.filterFields || []).length;
+    },
+    linksExists() {
+      return (this.reportConfig.linkFields || []).length;
     }
   },
+  data() {
+    return {
+      links: []
+    };
+  },
+  async created() {
+    this.setLinks();
+    // this.doc.on('change', this.setLinks);
+  },
   methods: {
     async getReportData(filters) {
       let data = await frappe.call({
@@ -60,6 +82,21 @@ export default {
           data: rows
         });
       }
+      return [rows, columns];
+    },
+    setLinks() {
+      if (this.linksExists) {
+        let links = [];
+        for (let link of this.reportConfig.linkFields) {
+          links.push({
+            label: link.label,
+            handler: () => {
+              link.action(this);
+            }
+          });
+        }
+        this.links = links;
+      }
     },
     getColumns(data) {
       const columns = this.reportConfig.getColumns(data);
@@ -67,7 +104,8 @@ export default {
     }
   },
   components: {
-    ReportFilters
+    ReportFilters,
+    ReportLinks
   }
 };
 </script>

utils/format.js

@@ -11,10 +11,8 @@ module.exports = {
 
     if (field.fieldtype === 'Currency') {
       value = numberFormat.formatNumber(value);
-
     } else if (field.fieldtype === 'Text') {
       // value = markdown.makeHtml(value || '');
-
     } else if (field.fieldtype === 'Date') {
       let dateFormat;
       if (!frappe.SystemSettings) {
@@ -24,7 +22,9 @@ module.exports = {
       }
 
       value = luxon.DateTime.fromISO(value).toFormat(dateFormat);
-
+      if (value === 'Invalid DateTime') {
+        value = '';
+      }
     } else {
       if (value === null || value === undefined) {
         value = '';
@@ -34,4 +34,4 @@ module.exports = {
     }
     return value;
   }
-}
+};