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

Fix merchants color picker (#1134)

Browse source 
* Fix merchants color picker

* Lint fixes
This commit is contained in:
Zach Gollwitzer 2024-08-26 19:18:27 -04:00 • committed by GitHub
parent 166ed4b1ea
commit f82ce59dad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 52 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

23
app/views/merchants/_form.html.erb
View file

@ -1,19 +1,16 @@
<% is_editing = @merchant.id.present? %>
<div data-controller="merchant-avatar">
<%= 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| %>
<section class="space-y-4">
<div class="w-fit m-auto">
<%= render partial: "merchants/avatar", locals: { merchant: } %>
<%= render partial: "merchants/avatar", locals: { merchant: @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 class="flex gap-2 items-center justify-center">
<% Merchant::COLORS.each do |color| %>
<label class="relative">
<%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->merchant-avatar#handleColorChange" } %>
<div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" style="background-color: <%= color %>"></div>
</label>
<% end %>
</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" } %>
@ -21,7 +18,7 @@
</section>
<section>
<%= f.submit(is_editing ? t(".submit_edit") : t(".submit_create")) %>
<%= f.submit %>
</section>
<% end %>
</div>