add pagination goto, remove customer application images

web/app/components/pagination-bar.js

@@ -1,24 +1,25 @@
 import Ember from 'ember';
 import BaseComponent from './base-component';
+import { computed } from '@ember/object';
 
 export default BaseComponent.extend({
     classNames: ['widget-toolbox', 'clearfix'],
     total: Ember.computed.alias('route.controller.model.total'),
-    prevPage: Ember.computed('currPage', function() {
+    prevPage: computed('currPage', function() {
         return this.get('currPage') - 1 || 1;
     }),
-    nextPage: Ember.computed('currPage', function() {
+    nextPage: computed('currPage', function() {
         let me = this;
         let page = me.get('currPage');
         return page + 1 <= me.get('totalPage') ? page + 1 : page;
     }),
-    currPage: Ember.computed('params.page', function() {
+    currPage: computed('params.page', function() {
         let me = this;
         let currPage = parseInt(me.get('params.page'));
-        Ember.Logger.info('Get curr page [' + currPage + ']');
+        Ember.Logger.info('Get current page [' + currPage + ']');
         return currPage;
     }),
-    pages: Ember.computed('total', function() {
+    pages: computed('total', function() {
         const me = this;
         const totalPage = me.get('totalPage');
         const currPage = me.get('currPage');
@@ -55,9 +56,20 @@ export default BaseComponent.extend({
         }
         return pages;
     }),
-    totalPage: Ember.computed('total', function() {
+    allPages: computed('total', function() {
+        const me = this;
+        const totalPage = me.get('totalPage');
+        let pages = [];
+
+        let i = 0;
+        while (++i <= totalPage) {
+            pages.push(i);
+        }
+        return pages;
+    }),
+    totalPage: computed('total', function() {
         let me = this;
-        let pageSize = me.get('service.pageSize') || 16;
+        let pageSize = me.get('service.pageSize') || 32;
         return parseInt((me.get('total') + pageSize - 1) / pageSize);
     }),
     actions: {
@@ -65,7 +77,7 @@ export default BaseComponent.extend({
             let me = this;
             let router = me.get('router');
             let params = me.get('params');
-            Ember.Logger.info('To Page [' + page + '], Params: ', params);
+            Ember.Logger.info('Go to page [' + page + '], params: ', params);
             router.transitionTo(me.get('routeName'), page, {queryParams: params});
         }
     }

web/app/templates/components/pagination-bar.hbs

@@ -8,24 +8,34 @@
     {{/if}}
 </h6>
 
-<ul class="pagination pull-right no-margin">
+<ul class="pagination no-margin pull-right">
     <li class="prev">
         <a href="#" {{action 'gotoPage' prevPage}}>
             <i class="ace-icon fa fa-angle-double-left"></i>
         </a>
     </li>
-
     {{#each pages as |page|}}
-        <li class="{{if page.active 'active'}}">
-            <a href="#" {{action 'gotoPage' page.page}}>
-                {{page.text}}
-            </a>
-        </li>
+    <li class="{{if page.active 'active'}}">
+        <a href="#" {{action 'gotoPage' page.page}}>
+            {{page.text}}
+        </a>
+    </li>
     {{/each}}
-
     <li class="next">
         <a href="#" {{action 'gotoPage' nextPage}}>
             <i class="ace-icon fa fa-angle-double-right"></i>
         </a>
     </li>
+    {{#if (gt allPages.length 1)}}
+    <li>
+        <select style="width: 48px; margin: 1px 4px;"
+            onchange={{action 'gotoPage' value='target.value'}}>
+            {{#each allPages as |page|}}
+                <option value={{page}} selected={{if (eq currPage page) 'selected'}}>
+                    {{page}}
+                </option>
+            {{/each}}
+        </select>
+    </li>
+    {{/if}}
 </ul>

web/app/templates/customer-application/list.hbs

@@ -9,7 +9,7 @@
             {{/link-to}}
         </li>
     {{/grid-header}}
-    {{else}} 
+    {{else}}
         {{grid-header}}
     {{/if}}
 
@@ -22,10 +22,6 @@
                         <th>
                             Name
                         </th>
-                        <th>
-                            <i class="ace-icon fa fa-file-image-o bigger-110 hidden-480"></i>
-                            Images
-                        </th>
                         <th>
                             <i class="ace-icon fa fa-sticky-note-o bigger-110 hidden-480"></i>
                             Remark
@@ -33,9 +29,9 @@
                         {{#if ajax.user.admin}}
                         <th>
                             <i class="ace-icon fa fa-id-badge bigger-110 hidden-480"></i>
-                            {{th-filter name='owner' 
-                                text='Owner' 
-                                label='Owner Filter' 
+                            {{th-filter name='owner'
+                                text='Owner'
+                                label='Owner Filter'
                                 options=model.users
                                 value-field='id'
                                 text-exp='$.employeeId ($.name)'
@@ -59,9 +55,6 @@
                         <td>
                             {{customer-application/preview-btn model=it}}
                         </td>
-                        <td>
-                            {{image-previews previews=(customer-application-images it.images it.imageTitles)}}
-                        </td>
                         <td>
                             {{editable-cell model=it field='note'}}
                         </td>