Forem: Shilpi Agrawal

delegate_to in Rails

Shilpi Agrawal — Sun, 11 Oct 2020 16:48:15 +0000

Ruby is known as Developer's favourite language, for a reason. Why it shouldn't when it makes our life so easier. ❤️

delegate_to is another wonderful library, as its name sounds it means delegating your work to someone else. In programmitcal word, provides a delegate class method to easily expose contained objects’ public methods as your own.

delegate_to is a very easy to go method with ActiveRecord in Rails.

The very basic example of how to use it is given below.

Whenever a method is dependent on the presence of another object, we always have the fear of getting NoMethodError and to solve that delegate_to has an option of allow_nil to return nil if object is not present.

class User < ActiveRecord::Base
  has_one  :profile
  delegate :first_name, to: :profile, allow_nil: true
end

User.new.first_name
>> gives nil if profile is not present.

We could pass more than one method to be delegated.

class User < ActiveRecord::Base
  has_one  :profile
  delegate :first_name, :age, :last_name, to: :profile, allow_nil: true
end

To make the delegated method more readable, it comes with an option of prefix

Hope you like it. And you find it useful for your next method callings. Don't forget to show some love. Thank you.

Password visibility toggle using stimulus.js and Rails 6

Shilpi Agrawal — Sun, 04 Oct 2020 19:07:07 +0000

Recently I wanted to implement password show hide feature in devise forms using Stimulus.js in Rails 6. Being a beginner in stimulus. I had to struggle a lot to find a right way to do it.

There are two ways of implementation and two scenarios which I will be covering in this article.

When you want to implement toggle just in one password field.
When you want to implement toggle in two password fields for e.g. in signup form we will have two password fields.

I am assuming whoever is reading this they have basic idea of Stimulus.js

Scenario 1.

This is how my basic devise password field looks like

<div class="form-group my-4" data-controller="password-toggle">
 <%= f.label :password %>
 <%= f.password_field :password, autocomplete: "current-password", class: 'form-control p-2 my-2 unhide', placeholder: "Password", "data-target": "password-toggle.unhide"%>
 <a data-action="click->password-toggle#password" class="password-field-icon-1 far fa-eye-slash"></a>
</div>

There are three things which I have added which converts my field into accepting stimulus events.

Defining stimulus controller: data-controller="password-toggle" password_toggle_controller.js is my stimulus controller file.
Defining target field: "data-target": "password-toggle.unhide"
Defining click event: Click event to be defined on icon tag. data-action="click->password-toggle#password"

Now, this is how our password_toggle_controller.js will look like.

import { Controller } from "stimulus";

export default class extends Controller {

  static targets = ["unhide"]

  password(e) {
    if (this.input.type === "password") {
      e.target.classList.remove('fa-eye-slash');
      e.target.classList.add('fa-eye');
      this.input.type = "text";
    } else {
      e.target.classList.remove('fa-eye');
      e.target.classList.add('fa-eye-slash');
      this.input.type = "password";
    }
  }
}

The basic idea of this piece of code is, if input field type is password and you click on visibility icon it will change the field type to text and toggle the icon and vice versa.

Now, if this works for you and this is only your requirement then great!

Scenario 2

But if your requirement is not this and you want to enable the toggle on both password fields. Then we have to use more of jquery.

And in my code as I have used SVG type of icon. e.target doesn't always gives me correct target to make the changes in icon. This article briefly explains why does click event on SVG icon behaves like that.

So, I had to change my way of approaching to this problem.

<div class="form-group pb-1" data-controller="password-toggle">
  <label>Password</label>
  <%= f.password_field :password, autocomplete: "off", class: 'form-control p-2', required: true, placeholder: 'Password' %>
  <a data-action="click->password-toggle#password" class="password-field-icon-2 far fa-eye-slash"</a> 
</div>

<div class="form-group pb-1" data-controller="password-toggle">
  <label>Password Confirmation</label>
  <%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control p-2', required: true, placeholder: 'Confirm Password' %>
  <a data-action="click->password-toggle#password" class="password-field-icon-2 far fa-eye-slash">     </a>
</div>

As, you can see I removed the data-target as I am not going to use that, instead I will use the event object, in my stimulus controller.

import { Controller } from "stimulus";

export default class extends Controller {

  password(e) {

    var password_field = $(e.currentTarget).prev("input")[0];
    var icon = $(e.currentTarget).closest("svg")[0];

    if (password_field.type === "password") {
      icon.classList.remove('fa-eye-slash');
      icon.classList.add('fa-eye');
      password_field.type = "text";
    } else {
      icon.classList.remove('fa-eye');
      icon.classList.add('fa-eye-slash');
      password_field.type = "password";
    }
  }
 }
}

