Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-09 15:35:22 +02:00
Code Issues Releases Activity Actions

Improve rule page and form design

Browse source
This commit is contained in:
hatz 2025-04-29 17:40:37 -05:00
parent eb6e73b5ab
commit 11c2bedb7b
No known key found for this signature in database
2 changed files with 101 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

42
app/views/rules/_form.html.erb
View file

@ -1,6 +1,6 @@
<%# locals: (rule:) %>
<%= styled_form_with model: rule, class: "space-y-4 w-[550px]",
<%= styled_form_with model: rule, class: "space-y-6 w-[550px]",
data: { controller: "rules", rule_registry_value: rule.registry.to_json } do |f| %>
<%= f.hidden_field :resource_type, value: rule.resource_type %>
@ -10,17 +10,20 @@
<% end %>
<section class="space-y-4">
<h3 class="text-sm font-medium text-primary flex items-center gap-1">
<%= lucide_icon("tag", class: "w-4 h-4") %>
Rule name (optional)
</h3>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1 text-secondary">
<%= lucide_icon "tag", class: "w-4 h-4 shrink-0" %>
<h3 class="text-sm font-medium text-primary">Rule name (optional)</h3>
</div>
<div class="ml-6">
<%= f.text_field :name, placeholder: "Enter a name for this rule", class: "form-field__input" %>
</div>
</section>
<section class="space-y-4">
<h3 class="text-sm font-medium text-primary">If <%= rule.resource_type %></h3>
<div class="flex items-center gap-1 text-secondary">
<%= lucide_icon "help-circle", class: "w-4 h-4 shrink-0" %>
<h3 class="text-sm font-medium text-primary font-mono">IF</h3>
</div>
<%# Condition template, used by Stimulus controller to add new conditions dynamically %>
<template data-rules-target="conditionGroupTemplate">
@ -36,7 +39,8 @@
<% end %>
</template>
<ul data-rules-target="conditionsList" class="space-y-3 mb-4">
<div class="ml-6 space-y-4">
<ul data-rules-target="conditionsList" class="space-y-3">
<%= f.fields_for :conditions do |cf| %>
<% if cf.object.compound? %>
<%= render "rule/conditions/condition_group", form: cf %>
@ -57,10 +61,14 @@
<span>Add condition group</span>
</button>
</div>
</div>
</section>
<section class="space-y-4">
<h3 class="text-sm font-medium text-primary">Then</h3>
<div class="flex items-center gap-1 text-secondary">
<%= lucide_icon "arrow-right", class: "w-4 h-4 shrink-0" %>
<h3 class="text-sm font-medium text-primary font-mono">THEN</h3>
</div>
<%# Action template, used by Stimulus controller to add new actions dynamically %>
<template data-rules-target="actionTemplate">
@ -69,28 +77,30 @@
<% end %>
</template>
<div class="ml-6 space-y-4">
<ul data-rules-target="actionsList" class="space-y-3">
<%= f.fields_for :actions do |af| %>
<%= render "rule/actions/action", form: af %>
<% end %>
</ul>
<button
type="button"
data-action="rules#addAction"
class="btn btn--ghost">
<button type="button" data-action="rules#addAction" class="btn btn--ghost">
<%= icon("plus") %>
<span>Add action</span>
</button>
</div>
</section>
<section class="space-y-4">
<h3 class="text-sm font-medium text-primary">Apply this</h3>
<div class="flex items-center gap-1 text-secondary">
<%= lucide_icon "calendar", class: "w-4 h-4 shrink-0" %>
<h3 class="text-sm font-medium text-primary font-mono">FOR</h3>
</div>
<div class="space-y-2">
<div class="ml-6 space-y-3">
<div class="flex items-center gap-2">
<%= f.radio_button :effective_date_enabled, false, checked: rule.effective_date.nil?, data: { action: "rules#clearEffectiveDate" } %>
<%= f.label :effective_date_enabled_false, "To all past and future #{rule.resource_type}s", class: "text-sm text-primary" %>
<%= f.label :effective_date_enabled_false, "All past and future #{rule.resource_type}s", class: "text-sm text-primary" %>
</div>
<div class="flex items-center gap-2">

41
app/views/rules/_rule.html.erb
View file

@ -5,44 +5,63 @@
<% if rule.name.present? %>
<h3 class="font-medium text-lg text-primary"><%= rule.name %></h3>
<% end %>
<% if rule.conditions.any? %>
<p class="flex items-center flex-wrap gap-1.5">
<span class="px-2 py-1 border border-alpha-black-200 rounded-full">
<div class="flex items-center gap-2 mt-1">
<div class="flex items-center gap-1 text-secondary w-16 shrink-0">
<%= lucide_icon "help-circle", class: "w-4 h-4 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? %>
If <%= rule.conditions.first.sub_conditions.first.filter.label %> <%= rule.conditions.first.sub_conditions.first.operator %> <%= rule.conditions.first.sub_conditions.first.value_display %>
<%= rule.conditions.first.sub_conditions.first.filter.label %> <%= rule.conditions.first.sub_conditions.first.operator %> <%= rule.conditions.first.sub_conditions.first.value_display %>
<% else %>
If <%= rule.conditions.first.filter.label %> <%= rule.conditions.first.operator %> <%= rule.conditions.first.value_display %>
<%= 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 %>
<p class="flex items-center flex-wrap gap-1.5">
<span class="px-2 py-1 border border-alpha-black-200 rounded-full">
<div class="flex items-center gap-2 mt-1">
<div class="flex items-center gap-1 text-secondary w-16 shrink-0">
<%= lucide_icon "arrow-right", class: "w-4 h-4 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">
<% 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>
</div>
<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">
<%= lucide_icon "calendar", class: "w-4 h-4 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? %>
To all past and future <%= rule.resource_type.pluralize %>
All past and future <%= rule.resource_type.pluralize %>
<% else %>
To all <%= rule.resource_type.pluralize %> on or after <%= rule.effective_date %>
<%= 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">
<%= render "shared/toggle_form", model: rule, attribute: :active %>