mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-09 15:35:22 +02:00
Improve rule page and form design
This commit is contained in:
hatz
parent
eb6e73b5ab
commit
11c2bedb7b
2 changed files with 101 additions and 72 deletions
|
|
@ -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,31 +39,36 @@
|
|||
<% end %>
|
||||
</template>
|
||||
|
||||
<ul data-rules-target="conditionsList" class="space-y-3 mb-4">
|
||||
<%= f.fields_for :conditions do |cf| %>
|
||||
<% if cf.object.compound? %>
|
||||
<%= render "rule/conditions/condition_group", form: cf %>
|
||||
<% else %>
|
||||
<%= render "rule/conditions/condition", form: cf %>
|
||||
<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 %>
|
||||
<% else %>
|
||||
<%= render "rule/conditions/condition", form: cf %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" data-action="rules#addCondition" class="btn btn--ghost">
|
||||
<%= icon("plus") %>
|
||||
<span>Add condition</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" data-action="rules#addCondition" class="btn btn--ghost">
|
||||
<%= icon("plus") %>
|
||||
<span>Add condition</span>
|
||||
</button>
|
||||
|
||||
<button type="button" data-action="rules#addConditionGroup" class="btn btn--ghost">
|
||||
<%= icon("boxes") %>
|
||||
<span>Add condition group</span>
|
||||
</button>
|
||||
<button type="button" data-action="rules#addConditionGroup" class="btn btn--ghost">
|
||||
<%= icon("boxes") %>
|
||||
<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>
|
||||
|
||||
<ul data-rules-target="actionsList" class="space-y-3">
|
||||
<%= f.fields_for :actions do |af| %>
|
||||
<%= render "rule/actions/action", form: af %>
|
||||
<% end %>
|
||||
</ul>
|
||||
<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">
|
||||
<%= icon("plus") %>
|
||||
<span>Add action</span>
|
||||
</button>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -5,43 +5,62 @@
|
|||
<% 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">
|
||||
<% 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 %>
|
||||
<% else %>
|
||||
If <%= 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>
|
||||
<% if rule.conditions.any? %>
|
||||
<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? %>
|
||||
<%= 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 %>
|
||||
|
||||
<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 %>
|
||||
<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 %>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<% 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 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? %>
|
||||
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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue