Form might need more work - or I more instruction

[wdiechmann]

It is no doubt the latter in case - but anyways

I'm seeing

module Views
  #
  # the date component is a wrapper for the date_field form input field
  #
  class Components::Form::Form < Phlex::HTML
    include Phlex::Rails::Helpers::FormWith
    include Phlex::Rails::Helpers::HiddenField
    include Phlex::Rails::Helpers::TextField

    def initialize( resource: nil, css: "" )
      @classes = "h-full flex flex-col bg-white shadow-xl overflow-y-scroll #{@css}"
    end

    def template(&)
      form_with( model: @resource, url: helpers.resource_url(), id: helpers.resource_form, data: { form_sleeve_target: 'form' }, class: @classes) do |form|
        yield
      end
    end
  end
end

rendering

<form id="form_1" class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll " data-form-sleeve-target="form" action="/employees/2/asset_work_transactions/34" accept-charset="UTF-8" method="post">
<input type="hidden" name="authenticity_token" value="vS4kIXJRMmYnur4VD3wSBaEMf5R02jGY1RYVAozUL9DS51qpOwV-ajw7Z75fzDp-KdJvvqPWgLoB895mLBCzZg" autocomplete="off">

</form>

whereas I'd expect it to render something along the lines of

<form id="form_1" class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll" data-form-sleeve-target="form" enctype="multipart/form-data" action="/employees/2/asset_work_transactions/34" accept-charset="UTF-8" method="post">
  <input type="hidden" name="_method" value="patch" autocomplete="off">
  <input type="hidden" name="authenticity_token" value="vS4kIXJRMmYnur4VD3wSBaEMf5R02jGY1RYVAozUL9DS51qpOwV-ajw7Z75fzDp-KdJvvqPWgLoB895mLBCzZg"" autocomplete="off">
</form>

• recognising the PATCH when editing
• adding the enclose type enctype='multipart/form-data'

[wdiechmann]

is this a 'feature' issue more so than a 'bug' issue, @joeldrapper ?

I mean -- is the intention with the FormWith adapter to emulate the Rails helper 1:1 ?

[joeldrapper]

Hey @wdiechmann, the form_with adapter uses the same form_with helper behind the scenes, it just adapts it to immediately output what it returns so you don't need to manually output it with unsafe_raw. Here's a video showing the ERB form_with output matches the phlex form_with output when given the same arguments. https://cloud.drapper.me/GTR3qJft

[joeldrapper]

is this a 'feature' issue more so than a 'bug' issue?

The adapters are meant to be one-to-one mappings of the built-in Rails helpers. If they don't match the underlying adapters, that's a bug. There's no space for new features in the adapters because they map to defined things. Helper features should be pitched to Rails core.

That said, I will be looking at creating a Phlex-based form abstraction in the next few months that will give us space to define our own features.

[wdiechmann]

I am really struggling with this 😢

