mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-08 23:15:24 +02:00
Improve rules - add name, allow sorting, improve UI (#2177)
* Add ability to name a rule * Add sorting by name and date, * Improve rule page and form design * Small header tweak * Improve sorting click areas by including icon * Fix brakeman * Use icon helper instead of lucide_icon helper * Fix double headers with new DialogComponent * Use updated_at for sorting instead of created_at * Use copy-plus icon for compound rules * Remove icons and change IF/THEN/FOR font in edit form * Use text-secondary on disabled rules * First pass at redesigning the sorting menu * New rule list * Borders instead of shadows * Apply proper text color to TO in edit form * Improve dark mode with proper background color classes * Use border-secondary * Add touch: true to conditions and actions of a rule, so updated_at works as expected * Fix db schema * Change sort direction to be a LinkComponent outside of the form for better sort behavior * Clean up dropdown design to match figma * Match tags/categories design * Fix name text color, add bg-divider background for dividers * Fix family subscription tests (thanks zach!)
This commit is contained in:
parent
050d5ebaad
commit
bebe7b40d6
15 changed files with 176 additions and 79 deletions
|
@ -1,6 +1,5 @@
|
|||
<header class="flex items-center justify-between">
|
||||
<h1 class="text-primary text-xl font-medium">Rules</h1>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<% if @rules.any? %>
|
||||
<%= render MenuComponent.new do |menu| %>
|
||||
|
@ -13,7 +12,6 @@
|
|||
confirm: CustomConfirm.for_resource_deletion("all rules", high_severity: true)) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<%= render LinkComponent.new(
|
||||
text: "New rule",
|
||||
variant: "primary",
|
||||
|
@ -23,7 +21,6 @@
|
|||
) %>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<% if self_hosted? %>
|
||||
<div class="flex items-center gap-2 mb-2 py-4">
|
||||
<%= icon("circle-alert", size: "sm") %>
|
||||
|
@ -32,19 +29,43 @@
|
|||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="bg-container shadow-border-xs rounded-xl p-4">
|
||||
|
||||
<% if @rules.any? %>
|
||||
<div class="rounded-xl bg-gray-25 space-y-1">
|
||||
<div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
|
||||
<p>Rules</p>
|
||||
<span class="text-subdued">·</span>
|
||||
<p><%= @rules.count %></p>
|
||||
<div class="bg-container-inset rounded-xl">
|
||||
<div class="flex justify-between px-4 py-2 text-xs uppercase">
|
||||
<div class="flex items-center gap-1.5 font-medium text-secondary">
|
||||
<p>Rules</p>
|
||||
<span class="text-subdued">·</span>
|
||||
<p><%= @rules.count %></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-secondary">Sort by:</span>
|
||||
<%= form_with url: rules_path, method: :get, local: true, class: "flex items-center", data: { controller: "auto-submit-form" } do |form| %>
|
||||
<%= form.select :sort_by,
|
||||
options_for_select([["Name", "name"], ["Updated At", "updated_at"]], @sort_by),
|
||||
{},
|
||||
class: "min-w-[120px] bg-transparent rounded border-none cursor-pointer text-primary uppercase text-xs w-auto",
|
||||
data: { auto_submit_form_target: "auto", autosubmit_trigger_event: "change" } %>
|
||||
<%= form.hidden_field :direction, value: @direction %>
|
||||
<% end %>
|
||||
<%= render LinkComponent.new(
|
||||
href: rules_path(direction: @direction == "asc" ? "desc" : "asc", sort_by: @sort_by),
|
||||
variant: "icon",
|
||||
icon: "arrow-up-down",
|
||||
size: :sm,
|
||||
title: "Toggle sort direction"
|
||||
) %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1 p-1">
|
||||
<%= render @rules %>
|
||||
<div class="p-1">
|
||||
<div class="flex flex-col bg-container rounded-xl shadow-border-xs first_child:rounded-t-xl last_child:rounded-b-xl">
|
||||
<% @rules.each_with_index do |rule, idx| %>
|
||||
<%= render "rule", rule: rule%>
|
||||
<% unless idx == @rules.size - 1 %>
|
||||
<div class="h-px bg-divider ml-4 mr-6"></div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% else %>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue