Using the DateField helper in phlex-rails

[wdiechmann]

I'm currently refactoring a project to using Phlex - and it's the next big thing IMHO 😃

I've managed to use helpers until now but this one keeps biting me in the butt 😢

module Views
  #
  # the date component is a wrapper for the date_field form input field
  #
  class Components::Form::Date < 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
      @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
          @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 ") }
        end
      end
    end
  end
end

It renders - but leaves out the 'meat' so to speak (the date form field does not get buffered)

I'm sure it's on me - but I really could do with a hint

[joeldrapper]

Looks like you're not using the date field helper adapter but are calling date_field on whatever the @form object is. If that's a buffered form builder from the form_with or form_for adapters, it should work. Can you share the code where the form is created?

[wdiechmann]

Wow - much appreciate your ‘trigger finger’ 🙏😊I can but realise that the @Form is a ‘fields_for’ association do |form| 😱Med venlig hilsenWaltherDen 25. feb. 2023 kl. 11.42 skrev Joel Drapper ***@***.***>: Looks like you're not using the date field helper adapter but are calling date_field on whatever the @Form object is. If that's a buffered form builder from the form_with or form_for adapters, it should work. Can you share the code where the form is created? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[wdiechmann]

• and here's the _form.html.erb (you will like to notice that I'm "converting" from view_components no doubt 😄 - phlex is so much smarter, easier, and I like to think it's faster too - what a win)

<%= form_with model: resource, url: resource_url(), id: resource_form, data: { form_sleeve_target: 'form' }, class: "h-full flex ..." do |form| %>
  <%= form.fields_for :eventable do |asset_work_transaction_form| %>
    <%= form.hidden_field :account_id, value: current_account.id %>
    <%= form.hidden_field :eventable_type, value: "AssetWorkTransaction" %>
    <div class="flex-1 relative "
      data-controller="form"
      data-form-form-sleeve-outlet="#form-sleeve"
      data-form-list-outlet="#list"
      data-action="keydown->form#keydownHandler speicherMessage@window->form#handleMessages"    
      >
      <!-- Header -->
      <%= render_component "resource/form_header", resource: resource, title: form_header_title, description: form_header_description %>

      <!-- Divider container -->
      <div class="h-full py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">

        <!-- Name -->
        <%= render_component "resource/input_string", form: form, field: :name, resource: resource, title: t('.name'), focus: true, required: true %>

        <!-- punch_asset_ip_addr -->
        <%= render_component "resource/input_string", form: asset_work_transaction_form, field: :punch_asset_ip_addr, resource: resource, title: t('.punch_asset_ip_addr') %>

        <!-- punched_at (date) -->
        <%= render_form_date resource: resource, form: asset_work_transaction_form, field: :punched_at, required: true %>
        <%#= render_component "resource/input_date", form: asset_work_transaction_form, field: :punched_at, resource: resource, title: t('.punched_at'), required: true %>

[wdiechmann]

the issue at hand is the <%= render_form_date ...%> right at the bottom - the helper looks like this:

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

[joeldrapper]

I see what the problem is.

The form is being created in ERB and then passed to Phlex. The problem is, when Phlex gets it, it's not been adapted. The easiest solution would be to move your whole form into a Phlex component so that the initial form_with call hits the Phlex::Rails::Helpers::FormWith adapter and yields a BufferedFormBuilder.

With a BufferedFormBuilder as f, f.date_field will immediately push the generated date field tag to the output buffer rather than returning a value. This is much more natural in Phlex, while in ERB, you manually output the return value by using special output tags <%=.

Hope that makes sense.

[wdiechmann]

Thx a lot 🙏It males sense - and the form will end up in Phlex, eventually; only I hoped to take it in tiny steps 😌 guess not —Ever in Denmark? Med venlig hilsenWaltherDen 25. feb. 2023 kl. 17.35 skrev Joel Drapper ***@***.***>: I see what the problem is. The form is being created in ERB and then passed to Phlex. The problem is, when Phlex gets it, it's not been adapted. The easiest solution would be to move your whole form into a Phlex component so that the initial form_with call hits the Phlex::Rails::Helpers::FormWith adapter and yields a BufferedFormBuilder. With a BufferedFormBuilder, f.date_field will immediately push the date field tag to the output buffer rather than returning a value. This is much more natural in Phlex, while in ERB, you manually output the return value by using <%= tags. Hope that makes sense. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[joeldrapper]

@wdiechmann it looks like GitHub isn't parsing your email responses correctly. Could you draft your responses in the web interface instead?

[wdiechmann]

I have a question pertaining to the output -

I have this - actually it's the same on all fields inside the fields_for - and I've removed the non-essential parts

# views/components/form/text_area.rb
module Views
  class Components::Form::TextArea < Phlex::HTML
    include Phlex::Rails::Helpers::Label
    include Phlex::Rails::Helpers::TextArea

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

    def template()
      div( class: "some classes") do
        div do
          @form.label( @field, @title, class: "some other classes )
        end
        div( class: "sm:col-span-2") do
          @form.text_area( @field, class: "more classes")
        end
      end
    end
  end
end

# views/asset_work_transactions/_form.html.erb
<%= render_form( resource: resource) do |form| %>
  <%= render_form_hidden_field resource: resource, form: form, field: :account_id, value: current_account.id %>
  <%= render_form_hidden_field resource: resource, form: form, field: :eventable_type, value: "AssetWorkTransaction" %>
  <%= render_form_fields_for( form: form, field: :eventable, assoc: resource.eventable ) do |assoc_form| %>
    <%= render_form_header( resource: resource, title: form_header_title, description: form_header_description ) %>

    <!-- Divider container -->
    <%= render_form_divider do %>

      <!-- Name -->
      <%= render_form_text_field( resource: resource.eventable, form: form, field: :name, title: t('.name'), focus: true, required: true) %>
      <!-- punched_at (date) -->
      <%= render_form_date_field( resource: resource, form: assoc_form, field: :punched_at, required: true) %>

      <!-- reason -->
      <%= render_form_text_area( form: assoc_form, field: :reason, resource: resource, title: t('.reason'), required: true) %>

    <% end %>
  <% end %>

  <%= render_form_action_buttons resource: resource, delete_url: resource_url(), deleteable: !resource.new_record? %>

<% end %>

This all gets rendered ok - but the order is somewhat strange (which does not result in the output I expected)

<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="_method" value="patch" autocomplete="off"><input type="hidden" name="authenticity_token" value="-zysJ6_hsuY-8LQYTTkoL-kL1v7xCyHazUI0stPu7Dtgc4PJPo4c_eD1r9JyVREkOCFHYCdV4foVNFx1O2qn2Q" autocomplete="off">
  <input value="3" autocomplete="off" type="hidden" name="event[account_id]" id="event_account_id">
  <input value="AssetWorkTransaction" autocomplete="off" type="hidden" name="event[eventable_type]" id="event_eventable_type">
  <label for="event_{:for=>:name, :class=>&quot;block text-sm font-medium text-gray-900 sm:mt-px sm:pt-2 &quot;}"><span class="translation_missing" title="translation missing: da.asset_work_transactions.form.name">Name</span></label><input required="required" data-form-target="focus" class="block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md }" type="text" value="AWT" name="event[name]" id="event_name"><label for="event_eventable_attributes_{:for=>:punched_at, :class=>&quot;block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2 &quot;}"></label><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 }" value="2022-10-19" type="date" name="event[eventable_attributes][punched_at]" id="event_eventable_attributes_punched_at"><label class="block text-sm font-medium text-gray-900 sm:mt-px sm:pt-2 " for="event_eventable_attributes_reason"><span class="translation_missing" title="translation missing: da.asset_work_transactions.form.reason">Reason</span></label><textarea class="block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md }" required="required" name="event[eventable_attributes][reason]" id="event_eventable_attributes_reason"></textarea><input autocomplete="off" type="hidden" value="34" name="event[eventable_attributes][id]" id="event_eventable_attributes_id"><div class="flex-1 relative " data-controller="form" data-form-form-sleeve-outlet="#form-sleeve" data-form-list-outlet="#list" data-action="keydown->form#keydownHandler speicherMessage@window->form#handleMessages">
    <div class="sticky z-20 top-0 right-0 px-4 py-6 bg-gray-50 sm:px-6"><div class="flex items-start justify-between space-x-3"><div class="space-y-1"><h2 class="text-lg font-medium text-gray-900" id="slide-over-title"><span class="translation_missing" title="translation missing: da.asset_work_transactions.form.edit">Edit</span></h2><p class="text-sm text-gray-500"><span class="translation_missing" title="translation missing: da.asset_work_transactions.form.edit_description">Edit Description</span></p></div><div class="h-7 flex items-center"><button type="button" data-action="form-sleeve#cancel" class="text-gray-400 hover:text-gray-500"><span class="sr-only" sr="close form"></span><svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div></div></div>

    <!-- Divider container -->
    <div class="h-full py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 ">

      <!-- Name -->
      <div class="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 "><div></div><div class="sm:col-span-2"><div class="text-sm text-red-800"></div></div></div>

      <!-- punch_asset_ip_addr -->

      <!-- punched_at (date) -->
      <div class="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 "><div></div><div class="sm:col-span-2"><div class="text-sm text-red-800"></div></div></div>

      <!-- punched_at (time) -->

      <!-- reason -->
      <div class="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 "><div></div><div class="sm:col-span-2"></div></div>

      <!-- minutes_spent -->

      <!-- state -->

