Skip to content

Commit

Permalink
accords
Browse files Browse the repository at this point in the history
  • Loading branch information
@michelson
michelson committed Jul 14, 2024
1 parent ab8e5e8 commit 068e502
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 106 deletions.
37 changes: 37 additions & 0 deletions app/javascript/controllers/accordeon_controller.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
static targets = ["panel", "iconOpen", "iconClose"]

connect(){
this.handleIconDisplay()
}

toggle(event) {

const el = event.currentTarget.closest('[data-accordeon]');
const panelE = el.querySelector('[data-accordeon-target="panel"]');

this.panelTargets.forEach((panel) => {

if (panel === panelE) {
panel.classList.toggle("hidden");
} else {
panel.classList.remove("open");
panel.classList.remove("hidden");
}
});

this.handleIconDisplay()
}

handleIconDisplay(){
if( this.panelTarget.classList.contains("hidden")){
if(this.hasIconOpenTarget){ this.iconOpenTarget.classList.add("hidden") }
if(this.hasIconCloseTarget){ this.iconCloseTarget.classList.remove("hidden") }
} else {
if(this.hasIconOpenTarget){ this.iconOpenTarget.classList.remove("hidden") }
if(this.hasIconCloseTarget){ this.iconCloseTarget.classList.add("hidden") }
}
}
}
2 changes: 2 additions & 0 deletions app/javascript/controllers/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import input_listener_controller from "./input_listener_controller.js"
import dark_mode_controller from "./dark_mode_controller.js"
import simple_editor_controller from "./simple_editor_controller.jsx"
import filter_manager_controller from "./filter_manager_controller.js"
import accordeon_controller from "./accordeon_controller.js"
//import GeoChart from './geo_chart_controller'

// Configure Stimulus development experience
Expand Down Expand Up @@ -86,3 +87,4 @@ application.register("submit-on-change", submit_on_change_controller)
application.register("hw-combobox", HwComboboxController)
application.register("input-listener", input_listener_controller)
application.register("dark-mode", dark_mode_controller)
application.register("accordeon", accordeon_controller)
232 changes: 127 additions & 105 deletions app/views/products/_form.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,143 +22,165 @@

<div class="space-y-3">

<div class="flex space-x-2">
<%= form.select :category, Product.categories.keys , {}, {
#label: false,
data: { action: "change->submit-on-change#submitForm" }
}
%>
<% if ['vinyl', 'cassette'].include?(product.category) %>
<%= form.select :playlist_id, current_user.playlists.where(playlist_type: ['album', 'ep']).map{|o|
[o.title, o.id]
}, label: "Album" %>
<% end %>
<div class="block pt-0 space-y-3">

<div class="flex space-x-2">
<%= form.select :category, Product.categories.keys , {}, {
#label: false,
data: { action: "change->submit-on-change#submitForm" }
}
%>
<% if ['vinyl', 'cassette'].include?(product.category) %>
<%= form.select :playlist_id, current_user.playlists.where(playlist_type: ['album', 'ep']).map{|o|
[o.title, o.id]
}, label: "Album" %>
<% end %>
</div>

<%= form.text_field :title %>
<%= render "shared/simple_editor", form: form, field: :description %>
</div>

<%= form.text_field :title %>
<%= render "shared/simple_editor", form: form, field: :description %>
<div data-accordeon data-controller="accordeon" class="w-full rounded-lg mb-2.5 bg-subtle dark:bg-black">
<%= render "section_header", title: "Photos" %>
<div class="p-5 block pt-0" data-accordeon-target="panel">

<%= form.number_field :price, step: 0.01 %>

<%= form.number_field :price, step: 0.01 %>
<div>
<%= form.check_box :name_your_price, class: "rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<span class="ml-2">Let fans pay more if they want</span>
</div>

<div>
<%= form.check_box :name_your_price, class: "rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<span class="ml-2">Let fans pay more if they want</span>
</div>
<div class="flex space-x-2 items-center">
<%= form.number_field :stock_quantity %>
<%= form.text_field :sku %>
</div>

