ec-dashboard.html in easycomments-1.0.4

- old
+ new

@@ -79,10 +79,24 @@
       }
       a {
         text-decoration: none !important;
         color: #616161;
       }
+      .pagination{
+        padding-top: 20px;
+        padding-bottom: 20px;
+      }
+      .pg_input {
+         width: 83px;
+      }
+      .pg_btn::shadow #ripple {
+        color: #FFA726;
+      }
+      paper-input-decorator /deep/ .focused-underline {
+        /* line color when the input is focused */
+        background-color: #FF9800;
+      }
     </style>
     <core-ajax
       auto
       id="get_all_posts"
       url="/dashboard/get_all_posts"
@@ -104,20 +118,22 @@
       response="{{total_pending}}">
     </core-ajax>
     <core-ajax
       id="get_all_comments"
       url="/dashboard/comments"
-      params='{"post":"{{post_global}}"}'
+      params='{"post":"{{post_global}}", "page":"{{current_page}}"}'
       handleAs="json"
-      response="{{comments}}">
+      response="{{comments}}"
+      on-core-complete="{{pageRange}}">
     </core-ajax>
     <core-ajax
       id="get_pending_comments"
       url="/dashboard/get_pending_comments"
-      params='{"post":"{{post_global}}"}'
+      params='{"post":"{{post_global}}", "page":"{{current_page}}"}'
       handleAs="json"
-      response="{{comments}}">
+      response="{{comments}}"
+      on-core-complete="{{pageRange}}">
     </core-ajax>
     <core-ajax
       id="edit_comment"
       url="/dashboard/edit_comment"
       method="post"
@@ -155,12 +171,12 @@
       <core-header-panel navigation flex mode="seamed">
         <paper-shadow><div  class="core-header"><a href="/">EasyComments</a></div></paper-shadow>
         <core-menu>
           <section is="auto-binding">
             <paper-tabs selected="{{selected}}">
-              <paper-tab>Pending&nbsp;&nbsp;<span class="pending_number">{{total_pending.pending}}</span></paper-tab>
-              <paper-tab>All</paper-tab>
+              <paper-tab on-click="{{refreshPosts}}">Pending&nbsp;&nbsp;<span class="pending_number">{{total_pending.pending}}</span></paper-tab>
+              <paper-tab on-click="{{refreshPosts}}">All</paper-tab>
             </paper-tabs>
             <core-pages selected="{{selected}}">
               <div>
                 <template repeat="{{post in pending_posts.pending}}">
                   <paper-button id ="post-button" on-click="{{getPendingComments}}">{{post.post}}&nbsp;&nbsp;<span class="pending_number">{{post.pending}}</span></paper-button>
@@ -178,11 +194,11 @@
         </core-menu>
       </core-header-panel>
       <div tool id="title">{{post_title}}</div>
       <div id ="content" fit>
         <template repeat="{{comment in comments.comments}}">
-          <paper-shadow>
+          <paper-shadow id="comment_{{comment.id}}">
             <p id="comment-title">{{comment.name}} - {{comment.email}} - {{comment.timestamp}}</p>
             <paper-autogrow-textarea id="a1">
               <textarea value="{{comment.body}}" rows="5"></textarea>
             </paper-autogrow-textarea>
             <div horizontal layout id="controls">
@@ -196,26 +212,40 @@
               <core-icon-button icon="editor:mode-edit" on-click="{{editComment}}"> Save</core-icon-button>
               <core-icon-button icon="highlight-remove" on-click="{{removeComment}}"> Remove</core-icon-button>
             </div>
           </paper-shadow>
         </template>
