From 4492ebedc2bb9166bb72011c1322897bd7fed898 Mon Sep 17 00:00:00 2001
From: cdubuisson <cyril.dubuisson@gmail.com>
Date: Sat, 1 Feb 2020 22:19:40 +0100
Subject: [PATCH] :sparkles: : add vue component to render typeahead inputs

---
 pom.xml                                       | 677 +++++++++---------
 .../UIExtensionsControllerAdvice.kt           |   3 +-
 .../components/form-typeahead.vue             | 153 ++++
 3 files changed, 502 insertions(+), 331 deletions(-)
 create mode 100644 src/main/resources/templates/vue_templates/components/form-typeahead.vue

diff --git a/pom.xml b/pom.xml
index 579961a7f..ff68a1856 100644
--- a/pom.xml
+++ b/pom.xml
@@ -1,259 +1,276 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-	<modelVersion>4.0.0</modelVersion>
-
-	<parent>
-		<groupId>org.springframework.boot</groupId>
-		<artifactId>spring-boot-starter-parent</artifactId>
-		<version>2.2.4.RELEASE</version>
-		<relativePath/>
-	</parent>
-
-	<groupId>io.codeka</groupId>
-	<artifactId>gaia</artifactId>
-	<version>1.3.0-SNAPSHOT</version>
-	<packaging>jar</packaging>
-
-	<name>gaia</name>
-	<description>gaia runs yours terraform modules</description>
-	<url>https://github.com/gaia-app/gaia</url>
-	<inceptionYear>2019</inceptionYear>
-
-	<licenses>
-		<license>
-			<name>Mozilla Public License Version 2.0</name>
-			<url>http://mozilla.org/MPL/2.0/</url>
-		</license>
-	</licenses>
-
-	<scm>
-		<url>https://github.com/gaia-app/gaia</url>
-	</scm>
-	<issueManagement>
-		<system>github</system>
-		<url>https://github.com/gaia-app/gaia/issues</url>
-	</issueManagement>
-	<ciManagement>
-		<system>travis-ci</system>
-		<url>https://travis-ci.com/gaia-app/gaia</url>
-	</ciManagement>
-
-	<properties>
-		<antlr4.version>4.8-1</antlr4.version>
-		<java.version>11</java.version>
-		<jersey.version>2.27</jersey.version>
-		<junit-jupiter.version>5.5.2</junit-jupiter.version>
-		<kotlin.version>1.3.61</kotlin.version>
-		<testcontainers.version>1.12.5</testcontainers.version>
-
-		<sonar.projectKey>gaia-app:gaia</sonar.projectKey>
-		<sonar.organization>gaia-app</sonar.organization>
-		<sonar.host.url>https://sonarcloud.io/</sonar.host.url>
-	</properties>
-
-	<dependencies>
-
-		<!-- kotlin standard lib -->
-		<dependency>
-			<groupId>org.jetbrains.kotlin</groupId>
-			<artifactId>kotlin-stdlib-jdk8</artifactId>
-			<version>${kotlin.version}</version>
-		</dependency>
-		<dependency>
-			<groupId>org.jetbrains.kotlin</groupId>
-			<artifactId>kotlin-reflect</artifactId>
-			<version>${kotlin.version}</version>
-		</dependency>
-
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-data-mongodb</artifactId>
-		</dependency>
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-web</artifactId>
-		</dependency>
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-thymeleaf</artifactId>
-		</dependency>
-
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-test</artifactId>
-			<scope>test</scope>
-		</dependency>
-
-		<dependency>
-			<groupId>org.testcontainers</groupId>
-			<artifactId>testcontainers</artifactId>
-			<version>${testcontainers.version}</version>
-			<scope>test</scope>
-		</dependency>
-		<dependency>
-			<groupId>org.testcontainers</groupId>
-			<artifactId>junit-jupiter</artifactId>
-			<version>${testcontainers.version}</version>
-			<scope>test</scope>
-		</dependency>
-
-		<dependency>
-			<groupId>org.webjars</groupId>
-			<artifactId>bootstrap</artifactId>
-			<version>4.4.1</version>
-		</dependency>
-		<dependency>
-			<groupId>org.webjars</groupId>
-			<artifactId>vue</artifactId>
-			<version>2.6.11</version>
-		</dependency>
-		<dependency>
-			<groupId>org.webjars</groupId>
-			<artifactId>font-awesome</artifactId>
-			<version>5.12.0</version>
-		</dependency>
-		<dependency>
-			<groupId>org.webjars.npm</groupId>
-			<artifactId>bootstrap-vue</artifactId>
-			<version>2.1.0</version>
-			<exclusions>
-				<exclusion>
-					<groupId>*</groupId>
-					<artifactId>*</artifactId>
-				</exclusion>
-			</exclusions>
-		</dependency>
-		<dependency>
-			<groupId>org.webjars.npm</groupId>
-			<artifactId>marked</artifactId>
-			<version>0.7.0</version>
-		</dependency>
-
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-devtools</artifactId>
-		</dependency>
-
-		<dependency>
-			<groupId>com.spotify</groupId>
-			<artifactId>docker-client</artifactId>
-			<version>8.16.0</version>
-		</dependency>
-		<dependency>
-			<groupId>org.glassfish.jersey.inject</groupId>
-			<artifactId>jersey-hk2</artifactId>
-			<version>${jersey.version}</version>
-		</dependency>
-
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-security</artifactId>
-		</dependency>
-		<dependency>
-			<groupId>org.springframework.security</groupId>
-			<artifactId>spring-security-ldap</artifactId>
-		</dependency>
-		<dependency>
-			<groupId>org.thymeleaf.extras</groupId>
-			<artifactId>thymeleaf-extras-springsecurity5</artifactId>
-		</dependency>
-		<dependency>
-			<groupId>org.springframework.security</groupId>
-			<artifactId>spring-security-test</artifactId>
-		</dependency>
-
-		<dependency>
-			<groupId>com.github.spullara.mustache.java</groupId>
-			<artifactId>compiler</artifactId>
-			<version>0.9.6</version>
-		</dependency>
-
-		<!-- better toasts https://github.com/HubSpot/messenger -->
-		<dependency>
-			<groupId>org.webjars.bower</groupId>
-			<artifactId>messenger</artifactId>
-			<version>1.5.0</version>
-			<exclusions>
-				<exclusion>
-					<groupId>*</groupId>
-					<artifactId>*</artifactId>
-				</exclusion>
-			</exclusions>
-		</dependency>
-
-		<dependency>
-			<groupId>org.webjars.npm</groupId>
-			<artifactId>vue-multiselect</artifactId>
-			<version>2.1.6</version>
-		</dependency>
-
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-actuator</artifactId>
-		</dependency>
-
-		<!-- jackson support for kotlin -->
-		<dependency>
-			<groupId>com.fasterxml.jackson.module</groupId>
-			<artifactId>jackson-module-kotlin</artifactId>
-			<version>${jackson.version}</version>
-		</dependency>
-
-		<!-- oauth2 -->
-		<dependency>
-			<groupId>org.springframework.security</groupId>
-			<artifactId>spring-security-oauth2-client</artifactId>
-		</dependency>
-
-		<!-- antlr for HCL parsing -->
-		<dependency>
-			<groupId>org.antlr</groupId>
-			<artifactId>antlr4-runtime</artifactId>
-			<version>${antlr4.version}</version>
-		</dependency>
-
-		<!-- selenium tests -->
-		<dependency>
-			<groupId>org.seleniumhq.selenium</groupId>
-			<artifactId>selenium-java</artifactId>
-			<version>3.141.59</version>
-			<scope>test</scope>
-		</dependency>
-
-		<dependency>
-			<groupId>io.percy</groupId>
-			<artifactId>percy-java-selenium</artifactId>
-			<version>0.1.3</version>
-			<scope>test</scope>
-		</dependency>
-
-	</dependencies>
-
-	<dependencyManagement>
-		<!-- we need this as selenium needs guava 25, and docker-client embeds guava 20 -->
-		<dependencies>
-			<dependency>
-				<groupId>com.google.guava</groupId>
-				<artifactId>guava</artifactId>
-				<version>25.0-jre</version>
-			</dependency>
-		</dependencies>
-	</dependencyManagement>
-
-	<build>
-		<pluginManagement>
-			<plugins>
-				<plugin>
-					<groupId>org.jacoco</groupId>
-					<artifactId>jacoco-maven-plugin</artifactId>
-					<version>0.8.5</version>
-				</plugin>
-			</plugins>
-		</pluginManagement>
-		<plugins>
-			<!-- kotlin compilation -->
-			<plugin>
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>2.2.4.RELEASE</version>
+        <relativePath/>
+    </parent>
+
+    <groupId>io.codeka</groupId>
+    <artifactId>gaia</artifactId>
+    <version>1.3.0-SNAPSHOT</version>
+    <packaging>jar</packaging>
+
+    <name>gaia</name>
+    <description>gaia runs yours terraform modules</description>
+    <url>https://github.com/gaia-app/gaia</url>
+    <inceptionYear>2019</inceptionYear>
+
+    <licenses>
+        <license>
+            <name>Mozilla Public License Version 2.0</name>
+            <url>http://mozilla.org/MPL/2.0/</url>
+        </license>
+    </licenses>
+
+    <scm>
+        <url>https://github.com/gaia-app/gaia</url>
+    </scm>
+    <issueManagement>
+        <system>github</system>
+        <url>https://github.com/gaia-app/gaia/issues</url>
+    </issueManagement>
+    <ciManagement>
+        <system>travis-ci</system>
+        <url>https://travis-ci.com/gaia-app/gaia</url>
+    </ciManagement>
+
+    <properties>
+        <antlr4.version>4.8-1</antlr4.version>
+        <java.version>11</java.version>
+        <jersey.version>2.27</jersey.version>
+        <junit-jupiter.version>5.5.2</junit-jupiter.version>
+        <kotlin.version>1.3.61</kotlin.version>
+        <testcontainers.version>1.12.5</testcontainers.version>
+
+        <sonar.projectKey>gaia-app:gaia</sonar.projectKey>
+        <sonar.organization>gaia-app</sonar.organization>
+        <sonar.host.url>https://sonarcloud.io/</sonar.host.url>
+    </properties>
+
+    <dependencies>
+
+        <!-- kotlin standard lib -->
+        <dependency>
+            <groupId>org.jetbrains.kotlin</groupId>
+            <artifactId>kotlin-stdlib-jdk8</artifactId>
+            <version>${kotlin.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.jetbrains.kotlin</groupId>
+            <artifactId>kotlin-reflect</artifactId>
+            <version>${kotlin.version}</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-mongodb</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-test</artifactId>
+            <scope>test</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>org.testcontainers</groupId>
+            <artifactId>testcontainers</artifactId>
+            <version>${testcontainers.version}</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.testcontainers</groupId>
+            <artifactId>junit-jupiter</artifactId>
+            <version>${testcontainers.version}</version>
+            <scope>test</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>bootstrap</artifactId>
+            <version>4.4.1</version>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>vue</artifactId>
+            <version>2.6.11</version>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>font-awesome</artifactId>
+            <version>5.12.0</version>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>bootstrap-vue</artifactId>
+            <version>2.1.0</version>
+            <exclusions>
+                <exclusion>
+                    <groupId>*</groupId>
+                    <artifactId>*</artifactId>
+                </exclusion>
+            </exclusions>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>marked</artifactId>
+            <version>0.7.0</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-devtools</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>com.spotify</groupId>
+            <artifactId>docker-client</artifactId>
+            <version>8.16.0</version>
+        </dependency>
+        <dependency>
+            <groupId>org.glassfish.jersey.inject</groupId>
+            <artifactId>jersey-hk2</artifactId>
+            <version>${jersey.version}</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-security</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.security</groupId>
+            <artifactId>spring-security-ldap</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.thymeleaf.extras</groupId>
+            <artifactId>thymeleaf-extras-springsecurity5</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.security</groupId>
+            <artifactId>spring-security-test</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>com.github.spullara.mustache.java</groupId>
+            <artifactId>compiler</artifactId>
+            <version>0.9.6</version>
+        </dependency>
+
+        <!-- better toasts https://github.com/HubSpot/messenger -->
+        <dependency>
+            <groupId>org.webjars.bower</groupId>
+            <artifactId>messenger</artifactId>
+            <version>1.5.0</version>
+            <exclusions>
+                <exclusion>
+                    <groupId>*</groupId>
+                    <artifactId>*</artifactId>
+                </exclusion>
+            </exclusions>
+        </dependency>
+
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>vue-multiselect</artifactId>
+            <version>2.1.6</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-actuator</artifactId>
+        </dependency>
+
+        <!-- jackson support for kotlin -->
+        <dependency>
+            <groupId>com.fasterxml.jackson.module</groupId>
+            <artifactId>jackson-module-kotlin</artifactId>
+            <version>${jackson.version}</version>
+        </dependency>
+
+        <!-- oauth2 -->
+        <dependency>
+            <groupId>org.springframework.security</groupId>
+            <artifactId>spring-security-oauth2-client</artifactId>
+        </dependency>
+
+        <!-- antlr for HCL parsing -->
+        <dependency>
+            <groupId>org.antlr</groupId>
+            <artifactId>antlr4-runtime</artifactId>
+            <version>${antlr4.version}</version>
+        </dependency>
+
+        <!-- selenium tests -->
+        <dependency>
+            <groupId>org.seleniumhq.selenium</groupId>
+            <artifactId>selenium-java</artifactId>
+            <version>3.141.59</version>
+            <scope>test</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>io.percy</groupId>
+            <artifactId>percy-java-selenium</artifactId>
+            <version>0.1.3</version>
+            <scope>test</scope>
+        </dependency>
+
+        <!-- typeahead component -->
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>corejs-typeahead</artifactId>
+            <version>1.2.1</version>
+            <!--
+                need to exclude it. get trouble to download it from maven.
+                not really needed because jquery 3+ is already coming from another dependency
+             -->
+            <exclusions>
+                <exclusion>
+                    <groupId>org.webjars.npm</groupId>
+                    <artifactId>jquery</artifactId>
+                </exclusion>
+            </exclusions>
+        </dependency>
+
+    </dependencies>
+
+    <dependencyManagement>
+        <!-- we need this as selenium needs guava 25, and docker-client embeds guava 20 -->
+        <dependencies>
+            <dependency>
+                <groupId>com.google.guava</groupId>
+                <artifactId>guava</artifactId>
+                <version>25.0-jre</version>
+            </dependency>
+        </dependencies>
+    </dependencyManagement>
+
+    <build>
+        <pluginManagement>
+            <plugins>
+                <plugin>
+                    <groupId>org.jacoco</groupId>
+                    <artifactId>jacoco-maven-plugin</artifactId>
+                    <version>0.8.5</version>
+                </plugin>
+            </plugins>
+        </pluginManagement>
+        <plugins>
+            <!-- kotlin compilation -->
+            <plugin>
                 <groupId>org.jetbrains.kotlin</groupId>
                 <artifactId>kotlin-maven-plugin</artifactId>
                 <version>${kotlin.version}</version>
@@ -267,16 +284,16 @@
                 <executions>
                     <execution>
                         <id>compile</id>
-						<phase>process-sources</phase>
-						<goals>
-							<goal>compile</goal>
-						</goals>
-					</execution>
-					<execution>
-						<id>test-compile</id>
-						<phase>process-test-sources</phase>
-						<goals>
-							<goal>test-compile</goal>
+                        <phase>process-sources</phase>
+                        <goals>
+                            <goal>compile</goal>
+                        </goals>
+                    </execution>
+                    <execution>
+                        <id>test-compile</id>
+                        <phase>process-test-sources</phase>
+                        <goals>
+                            <goal>test-compile</goal>
                         </goals>
                     </execution>
                 </executions>
@@ -291,71 +308,71 @@
             </plugin>
             <plugin>
                 <groupId>org.springframework.boot</groupId>
-				<artifactId>spring-boot-maven-plugin</artifactId>
-				<executions>
-					<execution>
-						<goals>
-							<!-- build information generation for /admin/info endpoint -->
-							<!-- see https://docs.spring.io/spring-boot/docs/current/reference/html/howto-build.html#howto-build-info -->
-							<goal>build-info</goal>
-						</goals>
-					</execution>
-				</executions>
-			</plugin>
-			<plugin>
-				<groupId>org.apache.maven.plugins</groupId>
-				<artifactId>maven-surefire-plugin</artifactId>
-				<configuration>
-					<includes>
-						<include>**/*Test.java</include>
-						<include>**/*IT.java</include>
-					</includes>
-				</configuration>
-			</plugin>
-
-			<!-- git information generation for /admin/info endpoint -->
-			<!-- see https://docs.spring.io/spring-boot/docs/current/reference/html/howto-build.html#howto-build-info -->
-			<plugin>
-				<groupId>pl.project13.maven</groupId>
-				<artifactId>git-commit-id-plugin</artifactId>
-			</plugin>
-
-			<plugin>
-				<groupId>org.antlr</groupId>
-				<artifactId>antlr4-maven-plugin</artifactId>
-				<version>${antlr4.version}</version>
-				<executions>
-					<execution>
-						<goals>
-							<goal>antlr4</goal>
-						</goals>
-						<configuration>
-							<visitor>true</visitor>
-							<listener>false</listener>
-						</configuration>
-					</execution>
-				</executions>
-			</plugin>
-
-			<plugin>
-				<groupId>org.pitest</groupId>
-				<artifactId>pitest-maven</artifactId>
-				<version>1.4.11</version>
-				<dependencies>
-					<dependency>
-						<groupId>org.pitest</groupId>
-						<artifactId>pitest-junit5-plugin</artifactId>
-						<version>0.12</version>
-					</dependency>
-				</dependencies>
-				<configuration>
-					<excludedTestClasses>*IT</excludedTestClasses>
-					<avoidCallsTo>
-						<avoidCallsTo>kotlin.jvm.internal</avoidCallsTo>
-					</avoidCallsTo>
-				</configuration>
-			</plugin>
-		</plugins>
-	</build>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <goals>
+                            <!-- build information generation for /admin/info endpoint -->
+                            <!-- see https://docs.spring.io/spring-boot/docs/current/reference/html/howto-build.html#howto-build-info -->
+                            <goal>build-info</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-surefire-plugin</artifactId>
+                <configuration>
+                    <includes>
+                        <include>**/*Test.java</include>
+                        <include>**/*IT.java</include>
+                    </includes>
+                </configuration>
+            </plugin>
+
+            <!-- git information generation for /admin/info endpoint -->
+            <!-- see https://docs.spring.io/spring-boot/docs/current/reference/html/howto-build.html#howto-build-info -->
+            <plugin>
+                <groupId>pl.project13.maven</groupId>
+                <artifactId>git-commit-id-plugin</artifactId>
+            </plugin>
+
+            <plugin>
+                <groupId>org.antlr</groupId>
+                <artifactId>antlr4-maven-plugin</artifactId>
+                <version>${antlr4.version}</version>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>antlr4</goal>
+                        </goals>
+                        <configuration>
+                            <visitor>true</visitor>
+                            <listener>false</listener>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+
+            <plugin>
+                <groupId>org.pitest</groupId>
+                <artifactId>pitest-maven</artifactId>
+                <version>1.4.11</version>
+                <dependencies>
+                    <dependency>
+                        <groupId>org.pitest</groupId>
+                        <artifactId>pitest-junit5-plugin</artifactId>
+                        <version>0.12</version>
+                    </dependency>
+                </dependencies>
+                <configuration>
+                    <excludedTestClasses>*IT</excludedTestClasses>
+                    <avoidCallsTo>
+                        <avoidCallsTo>kotlin.jvm.internal</avoidCallsTo>
+                    </avoidCallsTo>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
 
 </project>
diff --git a/src/main/java/io/codeka/gaia/dashboard/controller/UIExtensionsControllerAdvice.kt b/src/main/java/io/codeka/gaia/dashboard/controller/UIExtensionsControllerAdvice.kt
index ddc768848..1337bd735 100644
--- a/src/main/java/io/codeka/gaia/dashboard/controller/UIExtensionsControllerAdvice.kt
+++ b/src/main/java/io/codeka/gaia/dashboard/controller/UIExtensionsControllerAdvice.kt
@@ -46,7 +46,8 @@ open class UIExtensionsConfig(){
                 "classpath*:/**/vue/**/vue.min.js",
                 "classpath*:/**/bootstrap-vue/**/bootstrap-vue.min.js",
                 "classpath*:/**/marked/**/marked.min.js",
-                "classpath*:/**/vue-multiselect/**/vue-multiselect.min.js"
+                "classpath*:/**/vue-multiselect/**/vue-multiselect.min.js",
+                "classpath*:/**/corejs-typeahead/**/typeahead.bundle.min.js"
         )
     }
 }
