mirror of
https://github.com/we-promise/sure.git
synced 2026-04-09 23:34:50 +00:00
bebe7b40d6
* 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!)
89 lines
3.5 KiB
Plaintext
89 lines
3.5 KiB
Plaintext
<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| %>
|
|
<% menu.with_item(
|
|
variant: "button",
|
|
text: "Delete all rules",
|
|
href: destroy_all_rules_path,
|
|
icon: "trash-2",
|
|
method: :delete,
|
|
confirm: CustomConfirm.for_resource_deletion("all rules", high_severity: true)) %>
|
|
<% end %>
|
|
<% end %>
|
|
<%= render LinkComponent.new(
|
|
text: "New rule",
|
|
variant: "primary",
|
|
href: new_rule_path(resource_type: "transaction"),
|
|
icon: "plus",
|
|
frame: :modal
|
|
) %>
|
|
</div>
|
|
</header>
|
|
<% if self_hosted? %>
|
|
<div class="flex items-center gap-2 mb-2 py-4">
|
|
<%= icon("circle-alert", size: "sm") %>
|
|
<p class="text-sm text-secondary">
|
|
AI-enabled rule actions will cost money. Be sure to filter as narrowly as possible to avoid unnecessary costs.
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
<div class="bg-container shadow-border-xs rounded-xl p-4">
|
|
<% if @rules.any? %>
|
|
<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="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 %>
|
|
<div class="flex justify-center items-center py-20">
|
|
<div class="text-center flex flex-col items-center max-w-[500px]">
|
|
<p class="text-sm text-primary font-medium mb-1">No rules yet</p>
|
|
<p class="text-sm text-secondary mb-4">Set up rules to perform actions to your transactions and other data on every account sync.</p>
|
|
<div class="flex items-center gap-2">
|
|
<%= render LinkComponent.new(
|
|
text: "New rule",
|
|
variant: "primary",
|
|
href: new_rule_path(resource_type: "transaction"),
|
|
icon: "plus",
|
|
frame: :modal
|
|
) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|