https://github.com/josluistanic/inlinetable

Edición integrada de una tabla con Livewire 3
https://github.com/josluistanic/inlinetable

alpinejs ecuador inline-editing laravel livewire livewire3 tall-stack

Last synced: 4 days ago
JSON representation

Edición integrada de una tabla con Livewire 3

• Host: GitHub
• URL: https://github.com/josluistanic/inlinetable
• Owner: Josluistanic
• Created: 2024-05-05T02:17:39.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-05-05T02:26:24.000Z (8 months ago)
• Last Synced: 2024-10-31T05:05:09.320Z (about 2 months ago)
• Topics: alpinejs, ecuador, inline-editing, laravel, livewire, livewire3, tall-stack
• Language: PHP
• Homepage:
• Size: 116 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


## Edición inline (edición integrada)

Un componente de edición integrada permite a los usuarios cambiar entre la vista de solo lectura (read-only) y la de edición de:

- Listas de descripción

- Elementos de texto de una página

- Tablas

La edición inline le ahorra al usuario abrir un modal o ir a una página de edición

### Cuándo usar

1. Cuando **todos** los elementos se pueden ver en la fila o en la fila expandida

2. Cuando la información necesita ser actualizada constantemente

### Cuándo **no** usar

1. Cuando la edición es la función principal de la vista

Traducido de [PatterFly](https://www.patternfly.org/components/inline-edit/) 

## Tabla con edición integrada - TALL stack

Basándome en el componente que muestra el canal de Laravel Daily en el [video del 20 de febrero de 2021](https://www.youtube.com/watch?v=N9r_Rhumr80)

Hice un vídeo que explica la lógica general para poder ser aplicada en cualquier lenguaje y el código en un componente de [Livewire 3](https://livewire.laravel.com)

[Link al video](https://youtu.be/A40zGfXKfLU)

### Lógica

Tenemos un arreglo indexado que llena una tabla, cada `td` de la tabla contiene un `span` que, al hacer clic sobre él, dispara un `setter` que define una propiedad `currentEditedField` que contiene el índice del item que estamos editando concatenado al nombre de la propiedad.

Dentro de cada `td` tenemos una condicional que verifica si el `currentEditedField` es igual al índice concatenado al nombre de la propiedad que estamos editando y, en caso de serlo, en lugar de mostrar el `span` muestra el elemento que nos permita editar (input:checkbox, input:text, select, entre otros)

El componente/etiqueta/tag mostrado en la vista de edición escucha los eventos que consideremos necesarios (clic fuera, enter, ctrl+enter) y al recibirlo entonces dispara un método/función que valida, guarda y vuelve a colocar `currentEditedField` en `null`

### Componente

En este caso estamos trabajando con TALL stack así que creamos un componente `EnergyDrinksTable` de Livewire 3 con su respectiva [vista](resources/views/livewire/energy-drinks-table.blade.php) y [clase](app/Livewire/EnergyDrinksTable.php) que utilize AlpineJS para "escuchar" el clic fuera del elemento de edición y disparar el método de guardado, para todo lo demás utilizamos Livewire