Refactoring NestedList builder

ioleo commented 9 years ago

The NestedList builder needs refactoring. Together with @ksn135 we've discussed on gitter how it shoud work. Here is a brief summary:

remove the "drag & drop" move node functionality - the list's purpose is display only
change the javascript library responsible for tree expand/collapse
implement filters and scopes (see below)
implement sorting (see below)
implement pagination (how? need ideas)
Filters and scopes

When filtered by a column, display items matching the query and all it's parents. The parents (that don't match the query, but are shown becouse of their children) should be greyed out.

Sorting

When sorted by a column, multisort each level. Eg.:

Name           | other columns...
-----------------------------------------
Animals
>    Bee
>    Beefalo
>    Rhino
Birds
>    Eagle
>    Pigeon
Fish
>    Salmone
>    Sardine

Pagination

We still need an idea how to paginate the results. It seems simple, if all nodes are at the same nesting level (example above), but what if we have such data:

ABC
>   A
    > A1
    > A2
>  B
   > B1
      > B11
      > B12
   > B2
     > B21
        > B211
            > B2111

Say, we want 5 items per page... what do we show? Any ideas?

ksn135 commented 9 years ago

@loostro I think in your example we should repeat parents on each page, don't break children (never show new upper-level node if ever item limit is not reached), and show not exactly 5 items but similar quantity based on deepest child item level (sorry of my English :fearful: ). If we have node with 20 children on the same level, it will take 4 pages by 5 items and same parent node on each page.

Page1:
ABC
>   A
    > A1
    > A2

Page2:
ABC
>  B
   > B1
      > B11
      > B12

Page3:
ABC
>  B
   > B2
     > B21
        > B211
            > B2111

sescandell commented 9 years ago

Hi all,

What if, for a first release, we simply implement a "simple" nested list page? Without worrying about pagination neither filtering? Just providing "simple" functionnalities like:

adding a child
removing a child
sorting?
adding a new element

And, another question regarding nestedlist, do we constraint developers to use GedmoExtension (for Doctrine, I don't know the equivalent for Propel)?

Basically, for a first release, I'm just wondering if thinking about something fully functionnal with all features is not "too big" for a v1. All depends of the roadmap maybe...

ioleo commented 9 years ago

@sescandell As I wrote above, I think we should remove the "drag & drop move item" feature, becouse as list is... a list. A way quickly to find an item (among, possibly, thousand others). So.. the "drag and drop move" does not fit this purpose. To change/move/edit data we have new and edit builders.

So.. for the same reason, I think "adding a child" and "removeing a child" should not be part of list builder.

Note: you can easily create a custom object action "add child" and "remove child" and display a button in "Actions" column.

And for the same reason, I think that filters, sorting, scopes and pagination are essential to list builder. Also.. it would be nice to make "list builder" and "nested list builder" as similar (in purpose, features and design) as possible.

ioleo commented 9 years ago

@sescandell About the ORMs.. Propel has tree behaviour built-in. The Gedmo Extensions provide Tree behaviour (and other) for both DoctrineORM and DoctrineODM.

I don't know if there is any other library for Doctrine. I think Gedmo is the only one (but i might be wrong here).

ioleo commented 9 years ago

@ksn135 I have trouble visualising your proposal. Let me make another tree.

Games
>   Gadgets
    >   Figurines
    >   T-shirts
    >   Cups
    >   Posters
    >   Others
>   Games for consoles
    >   Game Boy Advance
        >   Beat'em-up
        >   Platform
        >   Adventure
        >   Role Playing (RPG)
        >   Sports
        >   Shooters
        >   Racing
        >   Others
    >   Game Boy Classic
    >   Game Boy Color
        >   Platform
        >   Adventure
        >   Others
>   Microsoft Xbox
    >   Beat'em-up
    >   Action
    >   Adventure
    >   Role Playing (RPG)
    >   Sports
    >   Shooters
    >   Racing
    >   Others
>   Microsoft Xbox 360
    >   Beat'em-up
    >   Action
    >   Musical
    >   Platform
    >   Adventure
    >   Role Playing (RPG)
    >   Sports
    >   Shooters
    >   Racing
    >   Others
>   Microsoft Xbox One
    >   Action
    >   Musical
    >   Adventure
    >   Sports
    >   Racing
    >   Others
>   Nintendo 3DS
>   Nintendo 64
>   Nintendo DS
    >   Action
    >   Logic
    >   Platform
    >   Adventure
    >   Sports
    >   Others
>   Nintendo GameCube
>   Nintendo (SNES & NES)
    >   NES
    >   SNES

What do we show, when pagination is 10 results per page?
What do we show, when we filter by name like %Nintendo%?

These are, in my opionion, non-trivial problems. I have no good idea how to solve this.

@neoshadybeat if you have time, maybe you have some good ideas?

ioleo commented 9 years ago

@ksn135 to the second question (filter by %Nintendo%) I mean...

does the result include:

>   Nintendo (SNES & NES)

or

>   Nintendo (SNES & NES)
    > NES
    > SNES

Or to repharse... if a node is matched, and it has children... do we show children too? Or not?

And if not.. do we indicate somehow, that this node has some children, that are hidden from the results becouse they don't match the filter?

ksn135 commented 9 years ago

@loostro Wow! Big tree... ))) For 10 items per page paging mode (never go to up-level, move to next page):

