add new
This commit is contained in:
208
RS_system/Views/Articulos/Create.cshtml
Normal file
208
RS_system/Views/Articulos/Create.cshtml
Normal file
@@ -0,0 +1,208 @@
|
||||
@model Rs_system.Models.ViewModels.ArticuloViewModel
|
||||
@{
|
||||
ViewData["Title"] = "Nuevo Artículo";
|
||||
}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="mb-1">Nuevo Artículo</h4>
|
||||
<p class="text-muted mb-0">Registrar un nuevo activo en el inventario</p>
|
||||
</div>
|
||||
<a asp-action="Index" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i> Volver a la lista
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form asp-action="Create" method="post" enctype="multipart/form-data">
|
||||
<div class="row">
|
||||
<!-- Left Column: Basic Info -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card-custom mb-4">
|
||||
<div class="card-header bg-transparent py-3">
|
||||
<h5 class="card-title mb-0 ps-2 border-start border-4 border-primary">Información General</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div asp-validation-summary="ModelOnly" class="alert alert-danger"></div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
<label asp-for="Codigo" class="form-label">Código <span class="text-danger">*</span></label>
|
||||
<input asp-for="Codigo" class="form-control" placeholder="Ej: SILLA-001" autofocus />
|
||||
<span asp-validation-for="Codigo" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<label asp-for="Nombre" class="form-label">Nombre del Artículo <span class="text-danger">*</span></label>
|
||||
<input asp-for="Nombre" class="form-control" placeholder="Ej: Guitarra Acustica Yamaha" />
|
||||
<span asp-validation-for="Nombre" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="Descripcion" class="form-label">Descripción</label>
|
||||
<textarea asp-for="Descripcion" class="form-control" rows="3" placeholder="Detalles adicionales, características, color..."></textarea>
|
||||
<span asp-validation-for="Descripcion" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label asp-for="Marca" class="form-label">Marca</label>
|
||||
<input asp-for="Marca" class="form-control" placeholder="Ej: Yamaha, Sony" />
|
||||
<span asp-validation-for="Marca" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="Modelo" class="form-label">Modelo</label>
|
||||
<input asp-for="Modelo" class="form-control" placeholder="Ej: C-40" />
|
||||
<span asp-validation-for="Modelo" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-custom">
|
||||
<div class="card-header bg-transparent py-3">
|
||||
<h5 class="card-title mb-0 ps-2 border-start border-4 border-info">Detalles del Activo</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label asp-for="NumeroSerie" class="form-label">Número de Serie</label>
|
||||
<input asp-for="NumeroSerie" class="form-control" placeholder="S/N..." />
|
||||
<span asp-validation-for="NumeroSerie" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="Precio" class="form-label">Valor Estimado (Moneda)</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input asp-for="Precio" class="form-control" type="number" step="0.01" />
|
||||
</div>
|
||||
<span asp-validation-for="Precio" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="FechaAdquisicion" class="form-label">Fecha de Adquisición</label>
|
||||
<input asp-for="FechaAdquisicion" type="date" class="form-control" />
|
||||
<span asp-validation-for="FechaAdquisicion" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Classification & Image -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card-custom mb-4">
|
||||
<div class="card-header bg-transparent py-3">
|
||||
<h5 class="card-title mb-0 ps-2 border-start border-4 border-warning">Clasificación</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label asp-for="TipoControl" class="form-label fw-bold">Tipo de Inventario <span class="text-danger">*</span></label>
|
||||
<select asp-for="TipoControl" class="form-select" id="tipoControlSelect">
|
||||
<option value="UNITARIO">Unitario (Laptops, Proyectores)</option>
|
||||
<option value="LOTE">Por Lote (Sillas, Cables)</option>
|
||||
</select>
|
||||
<div class="form-text">Unitario: Control 1 a 1 por Serie. Lote: Control por Cantidad.</div>
|
||||
<span asp-validation-for="TipoControl" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="cantidadContainer" style="display:none;">
|
||||
<label asp-for="CantidadInicial" class="form-label fw-bold text-primary">Cantidad Inicial <span class="text-danger">*</span></label>
|
||||
<input asp-for="CantidadInicial" class="form-control" type="number" min="1" value="1" />
|
||||
<span asp-validation-for="CantidadInicial" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="CategoriaId" class="form-label">Categoría <span class="text-danger">*</span></label>
|
||||
<select asp-for="CategoriaId" class="form-select" asp-items="ViewBag.Categorias">
|
||||
<option value="">-- Seleccionar --</option>
|
||||
</select>
|
||||
<span asp-validation-for="CategoriaId" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="UbicacionId" class="form-label">Ubicación Inicial <span class="text-danger">*</span></label>
|
||||
<select asp-for="UbicacionId" class="form-select" asp-items="ViewBag.Ubicaciones">
|
||||
<option value="">-- Seleccionar --</option>
|
||||
</select>
|
||||
<span asp-validation-for="UbicacionId" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="EstadoId" class="form-label">Estado Físico <span class="text-danger">*</span></label>
|
||||
<select asp-for="EstadoId" class="form-select" asp-items="ViewBag.Estados">
|
||||
<option value="">-- Seleccionar --</option>
|
||||
</select>
|
||||
<span asp-validation-for="EstadoId" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input asp-for="Activo" class="form-check-input" type="checkbox" role="switch" checked />
|
||||
<label asp-for="Activo" class="form-check-label">Artículo Activo</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-custom">
|
||||
<div class="card-header bg-transparent py-3">
|
||||
<h5 class="card-title mb-0 ps-2 border-start border-4 border-secondary">Imagen</h5>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<div class="image-preview-container bg-light rounded d-flex align-items-center justify-content-center mb-2" style="height: 200px; border: 2px dashed #ccc;">
|
||||
<img id="imagePreview" src="#" alt="Vista Previa" style="max-height: 100%; max-width: 100%; display: none;" />
|
||||
<span id="placeholderText" class="text-muted">Sin Imagen</span>
|
||||
</div>
|
||||
<input asp-for="ImagenFile" class="form-control" type="file" accept="image/*" onchange="previewImage(this)" />
|
||||
<span asp-validation-for="ImagenFile" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 mt-4">
|
||||
<button type="submit" class="btn btn-primary-custom btn-lg">
|
||||
<i class="bi bi-save me-2"></i> Guardar Artículo
|
||||
</button>
|
||||
<a asp-action="Index" class="btn btn-light border">Cancelar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@section Scripts {
|
||||
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
|
||||
<script>
|
||||
function previewImage(input) {
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
$('#imagePreview').attr('src', e.target.result).show();
|
||||
$('#placeholderText').hide();
|
||||
}
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
} else {
|
||||
$('#imagePreview').hide();
|
||||
$('#placeholderText').show();
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
function toggleFields() {
|
||||
var tipo = $('#tipoControlSelect').val();
|
||||
if (tipo === 'LOTE') {
|
||||
$('#cantidadContainer').show();
|
||||
$('#NumeroSerie').parent().hide(); // Hide Serial for Lote
|
||||
$('#NumeroSerie').val('');
|
||||
} else {
|
||||
$('#cantidadContainer').hide();
|
||||
$('#NumeroSerie').parent().show(); // Show Serial for Unitario
|
||||
$('#CantidadInicial').val(1);
|
||||
}
|
||||
}
|
||||
|
||||
$('#tipoControlSelect').change(toggleFields);
|
||||
toggleFields(); // Init
|
||||
});
|
||||
</script>
|
||||
}
|
||||
128
RS_system/Views/Articulos/Details.cshtml
Normal file
128
RS_system/Views/Articulos/Details.cshtml
Normal file
@@ -0,0 +1,128 @@
|
||||
@model Rs_system.Models.ViewModels.ArticuloViewModel
|
||||
@{
|
||||
ViewData["Title"] = "Ficha Técnica";
|
||||
}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="mb-1">Ficha Técnica</h4>
|
||||
<p class="text-muted mb-0">Detalles del activo: @Model.Codigo</p>
|
||||
</div>
|
||||
<div>
|
||||
<a asp-action="Edit" asp-route-id="@Model.Id" class="btn btn-warning text-white me-2">
|
||||
<i class="bi bi-pencil me-1"></i> Editar
|
||||
</a>
|
||||
<a asp-action="Index" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i> Volver
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Left Column: Image and Status -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card-custom text-center mb-3">
|
||||
<div class="card-body">
|
||||
@if (!string.IsNullOrEmpty(Model.ImagenUrl))
|
||||
{
|
||||
<img src="@Model.ImagenUrl" class="img-fluid rounded mb-3" style="max-height: 300px;" alt="Imagen del Artículo">
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="bg-light rounded d-flex align-items-center justify-content-center mx-auto mb-3" style="height: 250px; width: 100%;">
|
||||
<div class="text-center text-muted">
|
||||
<i class="bi bi-image fs-1 d-block mb-2"></i>
|
||||
<span>Sin Imagen</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<h5 class="card-title fw-bold text-primary">@Model.Nombre</h5>
|
||||
<p class="card-text text-muted mb-3">@Model.Codigo</p>
|
||||
|
||||
<div class="d-flex justify-content-center gap-2">
|
||||
<span class="badge bg-@(Model.EstadoColor ?? "secondary") fs-6 px-3 py-2">
|
||||
Estado: @Model.EstadoNombre
|
||||
</span>
|
||||
@if (Model.Activo)
|
||||
{
|
||||
<span class="badge bg-success fs-6 px-3 py-2">Activo</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="badge bg-danger fs-6 px-3 py-2">Inactivo</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Details -->
|
||||
<div class="col-md-8">
|
||||
<div class="card-custom">
|
||||
<div class="card-header bg-transparent py-3 border-bottom">
|
||||
<h5 class="card-title mb-0">Información Detallada</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-4">
|
||||
<div class="col-sm-4 text-muted">Descripción</div>
|
||||
<div class="col-sm-8 fw-semibold">
|
||||
@(!string.IsNullOrEmpty(Model.Descripcion) ? Model.Descripcion : "-")
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-sm-4 text-muted">Ubicación Actual</div>
|
||||
<div class="col-sm-8">
|
||||
<span class="d-flex align-items-center">
|
||||
<i class="bi bi-geo-alt-fill text-danger me-2"></i>
|
||||
<span class="fw-bold">@Model.UbicacionNombre</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-sm-4 text-muted">Categoría</div>
|
||||
<div class="col-sm-8 fw-semibold">@Model.CategoriaNombre</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4 text-muted" />
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-6">
|
||||
<small class="text-muted d-block mb-1">Marca</small>
|
||||
<span class="fs-5">@(!string.IsNullOrEmpty(Model.Marca) ? Model.Marca : "-")</span>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<small class="text-muted d-block mb-1">Modelo</small>
|
||||
<span class="fs-5">@(!string.IsNullOrEmpty(Model.Modelo) ? Model.Modelo : "-")</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-6">
|
||||
<small class="text-muted d-block mb-1">Número de Serie</small>
|
||||
<span class="font-monospace bg-light px-2 py-1 rounded">
|
||||
@(!string.IsNullOrEmpty(Model.NumeroSerie) ? Model.NumeroSerie : "N/A")
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<small class="text-muted d-block mb-1">Precio Estimado</small>
|
||||
<span class="text-success fw-bold">
|
||||
@Model.Precio.ToString("C")
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<small class="text-muted d-block mb-1">Fecha Adquisición</small>
|
||||
<span>
|
||||
@(Model.FechaAdquisicion.HasValue ? Model.FechaAdquisicion.Value.ToString("dd/MM/yyyy") : "-")
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
215
RS_system/Views/Articulos/Edit.cshtml
Normal file
215
RS_system/Views/Articulos/Edit.cshtml
Normal file
@@ -0,0 +1,215 @@
|
||||
@model Rs_system.Models.ViewModels.ArticuloViewModel
|
||||
@{
|
||||
ViewData["Title"] = "Editar Artículo";
|
||||
}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="mb-1">Editar Artículo</h4>
|
||||
<p class="text-muted mb-0">Modificar información del activo</p>
|
||||
</div>
|
||||
<a asp-action="Index" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i> Volver
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form asp-action="Edit" method="post" enctype="multipart/form-data">
|
||||
<input type="hidden" asp-for="Id" />
|
||||
<div class="row">
|
||||
<!-- Left Column: Basic Info -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card-custom mb-4">
|
||||
<div class="card-header bg-transparent py-3">
|
||||
<h5 class="card-title mb-0 ps-2 border-start border-4 border-primary">Información General</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div asp-validation-summary="ModelOnly" class="alert alert-danger"></div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
<label asp-for="Codigo" class="form-label">Código <span class="text-danger">*</span></label>
|
||||
<input asp-for="Codigo" class="form-control" />
|
||||
<span asp-validation-for="Codigo" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<label asp-for="Nombre" class="form-label">Nombre del Artículo <span class="text-danger">*</span></label>
|
||||
<input asp-for="Nombre" class="form-control" />
|
||||
<span asp-validation-for="Nombre" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="Descripcion" class="form-label">Descripción</label>
|
||||
<textarea asp-for="Descripcion" class="form-control" rows="3"></textarea>
|
||||
<span asp-validation-for="Descripcion" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label asp-for="Marca" class="form-label">Marca</label>
|
||||
<input asp-for="Marca" class="form-control" />
|
||||
<span asp-validation-for="Marca" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="Modelo" class="form-label">Modelo</label>
|
||||
<input asp-for="Modelo" class="form-control" />
|
||||
<span asp-validation-for="Modelo" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-custom">
|
||||
<div class="card-header bg-transparent py-3">
|
||||
<h5 class="card-title mb-0 ps-2 border-start border-4 border-info">Detalles del Activo</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label asp-for="NumeroSerie" class="form-label">Número de Serie</label>
|
||||
<input asp-for="NumeroSerie" class="form-control" />
|
||||
<span asp-validation-for="NumeroSerie" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="Precio" class="form-label">Valor Estimado (Moneda)</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input asp-for="Precio" class="form-control" type="number" step="0.01" />
|
||||
</div>
|
||||
<span asp-validation-for="Precio" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="FechaAdquisicion" class="form-label">Fecha de Adquisición</label>
|
||||
<input asp-for="FechaAdquisicion" type="date" class="form-control" />
|
||||
<span asp-validation-for="FechaAdquisicion" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Classification & Image -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card-custom mb-4">
|
||||
<div class="card-header bg-transparent py-3">
|
||||
<h5 class="card-title mb-0 ps-2 border-start border-4 border-warning">Clasificación</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-bold">Tipo de Inventario</label>
|
||||
<input type="text" class="form-control" value="@Model.TipoControl" readonly disabled />
|
||||
<input type="hidden" asp-for="TipoControl" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@if (Model.TipoControl == "LOTE")
|
||||
{
|
||||
<label class="form-label fw-bold text-primary">Cantidad Global</label>
|
||||
<input type="number" class="form-control" value="@Model.CantidadInicial" readonly disabled />
|
||||
<div class="form-text">Gestionar cantidad vía Movimientos.</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<label class="form-label fw-bold">Cantidad</label>
|
||||
<input type="text" class="form-control" value="1 (Unitario)" readonly disabled />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="CategoriaId" class="form-label">Categoría <span class="text-danger">*</span></label>
|
||||
<select asp-for="CategoriaId" class="form-select" asp-items="ViewBag.Categorias">
|
||||
<option value="">-- Seleccionar --</option>
|
||||
</select>
|
||||
<span asp-validation-for="CategoriaId" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="UbicacionId" class="form-label">Ubicación Actual <span class="text-danger">*</span></label>
|
||||
@if (Model.TipoControl == "LOTE")
|
||||
{
|
||||
<select asp-for="UbicacionId" class="form-select" asp-items="ViewBag.Ubicaciones" disabled>
|
||||
<option value="">-- Seleccionar --</option>
|
||||
</select>
|
||||
<input type="hidden" asp-for="UbicacionId" />
|
||||
<div class="form-text">La ubicación se gestiona por Existencias en Lotes.</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<select asp-for="UbicacionId" class="form-select" asp-items="ViewBag.Ubicaciones">
|
||||
<option value="">-- Seleccionar --</option>
|
||||
</select>
|
||||
<span asp-validation-for="UbicacionId" class="text-danger"></span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="EstadoId" class="form-label">Estado Físico <span class="text-danger">*</span></label>
|
||||
<select asp-for="EstadoId" class="form-select" asp-items="ViewBag.Estados">
|
||||
<option value="">-- Seleccionar --</option>
|
||||
</select>
|
||||
<span asp-validation-for="EstadoId" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input asp-for="Activo" class="form-check-input" type="checkbox" role="switch" />
|
||||
<label asp-for="Activo" class="form-check-label">Artículo Activo</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-custom">
|
||||
<div class="card-header bg-transparent py-3">
|
||||
<h5 class="card-title mb-0 ps-2 border-start border-4 border-secondary">Imagen</h5>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<div class="image-preview-container bg-light rounded d-flex align-items-center justify-content-center mb-2" style="height: 200px; border: 2px dashed #ccc;">
|
||||
@if (!string.IsNullOrEmpty(Model.ImagenUrl))
|
||||
{
|
||||
<img id="imagePreview" src="@Model.ImagenUrl" alt="Vista Previa" style="max-height: 100%; max-width: 100%;" />
|
||||
<span id="placeholderText" class="text-muted" style="display: none;">Sin Imagen</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<img id="imagePreview" src="#" alt="Vista Previa" style="max-height: 100%; max-width: 100%; display: none;" />
|
||||
<span id="placeholderText" class="text-muted">Sin Imagen</span>
|
||||
}
|
||||
</div>
|
||||
<input asp-for="ImagenFile" class="form-control" type="file" accept="image/*" onchange="previewImage(this)" />
|
||||
<span asp-validation-for="ImagenFile" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 mt-4">
|
||||
<button type="submit" class="btn btn-primary-custom btn-lg">
|
||||
<i class="bi bi-save me-2"></i> Guardar Cambios
|
||||
</button>
|
||||
<a asp-action="Index" class="btn btn-light border">Cancelar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@section Scripts {
|
||||
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
|
||||
<script>
|
||||
function previewImage(input) {
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
$('#imagePreview').attr('src', e.target.result).show();
|
||||
$('#placeholderText').hide();
|
||||
}
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
} else {
|
||||
// If clearing, we might want to keep the old image or show placebo
|
||||
// For simplicity here, if user cancels file dialog, it keeps previous
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
141
RS_system/Views/Articulos/Index.cshtml
Normal file
141
RS_system/Views/Articulos/Index.cshtml
Normal file
@@ -0,0 +1,141 @@
|
||||
@model IEnumerable<Rs_system.Models.ViewModels.ArticuloViewModel>
|
||||
@{
|
||||
ViewData["Title"] = "Inventario de Artículos";
|
||||
}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="mb-1">Inventario de Artículos</h4>
|
||||
<p class="text-muted mb-0">Gestión de bienes y activos fijos</p>
|
||||
</div>
|
||||
<a asp-action="Create" class="btn btn-primary-custom">
|
||||
<i class="bi bi-plus-lg me-1"></i> Nuevo Artículo
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Filters Card -->
|
||||
<div class="card-custom mb-4">
|
||||
<div class="card-body py-3">
|
||||
<form asp-action="Index" method="get" class="row g-3">
|
||||
<div class="col-md-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-light border-end-0"><i class="bi bi-search"></i></span>
|
||||
<input type="text" name="search" class="form-control border-start-0" placeholder="Buscar por nombre, código..." value="@ViewBag.CurrentSearch">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select name="categoriaId" class="form-select" asp-items="ViewBag.Categorias">
|
||||
<option value="">Todas las Categorías</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select name="ubicacionId" class="form-select" asp-items="ViewBag.Ubicaciones">
|
||||
<option value="">Todas las Ubicaciones</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select name="estadoId" class="form-select" asp-items="ViewBag.Estados">
|
||||
<option value="">Todos los Estados</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-1 d-grid">
|
||||
<button type="submit" class="btn btn-secondary" title="Filtrar">
|
||||
<i class="bi bi-funnel"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-custom">
|
||||
<div class="table-responsive">
|
||||
<table class="table-custom align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 60px;">Img</th>
|
||||
<th>Código</th>
|
||||
<th>Nombre / Marca</th>
|
||||
<th>Ubicación</th>
|
||||
<th>Categoría</th>
|
||||
<th class="text-center">Estado</th>
|
||||
<th class="text-center">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (!Model.Any())
|
||||
{
|
||||
<tr>
|
||||
<td colspan="7" class="text-center text-muted py-5">
|
||||
<i class="bi bi-box-seam fs-1 d-block mb-2"></i>
|
||||
No se encontraron artículos
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var item in Model)
|
||||
{
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
@if (!string.IsNullOrEmpty(item.ImagenUrl))
|
||||
{
|
||||
<img src="@item.ImagenUrl" alt="Img" class="rounded" style="width: 40px; height: 40px; object-fit: cover;" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="rounded bg-light d-flex align-items-center justify-content-center text-muted" style="width: 40px; height: 40px;">
|
||||
<i class="bi bi-image"></i>
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-light text-dark border">@item.Codigo</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-bold">@item.Nombre</div>
|
||||
@if (!string.IsNullOrEmpty(item.Marca))
|
||||
{
|
||||
<small class="text-muted">@item.Marca @item.Modelo</small>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<i class="bi bi-geo-alt-fill text-muted me-1" style="font-size: 0.8rem;"></i>
|
||||
@item.UbicacionNombre
|
||||
</td>
|
||||
<td>@item.CategoriaNombre</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-@(item.EstadoColor ?? "secondary")">
|
||||
@item.EstadoNombre
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group">
|
||||
<a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-outline-primary" title="Ver Ficha Técnica">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-outline-secondary" title="Editar">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
@if (TempData["SuccessMessage"] != null)
|
||||
{
|
||||
<text>toastr.success('@TempData["SuccessMessage"]');</text>
|
||||
}
|
||||
@if (TempData["ErrorMessage"] != null)
|
||||
{
|
||||
<text>toastr.error('@TempData["ErrorMessage"]');</text>
|
||||
}
|
||||
</script>
|
||||
}
|
||||
Reference in New Issue
Block a user