js: replaced typeahead.js w/ vue-multiselect

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "es2015"
+    ["es2015", { "modules": false }]
   ],
   "plugins": [
     "lodash",

.travis.yml

@@ -38,7 +38,7 @@ before_install:
   - cd .. && rm -rf bats
 
   # Intall Go, which is needed for git-validation
-  - eval "$(curl -sL https://raw.githubusercontent.com/travis-ci/gimme/master/gimme | GIMME_GO_VERSION=1.8 bash)"
+  - eval "$(curl -sL https://raw.githubusercontent.com/travis-ci/gimme/master/gimme | GIMME_GO_VERSION=1.10.2 bash)"
   - go get -u github.com/vbatts/git-validation
 
 before_script:

Dockerfile

@@ -8,16 +8,17 @@ WORKDIR /srv/Portus
 COPY Gemfile* ./
 
 # Let's explain this RUN command:
-#   1. First of all we refresh, since opensuse/ruby does a zypper clean -a in
-#      the end.
-#   2. Then we install dev. dependencies and the devel_basis pattern (used for
+#   1. First of all we add d:l:go repo to get the latest go version.
+#   2. Then refresh, since opensuse/ruby does zypper clean -a in the end.
+#   3. Then we install dev. dependencies and the devel_basis pattern (used for
 #      building stuff like nokogiri). With that we can run bundle install.
-#   3. We then proceed to remove unneeded clutter: first we remove some packages
+#   4. We then proceed to remove unneeded clutter: first we remove some packages
 #      installed with the devel_basis pattern, and finally we zypper clean -a.
-RUN zypper ref && \
+RUN zypper addrepo https://download.opensuse.org/repositories/devel:languages:go/openSUSE_Leap_42.3/devel:languages:go.repo && \
+    zypper --gpg-auto-import-keys ref && \
     zypper -n in --no-recommends ruby2.5-devel \
            libmysqlclient-devel postgresql-devel \
-           nodejs libxml2-devel libxslt1 git-core go1.9 && \
+           nodejs libxml2-devel libxslt1 git-core go1.10 && \
     zypper -n in --no-recommends -t pattern devel_basis && \
     gem install bundler --no-ri --no-rdoc -v 1.16.0 && \
     update-alternatives --install /usr/bin/bundle bundle /usr/bin/bundle.ruby2.5 3 && \

app/assets/javascripts/main.js

@@ -1,5 +1,4 @@
-import Alert from '~/shared/components/alert';
-
+import 'jquery';
 import 'jquery-ujs';
 
 // Bootstrap
@@ -28,6 +27,8 @@ import './modules/namespaces';
 import './modules/teams';
 import './modules/webhooks';
 
+import Alert from './shared/components/alert';
+
 import { setTimeOutAlertDelay, refreshFloatAlertPosition } from './utils/effects';
 
 // Actions to be done to initialize any page.

app/assets/javascripts/modules/namespaces/components/edit-form.js

@@ -1,35 +1,32 @@
-import Vue from 'vue';
-
 import { required } from 'vuelidate/lib/validators';
 
-import { setTypeahead } from '~/utils/typeahead';
 import { handleHttpResponseError } from '~/utils/http';
 
 import NamespacesService from '../services/namespaces';
 
-import VisibilityChooser from './visibility-chooser';
-
-const TYPEAHEAD_INPUT = '.remote .typeahead';
+import NamespacesFormMixin from '../mixins/form';
 
-const { set } = Vue;
+import VisibilityChooser from './visibility-chooser';
 
 export default {
   template: '#js-edit-namespace-form-tmpl',
 
   props: ['namespace'],
 
+  mixins: [NamespacesFormMixin],
+
   components: {
     VisibilityChooser,
   },
 
   data() {
     return {
-      model: {
-        namespace: {
-          team: this.namespace.team.name,
-          description: this.namespace.description,
-          visibility: this.namespace.visibility,
-        },
+      mixinAttr: 'namespaceParams',
+      selectedTeam: this.namespace.team,
+      namespaceParams: {
+        team: this.namespace.team.name,
+        description: this.namespace.description,
+        visibility: this.namespace.visibility,
       },
       timeout: {
         team: null,
@@ -39,7 +36,9 @@ export default {
 
   methods: {
     onSubmit() {
-      NamespacesService.update(this.namespace.id, this.model).then((response) => {
+      const params = { namespace: this.namespaceParams };
+
+      NamespacesService.update(this.namespace.id, params).then((response) => {
         const namespace = response.data;
 
         this.$bus.$emit('namespaceUpdated', namespace);
@@ -49,51 +48,10 @@ export default {
   },
 
   validations: {
-    model: {
-      namespace: {
-        team: {
-          required,
-          available(value) {
-            clearTimeout(this.timeout.team);
-
-            // required already taking care of this
-            if (value === '' || value === this.namespace.team.name) {
-              return true;
-            }
-
-            return new Promise((resolve) => {
-              const searchTeam = () => {
-                const promise = NamespacesService.teamExists(value);
-
-                promise.then((exists) => {
-                  // leave it for the back-end
-                  if (exists === null) {
-                    resolve(true);
-                  }
-
-                  // if exists, valid
-                  resolve(exists);
-                });
-              };
-
-              this.timeout.team = setTimeout(searchTeam, 1000);
-            });
-          },
-        },
+    namespaceParams: {
+      team: {
+        required,
       },
     },
   },
-
-  mounted() {
-    const $team = setTypeahead(TYPEAHEAD_INPUT, '/namespaces/typeahead/%QUERY');
-
-    // workaround because of typeahead
-    const updateTeam = () => {
-      set(this.model.namespace, 'team', $team.val());
-    };
-
-    $team.on('typeahead:selected', updateTeam);
-    $team.on('typeahead:autocompleted', updateTeam);
-    $team.on('change', updateTeam);
-  },
 };

app/assets/javascripts/modules/namespaces/components/new-form.js

@@ -2,13 +2,12 @@ import Vue from 'vue';
 
 import { required } from 'vuelidate/lib/validators';
 
-import { setTypeahead } from '~/utils/typeahead';
+import { handleHttpResponseError } from '~/utils/http';
 
 import FormMixin from '~/shared/mixins/form';
 
 import NamespacesService from '../services/namespaces';
-
-const TYPEAHEAD_INPUT = '#new-namespace-form .remote .typeahead';
+import NamespacesFormMixin from '../mixins/form';
 
 const { set } = Vue;
 
@@ -17,7 +16,7 @@ export default {
 
   props: ['teamName'],
 
-  mixins: [FormMixin],
+  mixins: [FormMixin, NamespacesFormMixin],
 
   data() {
     return {
@@ -49,15 +48,7 @@ export default {
 
         this.$bus.$emit('namespaceCreated', namespace);
         this.$alert.$show(`Namespace '${namespace.name}' was created successfully`);
-      }).catch((response) => {
-        let errors = response.data;
-
-        if (Array.isArray(errors)) {
-          errors = errors.join('<br />');
-        }
-
-        this.$alert.$show(errors);
-      });
+      }).catch(handleHttpResponseError);
     },
   },
 
@@ -70,6 +61,7 @@ export default {
 
           // required already taking care of this
           if (value === '') {
+            set(this.errors, 'name', []);
             return true;
           }
 
@@ -89,46 +81,7 @@ export default {
       },
       team: {
         required,
-        available(value) {
-          clearTimeout(this.timeout.team);
-
-          // required already taking care of this
-          if (value === '') {
-            return true;
-          }
-
-          return new Promise((resolve) => {
-            const searchTeam = () => {
-              const promise = NamespacesService.teamExists(value);
-
-              promise.then((exists) => {
-                // leave it for the back-end
-                if (exists === null) {
-                  resolve(true);
-                }
-
-                // if exists, valid
-                resolve(exists);
-              });
-            };
-
-            this.timeout.team = setTimeout(searchTeam, 1000);
-          });
-        },
       },
     },
   },
-
-  mounted() {
-    const $team = setTypeahead(TYPEAHEAD_INPUT, '/namespaces/typeahead/%QUERY');
-
-    // workaround because of typeahead
-    const updateTeam = () => {
-      set(this.namespace, 'team', $team.val());
-    };
-
-    $team.on('typeahead:selected', updateTeam);
-    $team.on('typeahead:autocompleted', updateTeam);
-    $team.on('change', updateTeam);
-  },
 };

app/assets/javascripts/modules/namespaces/mixins/form.js

@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import VueMultiselect from 'vue-multiselect';
+
+import NamespacesService from '../services/namespaces';
+
+const { set } = Vue;
+
+export default {
+
+  components: {
+    VueMultiselect,
+  },
+
+  data() {
+    return {
+      mixinAttr: 'namespace',
+      teams: [],
+      selectedTeam: null,
+      isLoading: false,
+    };
+  },
+
+  methods: {
+    searchTeam(query) {
+      if (!query) {
+        return;
+      }
+
+      set(this, 'isLoading', true);
+      NamespacesService.searchTeam(query).then((response) => {
+        set(this, 'teams', response.data);
+      }).catch(() => {
+        void 0;
+      }).finally(() => set(this, 'isLoading', false));
+    },
+
+    onSelect(team) {
+      set(this[this.mixinAttr], 'team', team.name);
+    },
+
+    onRemove() {
+      set(this[this.mixinAttr], 'team', '');
+    },
+
+    onTouch() {
+      this.$v[this.mixinAttr].team.$touch();
+    },
+  },
+};

app/assets/javascripts/modules/teams/components/edit-form.js

@@ -27,7 +27,6 @@ export default {
       TeamsService.update(this.teamCopy).then((response) => {
         const team = response.data;
 
-
         this.$bus.$emit('teamUpdated', team);
         this.$alert.$show(`Team '${team.name}' was updated successfully`);
       }).catch(handleHttpResponseError);