The basic algo of the code remains same, the only change is how do we fetch the input field and how do we fetch the icon. Instead of using e.target I used e.currentTarget which correctly gives me the icon tag.

And instead of using this.target I am using same e.currentTarget to get the input field just previous to it, which is basically gives me the input password field for that icon event.

Thank you! For reading it out. I hope it helps someone. If you have better idea than this. Please let me know. I would love implement it in my project. Don't forget to show some love. ❤️

Rails notes 😱

Shilpi Agrawal — Sun, 27 Sep 2020 18:22:22 +0000

When I started with Rails, I came across with something called Rails notes. It amazed me how much rails work for developers.

You just add these tags #TODO, #FIXME, #OPTIMIZE as comments in your files.

And when you run rails notes you will get something like this.

The default tags it searches for are ["OPTIMIZE", "FIXME", "TODO"]
If you want to add your custom tags, you can add them.

And while searching you have to use those tags.

Thank you for reading it out ❤️. If you find it helpful, don't forget to drop in your likes and comments.

send() in ruby to call dynamic methods

Shilpi Agrawal — Sun, 20 Sep 2020 18:44:03 +0000

For newbies in Ruby or Rails programming you will find this method .send being used at many places. You will find many tutorials and blogs explaining what it does and when to use.

To get myself an idea what is it. I had to go through lot of them. So, anyone who is new to ruby or meta programming. I will tell you a straight away answer what is it.

.send() is a method in Ruby to call any method without knowing its name. In your day to day coding you will have mainly two usage of it.

Dynamic Method Calls: If you want to call any dynamic method instead of writing if-else logic again and again.
Private Method Calls: If you really really want to call a private method. Its been called private method for a reason. So, don't use it for hack around. Use it only when its really needed.

.send excepts first argument as method name and later if their is an argument to be passed to that method.

So, instead of writing like this in above code.

if word == "awful"
 puts "Claw-ful"
elsif word == "perfect"
 puts "Purr-fect"
end

we can use the above code using .send. This is just short and simple code, but it might be useful when you have tidy if else logics in your code.

If you find it helpful. Don't forget to drop some loves and comments. Thanks!

One liner to fetch the value from hash in Ruby.

Shilpi Agrawal — Sat, 12 Sep 2020 15:13:38 +0000

Struggling with fetching values from nested hash and looking for one liner, to get the work done.
Here, is something really fun I have found. Have a look at it.

Have fun using it. And don't forget to drop some love and comment.

Integrating ActivityNotification & bootstrap_email in Rails 5+

Shilpi Agrawal — Tue, 01 Sep 2020 15:56:52 +0000

Recently in our platform we started using activity_notifications for in-platform notifications and email notifications. But we wanted to use our already styled template files.

If you are struggling with the same problem, then you have come to right place.

We figured out a way to integrate bootstrap_email and activity_notifications

I am going to walk you through with basic setup of activity_notification emails and bootstrap_email and then using bootstrap_email styling for all activity_notifications.

1. Setting up ActivityNotification

To setup in-platform notification please follow gem's documentation

2. Setting up Email notification

To setup email notification please follow gem's documentation.

While following the documentation please make sure to include this

acts_as_target email: :email, email_allowed: :confirmed_at

in your target user model.

Once these two steps are ready you are good to go to start sending emails.

3. Setting up bootstrap email

To setup bootstrap for your emails, follow gem's documentation

Now, we have successfully enabled both the libraries in our platform. Now its the time to connect both of them.

4. Using custom mailer for activity_notification

While configuring activity_notification you must have created a config file for it, at config/activity_notification.rb which defines all the settings of activity_notification.

Update this below line in config/activity_notification.rb to use our custom mailer file.

config.mailer = "ActivityNotificationMailer"

And create a new file at app/mailers/activity_notification_mailer.rb

We are going to use this file to override one of the gem's function to use bootstrap_email function instead of using devise function.

class ActivityNotificationMailer < ActivityNotification::Mailer
  layout 'whatever_layout_you_are_using_for_emails'

  def send_mail(headers, fallback = nil)
    begin
      make_bootstrap_mail headers
    rescue ActionView::MissingTemplate => e
      if fallback.present?
        make_bootstrap_mail headers.merge(template_name: fallback)
      else
        raise e
      end
    end
  end

Save this file and TADA you will be experiencing automated bootstrap styled emails getting sent from your platform.

Thank you for reading it out. Hope someone will find it helpful. And if you are that someone don’t forget to show us some love by giving some reactions and comments. :)