131 lines
5.2 KiB
Plaintext
131 lines
5.2 KiB
Plaintext
@model IEnumerable<WebVentaCoche.ViewModels.AddressViewModel>
|
|
|
|
@{
|
|
Layout = "_AccountLayout";
|
|
var addresses = Model.ToList();
|
|
}
|
|
|
|
<h2 class="mb-4">Mis Direcciones</h2>
|
|
|
|
@if (!addresses.Any())
|
|
{
|
|
<p>No tienes direcciones registradas.</p>
|
|
}
|
|
|
|
<div class="mb-4">
|
|
<button class="btn btn-success btn-sm"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#addressModal"
|
|
data-id="">
|
|
<i class="fa fa-plus me-1"></i>
|
|
@(!addresses.Any() ? "Añadir dirección" : "Agregar dirección")
|
|
</button>
|
|
</div>
|
|
|
|
@if (addresses.Any())
|
|
{
|
|
<div class="row">
|
|
@foreach (var addr in addresses)
|
|
{
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card p-3" style="background-color: rgba(255,255,255,0.8); border-radius:10px;">
|
|
<p class="mb-3">
|
|
<strong>@addr.Street</strong><br />
|
|
@addr.City, @addr.State @addr.ZipCode<br />
|
|
@addr.Country
|
|
</p>
|
|
<button class="btn btn-warning btn-sm"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#addressModal"
|
|
data-id="@addr.Id"
|
|
data-street="@addr.Street"
|
|
data-city="@addr.City"
|
|
data-state="@addr.State"
|
|
data-zipcode="@addr.ZipCode"
|
|
data-country="@addr.Country">
|
|
<i class="fa fa-pencil-alt me-1"></i> Editar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<div class="modal fade" id="addressModal" tabindex="-1" aria-labelledby="addressModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form id="addressForm" method="post">
|
|
@Html.AntiForgeryToken()
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addressModalLabel">Dirección</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="AddressId" name="Id" />
|
|
|
|
<div class="mb-3">
|
|
<label for="Street" class="form-label">Calle</label>
|
|
<input type="text" class="form-control" id="Street" name="Street" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="City" class="form-label">Ciudad</label>
|
|
<input type="text" class="form-control" id="City" name="City" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="State" class="form-label">Provincia / Estado</label>
|
|
<input type="text" class="form-control" id="State" name="State" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="ZipCode" class="form-label">Código Postal</label>
|
|
<input type="text" class="form-control" id="ZipCode" name="ZipCode" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="Country" class="form-label">País</label>
|
|
<input type="text" class="form-control" id="Country" name="Country" required />
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
|
|
<button type="submit" class="btn btn-primary btn-sm">Guardar</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
//Al cargar la página, mueve la <div id="addressModal"> al final de <body>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const modalEl = document.getElementById('addressModal');
|
|
if (modalEl.parentNode !== document.body) {
|
|
document.body.appendChild(modalEl);
|
|
}
|
|
});
|
|
|
|
document.getElementById('addressModal')
|
|
.addEventListener('show.bs.modal', event => {
|
|
const button = event.relatedTarget;
|
|
const form = document.getElementById('addressForm');
|
|
const title = document.getElementById('addressModalLabel');
|
|
const id = button.getAttribute('data-id');
|
|
|
|
if (id) {
|
|
title.textContent = 'Modificar Dirección';
|
|
form.action = '/Address/Edit/' + id;
|
|
document.getElementById('AddressId').value = id;
|
|
document.getElementById('Street').value = button.dataset.street;
|
|
document.getElementById('City').value = button.dataset.city;
|
|
document.getElementById('State').value = button.dataset.state;
|
|
document.getElementById('ZipCode').value = button.dataset.zipcode;
|
|
document.getElementById('Country').value = button.dataset.country;
|
|
} else {
|
|
title.textContent = 'Añadir Dirección';
|
|
form.action = '/Address/Create';
|
|
document.getElementById('AddressId').value = '';
|
|
form.reset();
|
|
}
|
|
});
|
|
</script>
|
|
}
|