Updated: Comment #N

Problem/Motivation

It has been talked about for some time that the views listing page should have a search field to filter the view listings down. This is not a massive issue right now, as most of us are just using (pretty much) a vanilla D8 installation with (I think) under 10 default views. What about a larger site, with 50 views?

Proposed resolution

Add a search field on the views listing page, similar to that on the module listing, and block listing pages. It would use pretty much the same JS. I also think this should include the name AND description fields in the filtering.

Remaining tasks

Patch, reviews (including a review from at least one of the JS folks), testing.

JS could do with a bit more work - Currently if E.g. there are no disabled views after filtering the table header will still be there. We want to iterate over each table (I think) and if there are no rows after filtering, just hide the the table.

User interface changes

New dynamic search field on views listing page.

API changes

None

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

damiankloip’s picture

Here's an initial patch, it's definitely not perfect but should work ok as a start.

damiankloip’s picture

Status: Active » Needs review
Issue tags: +Needs manual testing

.

jibran’s picture

We also need screenshots :)

damiankloip’s picture

Yep, good plan. Let's do that!

Before filtering:

view-listing-1.png

Filtered:

view-listing-2.png

damiankloip’s picture

Issue tags: +Needs manual testing

!

jibran’s picture

Here is the screenshot with no result. I think it looks fine but @damiankloip suggested we should also hide the header. So adding the usability tag.

Views_s56eb3b189537d42.s2.simplytest.me_20130912-161541.png
and

Views_s56eb3b189537d42.s2.simplytest.me_20130912-161528.png

damiankloip’s picture

FileSize
859 bytes
4.84 KB

Just removed a couple of things from the js file.

Also, spoke to tim.plunkett and he thinks we should leave the tables there even if there are no results. This is the behaviour in the current patch. I think I agree.

dawehner’s picture

Title: Add text search functionality to views listing page » [Regression from D7] Add text search functionality to views listing page

Using the regression hammer.

tim.plunkett’s picture

Title: [Regression from D7] Add text search functionality to views listing page » Add text search functionality to views listing page
+++ b/core/modules/views_ui/js/views_ui.listing.js
@@ -0,0 +1,41 @@
+      var $rowsAndDetails, $rows;

This should be called $rowsAndHeaders.

Additionally, we should mimic the docblocks from the module filtering:

/**
 * Filters the module list table by a text input search string.
 *
 * Additionally accounts for multiple tables being wrapped in "package" details
 * elements.
 *
 * Text search input: input.table-filter-text
 * Target table:      input.table-filter-text[data-table]
 * Source text:       .table-filter-text-source
 */
Drupal.behaviors.tableFilterByText = {

Otherwise this looks great.

tim.plunkett’s picture

Title: Add text search functionality to views listing page » [Regression from D7] Add text search functionality to views listing page
dawehner’s picture

The patch looks reasonable ... but I have no clue about JS.

damiankloip’s picture

Made those changes, I didn't add the part about package details, as that's not relevant for us. I also just removed the $rowsAndDetails var, as really we just need $rows.

Status: Needs review » Needs work
Issue tags: -JavaScript, -Needs usability review, -Needs manual testing, -VDC

The last submitted patch, 2087327-12.patch, failed testing.

damiankloip’s picture

Status: Needs work » Needs review
Issue tags: +JavaScript, +Needs usability review, +Needs manual testing, +VDC

#12: 2087327-12.patch queued for re-testing.

jibran’s picture

Issue tags: -Needs manual testing

It works fine in #6 so removing the manual testing tag.

dawehner’s picture

Status: Needs review » Reviewed & tested by the community

Nice work!

nod_’s picture

Got an agreement with morten, we'll use data- attribute for targetting and selecting elements from JS so that themers can do anything they want to classes while keeping the js working.

So this one +1 but we need a follow-up to change it everywhere in core.

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Committed and pushed to 8.x. Thanks!

dawehner’s picture

NIce!!

tstoeckler’s picture

Status: Fixed » Needs review
FileSize
841 bytes

I hope I'm not the cause of any rage for re-opening this, but I think I found a valid reason to do do:

Unlike all other JS-filter-thingies in core (modules page, simpletest test page) this one is not hidden if there's no JS, even though it doesn't do anything when JS is disabled. This patch simply copies how the existing two forms do it behavior straight into ViewListController.

dawehner’s picture

Status: Needs review » Reviewed & tested by the community

The best thing about using data attributes for JS is that you can refactor the form api structures without heaving to change the javascript at the same time.

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Good catch, thanks!

Committed and pushed to 8.x.

damiankloip’s picture

Looks great. thanks!

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Updated issue summary.