La modificación para que no permita editar tareas ya completadas.
Introducción a Angular y Fundamentos
Aprende Angular 17
Creando tu primer proyecto en Angular
Implementando estilos
Mostrando elementos
Property Binding en Angular
Event Binding: click y doble click
Event binding: keydown
Modelo de reactividad con Signals
Creando un Signal en Angular
Estructuras de control en Angular
Directivas de control
Uso de ngFor
ngFor para objetos
Update Tasks
Uso de ngIf
Uso de ngSwitch y ngSwitchDefault
Controlando un input
Manejo de formularios en Angular
Alistando tu aplicación para producción
Estilos al modo Angular
Clases en Angular
Editing mode
Estados compuestos con computed
Usando effect para localStorage
Uso de ngbuild
Despliegue con Firebase Hosting
Nueva sintaxis en Angular
Directivas @For, @switch
Migrando a la nueva sintaxis de Angular v17
Componentes Reutilizables y Comunicación
Construyendo un e-commerce en Angular
Componentes en Angular
Mostrando los componentes
Angular DevTools
Uso de Inputs en Angular
Uso de Outputs en Angular
Componentes para Producto
Ciclo de vida de los componentes
Ciclo de vida de componentes
Ciclo de vida de componentes: ngOnChanges
Ciclo de vida de componentes: ngOnInit
Detectando cambios en los inputs
Evitando memory leaks con ngDestroy
Audio player con ngAfterViewInit
Creando la página "about us" o "conócenos"
Mejorando la interfaz del producto
Creando componente de productos
Creando el Header
Creando el carrito de compras
Comunicación padre e hijo
Calculando el total con ngOnChanges
El problema del prop drilling
Reactividad con signals en servicios
Entendiendo la inyección de dependencias
Integración y Datos
Obteniendo datos una REST API
Importaciones cortas en Typescript
Pipes en Angular
Construyendo tu propio pipe
Utilizando librerías de JavaScript en Angular
Conociendo las directivas
Deployando un proyecto en Vercel
Enrutamiento y Navegación
Ruta 404
Uso del RouterLink
Vistas anidadas
Uso del RouterLinkActive
Detalle de cada producto
Obteniendo datos del producto
Galería de imagenes
Detalle de la galería
Perfeccionando tu e-commerce
Mostrando categorias desde la API
Url Params
LazyLoading y Code Splitting
Aplicando LazyLoading
Prefetching
Usando la nueva sintaxis de Angular 17
Lanzando tu aplicación a producción
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
18 Días
7 Hrs
24 Min
5 Seg
Editing mode
20/71Recursos
Aportes 25
Preguntas 4
Ordenar por:
En que momento del curso cambiaron la lógica del metodo updateTask()
La Versión de Angular 17, ya no tiene el metodo mutate sino el metodo update,
const count = signal(0);
// Increment the count by 1.
count.update(value => value + 1);
Si google keep deja que yo edite las tareas completadas, voy a hacer lo mismo jaja
En que momento cambio tanto el código , se ve en el código que no usa update, sino que usa mutate eso no fue explicado ? updateTask tenia una lógica y ahora tiene otra, ademas si es una propiedad opcional debería ser [class.editing]=“task?.editing” sino esto generará problemas
me perdi con este video al ver tantos cambios en la logica. Hice el cambio en updateTask de update a mutate y me da error, lo deje con update y en la aplicacion no se ejecuta la opcion de modificar la tarea...
Una validación para que dentro del input editable se pueda hacer dblclick, para seleccionar una palabra
`if (this.tasks()[index]?.editing || this.tasks()[index]?.completed) return;`
Esta es la forma en la que escribí el método updateTaskEditingMode:
```js
updateTaskEditingMode(index: number){
this.tasks.update((tasks) => tasks.map((task, position) => {
return {...task, editing: position === index ? true : false}
}));
}
``` updateTaskEditingMode(*index*: *number*){ this.tasks.update((*tasks*) *=>* *tasks*.map((*task*, *position*) *=>* { return {...*task*, editing: *position* === *index* ? true : false} })); }
Mi solución para evitar que se edite una tarea completada:
Adicionalmente, agregué una validación para evitar que se agregue texto vacío al editar.
punto interesante: Porque typescript no se queja de que enviamos una clave `text`, si la interfaz especifica que tiene que ser de Task, y Task no tiene esa clave?
Pues, resulta que typescript no valida cuando el mergeamos objetos con spread operator.
Si se utliza clave valor, typescript deberia quejarse.
Mi validación a que no pueda editar una tarea completada
```ts
public updateTaskText(index: number, event: Event) {
const target = event.target as HTMLInputElement;
const value = target.value.trim();
this.tasks.update((tasks) => {
return tasks.map((task, position) => {
if (position === index && task.complated === false) {
return {
...task,
title: value,
editing: false
};
}
alert('Esta tarea ya fue completada');
return task;
});
});
}
```
Mi solución al reto
```ts
public updateTaskEditingMode(index: number) {
this.tasks.update((tasks) => {
return tasks.map((task, position) => {
task.editing = false;
if (position === index) {
return {
...task,
editing: true
};
}
return task;
});
});
}
```
```js
updateEditing(index: number){
this.tasks.update(prevState => {
return prevState.map((task, position) => {
if (position == index && !task.completed){
return {
...task,
editing: true
}}
return {
...task,
editing: false
}
})})}
```Así hice para que no se puedan editar tareas completadas
Una solucion simple pero solucion a fin de cuentas
No sé que tan buena idea sea hacerlo de esta manera, de alguna forma se me hizo más simple, y evita iterar innecesariamente todos los elementos, aún así dudo que esto sea buena práctica.
mi solución para no modificar las tareas completadas:updateTaskEditingMode(index:number){ *this*.tasks.update(prevState=> { return prevState.map((task,i)=>{ if(i===index && !task.completed){ return { ...task, editing: !task.editing } } *//las demas por defecto deben estar en editing mode false* return { ...task, editing: false }; }); }); }
```js
updateTaskEditingMode(index:number){
this.tasks.update(prevState=> {
return prevState.map((task,i)=>{
if(i===index && !task.completed){
return {
...task,
editing: !task.editing
}
}
//las demas por defecto deben estar en editing mode false
return {
...task,
editing: false
};
});
});
}
```
Nicolás me perdí, en que momento cambio el método updateTask, al cambiar el método se daña todo!! Colocó el mutable y también me marca error.
```js
editingTaskMode(index: number, isEditingMode: boolean = true) {
if (!isEditingMode) {
this.tasks.update(tasks => {
tasks[index] && (tasks[index].editing = false)
return tasks
})
return
}
this.tasks.update(prevTasks => (
prevTasks.map((task, position) => ({
...task,
editing: position === index
}))
))
}
updateTask(index: number, event: Event) {
const titleTask = (event.target as HTMLInputElement).value.trim()
titleTask && (
this.tasks.update(tasks => {
if (tasks[index]) {
tasks[index].title = titleTask
tasks[index].editing = false
}
return tasks
})
)
}
```
```js
<input
class="edit"
[value]="task.title"
(keydown.enter)="updateTask($index, $event)"
(keydown.escape)="editingTaskMode($index, false)"
/>
```
usando un control para la edicion puede quedar de esta forma
```js
<input class="edit"
[formControl]="editTaskCtrl"
(keyup.enter)="onEndEditTask()"
(keyup.esc)="escapeEditTask()" />
```
```js
editTaskCtrl = new FormControl('', {nonNullable: true, validators: [
Validators.required, Validators.pattern('^\\S.*$'), Validators.minLength(3)
]});
onStartEditTask(index: number) {
// no se pueden editar las ya completadas
if(this.tasks()[index].completed) return;
// iniciar modo de edición
this.tasks.update(
(tasks) => tasks.map(
(task, position) => {
if(position === index){
this.editTaskCtrl.setValue(task.title);
task.editing = true;
} else {
task.editing = false;
}
return task;
}
)
);
}
onEndEditTask() {
const title = this.editTaskCtrl.value.trim();
if (this.editTaskCtrl.valid && title.length > 0) {
this.tasks.update((tasks) => tasks.map(
(task, position) => {
if (task.editing === true) {
task.title = title
task.editing = false
}
return task;
}
));
}
}
escapeEditTask() {
this.tasks.update(
(tasks) => tasks.map(
(task, position) => {
task.editing = false;
return task;
}
)
);
}
```
Evitar bloques de código:
Hubiera estado genial si en la función edición hubieramos agregado una flag para "isEditingMode" = false para dar soporte adicional al evento "keydown.escape" para salir del modo de edición y cancelar cualquier valor no confirmado.
Validation to not allow an already completed task to be edited
<updateTaskEditingMode( index: number ) {
this.tasks.update(( tasks ) => tasks.map(( task, position ) => {
if ( position === index && !task.completed ) {
return {
...task,
editing: true
}
}
return {
...task,
editing: false
}
}));
}
>
Mi solución para evitar que se editen las tareas completadas y además se evite mostrar el input de edición:
```js
```
<input
class="toggle"
type="checkbox"
[checked]="task.completed"
(change)="completeTask(task.id)"
/>
<label>{{task.title}}</label>
<button class="destroy" (click)="deleteTask(task.id)"></button>
<input class="edit" [value]="task.title" (keydown.enter)="updateTask($event, task.id)"/>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?