fix: monitor row being styled incorrectly on update
This commit is contained in:
12
src/Twig/Components/MonitorListRow.php
Normal file
12
src/Twig/Components/MonitorListRow.php
Normal file
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
|
||||
namespace App\Twig\Components;
|
||||
|
||||
use App\Monitor\Framework\Entity\Monitor;
|
||||
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
|
||||
|
||||
#[AsTwigComponent]
|
||||
final class MonitorListRow
|
||||
{
|
||||
public Monitor $monitor;
|
||||
}
|
||||
@@ -7,7 +7,7 @@ module.exports = {
|
||||
safelist: [
|
||||
"bg-blue-300",
|
||||
"bg-orange-300",
|
||||
"bg-rose-300",
|
||||
"bg-fuchsia-300",
|
||||
"bg-green-400",
|
||||
"bg-purple-400",
|
||||
"bg-orange-400",
|
||||
|
||||
@@ -3,81 +3,19 @@
|
||||
<turbo-stream action="remove" target="active_monitors_no_monitors">
|
||||
</turbo-stream>
|
||||
|
||||
<turbo-stream action="append" target="monitors">
|
||||
<turbo-stream action="prepend" target="monitors">
|
||||
<template>
|
||||
<tr id="monitor_{{ entity.id }}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 min-w-[50ch] max-w-[50ch] truncate">
|
||||
{{ entity.title }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ entity.searchCount }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ entity.createdAt|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ entity.lastSearch|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{% if entity.status == "New" %}
|
||||
<twig:StatusBadge color="orange" status="{{ entity.status }}" />
|
||||
{% elseif entity.status == "In Progress" or entity.status == "Active" %}
|
||||
<twig:StatusBadge color="purple" status="{{ entity.status }}" />
|
||||
{% else %}
|
||||
<twig:StatusBadge color="green" status="{{ entity.status }}" />
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-4 flex flex-row align-middle justify-center">
|
||||
<button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: entity.id}) }}>
|
||||
<twig:ux:icon
|
||||
name="ic:twotone-cancel" width="18px"
|
||||
class="rounded-full align-middle text-red-600"
|
||||
title="Remove {{ entity.title }} from your Monitor list."
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<twig:MonitorListRow monitor="{{ entity }}" />
|
||||
</template>
|
||||
</turbo-stream>
|
||||
{% endblock %}
|
||||
|
||||
{% block update %}
|
||||
<turbo-stream action="prepend" target="monitors">
|
||||
<template>
|
||||
<tr id="monitor_{{ entity.id }}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 min-w-[50ch] max-w-[50ch] truncate">
|
||||
{{ entity.title }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ entity.searchCount }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ entity.createdAt|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ entity.lastSearch|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{% if entity.status == "New" %}
|
||||
<twig:StatusBadge color="orange" status="{{ entity.status }}" />
|
||||
{% elseif entity.status == "In Progress" or entity.status == "Active" %}
|
||||
<twig:StatusBadge color="purple" status="{{ entity.status }}" />
|
||||
{% else %}
|
||||
<twig:StatusBadge color="green" status="{{ entity.status }}" />
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-4 flex flex-row align-middle justify-center">
|
||||
<button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: entity.id}) }}>
|
||||
<twig:ux:icon
|
||||
name="ic:twotone-cancel" width="18px"
|
||||
class="rounded-full align-middle text-red-600"
|
||||
title="Remove {{ entity.title }} from your Monitor list."
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</turbo-stream>
|
||||
<turbo-stream action="replace" target="monitor_{{ id }}">
|
||||
<template>
|
||||
<twig:MonitorListRow monitor="{{ entity }}" />
|
||||
</template>
|
||||
</turbo-stream>
|
||||
{% endblock %}
|
||||
|
||||
{% block remove %}
|
||||
|
||||
@@ -36,50 +36,7 @@
|
||||
<tbody id="monitors" class="divide-y divide-gray-50">
|
||||
{% if this.monitors.items|length > 0 %}
|
||||
{% for monitor in this.monitors.items %}
|
||||
<tr id="monitor_{{ monitor.id }}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
|
||||
{{ monitor.title }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor|monitor_media_id }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor.searchCount }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor.createdAt|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor.lastSearch|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{% if monitor.monitorType == "tvshow" %}
|
||||
<twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
|
||||
{% elseif monitor.monitorType == "tvseason" %}
|
||||
<twig:StatusBadge color="orange" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
|
||||
{% else %}
|
||||
<twig:StatusBadge color="rose" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{% if monitor.status == "New" %}
|
||||
<twig:StatusBadge color="orange" status="{{ monitor.status }}" />
|
||||
{% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
|
||||
<twig:StatusBadge color="purple" status="{{ monitor.status }}" />
|
||||
{% else %}
|
||||
<twig:StatusBadge color="green" status="{{ monitor.status }}" />
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-4 flex flex-row align-middle justify-center">
|
||||
<button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: monitor.id}) }}>
|
||||
<twig:ux:icon
|
||||
name="ic:twotone-cancel" width="18px"
|
||||
class="rounded-full align-middle text-red-600"
|
||||
title="Remove {{ monitor.title }} from your Monitor list."
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<twig:MonitorListRow :monitor="monitor" />
|
||||
{% endfor %}
|
||||
{% if this.isWidget and this.monitors.items|length > 5 %}
|
||||
<tr id="monitor_view_all">
|
||||
|
||||
44
templates/components/MonitorListRow.html.twig
Normal file
44
templates/components/MonitorListRow.html.twig
Normal file
@@ -0,0 +1,44 @@
|
||||
<tr{{ attributes }} id="monitor_{{ monitor.id }}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
|
||||
{{ monitor.title }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor|monitor_media_id }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor.searchCount }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor.createdAt|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor.lastSearch|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{% if monitor.monitorType == "tvshow" %}
|
||||
<twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
|
||||
{% elseif monitor.monitorType == "tvseason" %}
|
||||
<twig:StatusBadge color="orange" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
|
||||
{% else %}
|
||||
<twig:StatusBadge color="fuchsia" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{% if monitor.status == "New" %}
|
||||
<twig:StatusBadge color="orange" status="{{ monitor.status }}" />
|
||||
{% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
|
||||
<twig:StatusBadge color="purple" status="{{ monitor.status }}" />
|
||||
{% else %}
|
||||
<twig:StatusBadge color="green" status="{{ monitor.status }}" />
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-4 flex flex-row align-middle justify-center">
|
||||
<button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: monitor.id}) }}>
|
||||
<twig:ux:icon
|
||||
name="ic:twotone-cancel" width="18px"
|
||||
class="rounded-full align-middle text-red-600"
|
||||
title="Remove {{ monitor.title }} from your Monitor list."
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
Reference in New Issue
Block a user