mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-05 21:45:23 +02:00
Move merchants to top-level namespace (#895)
This commit is contained in:
Zach Gollwitzer
GitHub
parent
2681dd96b1
commit
dc3147c101
29 changed files with 153 additions and 145 deletions
7
app/views/merchants/_avatar.html.erb
Normal file
7
app/views/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/merchants/_form.html.erb
Normal file
27
app/views/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 ? merchant_path(@merchant) : merchants_path, method: is_editing ? :patch : :post, scope: :merchant, data: { turbo: false } do |f| %>
|
||||
<section class="space-y-4">
|
||||
<div class="w-fit m-auto">
|
||||
<%= render partial: "merchants/avatar", locals: { merchant: } %>
|
||||
</div>
|
||||
<div data-controller="select" data-select-active-class="bg-gray-200" data-select-selected-value="<%= @merchant&.color || 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">
|
||||
<% 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/merchants/_list.html.erb
Normal file
41
app/views/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: "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_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 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/merchants/edit.html.erb
Normal file
10
app/views/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 %>
|
||||
38
app/views/merchants/index.html.erb
Normal file
38
app/views/merchants/index.html.erb
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<% content_for :sidebar do %>
|
||||
<%= render "settings/nav" %>
|
||||
<% end %>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl font-medium text-gray-900"><%= t(".title") %></h1>
|
||||
<%= link_to new_merchant_path, class: "flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", 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">
|
||||
<% 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_merchant_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", 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: "merchants/list", locals: { merchants: @merchants } %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flex justify-between gap-4">
|
||||
<%= previous_setting("Categories", categories_path) %>
|
||||
<%= next_setting("Rules", transaction_rules_path) %>
|
||||
</div>
|
||||
</div>
|
||||
10
app/views/merchants/new.html.erb
Normal file
10
app/views/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 %>
|
||||
Loading…
Add table
Add a link
Reference in a new issue