How to intercept and display the last 3 characters from a string

Question

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]

Answer 1

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 compulated attribute. 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;
}

sssccc

  

    

      
{{ item.tipoPresupuestoString }}
      
{{ item.numero }}
      
{{ item.cliente.nombre }}
      
{{ item.fechaEntrega }}
      
{{ item.presupuestoComentarioString }}
      
{{ item.tareas }}