From bb9ba8139480a8b8d40fd3ffec29c822e7a20d76 Mon Sep 17 00:00:00 2001 From: bruno Date: Thu, 18 Jul 2024 14:16:46 -0300 Subject: [PATCH 1/2] added multiple destinations --- app/assets/images/add.svg | 5 ++ app/assets/images/remove.svg | 4 ++ .../stylesheets/application.bootstrap.scss | 15 +++- .../controllers/destinations_controller.js | 32 +++++++++ app/javascript/controllers/index.js | 3 + .../purchases/_data_destination.html.erb | 43 ++++++++++++ app/views/purchases/new.html.erb | 70 +++++++------------ 7 files changed, 125 insertions(+), 47 deletions(-) create mode 100644 app/assets/images/add.svg create mode 100644 app/assets/images/remove.svg create mode 100644 app/javascript/controllers/destinations_controller.js create mode 100644 app/views/purchases/_data_destination.html.erb diff --git a/app/assets/images/add.svg b/app/assets/images/add.svg new file mode 100644 index 0000000..df70db6 --- /dev/null +++ b/app/assets/images/add.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/images/remove.svg b/app/assets/images/remove.svg new file mode 100644 index 0000000..8354ef5 --- /dev/null +++ b/app/assets/images/remove.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss index 2982578..33233e1 100644 --- a/app/assets/stylesheets/application.bootstrap.scss +++ b/app/assets/stylesheets/application.bootstrap.scss @@ -359,6 +359,11 @@ $utilities: map-merge( pointer-events: none; } +.img-destinations { + width: 30px; + height: 30px; +} + .shadow { position: absolute; width: 100%; @@ -453,13 +458,19 @@ input[type="number"]::-webkit-outer-spin-button { width: 100px; height: 100px; } - + .img-destinations { + width: 15px; + height: 15px; + } } @include media-breakpoint-up(xl) { - + .img-destinations { + width: 20px; + height: 20px; + } } diff --git a/app/javascript/controllers/destinations_controller.js b/app/javascript/controllers/destinations_controller.js new file mode 100644 index 0000000..521ed46 --- /dev/null +++ b/app/javascript/controllers/destinations_controller.js @@ -0,0 +1,32 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="destinations" +export default class extends Controller { + static targets = ['template', 'form', 'errorRemove'] + static classes = ['paddingWeb', 'paddingMobile', 'hide'] + + + add() { + const newDestination = this.templateTarget.content.cloneNode(true) + const inputs = newDestination.querySelectorAll('input') + const id = this.formTarget.childElementCount + for (let i = 0; i < inputs.length; i++) { + inputs[i].setAttribute('name', inputs[i].getAttribute('name').replace('[template]', `[destinations_attributes][${id}]`)) + inputs[i].setAttribute('id', inputs[i].getAttribute('id').replace('[template]', `destinations_attributes_${id}`)) + inputs[i].value = '' + } + newDestination.querySelector('div').classList.add(this.paddingWebClass, this.paddingMobileClass) + this.formTarget.appendChild(newDestination) + this.errorRemoveTarget.classList.add(this.hideClass) + } + + remove() { + if (this.formTarget.childElementCount > 1) { + this.formTarget.removeChild(this.formTarget.lastElementChild) + this.errorRemoveTarget.classList.add(this.hideClass) + } else { + this.errorRemoveTarget.classList.remove(this.hideClass) + } + } +} + diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index c3b0eee..a666cb5 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -7,6 +7,9 @@ import { application } from "./application" import AutoSubmitController from "./auto_submit_controller" application.register("auto-submit", AutoSubmitController) +import DestinationsController from "./destinations_controller" +application.register("destinations", DestinationsController) + import DropDownController from "./dropDown_controller" application.register("dropDown", DropDownController) diff --git a/app/views/purchases/_data_destination.html.erb b/app/views/purchases/_data_destination.html.erb new file mode 100644 index 0000000..33f94e7 --- /dev/null +++ b/app/views/purchases/_data_destination.html.erb @@ -0,0 +1,43 @@ +
+
+
+ <%= destination_form.text_field :receiver, placeholder: 'Nombre y apellido', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1 pe-lg-2' %> + <% destination_form.object.errors[:receiver].each do |message| %> +

<%= message %>

+ <% end %> +
+
+ <%= destination_form.label :day, 'Fecha de entrega', class:'text-role-grey fs-sm-5 fs-lg-3 d-lg-none' %> + <%= destination_form.date_field :day, min: Date.today, class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1' %> + <% destination_form.object.errors[:day].each do |message| %> +

<%= message %>

+ <% end %> +
+
+ <%= destination_form.text_field :address, placeholder: 'Dirección de entrega', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1' %> + <% destination_form.object.errors[:address].each do |message| %> +

<%= message %>

+ <% end %> +
+
+
+
+ <%= destination_form.text_field :number, placeholder: 'Número de contacto', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1' %> + <% destination_form.object.errors[:number].each do |message| %> +

<%= message %>

+ <% end %> +
+
+ <%= destination_form.text_field :schedules, placeholder: 'Horarios de entrega', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1 pe-lg-2' %> + <% destination_form.object.errors[:schedules].each do |message| %> +

<%= message %>

+ <% end %> +
+
+ <%= destination_form.text_field :cost, placeholder: 'Costo de envío', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1' %> + <% destination_form.object.errors[:cost].each do |message| %> +

<%= message %>

+ <% end %> +
+
+
diff --git a/app/views/purchases/new.html.erb b/app/views/purchases/new.html.erb index 574cab4..c40ed3d 100644 --- a/app/views/purchases/new.html.erb +++ b/app/views/purchases/new.html.erb @@ -5,7 +5,7 @@ <%= form_with model: @purchase do |form| %> <%= form.select :customization_ids, @purchase.customization_ids,{}, multiple: true, style: "display: none;" %> <%= form.hidden_field :amount, value: @purchase.amount %> -
+
@@ -18,51 +18,31 @@
- <%= form.fields_for :destinations do |destination_form| %> -
-
-
- <%= destination_form.text_field :receiver, placeholder: 'Nombre y apellido', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1 pe-lg-2' %> - <% @purchase.errors.full_messages_for(:'destinations.receiver').each do |message| %> -

<%= message %>

- <% end %> -
-
- <%= destination_form.label :day, 'Fecha de entrega', class:'text-role-grey fs-sm-5 fs-lg-3 d-lg-none' %> - <%= destination_form.date_field :day, min: Date.today, class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1' %> - <% @purchase.errors.full_messages_for(:'destinations.day').each do |message| %> -

<%= message %>

- <% end %> -
-
- <%= destination_form.text_field :address, placeholder: 'Dirección de entrega', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1' %> - <% @purchase.errors.full_messages_for(:'destinations.address').each do |message| %> -

<%= message %>

- <% end %> -
-
-
-
- <%= destination_form.text_field :number, placeholder: 'Número de contacto', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1' %> - <% @purchase.errors.full_messages_for(:'destinations.number').each do |message| %> -

<%= message %>

- <% end %> -
-
- <%= destination_form.text_field :schedules, placeholder: 'Horarios de entrega', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1 pe-lg-2' %> - <% @purchase.errors.full_messages_for(:'destinations.schedules').each do |message| %> -

<%= message %>

- <% end %> -
-
- <%= destination_form.text_field :cost, placeholder: 'Costo de envío', class: 'border-0 border-bottom-solid outline-none text-role-grey bg-transparent grey-placeholder w-100 fs-sm-5 fs-lg-1' %> - <% @purchase.errors.full_messages_for(:'destinations.cost').each do |message| %> -

<%= message %>

- <% end %> -
+
+ <%= form.fields_for :template, Destination.new() do |destination_form| %> + + <% end%> +
+ <%= form.fields_for :destinations do |destination_form| %> + <%= render 'data_destination', purchase: @purchase, destination_form: destination_form %> + <% end %> +
+
+
+ +
+

La entrega debe tener al menos un destinatario

- <% end %> +
<%= form.check_box :suprise_delivery, class: 'form-check-input shadow-none outline-none me-3', role: 'switch'%>
@@ -89,7 +69,7 @@

Si el envío rebota

-

Cada re-entrega se considera un envío extra y el horario será coordinado por nuestro equipo con el destinatario.

+

Cada re-entrega se considera un envío extra y el horario será coordinado por nuestro equipo con el destinatario.

<%= form.check_box :resend_delivery, class: 'me-2' %> <%= form.label :resend_delivery, 'Intentar reenvío a la misma dirección.', class:'fs-1 fs-sm-3 fw-light fs-lg-1' %> From 2bbc8b23b82a6c71a85ee885b69cc29a7a507dc3 Mon Sep 17 00:00:00 2001 From: bruno Date: Mon, 22 Jul 2024 13:26:11 -0300 Subject: [PATCH 2/2] correction --- app/javascript/controllers/destinations_controller.js | 10 +++++----- app/views/purchases/new.html.erb | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/javascript/controllers/destinations_controller.js b/app/javascript/controllers/destinations_controller.js index 521ed46..a7566cf 100644 --- a/app/javascript/controllers/destinations_controller.js +++ b/app/javascript/controllers/destinations_controller.js @@ -10,11 +10,11 @@ export default class extends Controller { const newDestination = this.templateTarget.content.cloneNode(true) const inputs = newDestination.querySelectorAll('input') const id = this.formTarget.childElementCount - for (let i = 0; i < inputs.length; i++) { - inputs[i].setAttribute('name', inputs[i].getAttribute('name').replace('[template]', `[destinations_attributes][${id}]`)) - inputs[i].setAttribute('id', inputs[i].getAttribute('id').replace('[template]', `destinations_attributes_${id}`)) - inputs[i].value = '' - } + inputs.forEach(input => { + input.setAttribute('name', input.getAttribute('name').replace('[template]', `[destinations_attributes][${id}]`)) + input.setAttribute('id', input.getAttribute('id').replace('[template]', `destinations_attributes_${id}`)) + input.value = '' + }) newDestination.querySelector('div').classList.add(this.paddingWebClass, this.paddingMobileClass) this.formTarget.appendChild(newDestination) this.errorRemoveTarget.classList.add(this.hideClass) diff --git a/app/views/purchases/new.html.erb b/app/views/purchases/new.html.erb index c40ed3d..f34402a 100644 --- a/app/views/purchases/new.html.erb +++ b/app/views/purchases/new.html.erb @@ -40,7 +40,7 @@ <%= image_tag('remove.svg', class:'img-destinations')%>
-

La entrega debe tener al menos un destinatario

+

La entrega debe tener al menos un destinatario