1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-10 16:05:22 +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,47 +1,64 @@
<%# locals: (rule:) %>
<div class="flex justify-between items-center gap-4 bg-white shadow-border-xs rounded-md p-4">
<div class="flex justify-between items-center p-4 <%= rule.active? ? 'text-primary' : 'text-secondary' %>">
<div class="text-sm space-y-1.5">
<% if rule.name.present? %>
<h3 class="font-medium text-md"><%= rule.name %></h3>
<% end %>
<% if rule.conditions.any? %>
<p class="flex items-center flex-wrap gap-1.5">
<div class="flex items-center gap-2 mt-1">
<div class="flex items-center gap-1 text-secondary w-16 shrink-0">
<span class="font-mono text-xs">IF</span>
</div>
<p class="flex items-center flex-wrap gap-1.5 m-0">
<span class="px-2 py-1 border border-secondary rounded-full">
<% if rule.conditions.first.compound? %>
<%= rule.conditions.first.sub_conditions.first.filter.label %> <%= rule.conditions.first.sub_conditions.first.operator %> <%= rule.conditions.first.sub_conditions.first.value_display %>
<% else %>
<%= rule.conditions.first.filter.label %> <%= rule.conditions.first.operator %> <%= rule.conditions.first.value_display %>
<% end %>
</span>
<% if rule.conditions.count > 1 %>
and <%= rule.conditions.count - 1 %> more <%= rule.conditions.count - 1 == 1 ? "condition" : "conditions" %>
<% end %>
</p>
</div>
<% end %>
<div class="flex items-center gap-2 mt-1">
<div class="flex items-center gap-1 text-secondary w-16 shrink-0">
<span class="font-mono text-xs">THEN</span>
</div>
<p class="flex items-center flex-wrap gap-1.5 m-0">
<span class="px-2 py-1 border border-secondary rounded-full">
<%= rule.primary_condition_title %>
<% if rule.actions.first.value && rule.actions.first.options %>
<%= rule.actions.first.executor.label %> to <%= rule.actions.first.value_display %>
<% else %>
<%= rule.actions.first.executor.label %>
<% end %>
</span>
<% if rule.conditions.count > 1 %>
and <%= rule.conditions.count - 1 %> more <%= rule.conditions.count - 1 == 1 ? "condition" : "conditions" %>
<% if rule.actions.count > 1 %>
and <%= rule.actions.count - 1 %> more <%= rule.actions.count - 1 == 1 ? "action" : "actions" %>
<% end %>
</p>
<% end %>
<p class="flex items-center flex-wrap gap-1.5">
<span class="px-2 py-1 border border-alpha-black-200 rounded-full">
<% if rule.actions.first.value && rule.actions.first.options %>
<%= rule.actions.first.executor.label %> to <%= rule.actions.first.value_display %>
<% else %>
<%= rule.actions.first.executor.label %>
<% end %>
</span>
<% if rule.actions.count > 1 %>
and <%= rule.actions.count - 1 %> more <%= rule.actions.count - 1 == 1 ? "action" : "actions" %>
<% end %>
</p>
<p class="flex items-center flex-wrap gap-1.5">
<% if rule.effective_date.nil? %>
To all past and future <%= rule.resource_type.pluralize %>
<% else %>
To all <%= rule.resource_type.pluralize %> on or after <%= rule.effective_date %>
<% end %>
</p>
</div>
<div class="flex items-center gap-2 mt-1">
<div class="flex items-center gap-1 text-secondary w-16 shrink-0">
<span class="font-mono text-xs">FOR</span>
</div>
<p class="flex items-center flex-wrap gap-1.5 m-0">
<span class="px-2 py-1 border border-secondary rounded-full">
<% if rule.effective_date.nil? %>
All past and future <%= rule.resource_type.pluralize %>
<% else %>
<%= rule.resource_type.pluralize %> on or after <%= rule.effective_date.strftime('%b %-d, %Y') %>
<% end %>
</span>
</p>
</div>
</div>
<div class="flex items-center gap-4">
<%= styled_form_with model: rule, data: { controller: "auto-submit-form" } do |f| %>
<%= f.toggle :active, { data: { auto_submit_form_target: "auto" } } %>
<% end %>
<%= render MenuComponent.new do |menu| %>
<% menu.with_item(variant: "link", text: "Edit", href: edit_rule_path(rule), icon: "pencil", data: { turbo_frame: "modal" }) %>
<% menu.with_item(variant: "link", text: "Re-apply rule", href: confirm_rule_path(rule), icon: "refresh-cw", data: { turbo_frame: "modal" }) %>