首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >通过匹配表中的关联为行添加颜色

通过匹配表中的关联为行添加颜色
EN

Stack Overflow用户
提问于 2019-06-24 10:05:32
回答 2查看 1.1K关注 0票数 0

我的目标是让具有匹配属性的循环结果具有相同颜色背景的行

这是我的尝试:

控制器:

代码语言:javascript
复制
vendor_products = VendorProduct.where(vendor_id: current_user.id)
@vendor_orders = Order.where(product_id: vendor_products.map { |vp| vp.product_id}).order(created_at: :desc)

表单:

代码语言:javascript
复制
  <% @vendor_orders.each do |order, cart_id| %>
      <tr class="ok">
        <% if order.cart_id.present? && order.cart_id == order.cart_id %>
            <td><%= order.id %></td>
            <td><%= order.cart_id %></td>
            .....
        <% else %>
            <td><%= order.id %></td>
            <td><%= order.cart_id %></td>
            .....
        <% end %>
      </tr>
  <% end %>

(已尝试在<tr>内部/外部执行if语句)

风格:

代码语言:javascript
复制
.ok:nth-child(odd) {
  background: red;
}

.ok:nth-child(even) {
  background: blue;
}

我的目标是如果订单的cart_id匹配,那么匹配cart _id的x个订单具有相同的背景颜色,这样就可以知道它们是相同的购物车。

示例:

代码语言:javascript
复制
ID | Cart 

1  | 1 (red)

2  | 1 (red)

3  | nil

4  | 2 (blue)

5  | 2 (blue)

因此,ID 1和2的行将为红色,ID 4和5的行将为蓝色。3没有颜色,因为它不属于任何购物车。此外,希望这只有多个项目的手推车。

有些订单没有购物车,只有一个产品与之关联。有些订单是使用购物车创建的,购物车将具有多个行项目。

因此,基本上,如果存在orders cart_id?并且cart.line_items.count > 1,则所有与其关联的订单都具有相同的颜色。

型号:

代码语言:javascript
复制
**cart**

has_many :line_items, dependent: :destroy
has_one :order
...

**line items**

belongs_to :cart
...

**order**

belongs_to :cart

我的尝试什么也做不了。所有的结果都会变成红色。

我标记JS和JQ只是为了以防万一,因为我认为这是一个可行的选择。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-24 13:09:15

您将需要一些既不属于视图也不属于控制器的专用逻辑。我建议您将此逻辑放入演示者中。

控制器逻辑非常简单:

代码语言:javascript
复制
# app/controllers/orders_controller.rb

class OrdersController < ApplicationController
  def index
    @presenter = VendorOrderPresenter.new(current_user&.id)
  end
end

特定的逻辑包含在演示者中:

代码语言:javascript
复制
# app/presenters/vendor_order_presenter.rb

class VendorOrderPresenter
  COLORS = %w[red blue].freeze

  def initialize(current_user_id)
    @current_user_id = current_user_id
  end

  def vendor_orders
    @vendor_orders ||= Order.where(product_id: vendor_products.pluck(:product_id)).order(created_at: :desc)
  end

  def completed_orders
    @completed_orders ||= vendor_orders.where(order_status: "complete")
  end

  def background_color(order)
    index = colorable_cart_ids.index(order.cart_id)
    index ? COLORS[index % COLORS.size] : nil
  end

  private

  attr_reader :current_user_id

  def vendor_products
    VendorProduct.where(vendor_id: current_user_id)
  end

  def colorable_cart_ids
    @colorable_cart_ids ||= cart_ids.select { |id| cart_ids.count(id) > 1 }.uniq
  end

  def cart_ids
    @cart_ids ||= vendor_orders.pluck(:cart_id).compact
  end
end

现在,视图层简单直观,没有条件逻辑或专门的逻辑:

代码语言:javascript
复制
# app/views/orders/index.html.erb

<h1>Index</h1>
<table>
  <thead>
  <th>Order ID</th>
  <th>Cart ID</th>
  </thead>
  <tbody>
  <% @presenter.vendor_orders.each do |order| %>
    <tr style='background:<%= @presenter.background_color(order) %>'>
      <td><%= order.id %></td>
      <td><%= order.cart_id %></td>
    </tr>
  <% end %>
  </tbody>
</table>

完整的工作解决方案可以在here上找到。

票数 1
EN

Stack Overflow用户

发布于 2019-06-24 12:25:45

这是一个建议。我编译并服务于同样的目的。

在您的控制器中,从@vendor_orders中提取购物车id,并使用id作为关键字,随机颜色作为值进行散列。

代码语言:javascript
复制
    @ids = @vendor_orders.pluck(:id)
    @ids = @ids.uniq
    @color = Hash.new
    @ids.each do |val|
        @color["#{val}"] = "##{random_hex}"
    end

random_hex在哪里

代码语言:javascript
复制
def random_hex
    colour = "%06x" % (rand * 0xffffff)
    return colour
end

现在,在您的视图中,内循环调用@color中对应于cart_id的颜色,如

<td style='background:<%= @color["#{order.cart_id}"] %>'><%= order.cart_id %></td>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56729086

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档