+        <template if="{{comments.page_count > 1}}">
+          <paper-shadow class="pagination" horizontal center-justified layout>
+              <paper-button class="pg_btn" on-click="{{firstPage}}">First</paper-button>
+                <paper-button disabled='{{current_page <= 1}}' class="pg_btn" on-click="{{prevPage}}">Previous</paper-button>
+                <paper-input-decorator class="pg_input"><input is="core-input" value="{{page_input}}"></paper-input-decorator>
+                <label class="pg_btn"><br>of {{comments.page_count}}</label>
+                <paper-button  disabled='{{current_page >= comments.total_pages}}' on-click="{{nextPage}}" class="pg_btn">Next</paper-button>
+              <paper-button class="pg_btn" on-click="{{lastPage}}">Last</paper-button>
+          </paper-shadow>
+        </template>
       </div>
     </core-scaffold>
   </template>
 
   <script>
     Polymer('ec-dashboard', {
         getComments: function(e, detail, sender){
           var p = e.target.templateInstance.model.post;
           this.post_title = p;
           this.post_global = p;
+          this.current_page = 1;
+          this.page_input = this.current_page;
           this.shadowRoot.querySelector("#get_all_comments").go();
         },
         getPendingComments: function(e, detail, sender){
           var p = e.target.templateInstance.model.post.post;
           this.post_title = p;
           this.post_global = p;
+          this.current_page = 1;
+          this.page_input = this.current_page;
           this.shadowRoot.querySelector("#get_pending_comments").go();
         },
         editComment: function(e, detail, sender){
           var b = e.target.templateInstance.model.comment.body;
           var d = e.target.templateInstance.model.comment.id;
@@ -228,14 +258,17 @@
         removeComment: function(e, detail, sender){
           var d = e.target.templateInstance.model.comment.id;
           this.comment_id = d;
           this.shadowRoot.querySelector("#remove_comment").go();
           //refresh comment list
-          this.shadowRoot.querySelector("#get_all_comments").go();
+          if (this.selected == "0") {
+            this.shadowRoot.querySelector("#get_pending_comments").go();
+          }else {
+            this.shadowRoot.querySelector("#get_all_comments").go();
+          }
           //refresh post list
           this.refreshPosts();
-          //na vgainei kai to title panw panw
         },
         approveComment: function(e, detail, sender){
           var d = e.target.templateInstance.model.comment.id;
           this.comment_id = d;
           this.shadowRoot.querySelector("#approve_comment").go();
@@ -247,19 +280,73 @@
           this.comment_id = d;
           this.shadowRoot.querySelector("#ignore_comment").go();
           //refresh post list
           this.refreshPosts();
           //refresh comment list
-          this.shadowRoot.querySelector("#get_pending_comments").go();
+          if (this.selected == "0") {
+            this.shadowRoot.querySelector("#get_pending_comments").go();
+          }else {
+            this.shadowRoot.querySelector("#get_all_comments").go();
+          }
         },
         showToast: function(event, response) {
           this.shadowRoot.querySelector('#toast1').text = response.response.status;
           this.shadowRoot.querySelector('#toast1').show();
         },
         refreshPosts: function() {
           this.shadowRoot.querySelector("#get_all_posts").go();
           this.shadowRoot.querySelector("#get_posts_with_pending").go();
           this.shadowRoot.querySelector("#get_total_pending").go();
+        },
+        firstPage: function () {
+          this.current_page = 1;
+          this.page_input = this.current_page;
+          if (this.selected == "0") {
+            this.shadowRoot.querySelector("#get_pending_comments").go();
+          }else {
+            this.shadowRoot.querySelector("#get_all_comments").go();
+          }
+        },
+        lastPage: function () {
+          this.current_page = this.comments.page_count;
+          this.page_input = this.current_page;
+          if (this.selected == "0") {
+            this.shadowRoot.querySelector("#get_pending_comments").go();
+          }else {
+            this.shadowRoot.querySelector("#get_all_comments").go();
+          }
+        },
+        prevPage: function () {
+          this.current_page = this.current_page - 1;
+          this.page_input = this.current_page;
+          if (this.selected == "0") {
+            this.shadowRoot.querySelector("#get_pending_comments").go();
+          }else {
+            this.shadowRoot.querySelector("#get_all_comments").go();
+          }
+        },
+        nextPage: function () {
+          this.current_page = this.current_page + 1;
+          this.page_input = this.current_page;
+          if (this.selected == "0") {
+            this.shadowRoot.querySelector("#get_pending_comments").go();
+          }else {
+            this.shadowRoot.querySelector("#get_all_comments").go();
+          }
+        },
+        setPage: function (oldValue, newValue) {
+          if (oldValue != newValue && newValue > 0){
+            var value = Path.get('page_input').getValueFrom(this);
+            this.current_page = value;
+            if (this.selected == "0") {
+              this.shadowRoot.querySelector("#get_pending_comments").go();
+            }else {
+              this.shadowRoot.querySelector("#get_all_comments").go();
+            }
+          }
+        },
+        observe: {
+          'page_input': 'setPage'
         },
         attached: function() {
           //open pending tab by default
           this.selected = "0";
         },
\ No newline at end of file