schoolgirl_uniform 0.2.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58dbc55cc5843ea0980f2438a97a6cfbb85bd6fc37e503bdd507f95cd2a00b75
-  data.tar.gz: 7105a08c67034e2b76dc48a6e8204c752bdd23dc6fa3c8e0ec25c85b897a19d8
+  metadata.gz: 51f5035a1c610591e3097740c7528de13b0d07ed3c453b3003a4756827686e1e
+  data.tar.gz: 6c1c4de2b74e41abf5559a34368c212f79a12ca19b58c6beaa4c6c152fd4e1d7
 SHA512:
-  metadata.gz: 7818389aa702ad6a083dd10ae352d3b51baef8ed93525edd80a56baae6461883b86e5cfe2a24c8013ee698e5d21b9cc4a681347dcf688ba63dafe27b241575c6
-  data.tar.gz: 72ff48308ea6985940542ae978834ec5cebb7a7850babceb93f647e34436dab8beed50ff2e824026f625a483c191c8aa930fa4480102e1d78ca761d698958203
+  metadata.gz: 65dfd5a3c743a4a7a95761fb5eb31b6eb96ad3161f52d648aa5c14b2a66cff6b34ed9a94d92c27ff80f7bc707b7ee04ff5af8cef315d1b879b6fc0afd83137ef
+  data.tar.gz: e6c0eb8ece6a9c54649c3f85f2663c539d4aac3692db42d3e8837584e0ae02ae4a7743d755f3d9907b02f82dabd75561110ad25cc0d4d18be2b1a94c80fd849a

data/README.md

@@ -1,5 +1,6 @@
-<br>
-<br>
+<p align="right">
+  <a href="https://rubygems.org/gems/schoolgirl_uniform"><img align="right" src="https://user-images.githubusercontent.com/2478436/51829691-c55cc000-22f6-11e9-99a5-42f88a8f2a55.png" width="56" height="56" /></a>
+</p>
 <p align="center">
   <a href="#">
     <img align="center" width="75%" src="https://user-images.githubusercontent.com/2478436/210048098-9d09b442-f057-42e1-b77b-94277928e452.png"/> 
@@ -16,10 +17,11 @@
 </p>
 
 :feet: Multistep form concept for Rails projects. Allows to create complex forms for a few models simultaneously. Supports selectable per step validations without data persistence into db.
+> Currently uses session to store data before actual save. If your sessions are stored in cookies then it has a 4 KB limit.
 
 <br>
 
-## Installation
+### Installation
 
 To start using it just add this line to your application's Gemfile:
 
@@ -36,8 +38,9 @@ $ rails generate schoolgirl_uniform:install CatgirlsSurvey
 
 > You can also use snake case, so `catgirls_survey` would be identical to `CatgirlsSurvey` and will generate the same output during scaffolding.
 
+<br>
 
-## Usage and Config
+### Usage and Config
 
 To achieve working multistep form you need to configure FVC:
 
