[ovirt-devel] Sortable columns in UI

[Vojtech Szocs]

Thanks Malini & Einav :-)

Indeed, the patch only adds the necessary infrastructure; sorting must be
enabled for individual columns (either server-side or client-side sorting).

Currently, sort icon (triangle) is positioned to the left of column header
text. Alternatively, it could be positioned to the right-corner of column
header, but this would interfere with resize area (mouse area where cursor
changes, indicating that user can click and drag to resize).

Each column that supports sorting uses following (default) styling:
- mouse move over the header
  -> text color changes from black to dark grey
  -> cursor changes to "hand" (CSS cursor:pointer)
- using default GWT CellTable triangle icon

(Above default styling can be changed anytime.)

Vojtech


----- Original Message -----
> From: "Einav Cohen" <ecohen at redhat.com>
> To: "Vojtech Szocs" <vszocs at redhat.com>, "Malini Rao" <mrao at redhat.com>
> Cc: devel at ovirt.org
> Sent: Tuesday, May 13, 2014 4:54:38 PM
> Subject: Re: [ovirt-devel] Sortable columns in UI
> 
> Many thanks, Vojtech, for making it happen - it is highly appreciated!
> Clarifying that, to my understanding, just the infrastructure is in
> place - there aren't any sortable columns in the GUI yet. In order
> to turn columns in the GUI to sortable, need to follow Vojtech's
> instructions below for each relevant column.
> 
> ----
> Thanks,
> Einav
> 
> ----- Original Message -----
> > From: "Malini Rao" <mrao at redhat.com>
> > To: "Vojtech Szocs" <vszocs at redhat.com>
> > Cc: devel at ovirt.org
> > Sent: Tuesday, May 13, 2014 10:48:44 AM
> > Subject: Re: [ovirt-devel] Sortable columns in UI
> > 
> > Yay!!!! Thank you for making this happen. This is a basic need that users
> > have talked to me about in almost all UX conversations I have had so far!
> > 
> > ----- Original Message -----
> > From: "Vojtech Szocs" <vszocs at redhat.com>
> > To: devel at ovirt.org
> > Sent: Tuesday, May 13, 2014 10:37:51 AM
> > Subject: [ovirt-devel] Sortable columns in UI
> > 
> > Hey guys,
> > 
> > oVirt UI has been missing column sort functionality for quite a while
> > now, but here's some good news.
> > 
> > I've just merged patch [1] that adds support for both server-side and
> > client-side sorting of table columns. This patch adds the necessary
> > infra/API; column sorting must be enabled per-column for given table,
> > just like with column resizing.
> > 
> > [1] http://gerrit.ovirt.org/#/c/25910/
> > 
> > Currently, only TextColumnWithTooltip (and its subclasses) support
> > sorting, however this can easily be changed in future by having the
> > column class extend SortableColumn.
> > 
> > To enable sorting:
> > 
> >   // Enables server-side sorting via search query
> >   // ... SORTBY name ASC|DESC
> >   column.makeSortable("name"); // consider using shared constant
> > 
> >   -or-
> > 
> >   // Enables client-side sorting using comparator
> >   column.makeSortable(comparator);
> > 
> > In order for server-side sorting to work properly, corresponding
> > SearchableListModel must apply the search options while executing
> > "Search" query.
> > 
> > For example, in DataCenterListModel:
> > 
> >   @Override
> >   public boolean supportsServerSideSorting() {
> >     // Default is false
> >     return true;
> >   }
> > 
> >   @Override
> >   protected void syncSearch() {
> >     // Append "SORTBY" clause to search query
> >     String search = applySortOptions(getSearchString());
> >     ...
> >   }
> > 
> > If a model doesn't support server-side sorting, client-side sorting
> > will be used as fall back (assuming a comparator was provided).
> > 
> > In general, all main tab list models in WebAdmin utilize "Search"
> > query, so we can enable server-side sorting for columns that exist
> > within main tab tables.
> > 
> > As for sub tabs (whose list models generally don't use "Search"
> > query, but also don't support paging at the moment), these can
> > simply use client-side sorting, i.e. reuse existing comparators
> > defined in Linq class.
> > 
> > PS: I've attached a screenshot depicting sorted column in action.
> > 
> > Regards,
> > Vojtech
> > 
> > _______________________________________________
> > Devel mailing list
> > Devel at ovirt.org
> > http://lists.ovirt.org/mailman/listinfo/devel
> > _______________________________________________
> > Devel mailing list
> > Devel at ovirt.org
> > http://lists.ovirt.org/mailman/listinfo/devel
> > 
>