Commit cbea8267 authored by Sandro Lutz's avatar Sandro Lutz Committed by lic
Browse files

Add placeholder for empty list (FilteredListPage)

parent 85c29020
......@@ -5,6 +5,7 @@
"close": "Schliessen",
"loading": "Laden...",
"loading_error": "Ein Fehler ist während dem Laden der Daten aufgetreten.",
"empty_list": "Es sind keine Einträge zum Anzeigen vorhanden.",
"load_more": "Mehr laden",
"load_more_error": "Laden fehlgeschlagen. Nochmal versuchen?",
"Menu": "Menu",
......
......@@ -5,6 +5,7 @@
"loading": "Loading...",
"close": "close",
"loading_error": "Error while loading data.",
"empty_list": "There are no items to show.",
"load_more": "Load more",
"load_more_error": "Loading failed. Try again?",
"Menu": "Menu",
......
......@@ -92,6 +92,7 @@
@media @mobile {
border: none;
padding: 1em;
min-height: 40vh;
}
.loading {
......@@ -101,6 +102,16 @@
transform: translateX(-50%) translateY(-50%);
}
.empty-list {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 1.2em;
text-align: center;
width: calc(100% - 2em);
}
.list_header {
position: sticky;
top: 24px;
......
......@@ -25,6 +25,15 @@ export default class EventList extends FilteredListPage {
super.oninit(vnode, vnode.attrs.eventId);
}
// eslint-disable-next-line class-methods-use-this
_hasItems() {
return (
controller.pastEvents.length > 0 ||
controller.openRegistrationEvents.length > 0 ||
controller.upcomingEvents.length > 0
);
}
// eslint-disable-next-line class-methods-use-this
_isItemLoaded(itemId) {
return controller.isEventLoaded(itemId);
......
......@@ -176,6 +176,18 @@ export class FilteredListPage {
/* eslint-disable class-methods-use-this, no-unused-vars */
/**
* Checks if the page has any items to show.
*
* You should replace this function if you need additional behavior!
*
* @return {boolean}
* @protected
*/
_hasItems() {
return true;
}
/**
* Checks if the item with the given id is loaded
*
......@@ -439,18 +451,25 @@ export class FilteredListPage {
if (this.dataStore.listState === LIST_LOADING) {
return m('div.loading', m(Spinner, { show: true, size: '96px' }));
} else if (this.dataStore.listState === LIST_LOADED) {
let pinnedList;
if (this._hasItems()) {
let pinnedList;
if (this.dataStore.pinnedItem && !this.dataStore.pinnedItem.loading) {
pinnedList = this._renderList({
name: 'pinned',
items: [this.dataStore.pinnedItem.item],
});
}
if (this.dataStore.pinnedItem && !this.dataStore.pinnedItem.loading) {
pinnedList = this._renderList({
name: 'pinned',
items: [this.dataStore.pinnedItem.item],
});
}
return [pinnedList, ...this._lists.map(list => this._renderList(list))];
return [pinnedList, ...this._lists.map(list => this._renderList(list))];
}
return this.constructor._renderFullPageMessage(i18n('empty_list'));
}
return m('span', i18n('loading_error'));
return this.constructor._renderFullPageMessage(i18n('loading_error'));
}
static _renderFullPageMessage(message) {
return m('span.empty-list', message);
}
_renderList(list) {
......
......@@ -23,6 +23,11 @@ export default class JobofferList extends FilteredListPage {
super.oninit(vnode, vnode.attrs.offerId);
}
// eslint-disable-next-line class-methods-use-this
_hasItems() {
return controller.length > 0;
}
// eslint-disable-next-line class-methods-use-this
_isItemLoaded(itemId) {
return controller.isJobofferLoaded(itemId);
......
......@@ -22,6 +22,11 @@ export default class StudydocList extends FilteredListPage {
super.oninit(vnode, vnode.attrs.documentId);
}
// eslint-disable-next-line class-methods-use-this
_hasItems() {
return controller.length > 0;
}
// eslint-disable-next-line class-methods-use-this
_isItemLoaded(itemId) {
return controller.isDocumentLoaded(itemId);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment