Skip to content

Commit

Permalink
Added filter by category to article-list (#147)
Browse files Browse the repository at this point in the history
* added filter by category overlay for article-list

* fixed name of filter-by
  • Loading branch information
wachterjohannes authored and alexander-schranz committed Apr 20, 2017
1 parent 6311862 commit bcfce44
Show file tree
Hide file tree
Showing 8 changed files with 262 additions and 27 deletions.
4 changes: 4 additions & 0 deletions Controller/ArticleController.php
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,10 @@ public function cgetAction(Request $request)
$search->addQuery($boolQuery);
}

if (null !== ($categoryId = $request->get('categoryId'))) {
$search->addQuery(new TermQuery('excerpt.categories.id', $categoryId), BoolQuery::MUST);
}

if (null === $search->getQueries()) {
$search->addQuery(new MatchAllQuery());
}
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion Resources/public/dist/components/articles/list/main.js

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
/*
* This file is part of Sulu.
*
* (c) MASSIVE ART WebServices GmbH
*
* This source file is subject to the MIT license that is bundled
* with this source code in the file LICENSE.
*/

define(['jquery'], function($) {

'use strict';

var defaults = {
options: {
data: {
contact: null
},
selectCallback: function(data) {
},
matchings: [
{'name': 'name', 'content': 'Name'},
{'name': 'id', 'disabled': true},
{'name': 'children', 'disabled': true},
{'name': 'parent', 'disabled': true}
]
},
translations: {
title: 'sulu_article.category-selection-overlay.title'
},
templates: {
skeleton: [
'<div class="grid">',
' <div class="grid-row">',
' <div class="grid-col-12 category-selection-list"/>',
' </div>',
'</div>'
].join('')
}
};

return {

defaults: defaults,

initialize: function() {
var $overlayContainer = $('<div/>');
this.$el.append($overlayContainer);

this.data = this.options.data;

// start overlay
this.sandbox.start([{
name: 'overlay@husky',
options: {
el: $overlayContainer,
instanceName: 'category-selection',
openOnStart: true,
removeOnClose: true,
skin: 'medium',
slides: [
{
title: this.translations.title,
data: $(this.templates.skeleton({
translations: this.translations
})),
okCallback: this.okCallbackOverlay.bind(this)
}
]
}
}]);

this.sandbox.once('husky.overlay.category-selection.opened', function() {
this.sandbox.start([
{
name: 'datagrid@husky',
options: {
el: $overlayContainer.find('.category-selection-list'),
instanceName: 'category-selection',
url: '/admin/api/categories?locale=' + this.options.locale + '&flat=true&sortBy=name&sortOrder=asc',
resultKey: 'categories',
sortable: false,
selectedCounter: false,
preselected: !!this.options.data.category ? [this.options.data.category.id] : [],
paginationOptions: {
dropdown: {
limit: 20
}
},
childrenPropertyName: 'hasChildren',
viewOptions: {
table: {
cropContents: false,
noItemsText: 'sulu.category.no-categories-available',
showHead: false,
cssClass: 'white-box',
selectItem: {
type: 'radio',
inFirstCell: true
}
}
},
matchings: this.options.matchings
}
}
]);
}.bind(this));
},

/**
* OK callback of the overlay.
*/
okCallbackOverlay: function() {
this.sandbox.emit('husky.datagrid.category-selection.items.get-selected', function(ids, items) {
if (items.length > 0) {
this.data.categoryId = ids[0];
this.data.categoryItem = items[0];
}

this.options.selectCallback(this.data);
this.sandbox.stop();
}.bind(this), true);
}
};
});
95 changes: 73 additions & 22 deletions Resources/public/js/components/articles/list/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ define([
publishedWithDraft: 'public.published-with-draft',
filterMe: 'sulu_article.list.filter.me',
filterAll: 'sulu_article.list.filter.all',
filterBy: 'sulu_article.list.filter.by',
filterByAuthor: 'sulu_article.list.filter.by-author',
filterByCategory: 'sulu_article.list.filter.by-category',
openGhostOverlay: {
info: 'sulu_article.settings.open-ghost-overlay.info',
new: 'sulu_article.settings.open-ghost-overlay.new',
Expand Down Expand Up @@ -172,11 +173,14 @@ define([
this.$el.html(this.templates.list());

var urlArticleApi = '/admin/api/articles?sortBy=authored&sortOrder=desc&locale=' + this.options.locale + (this.options.type ? ('&type=' + this.options.type) : '');
var contactFilter = this.getContactFilterFromStorage();
var filterTitle = this.getContactFilterTitle(contactFilter.filterKey, contactFilter.contact);
var filter = this.getFilterFromStorage();
var filterTitle = this.getFilterTitle(filter.filterKey, filter.contact, filter.category);

if (!!contactFilter.contact) {
urlArticleApi += '&contactId=' + contactFilter.contact.id;
if (!!filter.contact) {
urlArticleApi += '&contactId=' + filter.contact.id;
}
if (!!filter.category) {
urlArticleApi += '&categoryId=' + filter.category.id;
}

this.sandbox.sulu.initListToolbarAndList.call(this,
Expand Down Expand Up @@ -341,7 +345,7 @@ define([
}.bind(this));

this.sandbox.on('husky.toolbar.articles.initialized', function() {
this.sandbox.emit('husky.toolbar.articles.item.mark', this.getContactFilterFromStorage().filterKey);
this.sandbox.emit('husky.toolbar.articles.item.mark', this.getFilterFromStorage().filterKey);
}.bind(this));
},

Expand All @@ -361,7 +365,7 @@ define([
]
}
},
contactIdFilter: {
filter: {
options: {
icon: 'filter',
group: 2,
Expand Down Expand Up @@ -396,9 +400,17 @@ define([
}.bind(this)
},
{
id: 'filterBy',
title: this.translations.filterBy + '...',
id: 'filterByAuthor',
title: this.translations.filterByAuthor + '...',
callback: this.openContactSelectionOverlay.bind(this)
},
{
divider: true
},
{
id: 'filterByCategory',
title: this.translations.filterByCategory,
callback: this.openCategorySelectionOverlay.bind(this)
}
]
}
Expand All @@ -420,15 +432,42 @@ define([
el: $container,
locale: this.options.locale,
data: {
contact: this.getContactFilterFromStorage.call(this).contact
contact: this.getFilterFromStorage().contact
},
selectCallback: function(data) {
this.applyFilterToList.call(
this,
'filterBy',
'filterByAuthor',
data.contactItem
);
this.sandbox.emit('husky.overlay.contact-selection.close');
}.bind(this)
}
}]);
},

/**
* Opens contact selection overlay.
*/
openCategorySelectionOverlay: function() {
var $container = $('<div/>');

this.$el.append($container);

this.sandbox.start([{
name: 'articles/list/category-selection@suluarticle',
options: {
el: $container,
locale: this.options.locale,
data: {
category: this.getFilterFromStorage().category
},
selectCallback: function(data) {
this.applyFilterToList.call(
this,
'category',
null,
data.categoryItem
);
}.bind(this)
}
}]);
Expand All @@ -440,15 +479,23 @@ define([
*
* @param {string} filterKey
* @param {Object} contact
* @param {Object} category
*/
applyFilterToList: function(filterKey, contact) {
this.storage.set('contactFilter', {
applyFilterToList: function(filterKey, contact, category) {
this.storage.set('filter', {
contact: contact,
category: category,
filterKey: filterKey
});
this.sandbox.emit('husky.datagrid.articles.url.update', {contactId: contact ? contact.id : null});
this.sandbox.emit('husky.toolbar.articles.button.set', 'contactIdFilter', {
title: this.getContactFilterTitle(filterKey, contact)

var update = {
contactId: contact ? contact.id : null,
categoryId: category ? category.id : null
};

this.sandbox.emit('husky.datagrid.articles.url.update', update);
this.sandbox.emit('husky.toolbar.articles.button.set', 'filter', {
title: this.getFilterTitle(filterKey, contact, category)
});
},

Expand All @@ -457,30 +504,34 @@ define([
*
* @returns {Object}
*/
getContactFilterFromStorage: function() {
return this.storage.getWithDefault('contactFilter', {filterKey: 'all', contact: null});
getFilterFromStorage: function() {
return this.storage.getWithDefault('filter', {filterKey: 'all', contact: null, category: null});
},

/**
* Returns the title for the contact filter button.
*
* @param {String} filterKey
* @param {Object} contact
* @param {Object} category
* @return {String}
*/
getContactFilterTitle: function(filterKey, contact) {
getFilterTitle: function(filterKey, contact, category) {
var title = '';

switch(filterKey) {
case 'all':
title = this.translations.filterAll;
break;
case 'filterBy':
title = this.translations.filterBy + ' ' + contact.firstName + ' ' + contact.lastName
case 'filterByAuthor':
title = this.translations.filterByAuthor + ' ' + contact.firstName + ' ' + contact.lastName;
break;
case 'me':
title = this.translations.filterMe;
break;
case 'category':
title = this.translations.filterByCategory + ' ' + category.name;
break;
}

return title;
Expand Down
8 changes: 6 additions & 2 deletions Resources/translations/sulu/backend.de.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,14 @@
<source>sulu_article.list.filter.all</source>
<target>Alle</target>
</trans-unit>
<trans-unit id="list-filter-03" resname="sulu_article.list.filter.by">
<source>sulu_article.list.filter.all</source>
<trans-unit id="list-filter-03" resname="sulu_article.list.filter.by-author">
<source>sulu_article.list.filter.by-author</source>
<target>Nur von</target>
</trans-unit>
<trans-unit id="list-filter-04" resname="sulu_article.list.filter.by-category">
<source>sulu_article.list.filter.by-category</source>
<target>Nur Kategorie</target>
</trans-unit>
<trans-unit id="contact-selection-overlay-01" resname="sulu_article.contact-selection-overlay.title">
<source>sulu_article.contact-selection-overlay.title</source>
<target>Artikel nach Kontakt filtern</target>
Expand Down
8 changes: 6 additions & 2 deletions Resources/translations/sulu/backend.en.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,14 @@
<source>sulu_article.list.filter.all</source>
<target>All</target>
</trans-unit>
<trans-unit id="list-filter-03" resname="sulu_article.list.filter.by">
<source>sulu_article.list.filter.all</source>
<trans-unit id="list-filter-03" resname="sulu_article.list.filter.by-author">
<source>sulu_article.list.filter.by-author</source>
<target>Only from</target>
</trans-unit>
<trans-unit id="list-filter-04" resname="sulu_article.list.filter.by-category">
<source>sulu_article.list.filter.by-category</source>
<target>Only Category</target>
</trans-unit>
<trans-unit id="contact-selection-overlay-01" resname="sulu_article.contact-selection-overlay.title">
<source>sulu_article.contact-selection-overlay.title</source>
<target>Filter article by contact</target>
Expand Down
Loading

0 comments on commit bcfce44

Please sign in to comment.