verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 60 Releases Wiki Activity

Add drag and drop to Travel Extra Community table #189

Merged
alexm merged 12 commits from :feature/ExtraCommunityDragAndDrop into dev 2024-02-20 10:40:40 +00:00
Conversation 4 Commits 12 Files Changed 5 +308 -87
hyervoni commented 2024-02-13 13:45:22 +00:00
Contributor
Copy Link

Rama: feature/ExtraCommunityDragAndDrop
https://redmine.verdnatura.es/issues/6812

Rama: `feature/ExtraCommunityDragAndDrop` https://redmine.verdnatura.es/issues/6812
hyervoni added 1 commit 2024-02-13 13:45:23 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
2693f259d4 Add drag and drop do Travel Extra Community table
hyervoni requested review from alexm 2024-02-13 13:45:29 +00:00
hyervoni requested review from jsegarra 2024-02-13 13:45:36 +00:00
wbuezas added 1 commit 2024-02-13 13:49:33 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
ca06140a8d remove v-if
hyervoni changed title from Add drag and drop do Travel Extra Community table to Add drag and drop to Travel Extra Community table 2024-02-13 14:35:32 +00:00
alexm approved these changes 2024-02-14 06:45:51 +00:00
Dismissed
alexm requested changes 2024-02-14 06:55:08 +00:00
alexm left a comment
Member
Copy Link

Lo acabo de revisar visualmente y no parece que vaya del todo fino.
(He probado a mover unos cuantos y al recargar la pagina ya no estaban igual)
Tambien el color al hacer dragStart no es mismo que en salix. (en salix es un naranja clarito y en lilium azul)
Este ultimo punto lo comento con Javi por ver que color le gusta más

Lo acabo de revisar visualmente y no parece que vaya del todo fino. (He probado a mover unos cuantos y al recargar la pagina ya no estaban igual) Tambien el color al hacer dragStart no es mismo que en salix. (en salix es un naranja clarito y en lilium azul) Este ultimo punto lo comento con Javi por ver que color le gusta más
jsegarra requested changes 2024-02-14 07:50:46 +00:00
jsegarra left a comment
Member
Copy Link

Revisamos el color y lo que ocurre cuando sólo hay 2 filas porque el componente se queda activo o no se puede desactivar.

Revisamos el color y lo que ocurre cuando sólo hay 2 filas porque el componente se queda activo o no se puede desactivar.
jsegarra commented 2024-02-14 11:24:32 +00:00
Member
Copy Link

En la daily, he sugerido usar un naranja con gradiente o difuminado en vez del azul.
Queda resolver los parámetros de búsqueda.
Con respecto al funcionamiento del drag and drop, por mi lado quedaría:

  • Restringir que la entrada se pueda mover a la fila 0 o la fila que hay entre la cabecera y la primera fila, que es lo mismo que mover la entrada al border-top de la primera fila.
  • Modificar los px del border cuando haces hover y que el border sea a todo, no solo top y bottom
En la daily, he sugerido usar un naranja con gradiente o difuminado en vez del azul. Queda resolver los parámetros de búsqueda. Con respecto al funcionamiento del drag and drop, por mi lado quedaría: - Restringir que la entrada se pueda mover a la fila 0 o la fila que hay entre la cabecera y la primera fila, que es lo mismo que mover la entrada al border-top de la primera fila. - Modificar los px del border cuando haces hover y que el border sea a todo, no solo top y bottom
wbuezas added 1 commit 2024-02-14 12:55:33 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
fbe8c912f6 Fix dragend status
wbuezas dismissed alexm’s review 2024-02-14 12:55:33 +00:00
Reason:

New commits pushed, approval review dismissed automatically according to repository settings

wbuezas added 1 commit 2024-02-14 21:20:47 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
60d2491409 change drag status color
wbuezas added 1 commit 2024-02-15 01:14:58 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
e29801a47e General improvements and handle params changes in VnFilterPanel
wbuezas added 1 commit 2024-02-15 01:19:05 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
08e39232e2 add dashed border to first and last child to drop row
wbuezas added 1 commit 2024-02-15 01:23:30 +00:00
wbuezas commented 2024-02-15 01:32:09 +00:00
Contributor
Copy Link

