arrangement visuel des filtres
This commit is contained in:
parent
4a137af629
commit
a43b047207
|
@ -1,22 +1,5 @@
|
|||
<div id="<%= dom_id filter %>" class="<%= filter.enabled? ? 'filter--enabled' : 'filter--disabled' %> flex space-x-2">
|
||||
|
||||
<div class="flex-auto">
|
||||
<% if filter.enabled? %>
|
||||
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
|
||||
<%= link_to disable_filter_path(filter), data: { method: :patch, confirm: 'Are you sure you want to disable this filter?' }, class: "bg-green-400 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500", "aria-pressed":"false" do %>
|
||||
<span class="sr-only">Disable</span>
|
||||
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-5 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= link_to enable_filter_path(filter), data: { method: :patch, confirm: 'Are you sure you want to disable this filter?' }, class: "bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500", "aria-pressed":"false" do %>
|
||||
<span class="sr-only">Enable</span>
|
||||
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<strong class="pr-1">Description:</strong>
|
||||
<%= filter.description || "<i>No description</i>".html_safe %>
|
||||
|
@ -31,10 +14,4 @@
|
|||
<strong class="pr-1">Inverted:</strong>
|
||||
<%= filter.inverted? ? 'Yes' : 'No' %>
|
||||
</div>
|
||||
|
||||
<div class="flex-none text-center">
|
||||
<div class="">
|
||||
<%= link_to 'Edit', edit_filter_path(@filter) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -2,16 +2,40 @@
|
|||
<h1 class="truncate">Filter #<%= @filter.id %>: <%= @filter.description %></h1>
|
||||
<% end %>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
|
||||
<div class="shadow rounded-lg bg-white">
|
||||
<h2 class="text-xl py-2 font-medium text-center bg-gray-50 border-b border-gray-300 rounded-t-lg">Filter</h2>
|
||||
<div class="px-4 py-3">
|
||||
<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
|
||||
|
||||
<%= turbo_frame_tag "filter" do %>
|
||||
<%= render @filter %>
|
||||
<% end %>
|
||||
|
||||
<div id="conditions">
|
||||
<h2 class="text-xl py-1 font-semibold">Conditions</h2>
|
||||
<div class="ml-6">
|
||||
<div class="my-4 flex items-center">
|
||||
<div class="flex-1 flex justify-end space-x-4">
|
||||
<%= link_to 'Edit', edit_filter_path(@filter), class: "rounded-md relative inline-flex items-center px-4 py-2 border border-gray-100 bg-white text-sm font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %>
|
||||
|
||||
<% if @filter.enabled? %>
|
||||
<%= link_to "Disable", disable_filter_path(@filter), data: { method: :patch, confirm: 'Are you sure you want to disable this filter?' }, class: "rounded-md relative inline-flex items-center px-4 py-2 border border-transparent bg-yellow-200 text-sm font-medium text-yellow-700 hover:bg-yellow-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500" %>
|
||||
<% else %>
|
||||
<%= link_to "Enable", enable_filter_path(@filter), data: { method: :patch, confirm: 'Are you sure you want to disable this filter?' }, class: "rounded-md relative inline-flex items-center px-4 py-2 border border-transparent bg-green-50 text-sm font-medium text-green-700 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" %>
|
||||
<% end %>
|
||||
|
||||
<%= link_to 'Delete', @filter, method: :delete, data: { confirm: 'Are you sure you want to delete this filter? There is no undo!' }, class: "rounded-md relative inline-flex items-center px-4 py-2 border border-transparent bg-white text-sm font-medium text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="shadow rounded-lg bg-white">
|
||||
<h2 class="text-xl py-2 font-medium text-center bg-gray-50 border-b border-gray-300 rounded-t-lg">Conditions</h2>
|
||||
<div class="px-4 py-3">
|
||||
<%= render(@filter.conditions) || "<i class='italic'>No conditions yet</i>".html_safe %>
|
||||
|
||||
<%= turbo_frame_tag "new_condition" do %>
|
||||
<div>
|
||||
<%= link_to "Add a new condition", new_filter_condition_path(@filter) %>
|
||||
|
@ -20,9 +44,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="operations">
|
||||
<h2 class="text-xl py-1 font-semibold">Operations</h2>
|
||||
<div class="ml-6">
|
||||
<div class="shadow rounded-lg bg-white">
|
||||
<h2 class="text-xl py-2 font-medium text-center bg-gray-50 border-b border-gray-300 rounded-t-lg">Operations</h2>
|
||||
<div class="px-4 py-3 bg-white">
|
||||
<%= render(@filter.operations) || "<i class='italic'>No operations yet</i>".html_safe %>
|
||||
<%= turbo_frame_tag "new_operation" do %>
|
||||
<div>
|
||||
|
@ -32,9 +56,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex items-center">
|
||||
<div class="flex-1 flex justify-between">
|
||||
<%= link_to '← Back to filters list', filters_path, class: "rounded-md relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 hover:text-blue-700" %>
|
||||
<%= link_to 'Delete this filter', @filter, method: :delete, data: { confirm: 'Are you sure you want to delete this filter? There is no undo!' }, class: "rounded-md relative inline-flex items-center px-4 py-2 border border-transparent bg-white text-sm font-medium text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
Loading…
Reference in a new issue