terminando form de clientes direcciones

This commit is contained in:
2023-12-17 08:58:26 +01:00
parent d4246ca99b
commit d9083aac2d
15 changed files with 350 additions and 79 deletions

View File

@ -1,7 +1,171 @@
<div id="direccionesForm">
<fieldset class="att">
<legend>Att</legend>
<editor-field name="att"></editor-field>
</fieldset>
<div id="createNewAddress" class="modal fade addModal">
<div class="modal-dialog modal-lg modal-simple">
<div class="modal-content">
<div class="modal-header">
<h4 id="labelTitleConfirmDialog" class="modal-title"><?= lang('ClienteDirecciones.nuevaTitle') ?></h4>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="add_alias" class="form-label">
<?= lang('ClienteDirecciones.alias') ?>*
</label>
<input type="text" id="add_alias" tabindex="1" maxLength="100" class="form-control">
</div><!--//.mb-3 -->
<div class="mb-3">
<label for="add_att" class="form-label">
<?= lang('ClienteDirecciones.att') ?>*
</label>
<input type="text" id="add_att" tabindex="1" maxLength="100" class="form-control">
</div><!--//.mb-3 -->
<div class="mb-3">
<label for="add_email" class="form-label">
<?= lang('ClienteDirecciones.email') ?>*
</label>
<input type="text" id="add_email" tabindex="2" maxLength="100" class="form-control">
</div><!--//.mb-3 -->
<div class="mb-3">
<label for="add_direccion" class="form-label">
<?= lang('ClienteDirecciones.direccion') ?>*
</label>
<input type="text" id="add_direccion" tabindex="3" maxLength="255" class="form-control">
</div><!--//.mb-3 -->
</div>
<div class='row'>
<div id='divPais' class="col-md-12 col-lg-12 pl-4">
<div class="mb-3">
<label for="add_paisId" class="form-label">
<?=lang('ClienteDirecciones.pais') ?>*
</label>
<select id="add_paisId" tabindex="4" class="form-control select2bs" style="width: 100%;" >
<option value="" disabled selected><?=lang('ClienteDirecciones.selectPais') ?></option>
<?php foreach ($paisList as $item) : ?>
<option value="<?=$item->id ?>">
<?=$item->nombre ?>
</option>
<?php endforeach; ?>
</select>
</div><!--//.mb-3 -->
</div>
<div class="col-md-12 col-lg-6 pl-4 spain-data" style="display: none;">
<div class="mb-3">
<label for="add_ccaa" class="form-label">
<?=lang('ClienteDirecciones.ccaa') ?>*
</label>
<select id="add_ccaa" tabindex="5" class="form-control select2bs" style="width: 100%;" >
</select>
</div><!--//.mb-3 -->
</div>
</div> <!-- //.row -->
<div class='row'>
<div id='divMunicipio' class="col-md-12 col-lg-12 pl-4">
<div class="mb-3">
<label for="add_municipio" class="form-label">
<?=lang('ClienteDirecciones.municipio') ?>*
</label>
<input type="text" id="add_municipio" tabindex="6" maxLength="100" class="form-control">
</div><!--//.mb-3 -->
</div>
<div class="col-md-12 col-lg-6 pl-4 spain-data" style="display: none;">
<div class="mb-3">
<label for="add_provincia" class="form-label">
<?=lang('ClienteDirecciones.provincia') ?>*
</label>
<input type="text" id="add_provincia" tabindex="7" maxLength="100" class="form-control">
</div><!--//.mb-3 -->
</div>
</div> <!-- //.row -->
<div class='row'>
<div class="col-md-12 col-lg-6 pl-4">
<div class="mb-3">
<label for="add_cp" class="form-label">
<?=lang('ClienteDirecciones.cp') ?>*
</label>
<input type="text" id="add_cp" tabindex="8" maxLength="100" class="form-control">
</div><!--//.mb-3 -->
</div>
<div class="col-md-12 col-lg-6 pl-4">
<div class="mb-3">
<label for="add_telefono" class="form-label">
<?=lang('ClienteDirecciones.telefono') ?>*
</label>
<input type="text" id="add_telefono" tabindex="9" maxLength="100" class="form-control"></input>
</div><!--//.mb-3 -->
</div>
</div> <!-- //.row -->
</div>
<div class="modal-footer">
<button id="saveAdd"
type="button"
class="btn btn-primary"
>Guardar</button>
<button id="cancelAdd"
type="button"
class="btn btn-default"
>Cancelar</button>
</div>
</div>
</div>
</div>
<?= $this->section("additionalInlineJs") ?>
$('#cancelAdd').on('click', function(){
$('#createNewAddress').modal("hide");
})
$('#saveAdd').on('click', function(){
editorAddress
.create( false )
.set( 'alias', $('#add_alias').val() )
.set( 'att', $('#add_att').val() )
.submit();
})
$('#add_paisId').on('change', function(){
var nombre_pais = $("#add_paisId option:selected" ).text().trim();
if(nombre_pais.localeCompare('España')==0){
$('#divPais').removeClass('col-lg-12').addClass('col-lg-6')
$('#divMunicipio').removeClass('col-lg-12').addClass('col-lg-6')
$('.spain-data').css('display', 'inline')
}
else{
$('.spain-data').css('display', 'none')
$('#divPais').removeClass('col-lg-6').addClass('col-lg-12')
$('#divMunicipio').removeClass('col-lg-6').addClass('col-lg-12')
}
})
// clear modal items when close
$('#createNewAddress').on('hidden.bs.modal', function () {
$('#add_alias').val("")
$('#add_att').val("")
$('#add_email').val("")
$('#add_direccion').val("")
$("#add_paisId").val("").change()
$("#add_ccaa").val("").change()
$('#add_municipio').val("")
$('#add_provincia').val("")
$('#add_cp').val("")
$('#add_telefono').val("")
})
<?=$this->endSection() ?>

View File

@ -145,20 +145,14 @@
<label for="paisId" class="form-label">
<?= lang('Clientes.paisId') ?>
</label>
<select
id="paisId"
name="pais_id"
class="form-control select2"
style="width: 100%;"
>
<?php if (isset($paisList) && is_array($paisList) && !empty($paisList)) :
foreach ($paisList as $k => $v) : ?>
<option value="<?= $k ?>"<?= $k == $clienteEntity->pais_id ? ' selected' : '' ?>>
<?= $v ?>
</option>
<?php endforeach;
endif; ?>
<select id="paisId" name="pais_id" class="form-control select2bs" style="width: 100%;" >
<?php foreach ($paisList as $item) : ?>
<option value="<?=$item->id ?>"<?=$item->id==$clienteEntity->pais_id ? ' selected':'' ?>>
<?=$item->nombre ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-4">
<label for="comunidadAutonomaId" class="form-label">
@ -584,6 +578,7 @@
<table id="tableOfDireccionesEnvio" class="table dt-responsive dataTable" style="width: 100%;">
<thead>
<tr>
<th><?= lang('ClienteDirecciones.alias') ?></th>
<th><?= lang('ClienteDirecciones.att') ?></th>
<th><?= lang('ClienteDirecciones.email') ?></th>
<th><?= lang('ClienteDirecciones.direccion') ?></th>
@ -829,7 +824,7 @@
/****************************************
Direcciones cliente
*****************************************/
const editor2 = new DataTable.Editor({
const editorAddress = new DataTable.Editor({
ajax: {
url: "<?= route_to('editorOfClienteDirecciones') ?>",
headers: {
@ -839,6 +834,8 @@ const editor2 = new DataTable.Editor({
table : "#tableOfDireccionesEnvio",
idSrc: 'id',
fields: [ {
name: "alias"
}, {
name: "att"
}, {
name: "email"
@ -864,6 +861,16 @@ const editor2 = new DataTable.Editor({
template: '#direccionesForm'
});
editorAddress.on( 'postSubmit', function ( e, json, data, action ) {
if (action === 'create') {
if(json.fieldErrors.length > 0){
json.fieldErrors.forEach((error) => {
$('#add_' + error.name).after("<p class='error_in_form_text'>" + error.status + '</p>')
})
}
}
})
const lastColNr2 = $('#tableOfDireccionesEnvio').find("tr:first th").length - 1;
var tableDirecciones = $('#tableOfDireccionesEnvio').DataTable( {
@ -889,6 +896,7 @@ var tableDirecciones = $('#tableOfDireccionesEnvio').DataTable( {
async: true,
}),
columns: [
{ 'data': 'alias' },
{ 'data': 'att' },
{ 'data': 'email' },
{ 'data': 'direccion' },
@ -917,20 +925,34 @@ var tableDirecciones = $('#tableOfDireccionesEnvio').DataTable( {
},
buttons: [ {
className: 'btn btn-primary float-end me-sm-3 me-1',
extend: "create",
editor: editor2,
formOptions: {
submitTrigger: -1,
submitHtml: '<i class="ti ti-device-floppy"/>'
}
text: "<?= lang('Basic.global.addNew'); ?>",
action: function ( e, dt, node, config ) {
var $newAddDialog = $("#createNewAddress");
$newAddDialog.modal('show');
$("#btnYesConfirmDialog").off('click').click(function () {
$newAddDialog.modal("hide");
});
$("#btnNoConfirmDialog").off('click').click(function () {
$newAddDialog.modal("hide");
});
}
} ]
} );
<?=$this->endSection() ?>
<?=$this->section('css') ?>
<link rel="stylesheet" href="<?= site_url('themes/vuexy/css/datatables-editor/editor.dataTables.min.css') ?>">
<link rel="stylesheet" href="<?= site_url('themes/vuexy/css/datatables-editor/editor.bootstrap5.min.css') ?>">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<?=$this->endSection() ?>
<?= $this->section('additionalExternalJs') ?>

View File

@ -22,6 +22,7 @@
type="submit"
class="btn btn-primary float-start me-sm-3 me-1"
name="save"
id="saveForm"
value="<?= lang("Basic.global.Save") ?>"
>
<?= anchor(route_to("clienteList"), lang("Basic.global.Cancel"), ["class" => "btn btn-secondary float-start"]) ?>
@ -34,6 +35,19 @@
<?= $this->section("additionalInlineJs") ?>
$(document).keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{ e.preventDefault()
if($('#createNewAddress').hasClass('show')){
$("#saveAdd").click();
}else{
$('#saveForm').click();
}
}
});
$('#soporteId').select2({
allowClear: false,
@ -211,3 +225,11 @@
<?= $this->endSection() ?>
<?=$this->section('css') ?>
<link rel="stylesheet" href="<?= site_url('themes/vuexy/css/datatables-editor/editor.dataTables.min.css') ?>">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="<?= site_url('themes/vuexy/css/sk-datatables.css') ?>">
<?=$this->endSection() ?>