@alexm @jsegarra les dejo un listado general de las cosas que estuve mejorando:

  • Solucioné el bug de la fila que quedaba en estado de drag cuando se trataba de soltarla por fuera de la tabla o en la primera fila

  • Cambié el color del estado de drag por el que se usa actualmente en salix, creé una variable global para poder reutilizarla

  • Agregué también los borders faltantes a los costados cuando la fila de destino se le agrega un dashed border

  • Hice un emprolijamiento de algunas cositas

  • Además estuve checkeando el tema de los filtros que me comento @jsegarra y había un problema general que se compartía en todos los paneles de filtros de la plataforma, el cual consistía en que cuando se actualizaba algún param y la url cambiaba el panel no reaccionaba a los cambios. Para esto agregué la funcionalidad de que cuando se cambia algún param en la url el panel de filtro reaccione a estos cambios y actualice el componente

@jsegarra con respecto a lo que hablamos de la searchbar es algo que también ocurre en otros modulos como por ejemplo Tickets, si lo crees necesario lo charlamos

@alexm @jsegarra les dejo un listado general de las cosas que estuve mejorando: - Solucioné el bug de la fila que quedaba en estado de `drag` cuando se trataba de soltarla por fuera de la tabla o en la primera fila - Cambié el color del estado de `drag` por el que se usa actualmente en salix, creé una variable global para poder reutilizarla - Agregué también los borders faltantes a los costados cuando la fila de destino se le agrega un `dashed border` - Hice un emprolijamiento de algunas cositas - Además estuve checkeando el tema de los filtros que me comento @jsegarra y había un problema general que se compartía en todos los paneles de filtros de la plataforma, el cual consistía en que cuando se actualizaba algún `param` y la url cambiaba el panel no reaccionaba a los cambios. Para esto agregué la funcionalidad de que cuando se cambia algún param en la url el panel de filtro reaccione a estos cambios y actualice el componente @jsegarra con respecto a lo que hablamos de la searchbar es algo que también ocurre en otros modulos como por ejemplo `Tickets`, si lo crees necesario lo charlamos
jsegarra approved these changes 2024-02-15 06:33:58 +00:00
Dismissed
wbuezas added 1 commit 2024-02-15 17:23:02 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
c322bfb46c general improvements
wbuezas dismissed jsegarra’s review 2024-02-15 17:23:02 +00:00
Reason:

New commits pushed, approval review dismissed automatically according to repository settings

wbuezas commented 2024-02-15 17:35:26 +00:00
Contributor
Copy Link

Buenas @alexm @jsegarra hice un push de unos cambios que me pidio Javi Gallego, los menciono a continuacion:

  • Había un problema en el formateo de las fechas de shipping y landed y se corrigió
  • Se implementaron Inputs directamente en la tabla en lugar del Input popover
  • Se limitó el ancho del contenido de la columna Supplier en dos breakpoints diferentes

Commit: c322bfb46c

Buenas @alexm @jsegarra hice un push de unos cambios que me pidio Javi Gallego, los menciono a continuacion: - Había un problema en el formateo de las fechas de `shipping` y `landed` y se corrigió - Se implementaron `Inputs` directamente en la tabla en lugar del `Input popover` - Se limitó el ancho del contenido de la columna `Supplier` en dos `breakpoints` diferentes Commit: https://gitea.verdnatura.es/verdnatura/salix-front/commit/c322bfb46c5d8e395636fda7639386e409500c65
alexm requested changes 2024-02-16 06:21:44 +00:00
alexm left a comment
Member
Copy Link

Buenas!
Esta todo perfecto el único detalle es que cuando haces hover del destino en salix se pone con el borde con puntitos tanto el header como el body. En lilium solo esta poniendo el header.
Como sale en Salix:
image

