diff --git a/ma-impl.sublime-workspace b/ma-impl.sublime-workspace
index b05d059fba40f443eb1f50c917c7045b8f3ca918..dda352d0d4d451aae5bc7f2a703caa8b78eae3e5 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 0d442b61c170d4fa40db3aae849cc2e0cc783dc3..c14dc91b50c796761e9b28c764ce301880937f35 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 859d9ed8dcc79978b27e95a8b7eb52ac6c95fef3..48125bb8fd29bfc046ecca7f91301dc21061f8f5 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 0000000000000000000000000000000000000000..d6654db94cfaf900ae1d0ccf51cf37b95321ee96
--- /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 624b9ccb578cfa42b4513f27ac6e96a6bdfdd9ba..19ca8d4420d0b7f9c39ff145866f2b4f18222dda 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 e8b133dd62a27dd21f6f3f565eb832e78356032b..7fcaffd1badd98bfcdc6e8cc685533b92ca3b374 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 ef14ad4bccdd995300f8c0ec7ec1f248a840a00c..ce1a47c4c8f5f13488d0cd5d1bf966c4217c1454 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 58b02ec39f61170df7ea056f15dee6c5b2d0118a..52c996460a468ae3f4620628e765130d91a1ddc4 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 f3263a02b9dea1dbd7be8f7a2275fd4164ca7088..34d181cb99b44a717de2fb0d2f0e84007f8eacb0 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 17ab63e86a5f42127b9a189508cefdab927d3741..e7aa4f457199f2be941f802142730f4b802f475a 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 de55f79dc3f647407af28147825a8b1137908a4c..8009aa8f82a3c29fe7b516e0665a3a39a6ad7929 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 8402078b74f1895d8be0c7224c516ade137cf0d5..259c5fd719842aac37065b8785713ae70ac56fd8 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 0000000000000000000000000000000000000000..cf9bcc82eaaba746cb1eddf8ab4a36e255240e38
--- /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 40099f483c24b310187c2cf82343a49c003cfc2a..9f163524129f08f62dbb09230e7ad4da8375673c 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 9e5af69add58901f8f9eeb7e458deab6d2c9ddfd..67ca6107d74432768dad94270d47adbe529590a4 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 548c404fb29d00640e8230d57ddffbbecb20d8be..75321f4027c69f10c35e09ff2e168af7ec8fb975 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 0000000000000000000000000000000000000000..d61ba100b35dd7a929eb01f1500c5b6a78c54487
--- /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 0000000000000000000000000000000000000000..f4014164cf8485680e1b6fe2f5d118e816867fa7
--- /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);
+});