Как провести рефакторинг в партиалах или сделать более сухим код файла Haml, который содержит вкладки с общей структурой

Question

Я занимаюсь разработкой в ​​проекте Ruby on Rails 4.2.10, и меня попросили реорганизовать панель, которая содержит вкладки, чтобы лучше разделить их на партиалы, все они встроены в Haml. Я сделал это, но все же они сказали, что мне нужно сделать это лучше, особенно с этим файлом:

.dashboard_tabs
  .dashboard_tab.active{ data: { tab: 'problems' } }
    - shipments_count = problem_shipments.try(:count) || 0
    %h2 Problems
    .badge.danger{ class: [shipments_count.zero? && 'empty'] }= shipments_count

  .dashboard_tab{ data: { tab: 'created' } }
    - shipments_count = shipments.try(:count) || 0
    %h2 Created
    .badge{ class: [shipments_count.zero? && 'empty'] }= shipments_count

  .dashboard_tab{ data: { tab: 'requests' } }
    - shipments_count = shipment_requests.try(:count) || 0
    %h2 RFQ
    .badge{ class: [shipments_count.zero? && 'empty'] }= shipments_count

  .dashboard_tab{ data: { tab: 'pickups' } }
    - shipments_count = pickups.try(:count) || 0
    %h2 Pickup request
    .badge{ class: [shipments_count.zero? && 'empty'] }= shipments_count

Комментарий был «Эти вкладки, похоже, имеют много общего для извлечения», поэтому я не знаю, как сделать его более сухим, как меня просили.

Надеюсь получить хорошие предложения от него.

Другие файлы, связанные с этим следующие:

Индекс

= 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 => "display: none" }
    .loading_indicator_wrapper
      = image_tag("admin/loading_indicator.gif")
  %svg{ :id => "dashboard_chart", :width => "100%", :height => "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

частичная отгрузка

%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 => "7" }= shipment.description

Частичная погрузка

%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

Частичная заявка на отгрузку

%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 => "5" }= shipment_request.shipment.description

Answer 1

Если вы определите частичный _dashboard_tab следующим образом

.dashboard_tab{class: active ? 'active' : '', data: {tab: tab_name}
  - shipments_count = shipments.try(:count) || 0
  %h2= title 
  .badge{ class: [shipments_count.zero? && 'empty'] }= shipments_count

Вы можете переписать исходный вид следующим образом:

.dashboard_tabs
  = render 'dashboard_tab', active: true, tab_name: 'problems', |
                            title: 'Problems', shipments: problem_shipments
  = render 'dashboard_tab', active: false, tab_name: 'created', | 
                            title: 'Created', shipments: shipments
  = render 'dashboard_tab', active: false, tab_name: 'requests', |
                            title: 'RFQ', shipments: shipment_requests
  = render 'dashboard_tab', active: false, tab_name: 'requests', |
                            title: 'RFQ', shipments: shipment_requests
  = render 'dashboard_tab', active: false, tab_name: 'pickups', |
                            title: 'Pickup request', shipments: pickups

Это начало. Теперь мы пропускаем класс danger для значка проблем, и мы повторяем active, пока мы только хотим, чтобы сначала были активными (и по умолчанию false).

Таким образом, мы можем немного оптимизировать наше частичное, добавив дополнительный класс значка (и сделав его необязательным) и сделав активное состояние также необязательным.

Таким образом, мы адаптируем частичное следующим образом:

 - active = local_assigns.has_key?(:active) ? active : false 
 - badge_class = local_assigns.has_key?(:badge_class) ? badge_class : ''
 .dashboard_tab{class: active ? 'active' : '', data: {tab: tab_name}
   - shipments_count = shipments.try(:count) || 0
   %h2= title 
   - badge_classes = [badge_class] 
   - badge_classes << 'empty' if shipments_count.zero?
   .badge{ class: badge_classes.join(" ") }= shipments_count

и тогда мы можем написать оригинальный список вкладок следующим образом:

.dashboard_tabs
  = render 'dashboard_tab', active: true, badge_class: 'danger', tab_name: 'problems', |
                            title: 'Problems', shipments: problem_shipments
  = render 'dashboard_tab', tab_name: 'created',  title: 'Created', shipments: shipments,
  = render 'dashboard_tab', tab_name: 'requests', title: 'RFQ', shipments: shipment_requests
  = render 'dashboard_tab', tab_name: 'requests', title: 'RFQ', shipments: shipment_requests
  = render 'dashboard_tab', tab_name: 'pickups',  title: 'Pickup request', shipments: pickups

Answer 2

Я не очень разбираюсь в HAML, но я думаю, что они имеют в виду "эти вкладки имеют много общего для извлечения", что вы более или менее пишете один и тот же код для разных переменных.

Что вы могли бы сделать, это передать уникальную переменную массива в частичную вкладку, например:

render(partial: 'shipment_tabs', 
  locals: { data: [
    { name: "Problems", tab: "problems", count: @view_model.problem_shipments.try(:count) || 0 },
    { name: "Created", tab: "created", count: shipments.try(:count) || 0 },
    { name: "RFQ", tab: "requests", count: shipment_requests.try(:count) || 0 },
    { name: "Pickup request", tab: "pickups", count: pickups.try(:count) || 0 }
  ] }
)

И в вашем частичном цикле just для этого массива

.dashboard_tabs
  - data.each do |entry|
    .dashboard_tab.active{ data: { tab: entry["tab"] } }
      %h2 #{entry["name"]}
      .badge.danger{ class: [entry["count"].zero? && 'empty'] }= entry["count"]