timmyomahony · June 20, 2016 16:35 · Jun 20, 2016
diff --git a/components.list-pagination.js b/components.list-pagination.js
@@ -0,0 +1,51 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: "section",
+  page: 1,
+  paginateBy: 10,
+  paginatedItems: Ember.computed('amenities', 'page', function(){
+    var i = (parseInt(this.get('page')) - 1) * parseInt(this.get('paginateBy'));
+    var j = i + parseInt(this.get('paginateBy'));
+    return this.get('items').slice(i, j);
+  }),
+  numberOfPages: Ember.computed('page', function(){
+    var n = this.get('items.length');
+    var c = parseInt(this.get('paginateBy'));
+    var r = Math.floor(n/c);
+    if(n % c > 0) {
+      r += 1;
+    }
+    return r;
+  }),
+  pageNumbers: Ember.computed('numberOfPages', function(){
+    var n = Array(this.get('numberOfPages'));
+    for(var i = 0;i < n.length;i++) {
+      n[i] = i + 1;
+    }
+    return n;
+  }),
+  showNext: Ember.computed('page', function(){
+    return (this.get('page') < this.get('numberOfPages'));
+  }),
+  showPrevious: Ember.computed('page', function(){
+    return (this.get('page') > 1);
+  }),
+  nextText: 'Next page',
+  previousText: 'Previous page',
+  actions: {
+    nextClicked() {
+      if(this.get('page') + 1 <= this.get('numberOfPages')) {
+        this.set('page', this.get('page') + 1);
+      }
+    },
+    previousClicked() {
+      if(this.get('page') > 0) {
+        this.set('page', this.get('page') - 1);
+      }
+    },
+    pageClicked(pageNumber){
+      this.set('page', pageNumber);
+    }
+  }
+});
diff --git a/components.team-list-item.js b/components.team-list-item.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: "li"
+});
diff --git a/components.team-list.js b/components.team-list.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: "ul"
+});
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  paginateBy: 6
+});
diff --git a/routes.application.js b/routes.application.js
@@ -0,0 +1,105 @@
+import Ember from 'ember';
+
+let teams = [{
+      id: 1,
+      name: "Albania"
+    },
+    {
+    id: 2,
+    name: "Austria"
+    },
+    {
+      id: 3,
+      name: "Belgium"
+    },
+    {
+      id: 4,
+      name: "Croatia"
+    },
+    {
+      id: 5,
+      name: "Czech Republic"
+    },
+    {
+      id: 6,
+      name: "England"
+    },
+    {
+      id: 7,
+      name: "France"
+    },
+    {
+      id: 8,
+      name: "Germany"
+    },
+    {
+      id: 9,
+      name: "Hungary"
+    },
+    {
+      id: 10,
+      name: "Iceland"
+    },
+    {
+      id: 11,
+      name: "Italy"
+    },
+    {
+      id: 12,
+      name: "Northern Ireland"
+    },
+    {
+      id: 13,
+      name: "Poland"
+    },
+    {
+      id: 14,
+      name: "Portugal"
+    },
+    {
+      id: 15,
+      name: "Republic of Ireland"
+    },
+    {
+      id: 16,
+      name: "Romania"
+    },
+    {
+      id: 17,
+      name: "Russia"
+    },
+    {
+      id: 18,
+      name: "Slovakia"
+    },
+    {
+      id: 19,
+      name: "Spain"
+    },
+    {
+      id: 20,
+      name: "Sweden"
+    },
+    {
+      id: 21,
+      name: "Switzerland"
+    },
+    {
+      id: 22,
+      name: "Turkey"
+    },
+    {
+      id: 23,
+      name: "Ukraine"
+    },
+    {
+      id: 24,
+      name: "Wales"
+    }
+]
+
+export default Ember.Route.extend({
+  model() {
+    return teams;
+  }
+});
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,11 @@
+<p>This is an example showing how to create your own simple pagination component with Ember.</p>
+<hr />
+<p><strong>Euro 2016 teams:</strong></p>
+{{#list-pagination paginateBy=paginateBy items=model as |teams|}}
+  {{#team-list teams=teams as |team|}}
+    {{#team-list-item}}
+      {{team.name}}
+    {{/team-list-item}}
+  {{/team-list}}
+{{/list-pagination}}
+<hr />
diff --git a/templates.components.list-pagination.hbs b/templates.components.list-pagination.hbs
@@ -0,0 +1,16 @@
+{{yield paginatedItems}}
+<ul>
+  {{#if showPrevious}}
+    <li><button {{action "previousClicked"}}>{{previousText}}</button></li>
+  {{else}}
+    <li style="text-decoration: line-through;">{{previousText}}</li>
+  {{/if}}
+  {{#each pageNumbers as |pageNumber|}}
+    <li><button {{action "pageClicked" pageNumber}}>Page {{pageNumber}}</button></li>
+  {{/each}}
+  {{#if showNext}}
+    <li><button {{action "nextClicked"}}>{{nextText}}</button></li>
+  {{else}}
+    <li style="text-decoration: line-through;">{{nextText}}</li>
+  {{/if}}
+</ul>
diff --git a/templates.components.team-list-item.hbs b/templates.components.team-list-item.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/templates.components.team-list.hbs b/templates.components.team-list.hbs
@@ -0,0 +1,3 @@
+{{#each teams as |team|}}
+  {{yield team}}
+{{/each}}
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,16 @@
+{
+  "version": "0.9.3",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.6.0",
+    "ember-data": "2.6.1",
+    "ember-template-compiler": "2.6.0"
+  }
+}
No results found