May have narrowed at least one of the issues to my lack of understanding how to implement this:

  # views/asset_work_transactions/_form.rb
  # resource gets set in the controller - it's the model instance,like Employee.first
  <%= render_form( resource: resource,... ) do |f| %>
    <%= render_form_hidden_field( resource: resource, form: f, field: :id ) %>
    <%= render_form_fields_for( form: f, field: :eventable, assoc: resource.eventable ) do |assoc_form| %>
      <%= render_form_date_field( resource: resource.eventable, form: assoc_form, field: :punched_at ) %>
    <% end %>
  <% end %>

  # helpers/view_components_helper.rb

  def render_form(**attribs, &block)
    render Views::Components::Form::Form.new **attribs, &block
  end

  def render_form_fields_for(**attribs, &block)
    render Views::Components::Form::FieldsFor.new **attribs, &block
  end

  def render_form_hidden_field(**attribs, &block)
    render Views::Components::Form::HiddenField.new **attribs, &block
  end

  def render_form_date_field(**attribs, &block)
    render Views::Components::Form::DateField.new **attribs, &block
  end

  # views/components/form/form.rb

  module Views
    #
    # the form component is a wrapper for the form
    #
    class Components::Form::Form < Phlex::HTML
      include Phlex::Rails::Helpers::FormWith

      def initialize( resource: nil, css: "" )
        @resource = resource
        @classes = "h-full flex flex-col bg-white shadow-xl overflow-y-scroll #{@css}"
      end

      def template(&)
        form_with( model: @resource, url: helpers.resource_url(), id: helpers.resource_form, data: { form_sleeve_target: 'form' }, class: @classes) do |form|
          yield
        end
      end
    end
  end


  # views/components/form/fields_for.rb

  module Views
    #
    # the fields_for component is a wrapper for the fields_for 
    #
    class Components::Form::FieldsFor < Phlex::HTML
      include Phlex::Rails::Helpers::FieldsFor

      def initialize( form: nil, field: nil, assoc: nil )
        @form = form
        @field = field
        @assoc = assoc
      end

      def template(&)
        # this doesn't work
        # @form.fields_for( @field, @assoc ) do |field_form|

        # this works
        fields_for(@field, @assoc) do |field_form|
          div( class: "flex-1 relative ", data: { 
              controller: "form", 
              form_form_sleeve_outlet: "#form-sleeve", 
              form_list_outlet: "#list", 
              action: "keydown->form#keydownHandler speicherMessage@window->form#handleMessages" 
            } ) do  
            yield          
          end
        end
      end
    end
  end

  # views/components/form/hidden_field.rb

  module Views
    #
    # the hidden_field component is a wrapper for the hidden_field form field
    #
    class Components::Form::HiddenField < Phlex::HTML
      include Phlex::Rails::Helpers::HiddenField

      def initialize( resource: nil, form: nil, field: nil, value: nil )
        @resource = resource.class.to_s.underscore
        @form = form
        @field = field
        @value = value
      end

      def template()
        # this doesn't work
        # @form.hidden_field @field, value: @value

        # this works 
        hidden_field( @resource, @field, value: @value)
      end
    end
  end

  # views/components/form/date.rb

  module Views
    #
    # the date component is a wrapper for the date_field form input field
    #
    class Components::Form::DateField < Phlex::HTML
      include Phlex::Rails::Helpers::DateField

      def initialize( resource: nil, form: nil, field: nil, title: nil, required: false, focus: false, date_css: "", label_css: "", input_css: "" )
        @date_classes = "space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 #{@date_css}"
        @label_classes = "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2 #{@label_css}"
        @input_classes = "block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md #{@input_css}}"
        @resource = resource
        @entity = form.object.class.to_s.underscore
        @form = form
        @field = field
        @title = title
        @required = required
      end

      def template()
        div class: @classes do
          div do
            label( for: @field, class: @label_classes) { @title}
          end
          div( class: "sm:col-span-2") do
            #
            # this doesn't work
            # @form.date_field @field, 
            #   required: @required, 
            #   data: { "form-target" => "#{'focus' if @focus}" },
            #   class: @input_classes 
            # div( class:"text-sm text-red-800" ) { @resource.errors.where(@field).map( &:full_message).join( "og ") }

            # this works - mostly - but the @entity is nil which tells me that the assoc_form is not being passed in (correctly)
            # it renders what is listed below
            date_field @entity, @field, 
              required: @required, 
              data: { "form-target" => "#{'focus' if @focus}" },
              class: @input_classes 
            div( class:"text-sm text-red-800" ) { @resource.errors.where(@field).map( &:full_message).join( "og ") }
          end
        end
      end
    end
  end

# date_field rendering:

<object></object>
<div><div><label for="punched_at" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2 "></label></div><div class="sm:col-span-2"><input required="required" data-form-target="" class="block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md }" type="date" name="nil_class[punched_at]" id="nil_class_punched_at"><div class="text-sm text-red-800"></div></div></div>

[wdiechmann]

