Tuesday, 21 February 2023

one option select then others option is disabled jquery in rails in active admin

Add searchable select step by step

1. Add gem : gem 'activeadmin-searchable_select'



then require js in // active_admin.js
//= require active_admin/searchable_select
$(document).ready(function(){
	$('.account_select_notify').change(function(){
		debugger
		if (this.value == 'all_account') {
		  $('.notify_select_account').attr('disabled', true);
		}
		else if (this.value != 'all_account') {
		  $('.notify_select_account').attr('disabled', false);
		}
	})
})
------------------------------------------------------
Then import Css in // active_admin.css.scss
@import "active_admin/searchable_select";
--------------------------------------------
2. Add input field in active admin
form do |f|
    f.inputs do
      f.input :title
      # f.input :user_id, as: :select, collection: User.all.map { |c| [c.first_name, c.id] }, include_blank: false, :input_html => { :width => 'auto' }
      f.input :user_id, as: :searchable_select, multiple: true, collection: ([["All", "all_account"]] + User.all.map{|acc| ["#{acc.email}", acc.id, class: "notify_select_account"]}), input_html: {required: true, class: "account_select_notify"}
    end
    f.actions         # adds the 'Submit' and 'Cancel' buttons
  end


  controller do
    def create
      users = params["notification"]["user_id"].reject { |c| c.empty?}
      if users.include?("all_account")
        users = User.all.map(&:id)
      end
      users.each do |user_id|
        Notification.create(user_id: user_id, title: params["notification"]["title"])
      end
      redirect_to admin_notifications_path, :alert => "Successfully Pushed Notification"
    end
  end

Friday, 17 February 2023

How to add action cable in rails application step by step

 1. Add meta tag in layout:

   <!DOCTYPE html>

<html>

  <head>

    <title>ActionCableSimpleApp</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <%= csrf_meta_tags %>

    <%= csp_meta_tag %>

    <%= action_cable_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>


  <body>

    <%= yield %>

  </body>

</html>

------------------------------------------------------------
2. config/cable.yml

development:
  adapter: redis
  url: <%= "redis://localhost:6379/1" || "redis://localhost:6379/1" %>
test:
  adapter: test
production:
  adapter: redis
  url: <%= "redis://localhost:6379/1" || "redis://localhost:6379/1" %>
  channel_prefix: action_cable_production
-----------------------------------------------------

3. Add javascripts folder in app/assets/javascripts

3.1: add new folder in app/assets/javascripts/channels
    1.1 add new file in app/assets/javascripts/channels/messages.js

     App.messages = App.cable.subscriptions.create('MessagesChannel', {  
connected(){
console.log("connted to message chall");
},
disconnected(){
console.log("disconnted to message chall");
},
  received: function(data) {
  $("#dhjdhjdfdf").append(data.message) //data show from this line 
console.log(data);
  },
});
--------------------------------

3.2 add application.js in app/assets/javascripts
//= require jquery
//= require jquery_ujs
//= require cable
//= require turbolinks

------------------------------------
3.3 add cable.js in app/assets/javascripts

//= require action_cable
//= require_self
//= require_tree

(function() {
  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);

------------------------------------------------------------------------
4. in app/channels/application_cable/connection.rb

module ApplicationCable
class Connection < ActionCable::Connection::Base
# identified_by :current_user

def connect
end

private
end
end
----------------------------------------------------------------------------------------
5. app/channels/messages_channel.rb

class MessagesChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'messages'
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end
---------------------------------------------------------

6. Add gems:
gem 'redis'
gem 'jquery-rails'
gem 'jquery-ui-rails'

---------------------------------------------------
7. Add routes in routes.rb

mount ActionCable.server => '/cable'
---------------------------------------------------
8. run: sudo service redis-server restart
----------------------------------------------
9. and for broadcast command

ActionCable.server.broadcast "messages", {:message=>"zzzzzzz"}
-----------------------------------------------------------------

10. Add this link in root path

<div id="dhjdhjdfdf"></div>