Implement pagination (Dashboards, Templates, Visualizations)

arlejeun · Dec 22, 2017 · 50fd9b0 · 50fd9b0
1 parent 29ac3cb
commit 50fd9b0
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 69 deletions.
diff --git a/web/project/api/dashboards.py b/web/project/api/dashboards.py
@@ -5,6 +5,7 @@
 from ..models import db, Dashboards
 from flask_principal import Permission, RoleNeed
 from mongoengine.queryset import Q
+from ..settings import PAGINATION_DASHBOARD_PAGE
 
 
 dashboard_api = Blueprint('dashboard_api', __name__, url_prefix='/api/pulse/dashboards')
@@ -13,19 +14,30 @@
 admin_permission = Permission(RoleNeed('admin'))
 editor_permission = Permission(RoleNeed('editor'))
 
+PER_PAGE = PAGINATION_DASHBOARD_PAGE
+
 
 @dashboard_api.route('', methods=['GET'])
 @dashboard_api.route('/', methods=['GET'])
 def get_dashboards_api():
+
+    total = Dashboards.objects().count()
+    page = 1
+
+    if 'page' in request.args:
+        page = int(request.args['page'])
+
     if current_user.has_role('admin'):
-        dashboards = Dashboards.objects.all().order_by('-pub_date')
+        dashboards = Dashboards.objects.all().order_by('-pub_date').paginate(page=page, per_page=PER_PAGE).items
+
     elif current_user.has_role('editor'):
-        dashboards = Dashboards.objects(Q(status='public') | Q(contributor=current_user.email)).order_by(
-            '-pub_date')
+        dashboards = Dashboards.objects(Q(status='public') | Q(contributor=current_user.email)).order_by('-pub_date').paginate(page=page, per_page=PER_PAGE).items
+
     else:
-        dashboards = Dashboards.objects(Q(status='public')).order_by('-pub_date')
+        #dashboards = Dashboards.objects(Q(status='public')).order_by('-pub_date')
+        dashboards = Dashboards.objects(Q(status='public')).order_by('-pub_date').paginate(page=page, per_page=PER_PAGE).items
 
-    return jsonify({'result': dashboards})
+    return jsonify({'total': total, 'per_page': PER_PAGE, 'result': dashboards})
 
 
 @dashboard_api.route('/<name>', methods=['GET'])

diff --git a/web/project/api/templates.py b/web/project/api/templates.py
@@ -5,7 +5,7 @@
 from flask_security import auth_token_required, http_auth_required, login_required, current_user
 from ..models import db, Templates
 from mongoengine.queryset import Q
-
+from ..settings import PAGINATION_PAGE
 
 
 temp_api = Blueprint('template_api', __name__, url_prefix='/api/pulse/templates')
@@ -14,23 +14,31 @@
 admin_permission = Permission(RoleNeed('admin'))
 editor_permission = Permission(RoleNeed('editor'))
 
+PER_PAGE = PAGINATION_PAGE
 
 @temp_api.route('', methods=['GET'])
 @temp_api.route('/', methods=['GET'])
 def get_templates_api():
+
+    total = Templates.objects().count()
+    page = 1
+
+    if 'page' in request.args:
+        page = int(request.args['page'])
+
     if current_user.has_role('admin'):
-        templates = Templates.objects.all().order_by('-pub_date')
+        templates = Templates.objects.all().order_by('-pub_date').paginate(page=page, per_page=PER_PAGE).items
     elif current_user.has_role('editor'):
         templates = Templates.objects(Q(status='public') | Q(contributor=current_user.email)).order_by(
-            '-pub_date')
+            '-pub_date').paginate(page=page, per_page=PER_PAGE).items
     else:
-        templates = Templates.objects(Q(status='public')).order_by('-pub_date')
-    return jsonify({'result': templates})
+        templates = Templates.objects(Q(status='public')).order_by('-pub_date').paginate(page=page, per_page=PER_PAGE).items
+
+    return jsonify({'total': total, 'per_page': PER_PAGE, 'result': templates})
 
 
 @temp_api.route('/<name>', methods=['GET'])
 def get_template_api(name):
-    #template = Templates.objects.get_or_404(definition__guid=name)
     template = Templates.objects.filter(definition__guid=name).first_or_404()
     return jsonify({'result': template})
 
@@ -53,7 +61,6 @@ def post_template_api():
 @admin_permission.require(http_exception=403)
 def delete_template_api(name):
     template = Templates.objects.filter(definition__guid=name).first_or_404()
-    #template = Templates.objects.get_or_404(definition__guid=name)
     template.delete()
     return jsonify({'result': 'OK', 'msg': 'template deleted', 'name':name})
 