</div></div>
  <div class="sticky bottom-0 flex justify-start px-4 border-t border-gray-200 bg-gray-50 py-5 sm:px-6 z-10"><div class="flex-none w-1/3 h-14"><a class="button delete-button" data-turbo-confirm="Are you sure?" data-turbo-method="delete" data-action="click->form-sleeve#toggle" href="/employees/2/asset_work_transactions/34">Slet</a></div><div class="flex justify-end w-2/3"><div class="flex-initial sm:space-x-3"><button data-form-sleeve-target="cancel" data-action="click->form-sleeve#cancel" type="button" class="button cancel-button">Fortryd</button><button data-form-sleeve-target="save" type="submit" class="button save-button"><span class="group-disabled:hidden">Opdatér</span><span class="hidden group:disabled:block group-disabled:cursor-wait"><span class="translation_missing" title="translation missing: da.asset_work_transactions.form.updating">Updating</span></span></button></div></div></div>

</form>

But - if I don't use the form and calls the helper like text_area :event, :reason, class: "classes" I get the expected output nicely tugged into the fields_for div. How is that? And can I get around it?

<div class="flex-1 relative " data-controller="form" data-form-form-sleeve-outlet="#form-sleeve" data-form-list-outlet="#list" data-action="keydown->form#keydownHandler speicherMessage@window->form#handleMessages">
...8<...
      <!-- reason -->
      <div class="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 "><div><label class="block text-sm font-medium text-gray-900 sm:mt-px sm:pt-2 " for="reason_<span class=&quot;translation_missing&quot; title=&quot;translation missing: da.asset_work_transactions.form.reason&quot;>Reason</span>">&lt;span class="translation missing" title="translation missing: da.asset work transactions.form.reason"&gt;reason&lt;/span&gt;</label></div><div class="sm:col-span-2"><textarea class="block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md }" required="required" name="eventable[reason]" id="eventable_reason"></textarea></div></div>

</div></div>

[wdiechmann]

@joeldrapper sorry to elevate this - but I'm dead-locked on this 😢

If there is no answer (or immediate solution to the 'misordering' of HTML-soup when using fields_for) I'll have to revert to using view_components - and hate every minute of it now that I know there is a better way 😭

[wdiechmann]

I can understand that -

here's the helpers - they all look the same, basically

  # helpers/view_components_helper.rb
  def render_form_fields_for(**attribs, &block)
    render Views::Components::Form::FieldsFor.new **attribs, &block
  end

And here is the classes - or a few, rather

module Views
  #
  # the date component is a wrapper for the date_field form input field
  #
  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 do |assoc_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(assoc_form)
        end
      end
    end
  end
end

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

    def initialize( resource: nil, form: nil, field: nil, title: nil, required: false, focus: false, text_css: "", label_css: "", input_css: "" )
      @resource = resource
      @form = form
      @field = field
      @title = title
      @required = required
      @focus = focus
      @field_name = @form.object_name
      @field_value = @form.object.send(@field)
      @text_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 #{@text_css}"
      @label_classes = "block text-sm font-medium text-gray-900 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}}"
    end

    def template()
      div class: @text_classes do
        div do
          label( @field_name, @field, class: @label_classes)
        end
        div( class: "sm:col-span-2") do
          text_field @field_name, @field, 
            value: @field_value,
            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

[wdiechmann]

My observation is that if I do like text_field @field_name, ... like I've shared above - all is well, but if I use @form.text_field ... then the HTML is spit out in some chaotic order

[wdiechmann]

• and I certainly will need the form.text_field version when doing nested_forms and eg date_field which I am not able to provide a value for without the form part

[joeldrapper]

Alright, I know exactly why this is happening. Give me some time to put together an explanation and suggested approach.

[wdiechmann]

❤️

[joeldrapper]

Hey @wdiechmann, hopefully this will help. https://cloud.drapper.me/pyMtHdwV

[wdiechmann]

still digesting - will be back 🧑‍🍳

[wdiechmann]

@joeldrapper
well, after a solid 7 hour tinkering - things are somewhat better, especially thanks a lot to your very thorough explanation 😄

Wondering if you might have one more trick up that sleeve? 'cause the fields_for do not wanna play along - not entirely at least 😞

Keeping it to the form_with and using the public method - all is good - but the very instance I start thinking about nested...well all bets are off then - and the output from Phlex classes start showing up all over the place; more or less - but exaggerations and hypochondria keeps the doctors afloat, right 😉

Now I have refactored like this:

# views/asset_work_transactions/_form.html.erb
<%= render_form( resource: resource) do |phlex_form| %>
  <%= phlex_form.fields_for( field: :eventable, assoc: resource.eventable ) do |phlex_assoc_form| %>
    <%= phlex_assoc_form.datetime_field( resource: resource.eventable, field: :punched_at, required: true) %>
  <% end %>
  <%= render_form_action_buttons resource: resource, delete_url: resource_url(), deleteable: !resource.new_record? %>
<% end %>

# views/components/form/form.rb
module Views
  class Components::Form::Form < Phlex::HTML
    include Phlex::Rails::Helpers::FormWith

    def initialize( resource: nil, &block )
      @resource = resource
    end

    def template(&)
      form_with( model: @resource, url: helpers.resource_url() ) do |form|
        @rails_form_builder = form
        yield
      end
    end

    def fields_for field: nil, assoc: nil, &block
      render Views::Components::Form::FieldsFor.new( form: @rails_form_builder, field: field, assoc: assoc, &block)
    end

    def text_field resource: nil, field: nil, title: nil, required: false
      render Views::Components::Form::TextField.new( resource: resource, form: @rails_form_builder, field: field, title: title)
    end
  end
end


# views/components/form/fields_for.rb
module Views
  class Components::Form::FieldsFor < Phlex::HTML
    include Phlex::Rails::Helpers::FieldsFor

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

    def template(&)
      @form.fields_for( @field) do |assoc_form|
        @rails_form_builder = assoc_form
        div( class: "flex-1 relative ") do  
          yield
        end
      end
    end

    def datetime_field resource: nil, field: nil, title: nil
      render Views::Components::Form::DateTimeField.new( 
        resource: resource,
        form: @rails_form_builder, 
        field: field, 
        title: title
      )
    end
  end
end


# views/components/form/date_time_field.rb
module Views
  class Components::Form::DateTimeField < Phlex::HTML
    include Phlex::Rails::Helpers::Label
    include Phlex::Rails::Helpers::DateTimeField

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

    def template()
      div( class: "something") do
        div do
          @form.label( @field )
        end
        div( class: "sm:col-span-2") do
          @form.datetime_field( @field ) 
          div( class:"text-sm text-red-800" ) { @resource.errors.where(@field).map( &:full_message).join( "og ") }
        end
      end
    end
  end
end

But it's so close now! I can almost smell it 😃

[joeldrapper]

I think you could probably do this from the component.

def field_for(*args, **kwargs) # takes a block (we don't need to specify that because we're yielding)
  # save the current value of @form. We'll need it later.
  original_form = @form

  begin
    # delegate the arguments to the fields_for method on the @form
    @form.fields_for(*args, **kwargs) do |f|
      # temporarily set @form to point to the fields_for form builder
      @form = f

      # yield the component while it has @from scoped to the fields_for form builder
      yield(self)
    end
  ensure
    # set the form back to the original form before scoping it
    @form = original_form
  end
end

[wdiechmann]

you think?!

😎

No - your ruby-fu is just amazing!

Now I just need to straighten all this out and throw in some decent comments so that the next dork may find their ways around this MF 😃

Next time in Denmark - yell!
(Owe you a large pint or two)!

[joeldrapper]

I didn't test this myself but I guess it worked. 🎉

[wdiechmann]

oh - it works 🥳

[wdiechmann]

BTW - turned out to hold one more complication (this is like a present that keeps giving) 😆

once I'm in the fields_for scope - I cannot address fields belonging to the "parent" / form scope - which is a disappointment...

When you get about to build the FormBuilder for Phlex - this is a use case that probably should be addressed 😉

[joeldrapper]

When you get about to build the FormBuilder for Phlex - this is a use case that probably should be addressed 😉

Thanks, that's helpful. I’ll keep that in mind.