Page1:
Games
>   Gadgets
    >   Figurines
    >   T-shirts
    >   Cups
    >   Posters
    >   Others
Page2:
Games
>   Games for consoles
    >   Game Boy Advance
        >   Beat'em-up
        >   Platform
        >   Adventure
        >   Role Playing (RPG)
        >   Sports
        >   Shooters
        >   Racing
        >   Others
Page3:
Games
>   Games for consoles
    >   Game Boy Classic
    >   Game Boy Color
        >   Platform
        >   Adventure
        >   Others
Page4:
Games
>   Microsoft Xbox
    >   Beat'em-up
    >   Action
    >   Adventure
    >   Role Playing (RPG)
    >   Sports
    >   Shooters
    >   Racing
    >   Others
Page5:
Games
>   Microsoft Xbox 360
    >   Beat'em-up
    >   Action
    >   Musical
    >   Platform
    >   Adventure
    >   Role Playing (RPG)
    >   Sports
Page6:
Games
>   Microsoft Xbox 360
    >   Shooters
    >   Racing
    >   Others
Page7:
Games
>   Microsoft Xbox One
    >   Action
    >   Musical
    >   Adventure
    >   Sports
    >   Racing
    >   Others
Page8:
Games
>   Nintendo 3DS
>   Nintendo 64
>   Nintendo DS
    >   Action
    >   Logic
    >   Platform
    >   Adventure
    >   Sports
    >   Others
Page9:
Games
>   Nintendo GameCube
>   Nintendo (SNES & NES)
    >   NES
    >   SNES

Filter tree by word "Nintendo" (I think we should show children):

Games
>   Nintendo 3DS
>   Nintendo 64
>   Nintendo DS
    >   Action
    >   Logic
    >   Platform
    >   Adventure
    >   Sports
    >   Others
>   Nintendo GameCube
>   Nintendo (SNES & NES)
    >   NES
    >   SNES

Filter tree by word "Action":

Games
>   Microsoft Xbox
    >   Action
>   Microsoft Xbox 360
    >   Action
>   Microsoft Xbox One
    >   Action
>   Nintendo DS
    >   Action

ioleo commented 9 years ago

@ksn135 Thanks. Now I understand what you meant. I'm not sure if it's a good approach... I can't think of any better alternative :D I think the end-user (which is, most likely, not a computer-geek) will not understand, why some pages he gets 10 results, other pages only 7.

On the other hand, your proposal is (at the moment) the only one, and as such, it's the best :P

I don't know.. maybe others have some ideas or comments on this?

ksn135 commented 9 years ago

the only one, and as such, it's the best :P

:+1: :smile:

ioleo commented 9 years ago

@ksn135 I was thinking of vertical pagination

Max 5 items per "level":

Games
>   Gadgets
    >   Figurines
    >   T-shirts
    >   Cups
    >   Posters
    >   Others
