add select user box with jquery

elankvitko · Jun 6, 2016 · 03b986e · 03b986e
1 parent 6647d6c
commit 03b986e
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 9 deletions.
diff --git a/Gemfile b/Gemfile
@@ -31,6 +31,8 @@ gem 'omniauth-facebook'
 # Use omniauth to make facebook gem work
 gem 'omniauth'
 
+# Jquery plugin for selecting users to message
+gem 'chosen-rails'
 
 # Use Faker for seed data
 gem 'faker'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -51,6 +51,10 @@ GEM
       json (>= 1.7)
       mime-types (>= 1.16)
       mimemagic (>= 0.3.0)
+    chosen-rails (1.5.2)
+      coffee-rails (>= 3.2)
+      railties (>= 3.0)
+      sass-rails (>= 3.2)
     coderay (1.1.1)
     coffee-rails (4.1.1)
       coffee-script (>= 2.2.0)
@@ -201,8 +205,6 @@ GEM
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (2.0.5)
-    turbolinks (2.5.3)
-      coffee-rails
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     uglifier (3.0.0)
@@ -219,6 +221,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  chosen-rails
   coffee-rails (~> 4.1.0)
   devise
   faker
@@ -237,7 +240,6 @@ DEPENDENCIES
   sass-rails (~> 5.0)
   sdoc (~> 0.4.0)
   spring
-  turbolinks
   uglifier (>= 1.3.0)
   web-console (~> 2.0)
 

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -16,6 +16,7 @@
 //= require materialize/extras/nouislider
 //= require react
 //= require react_ujs
+//= require chosen-jquery
 //= require components
 //= require lodash
 //= require_tree .
diff --git a/app/assets/javascripts/conversations.coffee b/app/assets/javascripts/conversations.coffee
diff --git a/app/assets/javascripts/conversations.js b/app/assets/javascripts/conversations.js
@@ -0,0 +1,10 @@
+var ready;
+
+ready = function(){
+    // enable chosen js
+    $('.chosen-select').chosen({
+        no_results_text: 'No results matched'
+    });
+}
+
+$(document).ready(ready);
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,3 +1,6 @@
+/*
+*= require chosen
+*/
 @import "materialize/components/color";
 $primary-color: color("light-blue", "lighten-1") !default;
 $background-color: color("grey","lighten-3");
@@ -215,7 +218,6 @@ h5 {
 margin-left: 1px;
 }
 
-<<<<<<< HEAD
 input#submit {
   background:none;
   border:none;
@@ -248,4 +250,4 @@ input#submit {
   padding-top: 3%;
   clear:both;
 
-}
+}
diff --git a/app/views/conversations/_form.html.erb b/app/views/conversations/_form.html.erb
@@ -1,7 +1,7 @@
 <%= form_for :conversation, url: :conversations, html: { class: "" } do |f| %>
     <div class="form-group">
       <%= f.label :recipients %>
-      <%= f.select(:recipients, User.all.collect {|p| [ p.formatted_name, p.id ] }, {}, { multiple: true , class: "form-control" })%>
+      <%= f.select(:recipients, User.all.collect {|p| [ p.formatted_name, p.id ] }, {}, { multiple: true , class: "chosen-select form-control" })%>
     </div>
     <div class="form-group">
       <%= f.label :subject %>