- Base Input Sizing and Placeholder

- $formModal defaults

package.json

@@ -33,7 +33,7 @@
     "file-saver": "^2.0.2",
     "feather-icons": "^4.7.3",
     "file-loader": "^1.1.11",
-    "flatpickr": "^4.3.2",
+    "flatpickr": "^4.6.2",
     "frappe-datatable": "^1.13.5",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^3.2.0",
@@ -58,7 +58,7 @@
     "socket.io": "^2.0.4",
     "sqlite3": "^4.0.9",
     "vue": "^2.6.10",
-    "vue-flatpickr-component": "^7.0.4",
+    "vue-flatpickr-component": "^8.1.2",
     "vue-loader": "^15.2.6",
     "vue-router": "^3.0.7",
     "vue-template-compiler": "^2.6.10",

ui/components/Form/Form.vue

@@ -1,25 +1,25 @@
 <template>
-    <div class="frappe-form">
-        <form-actions
-          class="p-3 border-bottom"
-          v-if="shouldRenderForm"
-          :doc="doc"
-          :links="links"
-          @save="save"
-          @submit="submit"
-          @revert="revert"
-          @print="print"
-        />
-        <form-layout
-          class="p-3"
-          v-if="shouldRenderForm"
-          :doc="doc"
-          :fields="meta.fields"
-          :layout="meta.layout"
-          :invalid="invalid"
-        />
-        <not-found v-if="notFound" />
-    </div>
+  <div class="frappe-form">
+    <form-actions
+      class="p-3 border-bottom"
+      v-if="shouldRenderForm"
+      :doc="doc"
+      :links="links"
+      @save="save"
+      @submit="submit"
+      @revert="revert"
+      @print="print"
+    />
+    <form-layout
+      class="p-3"
+      v-if="shouldRenderForm"
+      :doc="doc"
+      :fields="meta.fields"
+      :layout="meta.layout"
+      :invalid="invalid"
+    />
+    <not-found v-if="notFound" />
+  </div>
 </template>
 <script>
 import frappe from 'frappejs';
