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:
parent
050d5ebaad
commit
bebe7b40d6
15 changed files with 176 additions and 79 deletions
|
@ -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" }) %>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue