From d9cfa80c0c2eacc932eceb312697631441726214 Mon Sep 17 00:00:00 2001
From: Eike Cochu <eike@cochu.com>
Date: Tue, 26 Jan 2016 23:28:23 +0100
Subject: [PATCH] updated ui
added pagination to ui
various tweaks
---
ma-impl.sublime-workspace | 160 +++---------------
vipra-ui/app/adapters/application.js | 2 +-
vipra-ui/app/components/items-list.js | 2 +-
vipra-ui/app/components/pagination-bar.js | 61 +++++++
vipra-ui/app/helpers/is-empty.js | 3 +-
vipra-ui/app/routes/articles/index.js | 77 +++++----
vipra-ui/app/routes/topics/index.js | 26 ++-
vipra-ui/app/routes/words/index.js | 27 ++-
vipra-ui/app/styles/app.scss | 10 +-
vipra-ui/app/templates/application.hbs | 2 +-
vipra-ui/app/templates/articles/index.hbs | 9 +-
.../app/templates/components/items-list.hbs | 4 +-
.../templates/components/pagination-bar.hbs | 45 +++++
vipra-ui/app/templates/index.hbs | 6 +-
vipra-ui/app/templates/topics/index.hbs | 4 +-
vipra-ui/app/templates/words/index.hbs | 11 +-
.../components/pagination-bar-test.js | 25 +++
vipra-ui/tests/unit/controllers/words-test.js | 12 ++
18 files changed, 286 insertions(+), 200 deletions(-)
create mode 100644 vipra-ui/app/components/pagination-bar.js
create mode 100644 vipra-ui/app/templates/components/pagination-bar.hbs
create mode 100644 vipra-ui/tests/integration/components/pagination-bar-test.js
create mode 100644 vipra-ui/tests/unit/controllers/words-test.js
diff --git a/ma-impl.sublime-workspace b/ma-impl.sublime-workspace
index b05d059f..dda352d0 100644
--- a/ma-impl.sublime-workspace
+++ b/ma-impl.sublime-workspace
@@ -279,31 +279,6 @@
},
"buffers":
[
- {
- "file": "vipra-ui/app/routes/index.js",
- "settings":
- {
- "buffer_size": 666,
- "line_ending": "Unix"
- }
- },
- {
- "file": "vipra-ui/app/templates/index.hbs",
- "settings":
- {
- "buffer_size": 1247,
- "line_ending": "Unix"
- }
- },
- {
- "contents": "pagination\nindexing + search\ntopic network visualization\n\ndynamic nmf python\n\nuser:\naccenture",
- "settings":
- {
- "buffer_size": 93,
- "line_ending": "Unix",
- "name": "pagination"
- }
- }
],
"build_system": "",
"build_system_choices":
@@ -485,22 +460,39 @@
"/home/eike/repos/master/ma-impl",
"/home/eike/repos/master/ma-impl/vipra-ui",
"/home/eike/repos/master/ma-impl/vipra-ui/app",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/helpers",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/components",
"/home/eike/repos/master/ma-impl/vipra-ui/app/routes",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/templates"
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/routes/articles",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/routes/topics",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/routes/words",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/articles",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/components",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/topics",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/words"
],
"file_history":
[
- "/home/eike/repos/master/ma-impl/vipra-ui/app/styles/app.scss",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/routes/topics/index.js",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/routes/words/index.js",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/routes/articles/index.js",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/articles/index.hbs",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/topics/index.hbs",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/components/items-list.js",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/components/items-list.hbs",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/words/index.hbs",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/application.hbs",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/components/pagination-bar.hbs",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/components/pagination-bar.js",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/controllers/words/index.js",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/controllers/words.js",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/adapters/application.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/templates/index.hbs",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/styles/app.scss",
+ "/home/eike/repos/master/ma-impl/vipra-ui/app/helpers/is-empty.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/routes/index.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/models/import.js",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/application.hbs",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/helpers/is-empty.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/router.js",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/articles/index.hbs",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/routes/articles/index.js",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/adapters/application.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/styles/sticky-footer.scss",
"/home/eike/repos/master/ma-impl/vipra-ui/app/controllers/application.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/components/scroll-top.js",
@@ -510,13 +502,10 @@
"/home/eike/repos/master/ma-impl/vipra-ui/app/routes/articles/show.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/templates/articles/menu.hbs",
"/home/eike/repos/master/ma-impl/vipra-ui/app/routes/articles/menu.hbs",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/words/index.hbs",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/components/items-list.hbs",
"/home/eike/repos/master/ma-impl/vipra-ui/app/helpers/pluralize.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/helpers/uppercase.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/templates/words_loading.hbs",
"/home/eike/repos/master/ma-impl/vipra-ui/bower.json",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/templates/topics/index.hbs",
"/home/eike/.config/sublime-text-3/Packages/User/Preferences.sublime-settings",
"/home/eike/repos/master/ma-impl/vipra-ui/app/templates/topics.hbs",
"/home/eike/repos/master/ma-impl/vipra-ui/app/templates/words.hbs",
@@ -529,8 +518,6 @@
"/home/eike/repos/master/ma-impl/vipra-ui/app/routes/words/show.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/templates/words/show.hbs",
"/home/eike/repos/master/ma-impl/vipra-ui/app/models/word.js",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/routes/words/index.js",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/components/items-list.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/routes/words",
"/home/eike/repos/master/ma-impl/vipra-ui/app/models/topic.js",
"/home/eike/repos/master/ma-impl/vipra-ui/app/models/article.js",
@@ -541,7 +528,6 @@
"/home/eike/Downloads/FRITZ.Box 7490 113.06.30_17.01.16_2147.export",
"/home/eike/repos/master/ma-impl/vm/data/test-1.json",
"/home/eike/repos/master/ma-impl/vm/data/test-2.json",
- "/home/eike/repos/master/ma-impl/vipra-ui/app/routes/topics/index.js",
"/home/eike/.local/share/vipra/jgibb/jgibb",
"/home/eike/repos/master/ma-doc/thesis/thesis.tex",
"/home/eike/repos/master/ma-impl/Vagrantfile",
@@ -614,11 +600,7 @@
"/home/eike/Repositories/fu/ss15/ma/impl/vm/webapps/test/index.html",
"/home/eike/Repositories/fu/ss15/ma/impl/vipra-ui/app/controllers/articles/list.js",
"/home/eike/Repositories/fu/ss15/ma/impl/vipra-ui/app/router.js",
- "/home/eike/Repositories/fu/ss15/ma/impl/vipra-ui/app/index.html",
- "/home/eike/Repositories/fu/ss15/ma/impl/vipra-ui/app/components/search-box.js",
- "/home/eike/Repositories/fu/ss15/ma/impl/vipra-ui/app/templates/loading.hbs",
- "/home/eike/Repositories/fu/ss15/ma/impl/vipra-ui/app/templates/not-found.hbs",
- "/home/eike/Repositories/fu/ss15/ma/impl/vipra-ui/app/templates/articles.hbs"
+ "/home/eike/Repositories/fu/ss15/ma/impl/vipra-ui/app/index.html"
],
"find":
{
@@ -942,98 +924,8 @@
"groups":
[
{
- "selected": 2,
"sheets":
[
- {
- "buffer": 0,
- "file": "vipra-ui/app/routes/index.js",
- "semi_transient": false,
- "settings":
- {
- "buffer_size": 666,
- "regions":
- {
- },
- "selection":
- [
- [
- 333,
- 333
- ]
- ],
- "settings":
- {
- "syntax": "Packages/JavaScriptNext - ES6 Syntax/JavaScriptNext.tmLanguage",
- "tab_size": 2,
- "translate_tabs_to_spaces": true
- },
- "translation.x": 0.0,
- "translation.y": 0.0,
- "zoom_level": 1.0
- },
- "stack_index": 1,
- "type": "text"
- },
- {
- "buffer": 1,
- "file": "vipra-ui/app/templates/index.hbs",
- "semi_transient": true,
- "settings":
- {
- "buffer_size": 1247,
- "regions":
- {
- },
- "selection":
- [
- [
- 478,
- 478
- ]
- ],
- "settings":
- {
- "syntax": "Packages/Handlebars/grammars/Handlebars.tmLanguage",
- "tab_size": 2,
- "translate_tabs_to_spaces": true
- },
- "translation.x": 0.0,
- "translation.y": 0.0,
- "zoom_level": 1.0
- },
- "stack_index": 2,
- "type": "text"
- },
- {
- "buffer": 2,
- "semi_transient": false,
- "settings":
- {
- "buffer_size": 93,
- "regions":
- {
- },
- "selection":
- [
- [
- 83,
- 83
- ]
- ],
- "settings":
- {
- "auto_name": "pagination",
- "default_dir": "/home/eike/repos/master/ma-impl",
- "syntax": "Packages/Text/Plain text.tmLanguage"
- },
- "translation.x": 0.0,
- "translation.y": 0.0,
- "zoom_level": 1.0
- },
- "stack_index": 0,
- "type": "text"
- }
]
}
],
diff --git a/vipra-ui/app/adapters/application.js b/vipra-ui/app/adapters/application.js
index 0d442b61..c14dc91b 100644
--- a/vipra-ui/app/adapters/application.js
+++ b/vipra-ui/app/adapters/application.js
@@ -1,7 +1,7 @@
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
- host: `http://${window.location.hostname}:8080`,
+ host: `http://${window.location.hostname}:8000`,
namespace: 'vipra-rest',
updateRecord(store, type, snapshot) {
var data = {};
diff --git a/vipra-ui/app/components/items-list.js b/vipra-ui/app/components/items-list.js
index 859d9ed8..48125bb8 100644
--- a/vipra-ui/app/components/items-list.js
+++ b/vipra-ui/app/components/items-list.js
@@ -2,7 +2,7 @@ import Ember from 'ember';
export default Ember.Component.extend({
- route: "",
+ route: '',
filteredItems: Ember.computed('items', 'filter', function() {
var keyword = this.get('filter');
diff --git a/vipra-ui/app/components/pagination-bar.js b/vipra-ui/app/components/pagination-bar.js
new file mode 100644
index 00000000..d6654db9
--- /dev/null
+++ b/vipra-ui/app/components/pagination-bar.js
@@ -0,0 +1,61 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+ elements: 2,
+
+ prev: Ember.computed('page', function() {
+ return this.page > 1;
+ }),
+
+ prevPrev: Ember.computed('page', function() {
+ return this.page > this.elements + 1;
+ }),
+
+ prevPage: Ember.computed('page', function() {
+ return this.page - 1;
+ }),
+
+ next: Ember.computed('page', function() {
+ return this.page < Math.ceil(this.total/this.limit*1.0);
+ }),
+
+ nextNext: Ember.computed('page', function() {
+ return this.page < Math.ceil(this.total/this.limit*1.0) - this.elements;
+ }),
+
+ nextPage: Ember.computed('page', function() {
+ return this.page + 1;
+ }),
+
+ lastPage: Ember.computed('page', function() {
+ return Math.ceil(this.total/this.limit*1.0);
+ }),
+
+ pages: Ember.computed('total', 'page', 'limit', 'elements', function() {
+ let pages = [],
+ page = parseInt(this.page || 1),
+ max = Math.ceil(this.total/this.limit*1.0),
+ start = Math.max(page - this.elements, 1),
+ end = Math.min(Math.max(page + this.elements, start + this.elements * 2), max);
+ for(let i = start; i <= end; i++) {
+ pages.push({page:i, active:i===page});
+ }
+ return pages;
+ }),
+
+ enabled: Ember.computed('total', 'limit', function() {
+ return this.total > this.limit;
+ }),
+
+ actions: {
+ prompt() {
+ let lastPage = this.get('lastPage'),
+ page = parseInt(window.prompt(`Enter a page number (between 1 and ${lastPage})`) || 0);
+ if(!isNaN(page) && page > 0 && page < lastPage) {
+ this.set('page', page);
+ }
+ }
+ }
+
+});
diff --git a/vipra-ui/app/helpers/is-empty.js b/vipra-ui/app/helpers/is-empty.js
index 624b9ccb..19ca8d44 100644
--- a/vipra-ui/app/helpers/is-empty.js
+++ b/vipra-ui/app/helpers/is-empty.js
@@ -3,8 +3,9 @@ import Ember from 'ember';
export function isEmpty(params/*, hash*/) {
let ary = params[0],
text = params[1];
- if(!ary || typeof ary.length === "undefined" || !ary.length)
+ if(!ary || typeof ary.length === "undefined" || !ary.length) {
return text;
+ }
return null;
}
diff --git a/vipra-ui/app/routes/articles/index.js b/vipra-ui/app/routes/articles/index.js
index e8b133dd..7fcaffd1 100644
--- a/vipra-ui/app/routes/articles/index.js
+++ b/vipra-ui/app/routes/articles/index.js
@@ -1,41 +1,56 @@
import Ember from 'ember';
-var pagelimit = 100;
-var chartData = [];
-var chartOptions = {
- chart: {
- zoomType: 'x'
- },
- title: {
- text: 'Articles per month'
- },
- legend: {
- enabled: false
- },
- xAxis: {
- type: 'datetime',
- title: {
- text: 'Dates'
+let limit = 100,
+ chartData = [],
+ chartOptions = {
+ chart: {
+ zoomType: 'x'
+ },
+ title: {
+ text: 'Articles per month'
+ },
+ legend: {
+ enabled: false
+ },
+ xAxis: {
+ type: 'datetime',
+ title: {
+ text: 'Dates'
+ }
+ },
+ yAxis: {
+ title: {
+ text: 'Articles'
+ }
+ },
+ tooltip: {
+ headerFormat: '',
+ pointFormat: '{point.x:%b %Y}: {point.y} article(s)'
+ }
+ };
+
+export default Ember.Route.extend({
+ queryParams: {
+ page: {
+ refreshModel: true
}
},
- yAxis: {
- title: {
- text: 'Articles'
+
+ model(params) {
+ window.scrollTo(0, 0);
+
+ let query = {
+ skip: 0,
+ limit: limit
+ };
+
+ if(Ember.isPresent(params.page)) {
+ query.skip = (params.page - 1) * query.limit;
}
- },
- tooltip: {
- headerFormat: '',
- pointFormat: '{point.x:%b %Y}: {point.y} article(s)'
- }
-};
-export default Ember.Route.extend({
- model() {
return Ember.RSVP.hash({
- articles: this.store.query('article', {
- skip: 0,
- limit: pagelimit
- }),
+ limit: limit,
+ articles: this.store.query('article', query),
chartOptions: chartOptions,
chartData: chartData
});
diff --git a/vipra-ui/app/routes/topics/index.js b/vipra-ui/app/routes/topics/index.js
index ef14ad4b..ce1a47c4 100644
--- a/vipra-ui/app/routes/topics/index.js
+++ b/vipra-ui/app/routes/topics/index.js
@@ -1,9 +1,31 @@
import Ember from 'ember';
+let limit = 100;
+
export default Ember.Route.extend({
- model() {
+
+ queryParams: {
+ page: {
+ refreshModel: true
+ }
+ },
+
+ model(params) {
+ window.scrollTo(0, 0);
+
+ let query = {
+ skip: 0,
+ limit: limit
+ };
+
+ if(Ember.isPresent(params.page)) {
+ query.skip = (params.page - 1) * query.limit;
+ }
+
return Ember.RSVP.hash({
- topics: this.store.findAll('topic')
+ limit: limit,
+ topics: this.store.query('topic', query)
});
}
+
});
\ No newline at end of file
diff --git a/vipra-ui/app/routes/words/index.js b/vipra-ui/app/routes/words/index.js
index 58b02ec3..52c99646 100644
--- a/vipra-ui/app/routes/words/index.js
+++ b/vipra-ui/app/routes/words/index.js
@@ -1,9 +1,32 @@
import Ember from 'ember';
+let limit = 200;
+
export default Ember.Route.extend({
- model() {
+
+ queryParams: {
+ page: {
+ refreshModel: true
+ }
+ },
+
+ model(params) {
+ window.scrollTo(0, 0);
+
+ let query = {
+ sort: 'word',
+ skip: 0,
+ limit: limit
+ };
+
+ if(Ember.isPresent(params.page)) {
+ query.skip = (params.page - 1) * query.limit;
+ }
+
return Ember.RSVP.hash({
- words: this.store.query('word', {sort:'word'})
+ limit: limit,
+ words: this.store.query('word', query)
});
}
+
});
\ No newline at end of file
diff --git a/vipra-ui/app/styles/app.scss b/vipra-ui/app/styles/app.scss
index f3263a02..34d181cb 100644
--- a/vipra-ui/app/styles/app.scss
+++ b/vipra-ui/app/styles/app.scss
@@ -8,8 +8,6 @@
}
body {
- // for navbar
- padding-top: 60px;
padding-bottom: 20px;
}
@@ -43,13 +41,9 @@ body {
text-overflow: ellipsis;
}
-.wordfilters a {
- padding-right: 8px;
-}
-
.navbar-default {
- .navbar-nav {
- &> .active {
+ .collapse:not(.in) {
+ .navbar-nav > .active {
&> a,
&> a:hover,
&> a:focus {
diff --git a/vipra-ui/app/templates/application.hbs b/vipra-ui/app/templates/application.hbs
index 17ab63e8..e7aa4f45 100644
--- a/vipra-ui/app/templates/application.hbs
+++ b/vipra-ui/app/templates/application.hbs
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-default navbar-fixed-top">
+<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
diff --git a/vipra-ui/app/templates/articles/index.hbs b/vipra-ui/app/templates/articles/index.hbs
index de55f79d..8009aa8f 100644
--- a/vipra-ui/app/templates/articles/index.hbs
+++ b/vipra-ui/app/templates/articles/index.hbs
@@ -2,12 +2,9 @@
{{dynamic-high-charts content=model.chartData chartOptions=model.chartOptions}}
-{{model.articles.meta.total}} {{pluralize model.articles.meta.total 'article'}} in total.
+{{model.articles.meta.total}} {{pluralize model.articles.meta.total 'article'}} in total, {{model.articles.length}} shown.
-<br>
-{{debounced-input class='form-control' placeholder='Filter' size='50' value=filter debounce='150'}}
-
-<br>
+<br><br>
{{items-list items=model.articles filter=filter route='articles.show'}}
-{{outlet}}
\ No newline at end of file
+{{pagination-bar total=model.articles.meta.total page=page limit=model.limit}}
\ No newline at end of file
diff --git a/vipra-ui/app/templates/components/items-list.hbs b/vipra-ui/app/templates/components/items-list.hbs
index 8402078b..259c5fd7 100644
--- a/vipra-ui/app/templates/components/items-list.hbs
+++ b/vipra-ui/app/templates/components/items-list.hbs
@@ -1,5 +1,5 @@
-<ol>
+<ul class="list-unstyled">
{{#each filteredItems as |item|}}
<li>{{#link-to route item.id}}{{text-marker text=item._name mark=filter}}{{/link-to}}</li>
{{/each}}
-</ol>
\ No newline at end of file
+</ul>
\ No newline at end of file
diff --git a/vipra-ui/app/templates/components/pagination-bar.hbs b/vipra-ui/app/templates/components/pagination-bar.hbs
new file mode 100644
index 00000000..cf9bcc82
--- /dev/null
+++ b/vipra-ui/app/templates/components/pagination-bar.hbs
@@ -0,0 +1,45 @@
+{{#if enabled}}
+ <nav>
+ <ul class="pagination">
+ <li class="{{unless prev "disabled"}}">
+ {{#if prev}}
+ {{#link-to (query-params page=prevPage)}}«{{/link-to}}
+ {{else}}
+ <span>«</span>
+ {{/if}}
+ </li>
+
+ {{#if prevPrev}}
+ <li>
+ {{link-to 1 (query-params page=1)}}
+ </li>
+ <li {{action 'prompt'}}>
+ <span>..</span>
+ </li>
+ {{/if}}
+
+ {{#each pages as |p|}}
+ <li class="{{if p.active "active"}}">
+ {{link-to p.page (query-params page=p.page)}}
+ </li>
+ {{/each}}
+
+ {{#if nextNext}}
+ <li {{action 'prompt'}}>
+ <span>..</span>
+ </li>
+ <li>
+ {{link-to lastPage (query-params page=lastPage)}}
+ </li>
+ {{/if}}
+
+ <li class="{{unless next "disabled"}}">
+ {{#if next}}
+ {{#link-to (query-params page=nextPage)}}»{{/link-to}}
+ {{else}}
+ <span>»</span>
+ {{/if}}
+ </li>
+ </ul>
+ </nav>
+{{/if}}
\ No newline at end of file
diff --git a/vipra-ui/app/templates/index.hbs b/vipra-ui/app/templates/index.hbs
index 40099f48..9f163524 100644
--- a/vipra-ui/app/templates/index.hbs
+++ b/vipra-ui/app/templates/index.hbs
@@ -12,7 +12,7 @@
<br><br>
<div class="row">
- <div class="col-md-4 text-center">
+ <div class="col-md-6 text-center">
<h4>Latest articles</h4>
<ul class="list-unstyled">
{{#each model.latestarticles as |article|}}
@@ -20,7 +20,7 @@
{{/each}}
</ul>
</div>
- <div class="col-md-4 text-center">
+ <div class="col-md-3 text-center">
<h4>Latest topics</h4>
<ul class="list-unstyled">
{{#each model.latesttopics as |topic|}}
@@ -28,7 +28,7 @@
{{/each}}
</ul>
</div>
- <div class="col-md-4 text-center">
+ <div class="col-md-3 text-center">
<h4>Latest words</h4>
<ul class="list-unstyled">
{{#each model.latestwords as |word|}}
diff --git a/vipra-ui/app/templates/topics/index.hbs b/vipra-ui/app/templates/topics/index.hbs
index 9e5af69a..67ca6107 100644
--- a/vipra-ui/app/templates/topics/index.hbs
+++ b/vipra-ui/app/templates/topics/index.hbs
@@ -3,4 +3,6 @@
{{debounced-input class='form-control' placeholder='Filter' size='50' value=filter debounce='150'}}
<br>
-{{items-list items=model.topics filter=filter route='topics.show'}}
\ No newline at end of file
+{{items-list items=model.topics filter=filter route='topics.show'}}
+
+{{pagination-bar total=model.topics.meta.total page=page limit=model.limit}}
\ No newline at end of file
diff --git a/vipra-ui/app/templates/words/index.hbs b/vipra-ui/app/templates/words/index.hbs
index 548c404f..75321f40 100644
--- a/vipra-ui/app/templates/words/index.hbs
+++ b/vipra-ui/app/templates/words/index.hbs
@@ -2,14 +2,11 @@
<br>
<p>
- {{model.words.length}} {{pluralize model.words.length 'Word'}} in the database
-</p>
-
-<br>
-<p class="wordfilters">
-<a href="#" {{action "wordfilter" "A"}}>A</a> <a href="#" {{action "wordfilter" "B"}}>B</a> <a href="#" {{action "wordfilter" "C"}}>C</a> <a href="#" {{action "wordfilter" "D"}}>D</a> <a href="#" {{action "wordfilter" "E"}}>E</a> <a href="#" {{action "wordfilter" "F"}}>F</a> <a href="#" {{action "wordfilter" "G"}}>G</a> <a href="#" {{action "wordfilter" "H"}}>H</a> <a href="#" {{action "wordfilter" "I"}}>I</a> <a href="#" {{action "wordfilter" "J"}}>J</a> <a href="#" {{action "wordfilter" "K"}}>K</a> <a href="#" {{action "wordfilter" "L"}}>L</a> <a href="#" {{action "wordfilter" "M"}}>M</a> <a href="#" {{action "wordfilter" "N"}}>N</a> <a href="#" {{action "wordfilter" "O"}}>O</a> <a href="#" {{action "wordfilter" "P"}}>P</a> <a href="#" {{action "wordfilter" "Q"}}>Q</a> <a href="#" {{action "wordfilter" "R"}}>R</a> <a href="#" {{action "wordfilter" "S"}}>S</a> <a href="#" {{action "wordfilter" "T"}}>T</a> <a href="#" {{action "wordfilter" "U"}}>U</a> <a href="#" {{action "wordfilter" "V"}}>V</a> <a href="#" {{action "wordfilter" "W"}}>W</a> <a href="#" {{action "wordfilter" "X"}}>X</a> <a href="#" {{action "wordfilter" "Y"}}>Y</a> <a href="#" {{action "wordfilter" "Z"}}>Z</a>
+ {{model.words.meta.total}} {{pluralize model.words.meta.total 'Word'}} in the database
</p>
{{#each model.words as |word|}}
{{#link-to 'words.show' word.id}}{{word.id}}{{/link-to}}
-{{/each}}
\ No newline at end of file
+{{/each}}
+
+{{pagination-bar total=model.words.meta.total page=page limit=model.limit}}
\ No newline at end of file
diff --git a/vipra-ui/tests/integration/components/pagination-bar-test.js b/vipra-ui/tests/integration/components/pagination-bar-test.js
new file mode 100644
index 00000000..d61ba100
--- /dev/null
+++ b/vipra-ui/tests/integration/components/pagination-bar-test.js
@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('pagination-bar', 'Integration | Component | pagination bar', {
+ integration: true
+});
+
+test('it renders', function(assert) {
+
+ // Set any properties with this.set('myProperty', 'value');
+ // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +
+
+ this.render(hbs`{{pagination-bar}}`);
+
+ assert.equal(this.$().text().trim(), '');
+
+ // Template block usage:" + EOL +
+ this.render(hbs`
+ {{#pagination-bar}}
+ template block text
+ {{/pagination-bar}}
+ `);
+
+ assert.equal(this.$().text().trim(), 'template block text');
+});
diff --git a/vipra-ui/tests/unit/controllers/words-test.js b/vipra-ui/tests/unit/controllers/words-test.js
new file mode 100644
index 00000000..f4014164
--- /dev/null
+++ b/vipra-ui/tests/unit/controllers/words-test.js
@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:words', 'Unit | Controller | words', {
+ // Specify the other units that are required for this test.
+ // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+ let controller = this.subject();
+ assert.ok(controller);
+});
--
GitLab