@@ -63,7 +70,6 @@ def delete_template_api(name):
 @admin_permission.require(http_exception=403)
 def put_template_api(tmp):
     template = Templates.objects.filter(definition__guid=tmp).first_or_404()
-    #template = Templates.objects.get_or_404(definition__guid=tmp)
     payload = request.json
     validfields = set(Templates._fields) & set(payload)
     subset = {k: payload[k] for k in validfields}

diff --git a/web/project/api/visualizations.py b/web/project/api/visualizations.py
@@ -5,6 +5,7 @@
 from flask_security import auth_token_required, http_auth_required, login_required, current_user
 from ..models import db, Visualizations
 from mongoengine.queryset import Q
+from ..settings import PAGINATION_PAGE
 
 
 viz_api = Blueprint('visualization_api', __name__, url_prefix='/api/pulse/visualizations')
@@ -13,19 +14,28 @@
 admin_permission = Permission(RoleNeed('admin'))
 editor_permission = Permission(RoleNeed('editor'))
 
+PER_PAGE = PAGINATION_PAGE
 
 #Improve the logic here
 @viz_api.route('', methods=['GET'])
 @viz_api.route('/', methods=['GET'])
 def get_visualizations_api():
+
+    total = Visualizations.objects().count()
+    page = 1
+
+    if 'page' in request.args:
+        page = int(request.args['page'])
+
     if current_user.has_role('admin'):
-        visualizations = Visualizations.objects.all().order_by('-pub_date')
+        visualizations = Visualizations.objects.all().order_by('-pub_date').paginate(page=page, per_page=PER_PAGE).items
     elif current_user.has_role('editor'):
         visualizations = Visualizations.objects(Q(status='public') | Q(contributor=current_user.email)).order_by(
-            '-pub_date')
+            '-pub_date').paginate(page=page, per_page=PER_PAGE).items
     else:
-        visualizations = Visualizations.objects(Q(status='public')).order_by('-pub_date')
-    return jsonify({'result': visualizations})
+        visualizations = Visualizations.objects(Q(status='public')).order_by('-pub_date').paginate(page=page, per_page=PER_PAGE).items
+
+    return jsonify({'total': total, 'per_page': PER_PAGE, 'result': visualizations})
 
 
 @viz_api.route('/<name>', methods=['GET'])

diff --git a/web/project/frontend/static/bower.json b/web/project/frontend/static/bower.json
@@ -39,7 +39,8 @@
     "star-rating": "arlejeun/star-rating#^2.0.6",
     "s-html": "arlejeun/s-html#^0.1.4",
     "show-json": "arlejeun/show-json",
