falta boton add direcciones

This commit is contained in:
2024-10-09 20:04:58 +02:00
parent a069b4109c
commit e64022a7b7
7 changed files with 176 additions and 33 deletions

View File

@ -0,0 +1,24 @@
<div class="modal fade" id="modalInput" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col mb-3">
<label for="inputData" class="form-label"></label>
<input type="number" id="inputData" class="inputData form-control" placeholder="">
</div>
</div>
</div>
<div class="modal-footer">
<button id="modalInputBtnClose" type="button" class="btn btn-label-secondary waves-effect" data-bs-dismiss="modal">
Cerrar
</button>
<button id="modalInputBtnSave" type="button" class="btn btn-primary waves-effect waves-light">Guardar cambios</button>
</div>
</div>
</div>
</div>

View File

@ -1,24 +0,0 @@
<div class="row mb-3">
<div class="col-sm-5">
<label class="form-check-label custom-option-content">
<span class="custom-option-header mb-2">
<h6 class="fw-semibold mb-0"></h6>
<span class="badge bg-label-primary"></span>
</span>
<span class="custom-option-body">
<small class="address-direccion"></small><br>
<small class="address-cp"></small><br>
<small class="address-municipio-pais"></small><br>
<small class="address-telefono"></small><br>
<small class="address-email"></small><br>
<small class="address-palets"><i>Envío en palets</i></small><br>
<hr class="my-2">
<span class="d-flex">
<a class="direccion-eliminar" href="javascript:void(0)">Eliminar</a>
</span>
</span>
</label>
</div>
</div>

View File

@ -1,4 +1,4 @@
<div class="col-12 pb-2 d-flex flex-column align-items-center">
<div class="col-12 d-flex flex-column align-items-center">
<div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
<h5 class="mb-1 fw-bold titulo"></h5>
@ -47,7 +47,7 @@
</div>
</div>
<div id="divDirecciones" class="col-12 pb-2">
<div id="divDirecciones" class="col-sm-12 d-flex flex-column align-items-center">
</div>
</div>

View File

@ -1,12 +1,15 @@
<?= $this->include('themes/_commonPartialsBs/datatables') ?>
<?= $this->include("themes/_commonPartialsBs/select2bs5") ?>
<?= $this->include("themes/_commonPartialsBs/sweetalert") ?>
<?= $this->extend('themes/vuexy/main/defaultlayout') ?>
<?= $this->section("content") ?>
<?= view("themes/vuexy/form/clientes/cliente/_clienteDireccionesForm") ?>
<?= view("themes/_commonPartialsBs/_modalInput") ?>
<div class="container-xxl flex-grow-1 container-p-y">
<div class="col-12">
<h3 class="card-title"><?= $boxTitle ?? $pageTitle ?></h3>

View File

@ -0,0 +1,76 @@
class tarjetaDireccion {
constructor(container, id, direccion) {
this.container = container;
this.card = this.#generateHTML(id, direccion);
this.deleteBtn = this.card.find('.direccion-eliminar');
this.editBtn = this.card.find('.direccion-editar');
}
#generateHTML(id, direccion) {
// Crear los elementos usando jQuery
var $parent = $('<div>', {
class: 'direccion-cliente col-sm-5 form-check custom-option custom-option-basic checked justify-content-center mb-4',
id: id
});
var $label = $('<label>', { class: 'form-check-label custom-option-content' });
var $header = $('<span>', { class: 'custom-option-header mb-2' });
var $name = $('<h6>', { class: 'fw-semibold mb-0', text: direccion.nombre });
var $unidades = $('<span>', { class: 'badge bg-label-primary unidades', text: direccion.unidades + ' unidades' });
var $body = $('<span>', { class: 'custom-option-body' });
var $direccion = $('<small>', { class: 'address-direccion', text: direccion.direccion });
var $cp = $('<small>', { class: 'address-cp', text: direccion.cp });
var $municipioPais = $('<small>', { class: 'address-municipio-pais', text: direccion.municipioPais });
var $telefono = $('<small>', { class: 'address-telefono', text: direccion.telefono });
var $email = $('<small>', { class: 'address-email', text: direccion.email });
var $palets = $('<small>', {class: 'address-palets', html: '<i>Envío en palets</i>'});
if (!direccion.palets) $palets.addClass('d-none');
var $hr = $('<hr>', { class: 'my-2' });
var $eliminar = $('<a>', { class: 'ms-auto direccion-eliminar', href: 'javascript:void(0)', text: 'Eliminar' });
var $editar = $('<a>', { class: 'me-auto direccion-editar', href: 'javascript:void(0)', text: 'Editar' });
var $eliminarContainer = $('<span>', { class: 'd-flex w-100 position-relative' }).append($editar, $eliminar);
// Construir la estructura del HTML
$header.append($name, $unidades);
$body.append($direccion, '<br>', $cp, '<br>', $municipioPais, '<br>', $telefono, '<br>', $email, '<br>', $palets, '<br>', $hr, $eliminarContainer);
$label.append($header, $body);
$parent.append($label);
return $parent;
}
init() {
this.container.append(this.card);
}
setDireccion(direccion) {
this.card.find('.address-direccion').text(direccion.direccion);
this.card.find('.address-cp').text(direccion.cp);
this.card.find('.address-municipio-pais').text(direccion.municipioPais);
this.card.find('.address-telefono').text(direccion.telefono);
this.card.find('.address-email').text(direccion.email);
this.card.find('.address-palets').toggleClass('d-none', !direccion.palets);
}
getUnidades() {
return this.card.find('.unidades').text().split(' ')[0];
}
getCp() {
return this.card.find('.address-cp').text();
}
}
export default tarjetaDireccion;

