Add control Autocomplete

backends/database.js

@@ -429,7 +429,8 @@ module.exports = class Database extends Observable {
 
     initTypeMap() {
         this.typeMap = {
-            'Currency': 'real'
+            'Autocomplete': 'text'
+            , 'Currency': 'real'
             , 'Int': 'integer'
             , 'Float': 'real'
             , 'Percent': 'real'

backends/http.js

@@ -116,7 +116,8 @@ module.exports = class HTTPClient extends Observable {
 
     initTypeMap() {
         this.typeMap = {
-            'Currency': true
+            'Autocomplete': true
+            , 'Currency': true
             , 'Int': true
             , 'Float': true
             , 'Percent': true

backends/mysql.js

@@ -178,7 +178,8 @@ module.exports = class mysqlDatabase extends Database{
 
     init_typeMap() {
         this.typeMap = {
-            'Currency': 'real'
+            'Autocomplete': 'VARCHAR(140)'
+            , 'Currency': 'real'
             , 'Int': 'INT'
             , 'Float': 'decimal(18,6)'
             , 'Percent': 'real'

backends/sqlite.js

@@ -215,7 +215,8 @@ module.exports = class sqliteDatabase extends Database {
 
     initTypeMap() {
         this.typeMap = {
-            'Currency': 'real'
+            'Autocomplete': 'text'
+            , 'Currency': 'real'
             , 'Int': 'integer'
             , 'Float': 'real'
             , 'Percent': 'real'

client/view/controls/autocomplete.js

@@ -0,0 +1,25 @@
+const BaseControl = require('./base');
+const Awesomplete = require('awesomplete');
+
+class AutocompleteControl extends BaseControl {
+    make() {
+        super.make();
+        this.input.setAttribute('type', 'text');
+        this.setupAwesomplete();
+    }
+
+    setupAwesomplete() {
+        this.awesomplete = new Awesomplete(this.input, {
+            minChars: 0,
+            maxItems: 99
+        });
+
+        // rebuild the list on input
+        this.input.addEventListener('input', async (event) => {
+            let list = await this.getList();
+            this.awesomplete.list = list;
+        });
+    }
+};
+
+module.exports = AutocompleteControl;

client/view/controls/file.js

@@ -1,9 +1,51 @@
+const frappe = require('frappejs');
 const BaseControl = require('./base');
 
 class FileControl extends BaseControl {
     make() {
         super.make();
+        this.fileButton = frappe.ui.create('button', {
+            className: 'btn btn-outline-secondary btn-block',
+            inside: this.getInputParent(),
+            textContent: 'Choose a file...',
+            onclick: () => {
+                this.input.click();
+            }
+        });
+
         this.input.setAttribute('type', 'file');
+
+        if (this.directory) {
+            this.input.setAttribute('webkitdirectory', '');
+        }
+
+        if (this.allowMultiple) {
+            this.input.setAttribute('multiple', '');
+        }
+    }
+
+    async handleChange() {
+        await super.handleChange();
+        this.setDocValue();
+    }
+
+    getInputValue() {
+        return this.input.files;
+    }
+
+    setInputValue(files) {
+
+        let label;
+        if (!files || files.length === 0) {
+            label = 'Choose a file...'
+        } else if (files.length === 1) {
+            label = files[0].name;
+        } else {
+            label = `${files.length} files selected`;
+        }
+
+        this.fileButton.textContent = label;
+        this.input.files = files;
     }
 };
 

client/view/controls/index.js

@@ -1,4 +1,5 @@
 const controlClasses = {
+    Autocomplete: require('./autocomplete'),
     Check: require('./check'),
     Code: require('./code'),
     Data: require('./data'),
@@ -6,6 +7,7 @@ const controlClasses = {
     DynamicLink: require('./dynamicLink'),
     Currency: require('./currency'),
     Float: require('./float'),
+    File: require('./file'),
     Int: require('./int'),
     Link: require('./link'),
     Password: require('./password'),