<div class="flex space-x-2 items-center">
<%= form.number_field :stock_quantity %>
<%= form.text_field :sku %>
</div>
<p class="text-xs text-muted">
We automatically decrement the quantity for you as the item sells — you only need to edit it if you’re also selling elsewhere (like at your shows, or another website).
Leave quantity blank for unlimited.
</p>

<p class="text-xs text-muted">
We automatically decrement the quantity for you as the item sells — you only need to edit it if you’re also selling elsewhere (like at your shows, or another website).
Leave quantity blank for unlimited.
</p>
<% # form.number_field :quantity, label: "Quantity remaining", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<% # form.number_field :quantity, label: "Quantity remaining", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<%= form.select :status, Product.statuses.keys %>
<%= form.select :status, Product.statuses.keys %>
<div>
<%= form.check_box :limited_edition, class: "rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<span class="ml-2">Show limited edition indicator to fans</span>
</div>
<div>
<%= form.check_box :limited_edition, class: "rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<span class="ml-2">Show limited edition indicator to fans</span>
</div>
<div>
<%= form.number_field :limited_edition_count, label: "Edition of", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<p class="mt-1 text-sm text-gray-500">will appear just beneath the item description</p>
</div>
<div>
<%= form.number_field :limited_edition_count, label: "Edition of", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<p class="mt-1 text-sm text-gray-500">will appear just beneath the item description</p>
</div>
<div>
<%= form.check_box :include_digital_album, class: "rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<span class="ml-2">Include digital album or track with the purchase of this item</span>
</div>
<div>
<%= form.check_box :include_digital_album, class: "rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<span class="ml-2">Include digital album or track with the purchase of this item</span>
<div>
<%= form.select :visibility, options_for_select([['Public', 'public'], ['Private', 'private']], @product.visibility), {}, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
</div>
</div>
</div>
<div>
<%= form.select :visibility, options_for_select([['Public', 'public'], ['Private', 'private']], @product.visibility), {}, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
</div>
<div data-controller="nested-form" class="py-6 sm:col-span-6">
<template data-nested-form-target="template">
<%= form.fields_for :product_images, ProductImage.new, child_index: 'NEW_RECORD' do |ff| %>
<%= render 'product_images', form: ff %>
<% end %>
</template>
<div class="space-y-3" data-nested-form-target="wrap">
<%= form.fields_for :product_images do |ff| %>
<%= render 'product_images', form: ff %>
<% end %>
</div>
<div data-accordeon data-controller="accordeon" class="w-full rounded-lg mb-2.5 bg-subtle dark:bg-black">
<%= render "section_header", title: "Photos" %>
<div class="p-5 block pt-0" data-accordeon-target="panel">
<div data-controller="nested-form" class="py-6 sm:col-span-6">
<template data-nested-form-target="template">
<%= form.fields_for :product_images, ProductImage.new, child_index: 'NEW_RECORD' do |ff| %>
<%= render 'product_images', form: ff %>
<% end %>
</template>
<div class="my-3" data-nested-form-target="links">
<%= link_to "Add new photo", "#",
class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500",
data: { action: "click->nested-form#add_association" } %>
<div class="space-y-3" data-nested-form-target="wrap">
<%= form.fields_for :product_images do |ff| %>
<%= render 'product_images', form: ff %>
<% end %>
</div>
<div class="my-3" data-nested-form-target="links">
<%= link_to "Add new photo", "#",
class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500",
data: { action: "click->nested-form#add_association" } %>
</div>
</div>
</div>
</div>

</div>


<div class="space-y-3">

