1
0
Fork 0
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:
Alex Hatzenbuhler 2025-05-13 14:53:13 -05:00 committed by GitHub
parent 050d5ebaad
commit bebe7b40d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 176 additions and 79 deletions

View file

@ -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">&middot;</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">&middot;</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 %>