View File

@ -1,4 +1,5 @@
import ClassSelect from '../../components/select2.js';
import tarjetaDireccion from '../../components/tarjetaDireccionPresupuesto.js';
class Direcciones {
@ -8,7 +9,11 @@ class Direcciones {
this.wizardStep = wizardForm.querySelector('#direcciones-libro');
this.validatorStepper = validatorStepper;
this.direcciones = new ClassSelect($("#direcciones"), '/clientedirecciones/menuitems');
this.direccionesCliente = new ClassSelect($("#direcciones"), '/clientedirecciones/menuitems');
this.divDirecciones = $(this.domItem.find('#divDirecciones'));
this.direcciones = [];
this.initValidation();
@ -19,8 +24,16 @@ class Direcciones {
$("#clienteId").on('change', this.#handleChangeCliente.bind(this));
this.domItem.load('../../components/direcciones.html');
this.direcciones.init();
let direccion = {
nombre: 'Casa',
unidades: '100',
direccion: 'Calle de la Prueba, 12',
cp: '28000',
municipioPais: 'Madrid, España',
telefono: '912345678',
email: 'aaa@aa.com',
palets: false,
}
}
@ -57,11 +70,61 @@ class Direcciones {
});
}
#insertDireccion(direccion_id) {
let tarjeta = new tarjetaDireccion();
tarjeta.setDireccion(direccion);
tarjeta.card.find('.direccion-editar').on('click', this.#editUnits.bind(this));
tarjeta.card.find('.direccion-eliminar').on('click', this.#deleteDireccion.bind(this));
this.divDirecciones.append(tarjeta.card);
this.direcciones.push(direccion);
}
#handleChangeCliente() {
this.direcciones.setParams({ 'cliente_id': $("#clienteId").select2('data')[0].id })
this.direcciones.clear();
// falta quitar las direcciones que haya!!!!
this.direccionesCliente.setParams({ 'cliente_id': $("#clienteId").select2('data')[0].id })
this.direccionesCliente.clear();
this.domItem.find('.direccion-cliente').remove();
this.direcciones = [];
}
#editUnits(event) {
let tarjeta = $(event.currentTarget.closest('.direccion-cliente'));
let unidades = tarjeta.find('.unidades').text().split(' ')[0];
let modal = $('#modalInput');
modal.find('.modal-title').text('Editar unidades');
modal.find('.inputData').val(unidades);
modal.modal('show');
modal.find('.btn-primary').off('click');
modal.find('.btn-primary').on('click', function () {
try {
let nuevo_valor = parseInt(modal.find('.modal-body input').val());
if (nuevo_valor > 0) {
tarjeta.find('.unidades').text(nuevo_valor + ' unidades');
}
} catch (error) {
console.error('Units must be a number');
}
modal.modal('hide');
});
}
#deleteDireccion(event) {
let tarjeta = event.currentTarget.closest('.direccion-cliente');
let id = tarjeta.id;
tarjeta.remove();
this.direcciones = this.direcciones.filter(direccion => direccion.id != id);
}
}

View File

@ -76,7 +76,8 @@ class PresupuestoCliente {
setTimeout(function() {
$("#tapaDura").trigger("click");
}, 0);
}, 0);
}