with 'regular' forms it's not a big issue to write the resource yourself - like date_field resource, :punched_at and expect the template to return <input type="date" name="employee[:punched_at] id="employee_punched_at" /> but with, say accepts_nested_attributes_for :eventable it gets orders of magnitude difficult 😢

[wdiechmann]

dang - for a brief moment I really thought to have cracked it!

Tried:

# views/asset_work_transactions/_form.html.erb
<%= render Views::Components::Form::Form.new( resource: resource) do |form| %>
  <% debugger %>
  ...

because I thought: hey perhaps I'm supposed to not use view_helpers (or am doing them wrong)
but as it turns out, calling the Phlex classes "directly" does not improve my understanding at all!

The 'form' ( ..do |form| ) returns "<object></object>" if I use the debugger right after calling the Phlex form class, and asks the question: form.object. I'd expect the form.object to return my resource...

     1| <%#= form_with model: resource, url: resource_url(), id: resource_form, data: { form_sleeve_target: 'form' }, class: "h-full flex flex-col bg-white shadow-xl overflow-y-scroll" do |form| %>
     2| <%#= render_form( resource: resource) do |form| %>
     3| <%= render Views::Components::Form::Form.new( resource: resource) do |form| %>
=>   4|   <% debugger %>
     5|   <%= render_form_hidden_field resource: resource, form: form, field: :account_id, value: current_account.id %>
     6|   <%= render_form_hidden_field resource: resource, form: form, field: :eventable_type, value: "AssetWorkTransaction" %>
     7|   <%= render_form_fields_for( field: :eventable, assoc: resource.eventable ) do |field_form| %>
     8| 
     9|     <!-- Divider container 
    10|     <div class="h-full py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200"> -->
=>#0    block {|form=<#20689540 does not have #inspect>|} in _app_views_asset_work_transactions__form_html_erb___2974512297882659978_20682260 at ~/Deling/Walther/src/speicher/greybox/src/app/views/asset_work_transactions/_form.html.erb:4
  #1    block in render_in (2 levels) at ~/.asdf/installs/ruby/3.1.2/lib/ruby/gems/3.1.0/gems/phlex-rails-0.6.1/lib/phlex/rails/html/overrides.rb:31
  # and 133 frames (use `bt' command for all frames)
(rdbg) form
Unbuffered(Views::Components::Form::Form)[object: #<Views::Components::Form::Form:0x0000000286367dc8 @resource=#<Event id: 108, account_id: 3, eventable_type: "AssetWorkTransaction", eventable_id: 34, calendar_id: 6, name: "AWT", state: "IN", position: nil, ancestry: nil, started_at: nil, ended_at: nil, minutes_spent: 0, deleted_at: nil, created_at: "2022-10-19 11:23:39.607802000 +0200", updated_at: "2022-10-19 11:23:39.617638000 +0200", rrule: nil, first_occurence: nil, last_occurence: nil>, @classes="h-full flex flex-col bg-white shadow-xl overflow-y-scroll ", @_target="\n", @_view_context=#<ActionView::Base:0x00000002776558>, @_parent=nil>]
(ruby) form.object
"<object></object>"

[wdiechmann]

ok - I dug into the ruby API and as it stands yield has the ability to offer arguments....

TIL - using arguments with yield 😃

so sorry to have waisted so much valuable bandwidth on my total lack of command of Ruby 😢

[joeldrapper]

I don't quite follow how all these snippets work together to be able to show you what the problem was, but happy you seem to be figuring it out. Let me know if you get stuck again.

[wdiechmann]

my error was so incredibly stupid that I hesitate to share but WTH here goes:

    def template(&)
      form_with( model: @resource, url: helpers.resource_url(), id: helpers.resource_form, data: { form_sleeve_target: 'form' }, class: @classes) do |form|
        yield(form)
      end
    end

I was missing the (form when in fact calling yield - and hence not forwarding the form!

[joeldrapper]

Been there! 😅 By default, the view itself is yielded but you can of course yield specific objects.