A list of objects, what I need is if I make the task chain too long it breaks the table or looks ugly, then I want to cut the chain and show the last 3 tasks, here it shows me Images for several tasks, it returns
data:[{tasks:"Task 1 Task 2 Task 3 Task 4}] All tasks can be added, so I want to cut and show the last 3 tasks. This way my table will not be damaged.
<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]
I'm just adding my answer based on the problem statement you mentioned in the first two paragraphs, because studying the entire code is like a trap.
You can achieve this with the help of the
compulatedattribute. You can slice all remaining elements in the array, keeping only the last 3 elements.Live Demo:
new Vue({ el: '#app', data: { originalObject: [{ id: 1, tipoPresupuestoString: 'tipoPresupuestoString 1', numero: 'Numero 1', fechaEntrega: 'fechaEntrega 1', presupuestoComentarioString: 'presupuestoComentarioString 1', tareas: 'tareas 1', cliente: { nombre: 'nombre 1' } }, { id: 2, tipoPresupuestoString: 'tipoPresupuestoString 2', numero: 'Numero 2', fechaEntrega: 'fechaEntrega 2', presupuestoComentarioString: 'presupuestoComentarioString 2', tareas: 'tareas 2', cliente: { nombre: 'nombre 2' } }, { id: 3, tipoPresupuestoString: 'tipoPresupuestoString 3', numero: 'Numero 3', fechaEntrega: 'fechaEntrega 3', presupuestoComentarioString: 'presupuestoComentarioString 3', tareas: 'tareas 3', cliente: { nombre: 'nombre 3' } }, { id: 4, tipoPresupuestoString: 'tipoPresupuestoString 4', numero: 'Numero 4', fechaEntrega: 'fechaEntrega 4', presupuestoComentarioString: 'presupuestoComentarioString 4', tareas: 'tareas 4', cliente: { nombre: 'nombre 4' } }, { id: 5, tipoPresupuestoString: 'tipoPresupuestoString 5', numero: 'Numero 5', fechaEntrega: 'fechaEntrega 5', presupuestoComentarioString: 'presupuestoComentarioString 5', tareas: 'tareas 5', cliente: { nombre: 'nombre 5' } }] }, computed:{ presupuestos() { return this.originalObject ? this.originalObject.slice(-3) : this.originalObject } } })table, td { border: 1px solid black; }