diff --git a/src/main/resources/templates/vue_templates/components/form-typeahead.vue b/src/main/resources/templates/vue_templates/components/form-typeahead.vue
new file mode 100644
index 000000000..579d9a05b
--- /dev/null
+++ b/src/main/resources/templates/vue_templates/components/form-typeahead.vue
@@ -0,0 +1,153 @@
+<template id="form-typeahead">
+    <div class="form-typeahead">
+        <b-form-input
+                :id="id"
+                :placeholder="placeholder"
+                v-model.trim="value"
+                :state="state"
+                :formatter="formatter"
+                :class="groupPosition"
+                :disabled="disabled"
+                :readonly="readonly"
+                type="text"
+                autocomplete="false"
+                @change="propagateChangeEvent"
+        ></b-form-input>
+    </div>
+</template>
+
+<script>
+    Vue.component('form-typeahead', {
+        template: '#form-typeahead',
+        props: {
+            // properties for input
+            id: {type: String, required: true}, // id of the input
+            placeholder: {type: String}, // placeholder of the input
+            value: {type: String, required: true}, // for v-model binding
+            state: {type: Boolean}, // for form validation
+            formatter: {type: String}, // for input format
+            groupPosition: {type: 'left' | 'middle' | 'right'}, // position in an input group
+            disabled: {type: Boolean}, // input is disabled or not
+            readonly: {type: Boolean}, // input is readonly or not
+            // properties for typeahead
+            source: {type: [String, Array], required: true}, // can be an url or an array of objects
+            wildcard: {type: String, required: true}, // wildcard when source as url
+            filterProperty: {type: String, required: true}, // property of object to filter on
+            minLength: {type: Number, default: 3}, // minimum character length before rendering suggestions
+            limit: {type: Number, default: 10}, // max number of suggestions to be displayed
+        },
+        mounted: function () {
+            this.resetTypeahead();
+        },
+        watch: {
+            value: function (newValue) {
+                // emit to update model outside the component
+                this.$emit('input', newValue);
+            },
+            source: function () {
+                this.resetTypeahead();
+            }
+        },
+        methods: {
+            resetTypeahead: function () {
+                const engine = this.initSearchEngine();
+                this.bindTypeahead(engine);
+            },
+            initSearchEngine: function () {
+                if (typeof this.source === 'string') {
+                    return new Bloodhound({
+                        datumTokenizer: Bloodhound.tokenizers.whitespace,
+                        queryTokenizer: Bloodhound.tokenizers.whitespace,
+                        identify: (item) => item[this.filterProperty],
+                        remote: {
+                            url: this.source,
+                            wildcard: this.wildcard
+                        }
+                    });
+                }
+                return new Bloodhound({
+                    datumTokenizer: Bloodhound.tokenizers.whitespace,
+                    queryTokenizer: Bloodhound.tokenizers.whitespace,
+                    identify: (item) => item[this.filterProperty],
+                    local: this.source
+                });
+            },
+            bindTypeahead: function (engine) {
+                let input = $(`#${this.id}`);
+                input.typeahead('destroy');
+                input.typeahead(
+                    {
+                        minLength: this.minLength,
+                        highlight: true,
+                        hint: false,
+                        autoselect: true,
+                    },
+                    {
+                        source: engine,
+                        limit: this.limit,
+                        display: (item) => item[this.filterProperty],
+                    }
+                );
+                input.on('typeahead:select', (e, item) => {
+                    this.value = item.name;
+                });
+            },
+            propagateChangeEvent: function () {
+                this.$emit('change', arguments);
+            },
+        },
+    });
+</script>
+
+<style scoped>
+    /* when inside a bootstrap input-group */
+    .form-typeahead {
+        position: relative;
+        flex: 1 1 0;
+        min-width: 0;
+        margin-bottom: 0;
+    }
+
+    .form-typeahead input.left {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .form-typeahead input.middle {
+        border-radius: 0;
+    }
+
+    .form-typeahead input.right {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    /* for twitter typeahead */
+    .tt-menu {
+        background: #fff;
+        border: 1px solid #e8e8e8;
+        color: #35495e;
+        min-width: 100%;
+    }
+
+    .tt-suggestion {
+        padding: 12px;
+        min-height: 40px;
+        line-height: 16px;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+
+    .tt-suggestion.tt-cursor {
+        background: #0069d9;
+        color: #fff;
+    }
+
+    .tt-suggestion .tt-highlight {
+        color: #41b883;
+    }
+
+    .tt-suggestion.tt-cursor .tt-highlight {
+        color: #fff;
+    }
+</style>