john-hamnavoe

Rails 7 Forms

1. Select Box updating other field on selection change
2. Dymanic nested forms rails 7

Rails 7 General

1. Using Modals in Rails 7 Application using Stimulus and Hotwire
2. Basic Steps to Add Sidekiq to Rails 7 App
3. Random notes on model generation rails
4. How I set up pagy and ransack for simple rails 7 application

john-hamnavoe

Introduction

For example have form with select box which has list of reasons and when user selects the reason we want to populate an amount field on the form. The reason table has the amount as one of its columns. In this example we have adjusments and adjustment_reasons when user creates a new adjustment they pick reason it populates the amount with default value from the adjustment reason.

Stimulus Controller

We will create reason_controller.js in app/javascript/controllers.

john-hamnavoe

Introduction

Model with accepted nested attributes stimulus controller to allow adding/deleting of rows to the nested input. e.g. TimeLog might have many TimeLogEntries

Model Changes

Change to accepts nested attributes

  has_many :time_log_entries
  accepts_nested_attributes_for :time_log_entries, allow_destroy: true

john-hamnavoe

Introduction

Putting modal dialog framework into Rails 7 application. Using this approach by David Colby. But not going as far as it does with dispatch events. As the article notes need to be on Turbo 7.2 at least.

Stimulus Controller

We will create modal_controller.js in app/javascript/controllers. Very similar to excid3 tailwind stimulus components modal component.

// This controller is an edited-to-the-essentials version of the modal component created by @excid3 as part of the essential tailwind-stimulus-components package found here:

john-hamnavoe

Gemfile

gem "sidekiq", "~> 6.2"
gem "sidekiq-failures"

Update config/application.rb

 class Application < Rails::Application

john-hamnavoe

Introduction

Some notes on syntax on models always looking up.

Foreign Keys

Optional

• Change Migration to null: true e.g. t.references :vehicle, null: true, foreign_key: true
• add optional: true to model e.g. belongs_to :vehicle, optional: true

john-hamnavoe

Index Container Component

View component I use for Index pages that are linked up to pagy and ransack, this component provides standard interface with title, subtitle, search, active filter and new button. Styling can change as required.

Generate Component

rails g component IndexContainer

IndexContainerComponent.rb

john-hamnavoe

Table View Component

These components used to generate a table in Rails 7 app.

Generate components

rails g component Tables::Table
rails g component Tables::Row
rails g component Tables::Header
rails g component Tables::Cell

john-hamnavoe

View Component for Pagy Paginator

rails g compoent pagy_paginator

pagy_paginator_component.rb

# frozen_string_literal: true

class PagyPaginatorComponent < ApplicationComponent

john-hamnavoe

Introduction

Adding pagy and ransack in rails so can have search function, paging and sorting on table of date on index controller. We also will use kredis to make it easy to store users last search/sort etc. between pages.

Install

Gemfile:

gem "pagy" gem "ransack"