jlecour/EvoBal
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

arrangement visuel des filtres

Browse source
This commit is contained in:
Jérémy Lecour 2021-03-14 09:11:19 +01:00 committed by Jérémy Lecour
parent 4a137af629
commit a43b047207
2 changed files with 36 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/views/filters/_filter.html.erb
View file

@ -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>

51
app/views/filters/show.html.erb
View file

@ -2,16 +2,40 @@
<h1 class="truncate">Filter #<%= @filter.id %>: <%= @filter.description %></h1>
<% end %>
<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
<div class="grid grid-cols-3 gap-6">
<%= turbo_frame_tag "filter" do %>
<%= render @filter %>
<% end %>
<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? %>
<div id="conditions">
<h2 class="text-xl py-1 font-semibold">Conditions</h2>
<div class="ml-6">
<%= turbo_frame_tag "filter" do %>
<%= render @filter %>
<% end %>
<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>