ruby-on-rails - 如何在部分重构或使包含具有通用结构的选项卡的 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

标签： ruby-on-railsrubyreactjshaml

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

然后我们可以将原来的tab-list写成如下：

.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