Complete page size selection functionality

Author: abhinavk96

app/components/tables/utilities/page-size-input.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import { A } from '@ember/array';
+
+export default Component.extend({
+  pageSizes: A([10, 25, 50, 100, 250, 'All'])
+
+});

app/components/tables/utilities/pagination.js

@@ -11,14 +11,14 @@ export default class extends Component {
   @computed('currentPage', 'pageSize', 'totalContentLength')
   get currentRange() {
     let firstIndex = this.totalContentLength === 0 ? 0 : (this.currentPage - 1) * this.pageSize + 1;
-    let lastIndex = this.currentPage === this.pageCount ? this.totalContentLength : this.currentPage * this.pageSize;
+    let lastIndex = (this.currentPage === this.pageCount || this.pageSize === 0) ? this.totalContentLength : this.currentPage * this.pageSize;
     return `${firstIndex} - ${lastIndex}`;
   }
 
   @computed('currentPage', 'pageSize', 'totalContentLength')
   get pageCount() {
-    let totalPages = 0;
-    if (this.pageSize < this.totalContentLength) {
+    let totalPages = 1;
+    if (parseInt(this.pageSize) !== 0 && this.pageSize < this.totalContentLength) {
       totalPages = parseInt(this.totalContentLength / this.pageSize);
       if (this.totalContentLength % this.pageSize) {
         totalPages += 1;

app/components/tables/utilities/search-box.js

@@ -0,0 +1,4 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});

app/controllers/events/list.js

@@ -4,7 +4,7 @@ import { computed, action } from '@ember/object';
 export default class extends Controller {
   queryParams = ['page', 'per_page'];
   page = 1;
-  per_page    = 1;
+  per_page = 2;
 
   @computed()
   get columns() {

app/initializers/blanket.js

@@ -22,6 +22,7 @@ export function initialize(application) {
   inject('routing', 'service:-routing');
   inject('cookies', 'service:cookies');
   inject('infinity', 'service:infinity');
+  inject('headData', 'service:headData');
   application.inject('component', 'router', 'service:router');
 }
 

app/styles/partials/overrides.scss

@@ -70,5 +70,9 @@ body.dimmable.undetached.dimmed {
     &[class*='left padding'] {
       padding-left: 0 !important;
     }
+
+    &[class*='bottom padding'] {
+      padding-bottom: 0 !important;
+    }
   }
 }

app/templates/components/tables/default.hbs

@@ -1,21 +1,36 @@
-{{#ember-table as |t|}}
-  {{t.head columns=columns}}
-  {{#t.body rows=rows as |b|}}
-    {{#b.row as |r|}}
-      {{#r.cell as |cell column row|}}
-        {{#if column.cellComponent}}
-          {{#component column.cellComponent
-                       record=(get row column.valuePath)
-                       extraRecords=(get-properties row column.extraValuePaths)
-                       props=(hash options=column.options actions=column.actions)}}
-            {{cell}}
-          {{/component}}
-        {{else}}
-          {{cell}}
-        {{/if}}
-      {{/r.cell}}
-    {{/b.row}}
-  {{/t.body}}
-{{/ember-table}}
+<div class="ui grid">
+  <div class="ui less bottom padding row">
+    <div class="left aligned eight wide column">
+      {{tables/utilities/page-size-input pageSize=pageSize}}
+    </div>
+    <div class="eight wide right aligned column">
+      {{tables/utilities/search-box searchQuery=searchQuery}}
+    </div>
+  </div>
 
-{{tables/utilities/pagination currentPage=currentPage pageSize=pageSize metaData=metaData}}
+  <div class="row">
+    {{#ember-table as |t|}}
+      {{t.head columns=columns}}
+      {{#t.body rows=rows as |b|}}
+        {{#b.row as |r|}}
+          {{#r.cell as |cell column row|}}
+            {{#if column.cellComponent}}
+              {{#component column.cellComponent
+                           record=(get row column.valuePath)
+                           extraRecords=(get-properties row column.extraValuePaths)
+                           props=(hash options=column.options actions=column.actions)}}
+                {{cell}}
+              {{/component}}
+            {{else}}
+              {{cell}}
+            {{/if}}
+          {{/r.cell}}
+        {{/b.row}}
+      {{/t.body}}
+    {{/ember-table}}
+  </div>
+
+  <div class="row">
+    {{tables/utilities/pagination currentPage=currentPage pageSize=pageSize metaData=metaData}}
+  </div>
+</div>

app/templates/components/tables/utilities/page-size-input.hbs

@@ -0,0 +1,16 @@
+<span>
+{{t 'Show'}}
+{{#ui-dropdown class='inline' selected=pageSize onChange=(action (mut pageSize)) forceSelection=true}}
+  {{input type='hidden'  value=pageSize}}
+  <div class="default text">10</div>
+  <i class="dropdown icon"></i>
+  <div class="menu">
+    {{#each pageSizes as |pageSize|}}
+      <div class="item" data-value="{{if (eq pageSize 'All') 0 pageSize}}">
+        {{pageSize}}
+      </div>
+    {{/each}}
+  </div>
+{{/ui-dropdown}}
+{{t 'entries per page'}}
+</span>

app/templates/components/tables/utilities/search-box.hbs

@@ -0,0 +1,4 @@
+<div class="ui small icon input">
+  {{input type="text" placeholder="Search ..."}}
+  <i class="search icon"></i>
+</div>