@@ -40,7 +40,8 @@ export default {
       notFound: false,
       invalid: false,
       invalidFields: [],
-      links: []
+      links: [],
+      defaults: this.defaultValues
     };
   },
   computed: {
@@ -52,25 +53,36 @@ export default {
     }
   },
   async created() {
+    if (!this.defaults) {
+      this.defaults = {};
+    }
+    this.meta.fields.forEach(field => {
+      if (field.defaultValue)
+        this.defaults[field.fieldname] = field.defaultValue;
+    });
     if (!this.name) return;
     try {
       this.doc = await frappe.getDoc(this.doctype, this.name);
 
-      if (this.doc.isNew() && this.meta.fields.map(df => df.fieldname).includes('name')) {
+      if (
+        this.doc.isNew() &&
+        this.meta.fields.map(df => df.fieldname).includes('name')
+      ) {
         // For a user editable name field,
         // it should be unset since it is autogenerated
         this.doc.set('name', '');
       }
 
-      if (this.defaultValues) {
-        for (let fieldname in this.defaultValues) {
-          const value = this.defaultValues[fieldname];
-          this.doc.set(fieldname, value);
+      if (this.defaults) {
+        for (let fieldname in this.defaults) {
+          const value = this.defaults[fieldname];
+          await this.doc.set(fieldname, value);
         }
       }
 
       this.docLoaded = true;
     } catch (e) {
+      console.error(e);
       this.notFound = true;
     }
     this.setLinks();
@@ -89,7 +101,6 @@ export default {
         }
 
         this.$emit('save', this.doc);
-
       } catch (e) {
         console.error(e);
         return;

ui/components/controls/Base.vue

@@ -90,14 +90,21 @@ export default {
     getInputTag() {
       return 'input';
     },
+    getFormControlSize() {
+      return this.docfield.size === 'small'
+        ? 'form-control-sm'
+        : this.size === 'large'
+        ? 'form-control-lg'
+        : '';
+    },
     getInputClass() {
-      return ['form-control', ...this.inputClass];
+      return ['form-control', this.getFormControlSize(), ...this.inputClass];
     },
     getInputAttrs() {
       return {
         id: this.id,
         type: 'text',
-        placeholder: '',
+        placeholder: this.docfield.placeholder || '',
         value: this.value,
         required: this.docfield.required,
         disabled: this.disabled

ui/components/controls/BaseDate.vue

@@ -1,7 +1,14 @@
 <template>
   <div :class="{'form-group': !onlyInput}">
     <label v-if="!onlyInput">{{ docfield.label }}</label>
-    <flat-pickr class="form-control" :value="value" :config="config" @on-change="emitChange"></flat-pickr>
+    <flat-pickr
+      class="form-control"
+      :class="getFormControlSize()"
+      :placeholder="docfield.placeholder"
+      :value="value"
+      :config="config"
+      @on-change="emitChange"
+    ></flat-pickr>
   </div>
 </template>
 <script>
@@ -23,4 +30,7 @@ export default {
 </script>
 <style lang="scss">
 @import '~flatpickr/dist/flatpickr.css';
+.flat-pickr-input {
+  background-color: #fff;
+}
 </style>

ui/components/controls/FrappeControl.vue

@@ -63,32 +63,6 @@ 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/components/controls/Select.vue

@@ -1,31 +1,32 @@
 <script>
 import Base from './Base';
 export default {
-    extends: Base,
-    methods: {
-        getInputTag() {
-            return 'select';
-        },
-        getInputAttrs() {
-            return {
-                id: this.id,
-                required: this.docfield.required,
-                disabled: this.disabled
-            };
-        },
-        getInputChildren(h) {
-            return this.docfield.options.map(option =>
-                h('option', {
-                    attrs: {
-                        key: option,
-                        selected: option === this.value
-                    },
-                    domProps: {
-                        textContent: option
-                    }
-                })
-            );
-        }
+  extends: Base,
+  methods: {
+    getInputTag() {
+      return 'select';
+    },
+    getInputAttrs() {
+      return {
+        id: this.id,
+        required: this.docfield.required,
+        disabled: this.disabled
+      };
+    },
+    getInputChildren(h) {
+      return this.docfield.options.map(option =>
+        h('option', {
+          attrs: {
+            key: option,
+            selected: option === this.value,
+            value: option
+          },
+          domProps: {
+            textContent: option
+          }
+        })
+      );
     }
-}
+  }
+};
 </script>

ui/components/controls/Table.vue

@@ -217,7 +217,9 @@ export default {
       };
     },
     activateFocus(i, fieldname) {
-      // FIX: enter pressing on a cell with a value throws error.
+      if (this.isFocused(i, fieldname) && this.isEditing(i, fieldname)) {
+        return;
+      }
       // this.deactivateEditing();
       const docfield = this.columns.find(c => c.fieldname === fieldname);
       this.currentlyFocused = {
@@ -238,14 +240,13 @@ export default {
         this.currentlyFocused = {};
       }
     },
-    addRow() {
+    async addRow() {
       const rows = this.rows.slice();
-      const newRow = {
-        idx: rows.length
-      };
+      const newRow = { idx: rows.length };
 
       for (let column of this.columns) {
-        newRow[column.fieldname] = null;
+        if (column.defaultValue) newRow[column.fieldname] = column.defaultValue;
+        else newRow[column.fieldname] = null;
       }
 
       rows.push(newRow);

ui/pages/Report/ReportFilters.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="row pb-4">
+  <div class="d-flex px-1">
     <div class="col-3" v-for="docfield in filterFields" :key="docfield.fieldname">
       <frappe-control
         v-if="shouldRenderField(docfield)"
         :docfield="docfield"
         :value="$data.filterValues[docfield.fieldname]"
+        :onlyInput="true"
         :doc="filterDoc"
         @change="updateValue(docfield.fieldname, $event)"
+        class="mb-4"
       />
     </div>
   </div>
@@ -46,10 +48,6 @@ export default {
         return false;
       }
 
-      if (field.fieldname === 'name' && !this.doc.isNew()) {
-        return false;
-      }
-
       return true;
     },
     updateValue(fieldname, value) {

utils/format.js

@@ -8,7 +8,6 @@ module.exports = {
     if (typeof field === 'string') {
       field = { fieldtype: field };
     }
-
     if (field.fieldtype === 'Currency') {
       value = numberFormat.formatNumber(value);
     } else if (field.fieldtype === 'Text') {
@@ -25,6 +24,10 @@ module.exports = {
       if (value === 'Invalid DateTime') {
         value = '';
       }
+    } else if (field.fieldtype === 'Check') {
+      typeof parseInt(value) === 'number'
+        ? (value = parseInt(value))
+        : (value = Boolean(value));
     } else {
       if (value === null || value === undefined) {
         value = '';