Ajaxify booth responsibles selectize interface

No need to load *all* users into a select input...

app/controllers/users_controller.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class UsersController < ApplicationController
+  before_action :authenticate_user!, only: :search
   load_and_authorize_resource
 
   # GET /users/1
@@ -22,6 +23,14 @@ class UsersController < ApplicationController
     end
   end
 
+  def search
+    respond_to do |format|
+      format.json do
+        render json: { users: User.where('username like ?', "%#{params[:query]}%").select(:username, :id) }
+      end
+    end
+  end
+
   private
 
     # Only allow a trusted parameter "white list" through.

app/helpers/application_helper.rb

@@ -115,14 +115,6 @@ module ApplicationHelper
     user_selector_input(:speakers, form, '', true)
   end
 
-  def responsibles_selector_input(form)
-    user_selector_input(
-      :responsibles,
-      form,
-      "The people responsible for the #{t 'booth'}. You can only select existing users."
-    )
-  end
-
   def user_selector_input(field, form, hint = '', multiple = true)
     users = User.where(is_disabled: false).pluck(:id, :name, :username, :email).map { |user| [user[0], user[1].blank? ? user[2] : user[1], user[2], user[3]] }.sort_by { |user| user[1].downcase }
     form.input(

app/views/booths/_form.html.haml

@@ -1,30 +1,74 @@
 .container
   .row
     .col-md-8
-      = semantic_form_for(@booth,  url: @url, html: { multipart: true }) do |f|
-        = f.input :title, as: :string, input_html: { autofocus: true }, required: true
-        = f.input :description, input_html: { rows: 5, data: { provide: 'markdown' } }, required: true,
-          hint: 'This field becomes public upon request acceptance'
-        = f.input :reasoning, input_html: { rows: 5, data: { provide: 'markdown' } }, required: true,
-          label: 'How it fits the conference'
-        = f.input :submitter_relationship, input_html: { rows: 5, data: { provide: 'markdown' } }, required: true,
-          label: 'Submitter\'s relation',
-          hint: 'e.g. employee, comunity manager, etc'
-        = f.input :website_url
-        = responsibles_selector_input f
+      = form_for(@booth,  url: @url) do |f|
+        .form-group
+          = f.label :title, 'Title'
+          %abbr{title: 'This field is required'} *
+          = f.text_field :title, autofocus: true, required: true, class: 'form-control', placeholder: 'Title'
+        .form-group
+          = f.label :description, 'Description'
+          %abbr{title: 'This field is required'} *
+          = f.text_area :description, rows: 5, data: { provide: 'markdown' }, required: true, class: 'form-control'
+          %span.help-block
+            This field becomes public upon request acceptance
+        .form-group
+          = f.label :reasoning, 'How it fits the conference'
+          %abbr{title: 'This field is required'} *
+          = f.text_area :reasoning, rows: 5, data: { provide: 'markdown' }, required: true, class: 'form-control'
+        .form-group
+          = f.label :submitter_relationship, 'Submitter\'s relation'
+          %abbr{title: 'This field is required'} *
+          = f.text_field :submitter_relationship, rows: 5, required: true, class: 'form-control'
+          %span.help-block
+            e.g. employee, comunity manager, etc
+        .form-group
+          = f.label :website_url, 'Website URL'
+          %abbr{title: 'This field is required'} *
+          = f.text_field :website_url, class: 'form-control', required: true, placeholder: 'URL'
+        .form-group
+          = f.text_field :responsible_ids, multiple: true, class: "form-control", id: "booth_responsibles", placeholder: "Responsibles"
+          %span.help-block
+            = "The people responsible for the #{t 'booth'}. You can only select existing users."
+        .form-group
           = image_tag f.object.picture.thumb.url if f.object.picture?
-        = f.input :picture
+          = f.label :picture, 'Picture'
+          = f.file_field :picture
 
         %p.text-right
+          %button{type: 'submit', class: 'btn btn-success'}
             - if @booth.new_record?
-            = f.submit "Create #{(t'booth').capitalize } Request", class: 'btn btn-success'
+              = "Create #{(t'booth').capitalize } Request"
             - else
-            = f.submit "Update #{(t'booth').capitalize } Request", class: 'btn btn-success'
+              = "Update #{(t'booth').capitalize } Request"
 
   :javascript
     $(document).ready(function() {
-      $('#booth_responsible_ids').selectize({
-        plugins: ['remove_button'],
-        minItems: 2
-      } )
+      $('#booth_responsibles').selectize({
+        persist: false,
+        create: false,
+        valueField: 'id',
+        labelField: 'username',
+        searchField: 'username',
+        load: function(query, callback) {
+          if (!query.length) return callback();
+          $.ajax({
+            url: "#{search_users_path}.json",
+            type: 'GET',
+            dataType: 'json',
+            data: {
+              query: query,
+            },
+            error: function(res) {
+              console.log("selectize error");
+              callback();
+            },
+            success: function(res) {
+              console.log("selectize success");
+              // console.log(res);
+              callback(res.users);
+            }
+          });
+        }
+      });
     });

config/routes.rb

@@ -16,6 +16,9 @@ Osem::Application.routes.draw do
   end
 
   resources :users, except: [:new, :index, :create, :destroy] do
+    collection do
+      get :search
+    end
     resources :openids, only: :destroy
   end