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

Jump to bottom

[ENG-6183] Project list filtering #2345

Merged
merged 5 commits into from
Oct 7, 2024
Merged

[ENG-6183] Project list filtering #2345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bcba092
Update mirage for filtering
futa-ikeda Sep 27, 2024
8ffb312
Add filtering logic to object list
futa-ikeda Sep 27, 2024
f16d47e
Add total object count and filters to project list page
futa-ikeda Sep 27, 2024
05a1b85
Allow osf-layout to force a left/right column mode
futa-ikeda Sep 27, 2024
0fb432d
Mobile and tablet styling
futa-ikeda Sep 27, 2024
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
12 changes: 12 additions & 0 deletions app/institutions/dashboard/-components/institutional-dashboard-wrapper/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,18 @@
display: flex;
flex-direction: row;
flex-grow: 1;

> div {
// override OsfLayout styles for forcing drawer mode
max-width: none;
position: inherit;
}

> :global(.media-mobile),
> :global(.media-tablet) {
// allow drawer to be hidden offscreen
position: relative;
}
}

.heading-wrapper {
Expand Down
8 changes: 6 additions & 2 deletions app/institutions/dashboard/-components/institutional-dashboard-wrapper/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
<OsfLayout @backgroundClass='container' as |layout|>
<OsfLayout
@backgroundClass={{local-class 'container'}}
@forceMetadataGutterMode='drawer'
as |layout|
>
<layout.heading
local-class='heading-wrapper'
>
Expand Down Expand Up @@ -96,4 +100,4 @@
top=layout.top
main=layout.main
)}}
</OsfLayout>
</OsfLayout>
31 changes: 24 additions & 7 deletions app/institutions/dashboard/-components/object-list/component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

import InstitutionModel from 'ember-osf-web/models/institution';
import SearchResultModel from 'ember-osf-web/models/search-result';
import { Filter } from 'osf-components/components/search-page/component';

