title: How to refactor in partials or make more dry the code of a Haml file which contains tabs with common structure
body: <p>I'm developing in a Ruby on Rails 4.2.10 project and I was asked to refactor a panel which contains tabs in a better way dividing into partials, all build in <code>Haml</code>. I did that but still, they said I need to do it better especially with this file:</p>
  
  <pre><code>.dashboard_tabs
    .dashboard_tab.active{ data: { tab: 'problems' } }
      - shipments_count = problem_shipments.try(:count) || 0
      %h2 Problems
      .badge.danger{ class: [shipments_count.zero? &amp;&amp; 'empty'] }= shipments_count
  
    .dashboard_tab{ data: { tab: 'created' } }
      - shipments_count = shipments.try(:count) || 0
      %h2 Created
      .badge{ class: [shipments_count.zero? &amp;&amp; 'empty'] }= shipments_count
  
    .dashboard_tab{ data: { tab: 'requests' } }
      - shipments_count = shipment_requests.try(:count) || 0
      %h2 RFQ
      .badge{ class: [shipments_count.zero? &amp;&amp; 'empty'] }= shipments_count
  
    .dashboard_tab{ data: { tab: 'pickups' } }
      - shipments_count = pickups.try(:count) || 0
      %h2 Pickup request
      .badge{ class: [shipments_count.zero? &amp;&amp; 'empty'] }= shipments_count
  </code></pre>
  
  <p>The comment was "These tabs seem to have a lot in common to be extracted" so I don't know how to make it drier as I've been asked.</p>
  
  <p>Hope to get some good suggestions fr it.</p>
  
  <p>Other files related to this are the next:</p>
  
  <p>Index</p>
  
  <pre><code>= react_component("CompanyDashboard", Jbuilder.new { |json| json.initialDashboard @view_model.to_builder; json.initialCarrierOptions @carrier_list.to_builder; json.initialCustomerOptions @customer_list.to_builder; json.remoteDashboardDataURL companies_dashboard_data_path(format: "json"); json.remoteCarrierAutocompleteURL companies_autocomplete_carriers_path(format: "json"); json.remoteCustomerAutocompleteURL companies_autocomplete_customers_path(format: "json") }.target!)
  
  #dashboard_chart_container
    .chart_labels
    .loading_indicator{ :style =&gt; "display: none" }
      .loading_indicator_wrapper
        = image_tag("admin/loading_indicator.gif")
    %svg{ :id =&gt; "dashboard_chart", :width =&gt; "100%", :height =&gt; "300" }
  
  .dashboard_separator
  
  - problem_shipments = @view_model.problem_shipments
  - shipments         = @view_model.created_shipments
  - shipment_requests = @view_model.rfq_shipments
  - pickups           = @view_model.pickup_requests
  
  = render(partial: 'shipment_tabs', locals: { problem_shipments: @view_model.problem_shipments, shipments: shipments, shipment_requests: shipment_requests, pickups: pickups })
  
  / Problems tab
  .dashboard_panel{ data: { tab: 'problems'} }
    .dashboard_panel_body
      - if problem_shipments.try(:any?)
        %table
          %tbody
            = render(partial: "shipment_row_for_panel", collection: problem_shipments.limit(100), as: :shipment)
      - else
        .empty No problems at the moment
  
  / Created tab
  .dashboard_panel.hidden{ data: { tab: 'created'} }
    .dashboard_panel_body
      - if shipments.any?
        %table
          %tbody
            = render(partial: "shipment_row_for_panel", collection: shipments.limit(100), as: :shipment)
      - else
        .empty No requests at the moment
  
  / RFQ tab
  .dashboard_panel.hidden{ data: { tab: 'requests'} }
    .dashboard_panel_body
      - if shipment_requests.any?
        %table
          %tbody
            = render(partial: "shipment_request_row_for_panel", collection: shipment_requests.limit(100), as: :shipment_request)
      - else
        .empty No requests at the moment
  
  / Pickup request tab
  .dashboard_panel.hidden{ data: { tab: 'pickups'} }
    .dashboard_panel_body
      - if pickups.any?
        %table
          %tbody
            = render(partial: "pickup_row_for_panel", collection: pickups.limit(100), as: :pickup)
      - else
        .empty No requests at the moment
  </code></pre>
  
  <p>shipment partial</p>
  
  <pre><code>%tr
    %td
      = shipment.customer_name_for_company(company_id: current_company.id)
    %td.id
      = link_to(shipment.unique_shipment_id, companies_shipment_path(shipment))
    %td.date
      = shipment.shipping_date
    %td
      = shipment.carrier_product.suffixed_name
    %td
      = render("components/shared/contact", contact: shipment.sender)
    %td
      = render("components/shared/contact", contact: shipment.recipient)
    %td.awb
      = render(partial: "components/shared/carrier_products/awb", locals: { shipment: shipment })
  
  - if shipment.description.present?
    %tr.description
      %td{ :colspan =&gt; "7" }= shipment.description
  </code></pre>
  
  <p>Partial pickup</p>
  
  <pre><code>%tr
    %td
      = pickup.customer_name
    %td.id
      = link_to(pickup.unique_pickup_id, companies_pickup_path(pickup))
    %td.date
      = pickup.pickup_date
    %td
      = pickup.from_time
    %td
      = pickup.to_time
    %td
      = pickup.description
  </code></pre>
  
  <p>Partial shipment request</p>
  
  <pre><code>%tr
    %td
      = link_to(shipment_request.shipment.unique_shipment_id, companies_shipment_request_path(shipment_request))
    %td
      = shipment_request.shipment.shipping_date
    %td
      = "#{shipment_request.shipment.sender.company_name},"
      %br/
      = shipment_request.shipment.sender.country_name
    %td
      = "#{shipment_request.shipment.recipient.company_name},"
      %br/
      = shipment_request.shipment.recipient.country_name
    %td
      = suffixed_name(name: shipment_request.shipment.carrier_product.name, company: shipment_request.shipment.company)
  
  - if shipment_request.shipment.description.present?
    %tr.description
      %td{ :colspan =&gt; "5" }= shipment_request.shipment.description
  </code></pre>