>   Games for consoles
    >   Game Boy Advance
        >   Beat'em-up
        >   Platform
        >   Adventure
        >   Role Playing (RPG)
        >   Sports
        >   (3 more)
    >   Game Boy Classic
    >   Game Boy Color
        >   Platform
        >   Adventure
        >   Others
>   Microsoft Xbox
    >   Beat'em-up
    >   Action
    >   Adventure
    >   Role Playing (RPG)
    >   Sports
    >   (3 more)
>   Microsoft Xbox 360
    >   Beat'em-up
    >   Action
    >   Musical
    >   Platform
    >   Adventure
    >   (3 more)
>   Microsoft Xbox One
    >   Action
    >   Musical
    >   Adventure
    >   Sports
    >   Racing
    >   (1 more)
> (4 more)

But OK, this is nice "initial view" (page 1).... but what would be the equivalent of "go to page 2"? And I'm stuck here :P

ksn135 commented 9 years ago

@loostro well, I think we should rethink this in concept of categories and goods. We have a number (the big one) of goods and connected categories (NestedList). May be we should display categories like breadcrumbs ? Did you get my POV ?

Games / Gadgets / 
    >   Figurines
    >   T-shirts
    >   Cups
    >   Posters
    >   Others
Games / Games for consoles / Game Boy Advance
        >   Beat'em-up
        >   Platform
        >   Adventure
        >   Role Playing (RPG)
        >   Sports
        >   Shooters
        >   Racing
        >   Others
Games / Games for consoles / Game Boy Classic
        >   Platform
        >   Adventure
        >   Others
Games / Microsoft Xbox
    >   Beat'em-up
    >   Action
    >   Adventure
    >   Role Playing (RPG)
    >   Sports
    >   Shooters
    >   Racing
    >   Others
Games / Microsoft Xbox 360
    >   Beat'em-up
    >   Action
    >   Musical
    >   Platform
    >   Adventure
    >   Role Playing (RPG)
    >   Sports
    >   Shooters
    >   Racing
    >   Others
Games /  Microsoft Xbox One
    >   Action
    >   Musical
    >   Adventure
    >   Sports
    >   Racing
    >   Others
Games / Nintendo DS
    >   Action
    >   Logic
    >   Platform
    >   Adventure
    >   Sports
    >   Others
Games / Nintendo (SNES & NES)
    >   NES
    >   SNES

ioleo commented 9 years ago

That's a nice idea. I like it. User does not have to "click" to collapse/expand nodes. He gets his result immidietly. And we can paginate on leaf nodes. Say, we make 20 items per page. That would look like

Page 1:

Games / Gadgets / 
    >   Figurines
    >   T-shirts
    >   Cups
    >   Posters
    >   Others
Games / Games for consoles / Game Boy Advance
    >   Beat'em-up
    >   Platform
    >   Adventure
    >   Role Playing (RPG)
    >   Sports
    >   Shooters
    >   Racing
    >   Others
Games / Games for consoles / Game Boy Classic
    >   Platform
    >   Adventure
    >   Others
Games / Microsoft Xbox
    >   Beat'em-up
    >   Action
    >   Adventure
    >   Role Playing (RPG)
    >  (4 more on the next page...)

Page 2 (notice breadcrumb is repeated, becouse the Games / Microsoft Xbox items were into two pages)

Games / Microsoft Xbox
    >   (4 more on the previous page...)
    >   Sports
    >   Shooters
    >   Racing
    >   Others
Games / Microsoft Xbox 360
    >   Beat'em-up
    >   Action
    >   Musical
    >   Platform
    >   Adventure
    >   Role Playing (RPG)
    >   Sports
    >   Shooters
    >   Racing
    >   Others
Games /  Microsoft Xbox One
    >   Action
    >   Musical
    >   Adventure
    >   Sports
    >   Racing
    >   Others

Page 3 (note: Games / Microsoft Xbox One fit into page 2, so it does not need to be repeated)

Games / Nintendo DS
    >   Action
    >   Logic
    >   Platform
    >   Adventure
    >   Sports
    >   Others
Games / Nintendo (SNES & NES)
    >   NES
    >   SNES

We can even add additional rows (page 1 end, page 2 start) to indicate that a category was split between pages.

ioleo commented 9 years ago

