Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jeremy/grants explorer sort dropdown improvements #9723

Merged
merged 2 commits into from
Nov 24, 2021
Merged

jeremy/grants explorer sort dropdown improvements #9723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2058855
disable search input, ensure user can close by clicking outside menu,…
Nov 23, 2021
9cd1a49
remove 'Most Relevant' option, update tests
Nov 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app/assets/v2/js/grants/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,6 @@ if (document.getElementById('grants-showcase')) {
{label: 'A to Z', value: 'title'},
{label: 'Z to A', value: '-title'},
{group: 'Current Round', label: null},
{label: 'Most Relevant', value: ''},
{label: 'Highest Amount Raised', value: '-amount_received_in_round'},
{label: 'Highest Contributor Count', value: '-positive_round_contributor_count'},
{group: 'All-Time', label: null},
Expand Down
32 changes: 22 additions & 10 deletions app/grants/templates/grants/shared/top-filters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,29 @@
<div class="d-flex align-items-baseline" >
<label class="heading mr-2">{% trans "Sort by" %}</label>
{% if is_staff %}
<v-select class="vselect-clean rounded-pill" style="min-width:230px; border: 1px solid #ced4da;" id="experience_level" :clearable="false" :options="selectOptions.concat(adminOptions)" :selectable="(option) => !option.hasOwnProperty('group')" placeholder="Sort by" v-model="params.sort_option" :reduce="obj => obj.value" @input="fetchGrants(1)" >
<v-select class="vselect-clean rounded-pill"
style="min-width:230px; border: 1px solid #ced4da;"
id="experience_level"
:options="selectOptions.concat(adminOptions)"
:searchable="false"
:clearable="false"
:selectable="(option) => !option.hasOwnProperty('group')"
placeholder="Sort by"
v-model="params.sort_option"
:reduce="obj => obj.value"
@input="fetchGrants(1)" >
{% else %}
<v-select class="vselect-clean rounded-pill" style="min-width:230px; border: 1px solid #ced4da;" id="experience_level" :clearable="false" :options="selectOptions" :selectable="(option) => !option.hasOwnProperty('group')" placeholder="Sort by" v-model="params.sort_option" :reduce="obj => obj.value" @input="fetchGrants(1)" >
<v-select class="vselect-clean rounded-pill"
style="min-width:230px; border: 1px solid #ced4da;"
id="experience_level"
:options="selectOptions"
:searchable="false"
:clearable="false"
:selectable="(option) => !option.hasOwnProperty('group')"
placeholder="Sort by"
v-model="params.sort_option"
:reduce="obj => obj.value"
@input="fetchGrants(1)" >
{% endif %}
<template #option="{ group, label }">
<div v-if="group">
Expand All @@ -28,14 +48,6 @@
</div>
[[label]]
</template>
<template #search="{attributes, events}">
<input
class="vs__search"
v-bind="attributes"
v-on="events"
disabled=""
/>
</template>
</v-select>
</div>
</div>
Expand Down
14 changes: 4 additions & 10 deletions cypress/integration/grants/test_grant_explorer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,11 @@ describe('Grants Explorer page', () => {
.should('contain', 'A to Z')
.should('contain', 'Z to A')
.should('contain', 'Current Round')
.should('contain', 'Most Relevant')
.should('contain', 'Highest Amount Raised')
.should('contain', 'Highest Contributor Count')
.should('contain', 'All-Time');
cy.get('.vs__dropdown-menu').find('#vs3__option-14').should('contain', 'Highest Amount Raised'); // need to be more specific to test two elements with same name
cy.get('.vs__dropdown-menu').find('#vs3__option-15').should('contain', 'Highest Contributor Count');
cy.get('.vs__dropdown-menu').find('#vs3__option-13').should('contain', 'Highest Amount Raised'); // need to be more specific to test two elements with same name
cy.get('.vs__dropdown-menu').find('#vs3__option-14').should('contain', 'Highest Contributor Count');
});

it('divides the sort options into category names with disabled labels', () => {
Expand Down Expand Up @@ -125,11 +124,6 @@ describe('Grants Explorer page', () => {
// Options in Current Round category
cy.get('.vselect-clean').click();

cy.get('.vs__dropdown-menu').contains('Most Relevant').click();
cy.url().should('contain', 'sort_option='); // The value of this option is purposely set to empty string (see app/assets/v2/js/grants/index.js)

cy.get('.vselect-clean').click();

cy.get('.vs__dropdown-menu').contains('Highest Amount Raised').click();
cy.url().should('contain', 'sort_option=-amount_received_in_round');

Expand All @@ -141,12 +135,12 @@ describe('Grants Explorer page', () => {
// Options in All-Time category
cy.get('.vselect-clean').click();

cy.get('.vs__dropdown-menu').find('#vs3__option-14').contains('Highest Amount Raised').click(); // Need to be more specific here because the same options exist above
cy.get('.vs__dropdown-menu').find('#vs3__option-13').contains('Highest Amount Raised').click(); // Need to be more specific here because the same options exist above
cy.url().should('contain', 'sort_option=-amount_received');

cy.get('.vselect-clean').click();

cy.get('.vs__dropdown-menu').find('#vs3__option-15').contains('Highest Contributor Count').click();
cy.get('.vs__dropdown-menu').find('#vs3__option-14').contains('Highest Contributor Count').click();
cy.url().should('contain', 'sort_option=-contributor_count');

// Admin options
Expand Down