Merge pull request #75 from surajshetty3416/master

[Feature] Form links and Report onload filtes

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

ui/components/Button.vue

@@ -2,8 +2,7 @@
   <button type="button"
     :class="['btn btn-sm', 'btn-' + Object.keys(props).find(key => ['primary', 'secondary', 'light', 'dark', 'danger'].includes(key))]"
     v-bind="data.attrs"
-    v-on="listeners"
-  >
+    v-on="listeners">
     <slot></slot>
   </button>
 </template>

ui/components/Dropdown.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="dropdown show">
+      <a class="btn btn-sm btn-secondary dropdown-toggle"
+        href="#"
+        role="button"
+        :id="_uid"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false">
+        {{ label }}
+      </a>
+      <div class="dropdown-menu dropdown-menu-right" :aria-labelledby="_uid">
+        <a class="dropdown-item"
+          v-for="option in options"
+          :key="option.label"
+          @click="option.handler">
+          {{ option.label }}
+        </a>
+      </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['label', 'options']
+};
+</script>
+<style>
+</style>
+

ui/components/Form/Form.vue

@@ -3,6 +3,7 @@
         <form-actions
           v-if="shouldRenderForm"
           :doc="doc"
+          :links="links"
           @save="save"
           @submit="submit"
           @revert="revert"
@@ -37,8 +38,9 @@ export default {
       docLoaded: false,
       notFound: false,
       invalid: false,
-      invalidFields: []
-    }
+      invalidFields: [],
+      links: []
+    };
   },
   computed: {
     meta() {
@@ -67,9 +69,11 @@ export default {
       }
 
       this.docLoaded = true;
-    } catch(e) {
+    } catch (e) {
       this.notFound = true;
     }
+    this.setLinks();
+    this.doc.on('change', this.setLinks);
   },
   methods: {
     async save() {
@@ -84,13 +88,28 @@ export default {
         }
 
         this.$emit('save', this.doc);
-
+        
       } catch (e) {
         console.error(e);
         return;
       }
     },
 
+    setLinks() {
+      if (this.meta.links) {
+        let links = [];
+        for (let link of this.meta.links) {
+          if (link.condition(this)) {
+            link.handler = () => {
+              link.action(this);
+            };
+            links.push(link);
+          }
+        }
+        this.links = links;
+      }
+    },
+
     async submit() {
       this.doc.set('submitted', 1);
       await this.save();
@@ -105,7 +124,9 @@ export default {
       if (!isValid && !this.invalidFields.includes(fieldname)) {
         this.invalidFields.push(fieldname);
       } else if (isValid) {
-        this.invalidFields = this.invalidFields.filter(invalidField => invalidField !== fieldname)
+        this.invalidFields = this.invalidFields.filter(
+          invalidField => invalidField !== fieldname
+        );
       }
     },
 
@@ -113,7 +134,7 @@ export default {
       const form = this.$el.querySelector('form');
       let validity = form.checkValidity();
       this.invalid = !validity;
-    },
+    }
   }
 };
 </script>

ui/components/Form/FormActions.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="frappe-form-actions d-flex justify-content-between align-items-center p-3 border-bottom">
     <h5 class="m-0">{{ title }}</h5>
-    <f-button primary v-if="isDirty" @click="$emit('save')">{{ _('Save') }}</f-button>
-    <f-button primary v-if="showSubmit" @click="$emit('submit')">{{ _('Submit') }}</f-button>
-    <f-button secondary v-if="showRevert" @click="$emit('revert')">{{ _('Revert') }}</f-button>
+    <div class="d-flex">
+      <f-button primary v-if="isDirty" @click="$emit('save')">{{ _('Save') }}</f-button>
+      <f-button primary v-if="showSubmit" @click="$emit('submit')">{{ _('Submit') }}</f-button>
+      <f-button secondary v-if="showRevert" @click="$emit('revert')">{{ _('Revert') }}</f-button>
+      <dropdown class="ml-2" v-if="links.length" :label="'Next Action'" :options="links"></dropdown>
+    </div>
   </div>
 </template>
 <script>
 import frappe from 'frappejs';
+import Dropdown from '../Dropdown';
 
 export default {
-  props: ['doc'],
+  props: ['doc', 'links'],
+  components: {
+    Dropdown
+  },
   data() {
     return {
       isDirty: false,

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>