However... this actually does not fit our current model... but I'll write more about that tomorrow. My wife is gonna kill me. I said "ill be in 5" like 20 minutes ago.

ksn135 commented 9 years ago

Well, about current model... It's just tree, do not overcomplicate it. No pagination at all is fine, nodes collapsed at startup and children loaded via ajax on click. That's sounds good to me.

sescandell commented 9 years ago

Hi,

@sescandell As I wrote above, I think we should remove the "drag & drop move item" feature, becouse as list is... a list. A way quickly to find an item (among, possibly, thousand others). So.. the "drag and drop move" does not fit this purpose.

I wasn't talking about the "drag'n'drop" feature. In my opinion, it was not working well enough to be integrated. At least, for a first time...

To change/move/edit data we have new and edit builders. So.. for the same reason, I think "adding a child" and "removeing a child" should not be part of list builder.

From my point of view (and its only mine), the purpose of a nested list (also called tree view are we agree?) or "parent / child" view is to be able to rerganize elements and being able to easily create / remove childs from it... If I have to use the new / edit page to change / select my parent... well a classic list view is suffisent enough.

So, in my opinion, Nested List doesn't have to be like "classic" lists. Otherwise, just stay as classic list and do what Wordpress or Sonata do: use a simple list, just order by left field and don't borrow about "should I show parent or not" and keep pagination as a classic list.

ioleo commented 9 years ago

OK, so we have 2 approaches, that nested list should be:

1) just like "classic list" - tree view + filter + scope + pagination etc

2) special case - tree view + drag&drop edit (no pagination, filter/scope only root items?)

I'm OK with both approaches. Which one we should choose? If we drop pagination support (2) the implementation will probably be much easier. We could still implement some filtering.

Maybe NestedList should have Client-Side filtering (only on visible columns) with JS? That would be much easier to implement.

ioleo commented 9 years ago

Opened a vote in #38

ioleo commented 9 years ago

See reference above when working on nested list's filters.

ioleo commented 9 years ago

During todays discussion with @StudioEcho I had some fresh ideas that, I think, solve all problems we've discussed here ^^

Brief summary

use mottie Tablesorter with Bootstrap theme for NestedList display
render initial data in list template and load it on tablesorter init
use AJAX to fetch new data from the server on Filter/Sort/Change Page actions
add a "shelf" div below the table, as a placeholder for dragged rows

Given such tree-structued data:

> John Senior Fernandez
> > John Junior Fernandez
> > > Katie Fernandez
> > Ivy Fernandez
> > > Mike Fernandez
> Dave Smith
> > Kate Smith
> > Will Smith

If we filter by Fernandez we should see:

> John Senior Fernandez
> > John Junior Fernandez
> > > Katie Fernandez
> > Ivy Fernandez
> > > Mike Fernandez

If we want to move Katie Fernandez below Ivy Fernandez we can simply use "Standard move":

Drag row Katie Fernandez
Move over row Ivy Fernandez
Drop row

Step 3. will trigger an AJAX request. If move is successful, the server will respond with new table data and the client will update the table. If not, a message will be displayed, informing the user that action failed.

If we want to move Katie Fernandez below Will Smith we cannot use "Standard move", becouse Will Smith is not visible in the current view, so we cannot hover over him, instead we use "Advanced move":

Drag row Katie Fernandez
Move over "shelf" placeholder
Drop row
Change filter to Smith
Drag row from the "shelf"
Move over row Will Smith
Drop row

Step 7. will trigger an AJAX request. If move is successful, the server will respond with new table data and the client will update the table. If not, a message will be displayed, informing the user that action failed.

Important note, after successful move, Katie Fernandez will not be displayed in the refreshed table, becouse she does not meet current filter criteria (filter by Smith). To avoid user confusion, after each move action, the server will check if moved item is in the response results. If it is, the table will be simply updated. If not, the table will be updated too, but a message "Row (item name) has been succesfully moved, but its not displayed, becouse it does not meet current filter/pagination criteria. Change the filter critera or page to see it."

ndoulgeridis commented 8 years ago

Hello, I am kinda lost, now the latest version supports drag & drop because I don;t see such option in my nested list I have created. Do I need to do something special in config to enable drag & drop?

symfony2admingenerator / GeneratorBundle