@@ -48,41 +51,92 @@ To achieve working multistep form you need to configure FVC:
 - :school_satchel: [**Controller**](#school_satchel-controller)
 <hr>
 
+<p align="center">
+  <a href="#">
+    <img align="center" width="75%" src="https://user-images.githubusercontent.com/2478436/210439098-6230592e-4e94-4236-88e6-70d162d5369a.png"/> 
+  </a>
+</p>
+
 ### :womans_clothes: Form
     e.g. CatgirlsSurveyForm - app/forms/catgirls_survey_form.rb
 
-1. Declare the steps:
+<br>
+
+#### 1. Declare the steps and details if needed in your form:
+
   ```ruby
-  def self.steps
-    %w[first second third]
+  steps %w[first second third]
+
+  def self.steps_details
+    {
+      first: 'Credentials',
+      second: 'Personal Details',
+      third: 'Contact Information'
+    }
   end
   ```
-2. Define form fields
+:blue_book: How to [customize steps titles and descriptions](https://github.com/vergilet/schoolgirl_uniform/wiki/1.-Decorate-steps)
+
+<br>
+
+#### 2. Define form fields:
+
   ```ruby
-  attribute :username, String
+  attribute :username,         :string
+  attribute :password,         :string
+
+  attribute :date_of_birth,    :date
+  attribute :gender,           :string
+  attribute :favourite_color,  :string
+  attribute :device_type,      :string
+
+  attribute :email,            :string
+  attribute :phone_number,     :string
+  attribute :country,          :string
+  attribute :city,             :string
+  attribute :address_field_1,  :string
+  attribute :address_field_2,  :string
+  attribute :zip_code,         :string
   ```
-3. Define validation and select appropriate step for it
+:blue_book: Different types and [how to add custom types such as `Array` and `hash` explained.](https://github.com/vergilet/schoolgirl_uniform/wiki/4.-Array-and-Hash-and-other-custom-types)
+
+<br>
+
+#### 3. Use block validations with step condition to group needed checks:
+
   ```ruby
-  validates :username, presence: true, if: proc { on_step('second') }
+  with_options if: :first? do |step|
+    step.validates :username, presence: true, length: 3..10
+    step.validate :custom_username_validation
+    ...
+  end
+
+  with_options if: :second? do |step|
+    step.validates :date_of_birth, presence: true
+    step.validate :custom_date_of_birth_validation
+    ...
+  end
   ```
-4. Inside `save!` method build your records, set them with form attributes and save them in transaction. 
-   Use `.save!(validate: false)` to skip native validations on model.
-   In order to return the result set the `@identifier` with created records reference/references 
-   
-   ( e.g. simple `1234` or complex `{user_id: 1234, personal_data_id: 5678}` )
+<br>
+
+#### 4. Inside `save!` method build your records, set them with form attributes and save.
+  
   ```ruby
+
+  attr_reader :identifier
+
   def save!
-    user = User.new(username: username)
-    personal_data = user.build_personal_data(email: email)
-    
-    ActiveRecord::Base.transaction do
-      user.save!(validate: false)
-      personal_data.save!(validate: false)
-    end
-    
+    user.save!(validate: false)
+    personal_detail.save!(validate: false)
+    contact_info.save!(validate: false)
+
     @identifier = user.id
   end
   ```
+:blue_book: Check more [complex examples and how to read them on the controller](https://github.com/vergilet/schoolgirl_uniform/wiki/5.-Returning-Complex-Results). 
+
+<br>
+
 ### :dress: View
  - Scaffolding will generate example structure of view files:
     - _show.html.erb_
@@ -97,10 +151,12 @@ To achieve working multistep form you need to configure FVC:
 
 :exclamation: Please notice that **_show_** and **_finish_** are action views, others are partials. \
 :art: Feel free to modify html and styles around the form.
+<br>
 
 #### :infinity: Steps
 
-By default Scaffolding generates 3 steps, but you can modify, delete them or add new steps. Just make sure that steps are **__partials_** and match corresponded names inside **_Form_** (e.g. CatgirlsSurveyForm): 
+By default Scaffolding generates 3 steps, but you can modify, delete or add new steps. \
+Just make sure that steps are **__partials_** and match corresponded names inside **_Form_** (e.g. CatgirlsSurveyForm): 
 
   ```ruby
   # app/views/catgirls_survey/steps/_first.html.erb
@@ -111,30 +167,21 @@ By default Scaffolding generates 3 steps, but you can modify, delete them or add
   <%= form.label :password %>
   <%= form.text_field :password %>
   ```
-
+<br>
 
 ### :school_satchel: Controller
-    e.g. CatgirlsSurveyController - app/controllers/catgirls_survey_controller.rb
+e.g. CatgirlsSurveyController - app/controllers/catgirls_survey_controller.rb
 
-1. Make sure you have listed all form fields (used for permit params)
-```ruby
-def form_attributes
-  [:username, :password, :email, :phone]
-end
-```
-2. Fetch resource/resources from DB using identifier, which you set in `.save!`
+Fetch resource(s) from DB using `identifier`, which you set in `.save!`
 ```ruby
   def finish
-    @record = User.find_by(uuid: params[:identifier])
-    ...
-    # or if you have a few identifiers
-    ...
-    @record1 = Book.find_by(title: params[:identifier][:title])
-    @record2 = Author.find_by(id: params[:identifier][:author_id])
+    @record = User.find_by(id: params[:identifier])
   end
 ```
- 
- 
+:blue_book: Check more [complex examples and how to read them on the controller](https://github.com/vergilet/schoolgirl_uniform/wiki/5.-Returning-Complex-Results). 
+
+<br>
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/vergilet/schoolgirl_uniform

data/app/controllers/base_controller.rb

@@ -2,7 +2,7 @@ module SchoolgirlUniform
   class BaseController < ActionController::Base
     before_action :reset_session, only: :show
     before_action :refresh_session, only: :current
-    before_action :initialize_form,  except: [:index]
+    before_action :initialize_form
     after_action :refresh_current_step, only: [:show, :current, :previous]
     helper_method :form_carrier
 
@@ -26,6 +26,10 @@ module SchoolgirlUniform
     def current
       if request.post?
         return render :show unless @form.valid?
+
+        @form.save_form! if @form.last_step?
+        return render :show if @form.errors.present?
+
         redirect_to redirect_options
       elsif request.get?
         return render :show if params[:step] == @form.current_step
@@ -44,6 +48,10 @@ module SchoolgirlUniform
 
     private
 
+    def form_attributes
+      initialize_form.attribute_names
+    end
+
     def paths
       {
         current: nil,
@@ -69,9 +77,8 @@ module SchoolgirlUniform
 
     def redirect_options
       if @form.last_step?
-        @form.save!
         reset_session
-        { action: :finish, identifier: @form.identifier }
+        { action: :finish, identifier: @form.identifier.to_param }
       else
         @form.next_step
         { action: :current, step: @form.current_step }

data/app/forms/uniformable.rb

@@ -1,21 +1,59 @@
 module SchoolgirlUniform
   module Uniformable
+    module ClassMethods
+      def steps(*step_list)
+        @defined_steps = step_list.flatten.map(&:to_s)
+        attribute :step, :string, default: -> { @defined_steps.first }
+
+        @defined_steps.each do |step_name|
+          helper_method_name = "#{step_name}?"
+          unless method_defined?(helper_method_name)
+            define_method helper_method_name do
+              current_step == step_name
+            end
+          end
+        end
+      end
+
+      def defined_steps
+        @defined_steps || []
+      end
+
+      def steps_details
+        defined_steps.each_with_object({}) { |step, hash| hash[step] = step }
+      end
+    end
 
     def self.included(base)
+      base.extend(ClassMethods)
       base.include ActiveModel::Model
-      base.include Virtus.model
+      base.include ActiveModel::Attributes
     end
 
-    def initialize(options = {})
-      initialize_attributes(options)
+    def save!
+      raise NotImplementedError, "#{self.class.name} must implement #save!"
     end
 
-    def save!
-      raise NotImplementedError
+    def save_form!
+      unless defined?(ActiveRecord::Base)
+        raise "ActiveRecord::Base not available for transaction"
+      end
+
+      ActiveRecord::Base.transaction do
+        save!
+      rescue => e
+        if e.respond_to?(:record) && e.record.respond_to?(:errors)
+          e.record.errors.each { |error| errors.add(error.attribute, error.message) }
+        else
+          errors.add(:base, e.message)
+        end
+        raise ActiveRecord::Rollback
+      end
+      errors.empty?
     end
 
     def current_step
-      step || steps.first
+      step
     end
 
     def next_step
@@ -24,46 +62,43 @@ module SchoolgirlUniform
     end
 
     def previous_step
+      return if first_step?
       shift_step(-1)
     end
 
     def first_step?
-      current_step == steps.first
+      current_step == self.class.defined_steps.first
     end
 
     def last_step?
-      current_step == steps.last
+      current_step == self.class.defined_steps.last
     end
 
     def steps
-      self.class.steps
+      self.class.defined_steps
     end
 
-    def current_step_index
-      steps.index(current_step)
+    def steps_details
+      self.class.steps_details
     end
 
-    private
-
-    def initialize_attributes(new_attributes)
-      self.errors ||= ActiveModel::Errors.new(self)
-      self.attributes = defaults.merge(new_attributes)
-    end
-
-    def defaults
-      { }
+    def current_step_index
+      Array(steps).index(current_step)
     end
 
     def persisted?
       false
     end
 
+    private
+
     def shift_step(delta)
-      self.step = steps[steps.index(current_step) + delta]
-    end
+      idx = current_step_index
+      return unless idx
 
-    def on_step(step)
-      current_step == step
+      new_index = idx + delta
+      self.step = steps[new_index] if new_index >= 0 && new_index < steps.length
     end
+
   end
-end
+end

data/app/views/schoolgirl_uniform/base/_wizard.html.erb

@@ -0,0 +1,7 @@
+<div class="schoolgirl-uniform-step-wizard">
+  <% form.steps.each_with_index do |step, index| %>
+    <div class="milestone <%= 'active' if form.current_step_index >= index %>">
+      <span><%= form.steps_details[step.to_sym] || step %></span>
+    </div>
+  <% end %>
+</div>

data/app/views/schoolgirl_uniform/base/show.html.erb

@@ -0,0 +1,202 @@
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background-color: #f4f4f4;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        min-height: 100vh;
+        margin: 0;
+        padding: 20px 0;
+    }
+
+    .form-container {
+        background-color: #fff;
+        padding: 30px;
+        border-radius: 8px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        max-width: 600px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    /* Step Wizard Styling */
+    .schoolgirl-uniform-step-wizard {
+        display: flex; /* Use flexbox for alignment */
+        justify-content: space-around; /* Distribute milestones evenly */
+        margin-bottom: 30px;
+        padding-bottom: 15px;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .schoolgirl-uniform-step-wizard .milestone {
+        padding: 8px 15px;
+        border: 1px solid #ccc;
+        border-radius: 20px; /* More rounded */
+        background-color: #f9f9f9;
+        color: #555;
+        font-size: 0.9em;
+        text-align: center;
+        flex-grow: 1; /* Allow milestones to grow */
+        margin: 0 5px; /* Add some spacing between milestones */
+    }
+
+    .schoolgirl-uniform-step-wizard .milestone.active { /* Active step */
+        background-color: #4CAF50; /* A more standard green */
+        color: white;
+        border-color: #388E3C;
+    }
+
+    .schoolgirl-uniform-step-wizard .milestone.completed { /* Completed step (optional, if you want to differentiate) */
+        background-color: #D4EDDA;
+        color: #155724;
+        border-color: #C3E6CB;
+    }
+
+    /* Form Styling */
+    .multistep-form .form-step-content {
+        border: 1px solid #ddd; /* Border for each step's content area */
+        padding: 25px;
+        border-radius: 6px;
+        margin-bottom: 25px;
+        background-color: #fdfdfd;
+    }
+
+    /* Styling for individual form fields/groups */
+    .multistep-form .form-group {
+        margin-bottom: 20px;
+    }
+
+    .multistep-form .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: bold;
+        color: #333;
+        font-size: 0.95em;
+    }
+
+    .multistep-form .form-group input[type="text"],
+    .multistep-form .form-group input[type="password"],
+    .multistep-form .form-group input[type="date"],
+    .multistep-form .form-group input[type="email"],
+    .multistep-form .form-group input[type="tel"], /* For phone_number */
+    .multistep-form .form-group select {
+        width: 100%; /* Make inputs take full width of their container */
+        padding: 12px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box; /* Important for width calculation */
+        font-size: 1em;
+        transition: border-color 0.3s ease;
+    }
+
+    .multistep-form .form-group input[type="text"]:focus,
+    .multistep-form .form-group input[type="password"]:focus,
+    .multistep-form .form-group input[type="date"]:focus,
+    .multistep-form .form-group input[type="email"]:focus,
+    .multistep-form .form-group input[type="tel"]:focus,
+    .multistep-form .form-group select:focus {
+        border-color: #4CAF50;
+        outline: none;
+        box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
+    }
+
+    /* Error Styling */
+    /* Error Styling for individual fields (Rails default) */
+    .field_with_errors {
+        display: inline-block; /* Or 'block' if you prefer full width */
+        width: 100%;
+    }
+    .field_with_errors input,
+    .field_with_errors select {
+        border: 1px solid red !important;
+    }
+
+    /* Custom Error Messages Block Styling (User Provided) */
+    .schoolgirl-uniform-errors {
+        border: 1px solid red;
+        padding: 10px; /* Added some padding for better appearance */
+        margin-bottom: 20px; /* Added margin for spacing */
+        border-radius: 4px; /* Optional: for rounded corners */
+        background-color: #ffebeb; /* Optional: light red background */
+    }
+    .schoolgirl-uniform-errors ul {
+        list-style-type: none; /* Removes default bullet points */
+        padding-left: 0; /* Removes default padding */
+        margin: 0;
+    }
+    .schoolgirl-uniform-errors li {
+        margin-bottom: 5px; /* Spacing between error messages */
+    }
+    .schoolgirl-uniform-errors span {
+        color: red;
+    }
+
+    /* Navigation Buttons Styling */
+    .form-navigation {
+        display: flex;
+        justify-content: space-between; /* Puts 'back' and 'next/submit' on opposite ends */
+        align-items: center;
+        margin-top: 25px;
+        padding-top: 20px;
+        border-top: 1px solid #e0e0e0;
+    }
+
+    .form-navigation a,
+    .form-navigation input[type="submit"] {
+        padding: 12px 25px;
+        border: none;
+        border-radius: 5px;
+        text-decoration: none;
+        font-size: 1em;
+        cursor: pointer;
+        transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    }
+
+    .form-navigation a { /* Back button */
+        background-color: #6c757d;
+        color: white;
+    }
+    .form-navigation a:hover {
+        background-color: #5a6268;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+
+    .form-navigation input[type="submit"] { /* Next/Submit button */
+        background-color: #007bff; /* A nice blue for primary action */
+        color: white;
+    }
+    .form-navigation input[type="submit"]:hover {
+        background-color: #0056b3;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+</style>
+<div class="form-container">
+
+  <%= render 'wizard', form: @form %>
+
+  <%= form_for @form, as: "#{controller_name}_form".to_sym, url: form_carrier.current_step_path, html: { id: "#{controller_name}_form", class: 'multistep-form' } do |f| %>
+    <%= f.hidden_field :step, value: @form.current_step %>
+
+    <%= render "form_errors", form: @form %>
+
+    <div class="form-step-content">
+      <%= render "#{ controller_name }/steps/#{@form.current_step.underscore}", form: f %>
+    </div>
+
+    <div class="form-navigation">
+      <% if !@form.first_step? %>
+        <%= link_to 'Back', form_carrier.previous_step_path %>
+      <% else %>
+        <span>&nbsp;</span>
+      <% end %>
+
+      <% if @form.last_step? %>
+        <%= f.submit 'Submit Details' %>
+      <% else %>
+        <%= f.submit 'Next Step' %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/lib/generators/schoolgirl_uniform/templates/controllers/template_controller.rb.erb

@@ -5,17 +5,13 @@ class <%= class_name.camelcase %>Controller < SchoolgirlUniform::BaseController
   end
 
   def finish
-    @record = User.find_by(uuid: params[:identifier])
-  end
-
-  def form_attributes
-    [:username, :password, :email, :phone]
+    @record = User.find_by(id: params[:identifier])
   end
 
   def paths
     {
-      current: current_<%= class_name.snakecase %>_path(step: @form.current_step),
-      previous: previous_<%= class_name.snakecase %>_path
+      current: current_<%= class_name.underscore %>_path(step: @form.current_step),
+      previous: previous_<%= class_name.underscore %>_path
     }
   end
 end