interface ValueColumn {
name: string;
Expand All @@ -25,24 +27,39 @@ export type ObjectListColumn = ValueColumn | LinkColumn | ComponentColumn;

interface InstitutionalObjectListArgs {
institution: InstitutionModel;
defaultQueryOptions: Record<string, any>;
defaultQueryOptions: Record<'cardSearchFilter', Record<string, string[]>>;
columns: ObjectListColumn[];
objectType: string;
}

export default class InstitutionalObjectList extends Component<InstitutionalObjectListArgs> {
@tracked filterObject = {}; // TODO: ENG-6183 Implement filter and type this
@tracked activeFilters: Filter[] = [];
@tracked page = ''; // TODO: ENG-6184 Implement pagination
@tracked sort = '-relevance'; // TODO: ENG-6184 Implement sorting

get queryOptions() {
return {
...this.args.defaultQueryOptions,
// TODO: ENG-6183 Implement filter
// chance that this may overwrite the defaultQueryOptions.check SearchPageComponent for reference
cardSearchFilter: this.filterObject,
const options = {
... this.args.defaultQueryOptions,
'page[cursor]': this.page,
'page[size]': 10, // TODO: ENG-6184 Implement pagination
sort: this.sort,

};
const fullQueryOptions = this.activeFilters.reduce((acc, filter: Filter) => {
const currentValue = acc.cardSearchFilter[filter.propertyPathKey];
acc.cardSearchFilter[filter.propertyPathKey] =
currentValue ? [...currentValue, filter.value] : [filter.value];
return acc;
}, options);
return fullQueryOptions;
}

@action
toggleFilter(property: Filter) {
if (this.activeFilters.includes(property)) {
this.activeFilters.removeObject(property);
} else {
this.activeFilters.pushObject(property);
}
}
}
61 changes: 57 additions & 4 deletions app/institutions/dashboard/-components/object-list/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,34 @@
.main-column {
width: 100%;
height: 100%;
@import 'app/styles/layout';

.top-bar-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem 0;
}

.total-object-count {
align-self: center;
font-size: large;

.total-object-number {
font-weight: bold;
}
}

.top-bar-button-wrapper {
button {
margin-left: 0.5rem;
}
}

.table-wrapper {
overflow: auto;
}

.object-table {
border-collapse: collapse;

th,
td {
padding: 10px 15px;
Expand All @@ -24,3 +46,34 @@
background: $color-bg-gray-blue-dark;
color: $color-text-white;
}

.right-wrapper {
min-width: 300px;
padding: 0.5rem;
}

.right-panel-header {
font-size: 1.5rem;
}

.close-button {
float: right;
}

.active-filter-list {
list-style: none;
padding-left: 0;
margin-top: 1rem;
border-top: 1px solid $color-border-gray;
border-bottom: 1px solid $color-border-gray;
}

.active-filter-item {
display: flex;
margin: 0.5rem 0.2rem;
justify-content: space-between;

button {
margin-right: -5px;
}
}
146 changes: 107 additions & 39 deletions app/institutions/dashboard/-components/object-list/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,123 @@
<IndexCardSearcher
@queryOptions={{@defaultQueryOptions}}
@queryOptions={{this.queryOptions}}
@sort={{this.sort}}
@page={{this.page}}
as |list|>
<Institutions::Dashboard::-Components::InstitutionalDashboardWrapper @institution={{@institution}} as |wrapper|>
<wrapper.main local-class='main-column'>
<wrapper.main local-class='main-column' as |main|>
{{#if list.searchObjectsTask.isRunning}}
<LoadingIndicator @dark={{true}} />
{{else}}
<table data-test-object-list-table local-class='object-table'>
<thead local-class='object-table-head'>
<tr>
{{#each @columns as |column|}}
<th local-class='object-table-header'>
{{column.name}}
</th>
{{/each}}
</tr>
</thead>

<tbody>
{{#each list.searchResults as |result|}}
<div local-class='top-bar-wrapper'>
<span local-class='total-object-count'>
<span local-class='total-object-number'>{{list.totalResultCount}}</span>
{{t 'institutions.dashboard.object-list.total-objects' objectType=@objectType}}
</span>
<div local-class='top-bar-button-wrapper'>
<Button
{{on 'click' main.toggleMetadata}}
>
<FaIcon @icon='filter' />
{{t 'institutions.dashboard.object-list.filter-button-label'}}
</Button>
</div>
</div>
<div local-class='table-wrapper'>
<table data-test-object-list-table local-class='object-table'>
<thead local-class='object-table-head'>
<tr>
{{#each @columns as |column|}}
<td>
{{#if (eq column.type 'link')}}
<OsfLink
@href={{call (fn column.getHref result)}}
@target='_blank'
>
{{call (fn column.getLinkText result)}}
</OsfLink>
{{else if (eq column.type 'doi')}}
<Institutions::Dashboard::-Components::ObjectList::DoiField
@searchResult={{result}}
/>
{{else if (eq column.type 'contributors')}}
<Institutions::Dashboard::-Components::ObjectList::ContributorsField
@searchResult={{result}}
@institution={{@institution}}
/>
{{else}}
{{call (fn column.getValue result)}}
{{/if}}
</td>
<th local-class='object-table-header'>
{{column.name}}
</th>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</thead>

<tbody>
{{#each list.searchResults as |result|}}
<tr>
{{#each @columns as |column|}}
<td>
{{#if (eq column.type 'link')}}
<OsfLink
@href={{call (fn column.getHref result)}}
@target='_blank'
>
{{call (fn column.getLinkText result)}}
</OsfLink>
{{else if (eq column.type 'doi')}}
<Institutions::Dashboard::-Components::ObjectList::DoiField
@searchResult={{result}}
/>
{{else if (eq column.type 'contributors')}}
<Institutions::Dashboard::-Components::ObjectList::ContributorsField
@searchResult={{result}}
@institution={{@institution}}
/>
{{else}}
{{call (fn column.getValue result)}}
{{/if}}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/if}}
</wrapper.main>
{{#if list.relatedProperties}}
<wrapper.right local-class='right-wrapper' as |right|>
<span local-class='right-panel-header'>
{{t 'institutions.dashboard.object-list.filter-heading'}}
</span>
<Button
aria-label={{t 'general.close'}}
@layout='fake-link'
@size='large'
local-class='close-button'
{{on 'click' right.toggleMetadata}}
>
<FaIcon @icon='times' />
</Button>
{{#if this.activeFilters}}
<ul
data-test-active-filters-list
local-class='active-filter-list'
>
{{#each this.activeFilters as |filter|}}
<li
data-test-active-filter='{{filter.propertyVisibleLabel}}-{{filter.value}}'
local-class='active-filter-item'
>
<span>
{{filter.propertyVisibleLabel}}:
{{filter.label}}
</span>
<Button
data-analytics-name='remove filter'
data-test-remove-active-filter='{{filter.propertyVisibleLabel}}-{{filter.label}}'
aria-label={{t 'search.active-filters.remove-filter' property=filter.propertyVisibleLabel label=filter.label}}
@layout='fake-link'
{{on 'click' (queue (fn this.toggleFilter filter) (perform list.searchObjectsTask))}}
>
<FaIcon @icon='times' />
</Button>
</li>
{{/each}}
</ul>
{{/if}}

{{#each list.relatedProperties as |property|}}
<SearchPage::FilterFacet
@cardSearchText={{this.cardSearchText}}
@cardSearchFilter={{this.queryOptions}}
@property={{property}}
@toggleFilter={{queue this.toggleFilter (perform list.searchObjectsTask)}}
/>
{{/each}}
</wrapper.right>
{{/if}}
</Institutions::Dashboard::-Components::InstitutionalDashboardWrapper>
</IndexCardSearcher>
Loading
Loading