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"
+    <div
-      v-for="(section, i) in layoutConfig.sections" :key="i"
+      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 }]
+          {
-        }];
+            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,13 +1,15 @@
 <template>
-    <div class="row pb-4">
+  <div class="row pb-4">
-        <frappe-control class="col-4"
+    <frappe-control
-            v-for="docfield in filters"
+      class="col-3"
-            :key="docfield.fieldname"
+      v-for="docfield in filters"
-            :docfield="docfield"
+      :key="docfield.fieldname"
-            :value="$data.filterValues[docfield.fieldname]"
+      :docfield="docfield"
-            :doc="$data.filterValues"
+      :value="$data.filterValues[docfield.fieldname]"
-            @change="updateValue(docfield.fieldname, $event)"/>
+      :doc="$data.filterValues"
-    </div>
+      @change="updateValue(docfield.fieldname, $event)"
+    />
+  </div>
 </template>
 <script>
 import FrappeControl from 'frappejs/ui/components/controls/FrappeControl';

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

@@ -1,17 +1,27 @@
 <template>
-    <div>
+  <div>
-        <div class="p-4">
+    <div class="p-4">
-            <h4 class="pb-2">{{ reportConfig.title }}</h4>
+      <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">
-            <div class="pt-2" ref="datatable" v-once></div>
+        <report-filters
-        </div>
+          :class="linksExists ? 'col-10' : 'col-12'"
-        <not-found v-if="!reportConfig" />
+          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" />
+  </div>
 </template>
 <script>
 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,13 +30,25 @@ 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({
-          method: this.reportConfig.method,
+        method: this.reportConfig.method,
-          args: filters
+        args: filters
       });
 
       let rows, columns;
@@ -48,8 +70,8 @@ export default {
         columns = this.getColumns();
       }
 
-      for(let column of columns) {
+      for (let column of columns) {
-         column.editable = false;
+        column.editable = false;
       }
 
       if (this.datatable) {
@@ -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

@@ -4,34 +4,34 @@ const luxon = require('luxon');
 const frappe = require('frappejs');
 
 module.exports = {
-    format(value, field) {
+  format(value, field) {
-        if (typeof field === 'string') {
+    if (typeof field === 'string') {
-            field = { fieldtype: field };
+      field = { fieldtype: field };
-        }
-
-        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) {
-                dateFormat = 'yyyy-MM-dd';
-            } else {
-                dateFormat = frappe.SystemSettings.dateFormat;
-            }
-
-            value = luxon.DateTime.fromISO(value).toFormat(dateFormat);
-
-        } else {
-            if (value === null || value === undefined) {
-                value = '';
-            } else {
-                value = value + '';
-            }
-        }
-        return value;
     }
-}
+
+    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) {
+        dateFormat = 'yyyy-MM-dd';
+      } else {
+        dateFormat = frappe.SystemSettings.dateFormat;
+      }
+
+      value = luxon.DateTime.fromISO(value).toFormat(dateFormat);
+      if (value === 'Invalid DateTime') {
+        value = '';
+      }
+    } else {
+      if (value === null || value === undefined) {
+        value = '';
+      } else {
+        value = value + '';
+      }
+    }
+    return value;
+  }
+};