mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-02 20:15:22 +02:00
Add Transaction Merchant management (#686)
* Add basid crud for merchant management * Tweak UI and add localization * Fix lint * Add filtering by merchant * Add tests * Add stimulus controller to update avatar in merchant form * Add line between merchant rows * Change default merchant color * Cleanup
This commit is contained in:
Jakub Kottnauer
GitHub
parent
7f491f5064
commit
9549182462
27 changed files with 363 additions and 18 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<%# locals: (content:) -%>
|
||||
<%# locals: (content:, classes:) -%>
|
||||
<%= turbo_frame_tag "modal" do %>
|
||||
<dialog class="bg-white border border-alpha-black-25 rounded-2xl max-h-[648px] max-w-[580px] w-full shadow-xs h-fit" data-controller="modal" data-action="click->modal#clickOutside">
|
||||
<dialog class="bg-white border border-alpha-black-25 rounded-2xl max-h-[648px] max-w-[580px] w-full shadow-xs h-fit <%= classes %>" data-controller="modal" data-action="click->modal#clickOutside">
|
||||
<div class="flex flex-col">
|
||||
<%= content %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,11 @@
|
|||
<div class="w-2 h-4 text-xs flex items-center justify-center rounded-full" style="background-color: <%= filter[:value].color %>"></div>
|
||||
<p><%= filter[:value].name %></p>
|
||||
</div>
|
||||
<% when "merchant" %>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-4 text-xs flex items-center justify-center rounded-full" style="background-color: <%= filter[:value].color %>"></div>
|
||||
<p><%= filter[:value].name %></p>
|
||||
</div>
|
||||
<% when "search" %>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= lucide_icon "text", class: "w-5 h-5 text-gray-500" %>
|
||||
|
|
|
|||
7
app/views/transactions/merchants/_avatar.html.erb
Normal file
7
app/views/transactions/merchants/_avatar.html.erb
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<%# locals: (merchant:) %>
|
||||
<% name = merchant.name || "?" %>
|
||||
<% background_color = "color-mix(in srgb, #{merchant.color} 5%, white)" %>
|
||||
<% border_color = "color-mix(in srgb, #{merchant.color} 10%, white)" %>
|
||||
<span data-merchant-avatar-target="avatar" class="w-8 h-8 flex items-center justify-center rounded-full" style="background-color: <%= background_color %>; border-color: <%= border_color %>; color: <%= merchant.color %>">
|
||||
<%= name[0].upcase %>
|
||||
</span>
|
||||
27
app/views/transactions/merchants/_form.html.erb
Normal file
27
app/views/transactions/merchants/_form.html.erb
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<% is_editing = @merchant.id.present? %>
|
||||
<div data-controller="merchant-avatar">
|
||||
<%= form_with model: @merchant, url: is_editing ? transactions_merchant_path(@merchant) : transactions_merchants_path, method: is_editing ? :patch : :post, scope: :transaction_merchant, data: { turbo: false } do |f| %>
|
||||
<section class="space-y-4">
|
||||
<div class="w-fit m-auto">
|
||||
<%= render partial: "transactions/merchants/avatar", locals: { merchant: } %>
|
||||
</div>
|
||||
<div data-controller="select" data-select-active-class="bg-gray-200" data-select-selected-value="<%= @merchant&.color || Transaction::Merchant::COLORS[0] %>">
|
||||
<%= f.hidden_field :color, data: { select_target: "input", merchant_avatar_target: "color" } %>
|
||||
<ul data-select-target="list" class="flex gap-2 items-center">
|
||||
<% Transaction::Merchant::COLORS.each do |color| %>
|
||||
<li tabindex="0" data-select-target="option" data-action="click->select#selectOption" data-value="<%= color %>" class="flex shrink-0 justify-center items-center w-6 h-6 cursor-pointer hover:bg-gray-200 rounded-full">
|
||||
<div style="background-color: <%= color %>" class="shrink-0 w-4 h-4 rounded-full"></div>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="relative flex items-center border border-gray-200 rounded-lg">
|
||||
<%= f.text_field :name, placeholder: t(".name_placeholder"), class: "text-sm font-normal placeholder:text-gray-500 h-10 relative pl-3 w-full border-none rounded-lg", required: true, data: { merchant_avatar_target: "name" } %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<%= f.submit(is_editing ? t(".submit_edit") : t(".submit_create")) %>
|
||||
</section>
|
||||
<% end %>
|
||||
</div>
|
||||
41
app/views/transactions/merchants/_list.html.erb
Normal file
41
app/views/transactions/merchants/_list.html.erb
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<%# locals: (merchants:) %>
|
||||
<% merchants.each.with_index do |merchant, index| %>
|
||||
<div class="flex justify-between items-center p-4 bg-white">
|
||||
<div class="flex w-full items-center gap-2.5">
|
||||
<%= render partial: "transactions/merchants/avatar", locals: { merchant: } %>
|
||||
<p class="text-gray-900 text-sm truncate">
|
||||
<%= merchant.name %>
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative cursor-pointer" data-controller="menu">
|
||||
<button data-menu-target="button" class="flex hover:bg-gray-100 p-2 rounded">
|
||||
<%= lucide_icon("more-horizontal", class: "w-5 h-5 text-gray-500") %>
|
||||
</button>
|
||||
<div data-menu-target="content" class="absolute z-10 top-10 right-0 border border-alpha-black-25 bg-white rounded-lg shadow-xs w-48 hidden">
|
||||
<div class="border-t border-b border-alpha-black-100 p-1">
|
||||
<%= button_to edit_transactions_merchant_path(merchant),
|
||||
method: :get,
|
||||
class: "flex w-full gap-1 items-center text-sm hover:bg-gray-50 rounded-lg px-3 py-2",
|
||||
data: { turbo_frame: "modal" } do %>
|
||||
<%= lucide_icon("pencil-line", class: "w-5 h-5 mr-2") %> <%= t(".edit") %>
|
||||
<% end %>
|
||||
<%= button_to transactions_merchant_path(merchant),
|
||||
method: :delete,
|
||||
class: "flex w-full gap-1 items-center text-sm text-red-600 hover:text-red-800 hover:bg-gray-50 rounded-lg px-3 py-2",
|
||||
data: {
|
||||
turbo_confirm: {
|
||||
title: t(".confirm_title"),
|
||||
body: t(".confirm_body"),
|
||||
accept: t(".confirm_accept")
|
||||
}
|
||||
} do %>
|
||||
<%= lucide_icon("trash-2", class: "w-5 h-5 mr-1") %> <%= t(".delete") %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% unless index == merchants.size - 1 %>
|
||||
<div class="h-px bg-alpha-black-50 ml-14 mr-6"></div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
10
app/views/transactions/merchants/edit.html.erb
Normal file
10
app/views/transactions/merchants/edit.html.erb
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<%= modal classes: "max-w-fit" do %>
|
||||
<article class="mx-auto w-full p-4 space-y-4">
|
||||
<header class="flex justify-between">
|
||||
<h2 class="font-medium text-xl"><%= t(".title") %></h2>
|
||||
<%= lucide_icon "x", class: "w-5 h-5 text-gray-500", data: { action: "click->modal#close" } %>
|
||||
</header>
|
||||
|
||||
<%= render "form", merchant: @merchant %>
|
||||
</article>
|
||||
<% end %>
|
||||
|
|
@ -2,11 +2,34 @@
|
|||
<%= render "settings/nav" %>
|
||||
<% end %>
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-gray-900 text-xl font-medium mb-4">Merchants</h1>
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl font-medium text-gray-900"><%= t(".title") %></h1>
|
||||
<%= link_to new_transactions_merchant_path, class: "flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2", data: { turbo_frame: "modal" } do %>
|
||||
<%= lucide_icon("plus", class: "w-5 h-5") %>
|
||||
<span><%= t(".new_short") %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
|
||||
<div class="flex justify-center items-center py-20">
|
||||
<p class="text-gray-500">Manage transaction merchants coming soon...</p>
|
||||
</div>
|
||||
<% if @merchants.empty? %>
|
||||
<div class="flex justify-center items-center py-20">
|
||||
<div class="text-center flex flex-col items-center max-w-[300px]">
|
||||
<p class="text-gray-900 mb-1 font-medium text-sm"><%= t(".empty") %></p>
|
||||
<%= link_to new_transactions_merchant_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2", data: { turbo_frame: "modal" } do %>
|
||||
<%= lucide_icon("plus", class: "w-5 h-5") %>
|
||||
<span><%= t(".new_long") %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="bg-gray-25 p-1 rounded-xl">
|
||||
<div class="flex items-center px-4 py-2 text-xs font-medium text-gray-500">
|
||||
<p><%= t(".title") %></p>
|
||||
<span class="text-gray-400 mx-2">·</span>
|
||||
<p><%= @merchants.count %></p>
|
||||
</div>
|
||||
<%= render partial: "transactions/merchants/list", locals: { merchants: @merchants } %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flex justify-between gap-4">
|
||||
<%= previous_setting("Categories", transactions_categories_path) %>
|
||||
|
|
|
|||
10
app/views/transactions/merchants/new.html.erb
Normal file
10
app/views/transactions/merchants/new.html.erb
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<%= modal classes: "max-w-fit" do %>
|
||||
<article class="mx-auto w-full p-4 space-y-4">
|
||||
<header class="flex justify-between">
|
||||
<h2 class="font-medium text-xl"><%= t(".title") %></h2>
|
||||
<%= lucide_icon "x", class: "w-5 h-5 text-gray-500", data: { action: "click->modal#close" } %>
|
||||
</header>
|
||||
|
||||
<%= render "form", merchant: @merchant %>
|
||||
</article>
|
||||
<% end %>
|
||||
|
|
@ -1,4 +1,15 @@
|
|||
<%# locals: (form:) %>
|
||||
<div class="py-12 flex items-center justify-center">
|
||||
<p class="text-gray-500 text-sm">Filter by merchant coming soon...</p>
|
||||
<div data-controller="list-filter">
|
||||
<div class="relative">
|
||||
<input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
|
||||
</div>
|
||||
<div class="my-2" id="list" data-list-filter-target="list">
|
||||
<% Current.family.transaction_merchants.each do |merchant| %>
|
||||
<div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= merchant.name %>">
|
||||
<%= form.check_box :merchant_id_in, { multiple: true, class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" }, merchant.id, nil %>
|
||||
<%= form.label :merchant_id_in, merchant.name, value: merchant.id, class: "text-sm text-gray-900" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<%# locals: (form:) %>
|
||||
<div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
|
||||
<%= form.search_field :category_name_or_account_name_or_name_cont,
|
||||
placeholder: "Search transaction by name, category or amount",
|
||||
<%= form.search_field :category_name_or_merchant_name_or_account_name_or_name_cont,
|
||||
placeholder: "Search transaction by name, merchant, category or amount",
|
||||
class: "placeholder:text-sm placeholder:text-gray-500 relative pl-10 w-full border-none rounded-lg",
|
||||
"data-auto-submit-form-target": "auto" %>
|
||||
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue