On a live product dashboard, trying to render list of products.
How: using table tag and tr tags: I have ProductListItem as live component. (whose render code is given below).It is responsible for iterating over all product and display it.
The List Of products depends upon filter chosen on product dashboard.
Goal:
- Onclick of product name opens product live page on the same tab.
- On Click of arrow icon, product live page open on a new tab.
But user perspective remains on product list tab, which is current tab.
I tried by adding js , it does not work though.
def render(assigns) do
~H"""
<tbody>
<%= for product <- @products do %>
<tr class="product-list cursor-pointer">
<td>
<.link href={~p"/case/#{product.id}"}>
<%= name(product) %>
</.link>
# here is the arrow icon
<a href={~p"/case/#{product.id}"} class="open-in-new-tab">
↗
</a>
</td>
<td id={"date-added-#{product.id}"}><%= date_added(product) %></td>
<td>
<.link href={~p"/case/#{product.id}"} target="_blank" rel="noreferrer">
<%= settlement_date(product) %>
</.link>
</td>
<td>
<%= cond do %>
<% @current_company_user.spops_team.industry == "insurance" -> %>
<%= if !product.product_number do %>
<span style="font-style: italic; color: #b1b1b1;">Not known</span>
<% else %>
<%= product.product_number %>
<% end %>
<% !product_ref(product) -> %>
<span style="font-style: italic; color: #b1b1b1;">None</span>
<% true -> %>
<%= product_ref(product) %>
<% end %>
</td>
<td id={"date-of-death-#{product.id}"}><%= date_of_death(product) %></td>
<td>
<div
class="text-center flex flex-row justify-center align-center items-center"
style="width: 100%; height: 100%;"
>
<% status_data = product_status_and_class(product.status) %>
<div class={"#{status_data.class}"} style="font-size: 12px;">
<%= status_data.status %>
</div>
</div>
</td>
<td
id={"follow-up-date-#{product.id}"}
class={"#{if follow_up(product) == nil, do: "italic"}"}
>
<%= if !follow_up(product) do %>
<span style="font-style: italic; color: #b1b1b1;">Not set</span>
<% else %>
<%= follow_up(product) %>
<% end %>
</td>
<td class="text-left">
<div style="min-height: 40px; display: flex; flex-direction: column; justify-content: center;">
<%= live_component(ServiceProvider.DashboardLive.AssignedTo,
id: "assigned_to_#{product.id}",
company_user: product.company_user,
current_company_user: @current_company_user,
product: product,
filter_by_status: @filter_by_status
) %>
</div>
</td>
</tr>
<% end %>
<script>
var elements = document.querySelectorAll(".open-in-new-tab");
elements.forEach(function(element) {
element.addEventListener("onClick", function(e) {
e.preventDefault();
window.open(element.getAttribute("href"), "_blank");
});
});
</script>
</tbody>
"""
end
