Merge pull request #42 from netchampfaris/controls

Controls

client/style/style.scss

@@ -418,3 +418,7 @@ input[type=file] {
 	position: absolute;
 	z-index: -1;
 }
+
+.was-validated input[type=file]:invalid + button {
+	border-color: $red;
+}

client/ui/index.js

@@ -86,6 +86,18 @@ module.exports = {
         }
     },
 
+    toggleClass(element, className, flag) {
+        if (flag === undefined) {
+            flag = !element.classList.contains(className);
+        }
+
+        if (!flag) {
+            this.removeClass(element, className);
+        } else {
+            this.addClass(element, className);
+        }
+    },
+
     toggle(element, default_display = '') {
         element.style.display = element.style.display === 'none' ? default_display : 'none';
     },

client/view/controls/autocomplete.js

@@ -8,18 +8,26 @@ class AutocompleteControl extends BaseControl {
         this.setupAwesomplete();
     }
 
-    setupAwesomplete() {
+    async setupAwesomplete() {
         this.awesomplete = new Awesomplete(this.input, {
             minChars: 0,
             maxItems: 99
         });
 
+        this.list = await this.getList();
+
         // rebuild the list on input
-        this.input.addEventListener('input', async (event) => {
-            let list = await this.getList();
-            this.awesomplete.list = list;
+        this.input.addEventListener('input', (event) => {
+            this.awesomplete.list = this.list;
         });
     }
+
+    validate(value) {
+        if (this.list.includes(value)) {
+            return value;
+        }
+        return false;
+    }
 };
 
 module.exports = AutocompleteControl;

client/view/controls/base.js

@@ -169,6 +169,7 @@ class BaseControl {
     async handleChange(event) {
         let value = await this.parse(this.getInputValue());
         value = await this.validate(value);
+        this.input.setCustomValidity(value === false ? 'error' : '');
         await this.updateDocValue(value);
     }
 

client/view/controls/data.js

@@ -3,7 +3,11 @@ const BaseControl = require('./base');
 class DataControl extends BaseControl {
     make() {
         super.make();
-        this.input.setAttribute('type', 'text');
+
+        if (!this.inputType) {
+            this.inputType = 'text';
+        }
+        this.input.setAttribute('type', this.inputType);
     }
 };
 

client/view/controls/file.js

@@ -7,6 +7,7 @@ class FileControl extends BaseControl {
         this.fileButton = frappe.ui.create('button', {
             className: 'btn btn-outline-secondary btn-block',
             inside: this.getInputParent(),
+            type: 'button',
             textContent: 'Choose a file...',
             onclick: () => {
                 this.input.click();