Buenas! Esta todo perfecto el único detalle es que cuando haces hover del destino en salix se pone con el borde con puntitos tanto el header como el body. En lilium solo esta poniendo el header. Como sale en Salix: ![image](/attachments/5e830654-28da-49e0-967c-814ec45f614f)
image.png
52 KiB
wbuezas added 1 commit 2024-02-16 12:24:44 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
0761860b37 Improve drag and drop borders status
alexm requested changes 2024-02-16 13:25:37 +00:00
src/pages/Travel/ExtraCommunity.vue Outdated
@ -266,0 +291,4 @@
const handleDragStart = (event, rowIndex, entryIndex) => {
draggedRowIndex.value = rowIndex;
entryRowIndex.value = entryIndex;
event.dataTransfer.effectAllowed = 'move';
alexm commented 2024-02-16 13:25:16 +00:00
Member
Copy Link

Aqui faltaria implementar el scroll que hay en salix:
Ver en modules/travel/front/extra-community/index.js

  this.interval = setInterval(() => this.onDragInterval(), 50); // ← DragStart

//...
    onDragInterval() {
        if (this.dragClientY > 0 && this.dragClientY < 75)
            this.$window.scrollTo(0, this.$window.scrollY - 10);

        const maxHeight = window.screen.availHeight - (window.outerHeight - window.innerHeight);
        if (this.dragClientY > maxHeight - 75 && this.dragClientY < maxHeight)
            this.$window.scrollTo(0, this.$window.scrollY + 10);
    }

//...
clearInterval(this.interval); // ← DragEnd

Si tienes algo en la primera linea y quieres moverte hasta la ultima en salix cuando vas llegando al borde de la pantalla te hace scroll

Aqui faltaria implementar el scroll que hay en salix: Ver en `modules/travel/front/extra-community/index.js` ``` this.interval = setInterval(() => this.onDragInterval(), 50); // ← DragStart //... onDragInterval() { if (this.dragClientY > 0 && this.dragClientY < 75) this.$window.scrollTo(0, this.$window.scrollY - 10); const maxHeight = window.screen.availHeight - (window.outerHeight - window.innerHeight); if (this.dragClientY > maxHeight - 75 && this.dragClientY < maxHeight) this.$window.scrollTo(0, this.$window.scrollY + 10); } //... clearInterval(this.interval); // ← DragEnd ``` Si tienes algo en la primera linea y quieres moverte hasta la ultima en salix cuando vas llegando al borde de la pantalla te hace scroll
😕 2 👀 1
wbuezas added 1 commit 2024-02-16 18:00:33 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
f230090711 Add scroll when dragging elements
jsegarra approved these changes 2024-02-19 06:50:12 +00:00
Dismissed
alexm approved these changes 2024-02-19 08:30:21 +00:00
Dismissed
wbuezas added 1 commit 2024-02-19 12:24:03 +00:00
gitea/salix-front/pipeline/pr-dev This commit looks good Details
433444c869 Improvements and corrections
wbuezas dismissed jsegarra’s review 2024-02-19 12:24:03 +00:00
Reason:

New commits pushed, approval review dismissed automatically according to repository settings

wbuezas dismissed alexm’s review 2024-02-19 12:24:03 +00:00
Reason:

New commits pushed, approval review dismissed automatically according to repository settings

wbuezas added 1 commit 2024-02-19 12:26:42 +00:00
jsegarra approved these changes 2024-02-19 12:30:53 +00:00
wbuezas commented 2024-02-19 12:54:37 +00:00
Contributor
Copy Link
  • Agregué comentarios descriptivos en el codigo ya que considero que es un componente dentro de todo complejo y ayudará a poder revisarlo con mayor facilidad en el futuro
  • Encontre que el input de Kg estaba puesto como un input text y el patch solo admite numeros entonces lo converti en un input number y se solucionó el problema
  • Tuve que cambiar la logica y el momento de guardado de data cuando se fetchea informacion sobre la tabla para que tambien actualice correctamente originalRowDataCopy que se utiliza para checkear si la data cambio o no ya que antes se hacia en el mounted pero siempre se producen nuevos fetches cuando filtras entonces quedaba desactualizada y las comparativas para ver si cambio la data fallaban
  • Se cambio el ::v-deep class que está deprecado por el :deep(class)

Commit: 433444c869

- Agregué comentarios descriptivos en el codigo ya que considero que es un componente dentro de todo complejo y ayudará a poder revisarlo con mayor facilidad en el futuro - Encontre que el input de `Kg` estaba puesto como un `input text` y el `patch` solo admite numeros entonces lo converti en un `input number` y se solucionó el problema - Tuve que cambiar la logica y el momento de guardado de data cuando se fetchea informacion sobre la tabla para que tambien actualice correctamente `originalRowDataCopy` que se utiliza para checkear si la data cambio o no ya que antes se hacia en el mounted pero siempre se producen nuevos fetches cuando filtras entonces quedaba desactualizada y las comparativas para ver si cambio la data fallaban - Se cambio el `::v-deep class` que está deprecado por el `:deep(class)` Commit: https://gitea.verdnatura.es/verdnatura/salix-front/commit/433444c869b35c94c4903c4287bf429bcc9a0ce8
alexm approved these changes 2024-02-20 10:38:21 +00:00
alexm merged commit e86804ea0a into dev 2024-02-20 10:40:40 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
jsegarra
alexm
Labels
Clear labels   
bug

Something is not working

  
CR / Tests passed

CR / Tests passed

  
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
invalid

Something is wrong

  
Missing Tests

Missing Tests

  
wontfix

This won't be fixed

No Label
bug
CR / Tests passed
duplicate
enhancement
invalid
Missing Tests
wontfix
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
4 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: verdnatura/salix-front#189
No description provided.
Delete Branch ":feature/ExtraCommunityDragAndDrop"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?