-    "google-youtube":"GoogleWebComponents/google-youtube"
+    "google-youtube":"GoogleWebComponents/google-youtube",
+    "tk-pagination":"arlejeun/tk-pagination"
   },
   "devDependencies": {
     "web-component-tester": "^4.0.0"

diff --git a/web/project/frontend/static/src/gsys-pulse-dashboards.html b/web/project/frontend/static/src/gsys-pulse-dashboards.html
@@ -10,9 +10,11 @@
 <link rel="import" href="../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../bower_components/poly-filter/demo/demo-list.html">
 
+<link rel="import" href="../bower_components/poly-filter/demo/demo-list.html">
+
 <link rel="import" href="../bower_components/iron-image/iron-image.html">
-<!--<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">-->
-<link rel="import" href="../bower_components/paper-item/paper-item.html">
+
+<link rel="import" href="../bower_components/tk-pagination/tk-pagination.html">
 
 <!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
 <link rel="import" href="../bower_components/neon-animation/web-animations.html">
@@ -34,6 +36,27 @@
         :host {
           --app-grid-columns: 3;
           --app-grid-gutter:20px;
+
+          --tk-pagination-span-theme: {
+                display: inline-block;
+                font-size: 12px;
+                color: #5d3e5d78;
+                width: 24px;
+                height: 24px;
+                text-align: center;
+                cursor: pointer;
+                color: #5d3e5d78;
+                margin-left: 10px;
+                border: 1px solid #5d3e5d78;
+                box-sizing: border-box;
+
+           }
+
+           --tk-pagination-span-selected-theme: {
+                color: #5d3e5d;
+                border: 1px solid #5d3e5d;
+           }
+
         }
 
         ul {
@@ -70,6 +93,7 @@
             margin-top: auto;
         }
 
+
       </style>
 
       <app-route
@@ -87,6 +111,7 @@
         id="categoryData"
         category-name="[[_computeCategoryName(route)]]"
         category="{{category}}"
+        page="{{currentPage}}"
         failure="{{failure}}">
       </market-category-data>
 
@@ -95,33 +120,12 @@
 
           <paper-toolbar class="subheader">
 
-          <!--<label id="label3"></label>
-            <paper-radio-group selected="b" allow-empty-selection aria-labelledby="label3">
-              <paper-radio-button name="a">Pulse</paper-radio-button>
-              <paper-radio-button name="b">CX Insigths</paper-radio-button>
-            </paper-radio-group>-->
-
             <span class="title"></span>
 
-            <!--<paper-menu-button>
-              <paper-icon-button class="add" icon="icons:add-circle" slot="dropdown-trigger"></paper-icon-button>
-              <paper-listbox slot="dropdown-content">
-                   <paper-item on-tap="_addDashboard">Pulse</paper-item>
-                   <paper-item on-tap="_addCXInsightsDashboard">CX Insights</paper-item>
-              </paper-listbox>
-            </paper-menu-button>-->
-
             <paper-icon-button class="add" icon="icons:add-circle" on-tap="_addDashboard"></paper-icon-button>
 
             <paper-input label="search for dashboard" value="{{filterString}}"></paper-input>
 
-            <!--<paper-tooltip for="add-dashboard" class="custom" animation-delay="0">
-              <img src="./donuts.png">
-              Rich-text tooltips are doable but against the Material Design spec.
-            </paper-tooltip>-->
-
-
-
           </paper-toolbar>
 
           <div class="vertical-section">
@@ -132,16 +136,20 @@
                   filterDebounceDelay="300">
                 </poly-filter>
           </div>
-      </template>
 
+          <ul class="app-grid">
+                <template is="dom-repeat" items="[[_getListItems(filteredItems)]]">
+                   <li class="item">
+                      <pulse-dashboard-elt item="[[item]]"></pulse-dashboard-elt>
+                    </li>
+                </template>
+          </ul>
 
-      <ul class="app-grid">
-            <template is="dom-repeat" items="[[_getListItems(filteredItems)]]">
-               <li class="item">
-                  <pulse-dashboard-elt item="[[item]]"></pulse-dashboard-elt>
-                </li>
-            </template>
-      </ul>
+          <div style="text-align:center;">
+              <tk-pagination no-jump-device no-page-count total="[[category.total]]" page-size="[[category.per_page]]" current-page="{{currentPage}}"></tk-pagination>
+          </div>
+
+       </template>
 
       <template is="dom-if" if="[[_getTemplateID(route)]]" hidden$="[[failure]]">
           <gsys-detail-dashboard id='detail' route="[[route]]"></gsys-detail-dashboard>
@@ -241,6 +249,7 @@
         location.href= '/upload/dashboards';
       }
 
+
       });
 
   </script>

diff --git a/web/project/frontend/static/src/gsys-pulse-templates.html b/web/project/frontend/static/src/gsys-pulse-templates.html
@@ -23,6 +23,26 @@
         :host {
           --app-grid-columns: 4;
           --app-grid-gutter:20px;
+
+          --tk-pagination-span-theme: {
+                display: inline-block;
+                font-size: 12px;
+                color: #5d3e5d78;
+                width: 24px;
+                height: 24px;
+                text-align: center;
+                cursor: pointer;
+                color: #5d3e5d78;
+                margin-left: 10px;
+                border: 1px solid #5d3e5d78;
+                box-sizing: border-box;
+
+           }
+
+           --tk-pagination-span-selected-theme: {
+                color: #5d3e5d;
+                border: 1px solid #5d3e5d;
+           }
         }
 
         ul {
@@ -77,6 +97,7 @@
         id="categoryData"
         category-name="[[_computeCategoryName(route)]]"
         category="{{category}}"
+        page="{{currentPage}}"
         failure="{{failure}}">
       </market-category-data>
 
@@ -97,8 +118,6 @@
               filterDebounceDelay="300">
             </poly-filter>
           </div>
-      </template>
-
 
           <ul class="app-grid">
             <template is="dom-repeat" items="[[_getListItems(filteredItems)]]">
@@ -108,12 +127,15 @@
             </template>
           </ul>
 
+          <div style="text-align:center;">
+              <tk-pagination no-jump-device no-page-count total="[[category.total]]" page-size="[[category.per_page]]" current-page="{{currentPage}}"></tk-pagination>
+          </div>
 
-          <template is="dom-if" if="[[_getTemplateID(route)]]" hidden$="[[failure]]">
-              <gsys-detail-template route="[[route]]" user="[[user]]" role="[[role]]"></gsys-detail-template>
-          </template>
-
+      </template>
 
+      <template is="dom-if" if="[[_getTemplateID(route)]]" hidden$="[[failure]]">
+              <gsys-detail-template route="[[route]]" user="[[user]]" role="[[role]]"></gsys-detail-template>
+      </template>
 
 
     </template>