<% # render "variant_form_section", form: form %>
<div class="border border-muted rounded-lg p-4 my-4">
<h3 class="text-lg">Shipping</h3>
<div data-accordeon data-controller="accordeon" class="w-full rounded-lg mb-2.5 bg-subtle dark:bg-black">
<div>
<%= form.label :shipping_days, "Orders ship out within" %>
<%= form.number_field :shipping_days %>
<span>days of being placed</span>
</div>
<div>
<%= form.number_field :shipping_days, label: "Orders ship out within", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<span class="mt-1 text-sm text-gray-500">days of being placed</span>
</div>
<div>
<%= form.date_field :shipping_begins_on, label: "Begins shipping on", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
</div>
<div data-controller="nested-form" class="py-6 sm:col-span-6">
<template data-nested-form-target="template">
<%= form.fields_for :product_shippings, ProductShipping.new, child_index: 'NEW_RECORD' do |ff| %>
<%= render "shipping_fields", form: ff %>
<% end %>
</template>
<!--<div>
<h3 class="text-lg font-medium text-gray-900">Shipping Prices</h3>
<div>
<%= form.number_field :shipping_within_country_price, step: 0.01, label: "Within Country", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<%= render "section_header", title: "Shipping" %>
<div class="p-5 block pt-0" data-accordeon-target="panel">
<div class="p-4 my-4">
<h3 class="text-lg">Shipping</h3>
<div>
<%= form.label :shipping_days, "Orders ship out within" %>
<%= form.number_field :shipping_days %>
<span>days of being placed</span>
</div>
<div>
<%= form.number_field :shipping_days, label: "Orders ship out within", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
<span class="mt-1 text-sm text-gray-500">days of being placed</span>
</div>
<div>
<%= form.date_field :shipping_begins_on, label: "Begins shipping on", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
</div>
<div data-controller="nested-form" class="py-6 sm:col-span-6">
<template data-nested-form-target="template">
<%= form.fields_for :product_shippings, ProductShipping.new, child_index: 'NEW_RECORD' do |ff| %>
<%= render "shipping_fields", form: ff %>
<% end %>
</template>
<!--<div>
<h3 class="text-lg font-medium text-gray-900">Shipping Prices</h3>
<div>
<%= form.number_field :shipping_within_country_price, step: 0.01, label: "Within Country", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
</div>
<div class="mt-4">
<%= form.number_field :shipping_worldwide_price, step: 0.01, label: "Worldwide", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
</div>
</div>-->
<div data-nested-form-target="wrap">
<%= form.fields_for :product_shippings do |shipping_form| %>
<%= render "shipping_fields", form: shipping_form %>
<% end %>
</div>
<div class="my-3" data-nested-form-target="links">
<%= link_to "Add new shipping options", "#",
class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500",
data: { action: "click->nested-form#add_association" } %>
</div>
</div>
</div>
<div class="mt-4">
<%= form.number_field :shipping_worldwide_price, step: 0.01, label: "Worldwide", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" %>
</div>
</div>-->
<div data-nested-form-target="wrap">
<%= form.fields_for :product_shippings do |shipping_form| %>
<%= render "shipping_fields", form: shipping_form %>
<% end %>
</div>

<div class="my-3" data-nested-form-target="links">
<%= link_to "Add new shipping options", "#",
class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500",
data: { action: "click->nested-form#add_association" } %>
</div>
</div>
</div>


<div class="py-2 fixed bottom-[65px] w-full bg-muted left-0 border-t border-muted">
<div class="py-2 fixed bottom-[65px] w-full bg-emphasis left-0 border-t border-muted">

<div class="flex space-x-2 items-center p-6">

Expand Down
20 changes: 20 additions & 0 deletions app/views/products/_section_header.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div role="none" data-action="click->accordeon#toggle"
class="flex items-center justify-between py-5 px-5 border-b border-muted">
<span class="font-medium text-default">
<%= title%>
</span>

<svg stroke="currentColor" data-accordeon-target="iconOpen" fill="currentColor" stroke-width="0" viewBox="0 0 16 16"
class="ml-auto text-default" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z">
</path>
</svg>

<svg stroke="currentColor" data-accordeon-target="iconClose" fill="currentColor" stroke-width="0" t="1551322312294" viewBox="0 0 1024 1024" version="1.1"
class="ml-auto text-default" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path d="M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z"></path><path d="M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z">
</path>
</svg>

</div>
2 changes: 1 addition & 1 deletion app/views/shared/_user_menu.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@
<% if current_user&.can_sell_products? %>
<%= link_to user_products_path(current_user.username),
class: "block px-4 py-2 text-sm text-gray-700 dark:text-gray-300" do %>
<%= t("menu.my_purchases") %>
<%= t("menu.my_products_merch") %>
<% end %>
<% end %>
Expand Down

0 comments on commit 068e502

Please sign in to comment.