GridStack sorting with a visual transition effect

[Artgit]

First of all, thank you very much for making a great components for Vaadin framework.

I have a question regarding GridStack component.

I need to implement a vertical list of Vaadin components.. lets say Panels. These panels will be ordered from top to bottom according to some math in my backend business logic.

User can change some data on the page and immediately thereafter these panels(the same set) should be reordered. I want to visualy show this reordering process with a nice transition effect.. something like we have in Isotope JavaScript component(Sort functionality).

So, ideally for example I would provide some list of IDs to GridStack component and based on this list GridStack will reorder an attached components with a cool transition effect.

Is it possible with a GridStack ?

Thanks, Alex

[alump]

Just keep track of your component in GridStack. then you can call gridStack.moveComponent(component, newXslot, newYslot). Gridstack will leave it to client to resolve if you have overlapping components, so better to update position of all components in gridstack if you want to keep always wanted order.

As example..

// create layout
gridStack = new GridStack().setAnimate(true).setCellHeight(HEIGHT_OF_ITEMS_IN_PIXELS);

// ... add your components to layout

gridStack.addComponent(aComponent, 0, 0);
gridStack.addComponent(bComponent, 0, 1);
gridStack.addComponent(cComponent, 0, 2);

// ... later you can change the order with ...

gridStack.moveComponent(aComponent, 0, 2);
gridStack.moveComponent(bComponent, 0, 0);
gridStack.moveComponent(cComponent, 0, 1);

If I understood you requirement correctly. This example only used vertical dimension (no columns).

[Artgit]

Thanks for your answer!

Right now, thanks to your example I made some progress.

I have added a following code:

    HorizontalSplitPanel sp = new HorizontalSplitPanel();
    sp.setSizeFull();
    sp.addStyleName("large");               
    sp.setSplitPosition(300, Unit.PIXELS);
    sp.setFirstComponent(getAccordion("Normal"));

    GridStackLayout decisionPanel = new GridStackLayout().setAnimate(true).setCellHeight(40);

    for (int i = 0; i < 10; i++) {          
        decisionPanel.addComponent(tooltips("" + i), 0, i);
    }

    sp.setSecondComponent(decisionPanel);

Now, my HorizontalSplitPanel with GridStackLayout as a second component looks like:

Please note that I'm going to add 10 "tooltips" test panels but GridStackLayout display only 5 of them.

How to show rest of the components ?

Also, is any way to keep gaps between components after browser resize ?

As you can see from the image below right now after browser resize these gaps disappear.

[alump]

Try setting height of GridStackLayout to 100%. Now it's height is undefined, so maybe it just doesn't grow to fill the whole available space.

Maybe you actually want to set it also 100% in width. So... decisionPanel.setSizeFull();

[Artgit]

I have added

        decisionPanel.setSizeFull();
        decisionPanel.setHeight("100%");

but it doesn't help

[alump]

I wrote this simple test, and it works well as far as I see... http://app.siika.fi/GridStackDemo/#!split

Code of this is here: https://github.com/alump/GridStack/blob/master/gridstack-demo/src/main/java/org/vaadin/alump/gridstack/demo/SplitView.java

[alump]

One note... I should have called new GridStack(1)... not just new GridStack(), but that just makes the item to take the full width, now it's only 1/3th as default amount of columns is 3. Updated the code (it's now single column), but not the demo on my server (it's still 3 columns, as in 2 empty).

[Artgit]

Thanks ! I have added SplitView into my application and have the same result as previously(I have reduced the number in loop to 10 from 30 and it still shows only 5 Label elements.. in case of 30 it shows 17 Label elements):

Also, this is screen after Reorder:

As you can see from my screenshots, I have added this SplitView into the standard Valo Demo application https://github.com/vaadin/valo-demo because I want to reuse this application template.. may be reason is in this.. in some style overlapping or something like that..

[Artgit]

This http://app.siika.fi/GridStackDemo/#!split is exactly what I need !! It will be a main component in my application. Could you please take a look how to combine it with Valo Demo app ? I have already implemented the back-end of my application but still struggle with UI.. this is why I have chosen Vaadin. Right now this sorting component is my serious blocker.

[alump]

It kinda looks like my addon's theme parts are not compiled theme. Check my demo project. Your project should update addons.scss file to have addon's mixin included. And then your styles.scss should import and include addons.

https://github.com/alump/GridStack/blob/master/gridstack-demo/src/main/webapp/VAADIN/themes/demo/styles.scss

and addons.scss should be automatically generated by maven if you use that. Or if you just have ivy eclipse project, then you can run vaadin plugin's "update theme" command.

More info: https://vaadin.com/docs/-/part/framework/themes/themes-creating.html

[Artgit]

It is a pure magic ! Thanks a lot ! Finally, thanks to your help I got it working !

[alump]

No problem. Closing issue.

[Artgit]

Sorry for asking here but could you please take a look into my new questions here for GridStack https://github.com/alump/GridStack/issues ?