diff --git a/app/helpers/menus_helper.rb b/app/helpers/menus_helper.rb index 41907fa0..b5ec8444 100644 --- a/app/helpers/menus_helper.rb +++ b/app/helpers/menus_helper.rb @@ -6,7 +6,7 @@ module MenusHelper end end - def contextual_menu_modal_action_item(label, url, icon: "pencil-line", turbo_frame: nil) + def contextual_menu_modal_action_item(label, url, icon: "pencil-line", turbo_frame: :modal) link_to url, class: "flex items-center rounded-lg text-gray-900 hover:bg-gray-50 py-2 px-3 gap-2", data: { turbo_frame: } do concat(lucide_icon(icon, class: "shrink-0 w-5 h-5 text-gray-500")) concat(tag.span(label, class: "text-sm")) diff --git a/app/javascript/controllers/merchant_avatar_controller.js b/app/javascript/controllers/merchant_avatar_controller.js index 5f5134b2..077c9e9a 100644 --- a/app/javascript/controllers/merchant_avatar_controller.js +++ b/app/javascript/controllers/merchant_avatar_controller.js @@ -1,32 +1,29 @@ -import {Controller} from "@hotwired/stimulus"; +import { Controller } from "@hotwired/stimulus"; // Connects to data-controller="merchant-avatar" // Used by the transaction merchant form to show a preview of what the avatar will look like export default class extends Controller { static targets = [ "name", - "color", "avatar" ]; connect() { this.nameTarget.addEventListener("input", this.handleNameChange); - this.colorTarget.addEventListener("input", this.handleColorChange); } disconnect() { this.nameTarget.removeEventListener("input", this.handleNameChange); - this.colorTarget.removeEventListener("input", this.handleColorChange); } handleNameChange = (e) => { this.avatarTarget.textContent = (e.currentTarget.value?.[0] || "?").toUpperCase(); } - handleColorChange = (e) => { + handleColorChange(e) { const color = e.currentTarget.value; this.avatarTarget.style.backgroundColor = `color-mix(in srgb, ${color} 5%, white)`; this.avatarTarget.style.borderColor = `color-mix(in srgb, ${color} 10%, white)`; this.avatarTarget.style.color = color; } -} +} \ No newline at end of file diff --git a/app/views/merchants/_form.html.erb b/app/views/merchants/_form.html.erb index 9e78369c..626ccb4c 100644 --- a/app/views/merchants/_form.html.erb +++ b/app/views/merchants/_form.html.erb @@ -1,19 +1,16 @@ -<% is_editing = @merchant.id.present? %>
- <%= styled_form_with model: @merchant, url: is_editing ? merchant_path(@merchant) : merchants_path, method: is_editing ? :patch : :post, scope: :merchant, class: "space-y-4", data: { turbo: false } do |f| %> + <%= styled_form_with model: @merchant, class: "space-y-4", data: { turbo: false } do |f| %>
- <%= render partial: "merchants/avatar", locals: { merchant: } %> + <%= render partial: "merchants/avatar", locals: { merchant: @merchant } %>
-
- <%= f.hidden_field :color, data: { select_target: "input", merchant_avatar_target: "color" } %> -
    - <% Merchant::COLORS.each do |color| %> -
  • -
    -
  • - <% end %> -
+
+ <% Merchant::COLORS.each do |color| %> + + <% end %>
<%= 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" } %> @@ -21,7 +18,7 @@
- <%= f.submit(is_editing ? t(".submit_edit") : t(".submit_create")) %> + <%= f.submit %>
<% end %>
diff --git a/app/views/merchants/_list.html.erb b/app/views/merchants/_list.html.erb deleted file mode 100644 index 35ac3e6d..00000000 --- a/app/views/merchants/_list.html.erb +++ /dev/null @@ -1,41 +0,0 @@ -<%# locals: (merchants:) %> -<% merchants.each.with_index do |merchant, index| %> -
-
- <%= render partial: "merchants/avatar", locals: { merchant: } %> -

- <%= merchant.name %> -

-
-
- - -
-
- <% unless index == merchants.size - 1 %> -
- <% end %> -<% end %> diff --git a/app/views/merchants/_merchant.html.erb b/app/views/merchants/_merchant.html.erb new file mode 100644 index 00000000..60ffe80d --- /dev/null +++ b/app/views/merchants/_merchant.html.erb @@ -0,0 +1,26 @@ +<%# locals: (merchant:) %> + +
+
+ <%= render partial: "merchants/avatar", locals: { merchant: } %> +

+ <%= merchant.name %> +

+
+
+ <%= contextual_menu do %> +
+ <%= contextual_menu_modal_action_item t(".edit"), edit_merchant_path(merchant) %> + + <%= contextual_menu_destructive_item t(".delete"), + merchant_path(merchant), + turbo_frame: "_top", + turbo_confirm: { + title: t(".confirm_title"), + body: t(".confirm_body"), + accept: t(".confirm_accept") + } %> +
+ <% end %> +
+
diff --git a/app/views/merchants/_ruler.html.erb b/app/views/merchants/_ruler.html.erb new file mode 100644 index 00000000..70442f58 --- /dev/null +++ b/app/views/merchants/_ruler.html.erb @@ -0,0 +1,3 @@ +
+
+
diff --git a/app/views/merchants/index.html.erb b/app/views/merchants/index.html.erb index c615ad4e..2bd36b7e 100644 --- a/app/views/merchants/index.html.erb +++ b/app/views/merchants/index.html.erb @@ -8,7 +8,7 @@ <%= link_to new_merchant_path, class: "rounded-lg bg-gray-900 text-white flex items-center gap-1 justify-center hover:bg-gray-700 px-3 py-2", data: { turbo_frame: :modal } do %> <%= lucide_icon("plus", class: "w-5 h-5") %> - <%= t(".new_short") %> + <%= t(".new") %> <% end %>
@@ -18,18 +18,20 @@

<%= t(".empty") %>

<%= 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") %> - <%= t(".new_long") %> + <%= t(".new") %> <% end %>
<% else %>
-
+

<%= t(".title") %>

- · + ·

<%= @merchants.count %>

- <%= render partial: "merchants/list", locals: { merchants: @merchants } %> +
+ <%= render partial: @merchants, spacer_template: "merchants/ruler" %> +
<% end %>
diff --git a/config/locales/views/merchants/en.yml b/config/locales/views/merchants/en.yml index e3f7247e..b95aa729 100644 --- a/config/locales/views/merchants/en.yml +++ b/config/locales/views/merchants/en.yml @@ -9,14 +9,11 @@ en: title: Edit merchant form: name_placeholder: Merchant name - submit_create: Add merchant - submit_edit: Update index: empty: No merchants yet - new_long: New merchant - new_short: New + new: New merchant title: Merchants - list: + merchant: confirm_accept: Delete merchant confirm_body: Are you sure you want to delete this merchant? Removing this merchant will unlink all associated transactions and may effect your reporting.