When dealing with a list of objects, I want to ensure that the chain of tasks does not become too long and break the table or appear aesthetically unpleasing. Therefore, my goal is to trim the tasks and display only the last 3. In the image below, multiple tasks are shown. What I expect is:
data:[{tasks:"task 1 task 2 task 3 task 4}] where all tasks can be added, but I want to limit the display to the last 3 in order to prevent table disruptions.
<tr
v-for="item in presupuestos"
:key="item.id"
:style="item.id === presupuestoSeleccionado.id && TheStyle"
>
<td>{{ item.tipoPresupuestoString }}</td>
<td>{{ item.numero }}</td>
<td>{{ item.cliente.nombre }}</td>
<td>{{ formatDate(item.fechaEntrega) }}</td>
<td>{{ item.presupuestoComentarioString }}</td>
<td>{{ item.tareas }}</td>
</tr>
getList() {
const tipoPresupuesto =
this.tipoPresupuesto != null ? this.tipoPresupuesto : "";
const clienteId = this.cliente != null ? this.cliente.id : "";
const procesoId = this.proceso != null ? this.proceso : "";
const tareaId = this.tareaFiltro != null ? this.tareaFiltro : "";
Swal.fire({
title: "Espere unos momentos ...",
showConfirmButton: false,
});
this.presupuestoServices
.getListSupervisar(tipoPresupuesto, clienteId, procesoId, tareaId)
.then((data) => {
Swal.close();
this.presupuestos = data;
console.log(data)
this.$data.TheStyle.backgroundColor = "#c3bbbb"; //Para seleccionar los row de algun color
})
.catch((error) => {
Swal.close();
this.showError(error.response.data);
});
},
[HttpGet("getListSupervisar")]public async
Task<ActionResult<List<Presupuesto>>>
GetListSupervisar([FromQuery]
int? tipoPresupuesto, [FromQuery] int? clienteId,
[FromQuery] int?
procesoId, [FromQuery] int? tareaId)
{
string[] _include = { nameof(Presupuesto.Usuario),
nameof(Presupuesto.Cliente),
nameof(Presupuesto.PresupuestoDetalle) + "." +
nameof(PresupuestoDetalle.PresupuestoDetalleProceso),
nameof(Presupuesto.PresupuestoDetalle) + "." +
nameof(PresupuestoDetalle.ArticuloBp),
nameof(Presupuesto.PresupuestoDetalle) + "." +
nameof(PresupuestoDetalle.ArticuloCamara),
nameof(Presupuesto.PresupuestoTarea),
nameof(Presupuesto.PresupuestoComentario)
};
var result = await _presupuestoServices.GetListAsync(a => a.Id > 0
&& a.TipoPresupuesto!=null
&& ((tipoPresupuesto == null && a.TipoPresupuesto != (int)Enumeraciones.PresupuestoTipo.Presupuesto) || a.TipoPresupuesto == tipoPresupuesto)
&& (tareaId == null || a.PresupuestoTarea.Where(b => b.TareaId == tareaId).Count() > 0)
&& (procesoId == null || a.PresupuestoDetalle.Where(b => b.PresupuestoDetalleProceso.Where(c => c.ProcesoId == procesoId && c.Cantidad < b.Cantidad).Count() > 0).Count() > 0)
&& (clienteId == null || a.ClienteId == clienteId)
&& a.PresupuestoDetalle.Count > 0
, _include);
var list = new List<Presupuesto>();
foreach (var presupuesto in result.ToList())
{
//presupuesto.PresupuestoDetalle = presupuesto.PresupuestoDetalle.Where(a => a.EsPrimerCristal == true).ToList();
presupuesto.Procesos = ArmarProcesosFaltantes(presupuesto);
presupuesto.PresupuestoComentarioString = presupuesto.PresupuestoComentario.Count>0 ? presupuesto.PresupuestoComentario.LastOrDefault().Comentario : "";
if (presupuesto.ImporteEnvio>0)
{
presupuesto.PresupuestoDetalle.Add(new PresupuestoDetalle() { Descripcion = "Envio", Cantidad = 1, Ancho = 1, Alto = 1,Presupuesto = presupuesto });
}
if (presupuesto.ImporteDescuento > 0)
{
var descuentoPorcen = (presupuesto.DescuentoExtraPorcen + presupuesto.Cliente.Descuento)/100;
presupuesto.PresupuestoDetalle.Add(new PresupuestoDetalle() { Descripcion = "Descuento", Cantidad = 1, Ancho = descuentoPorcen, Alto = descuentoPorcen, Presupuesto = presupuesto });
}
if (presupuesto.ImporteColocacion > 0)
{
presupuesto.PresupuestoDetalle.Add(new PresupuestoDetalle() { Descripcion = "Colocacion", Cantidad = 1, Ancho = 1, Alto = 1, Presupuesto = presupuesto });
}
}
return result;
}
ENTITIES DE PRESUPUESTO
public string Tareas
{
get
{
var result = "";
foreach (var item in PresupuestoTarea.OrderBy(a=>a.FechaAlta))
{
result = item.Descripcion + " " + result;
}
return result;
}
}
[NotMapped]