PAGINATION

yadc/bp/main.py

@@ -25,12 +25,12 @@ def index():
     return redirect(url_for('main.posts'))
 
 # @bp.route('/')
-@bp.route('/post', defaults={'page': 1}
-)
+@bp.route('/post', defaults={'page': 1})
 @bp.route('/post/<int:page>')
 def posts(page):
     def tags_prepare(posts):
-        tags = db.session.query(Tag, func.array_agg(posts.c.id)).join(posts, Tag.posts).group_by(Tag.id).all()
+        # tags = db.session.query(Tag, func.array_agg(posts.c.id)).join(posts, Tag.posts).group_by(Tag.id).all()
+        tags = db.session.query(Tag, func.array_agg(Post.id)).join(Tag.posts).filter(Post.id.in_([p.id for p in posts])).group_by(Tag.id).all()
 
         # tagset = set()
         # taglist = list()
@@ -59,22 +59,22 @@ def posts(page):
         # page = int(args.get('page') or 1)
         return (tags, matched_ratings)
 
-    posts_on_page = 4
+    posts_on_page = 1
 
     f_tags, f_rating = parse_args()
     posts_query = Post.query
     if len(f_tags)>0:
         posts_query = posts_query.join(Post.tags).group_by(Post.id).filter(Tag.content.in_(f_tags)).having(func.count(Post.id)==len(f_tags))
-    posts_query = posts_query.filter(Post.rating.in_(f_rating)).order_by(Post.created).offset((page-1)*posts_on_page).limit(posts_on_page)
+    posts_query = posts_query.filter(Post.rating.in_(f_rating)).order_by(Post.created) #.offset((page-1)*posts_on_page).limit(posts_on_page)
 
-    posts = posts_query.all()
-    tags = tags_prepare(posts_query.subquery())
+    posts = posts_query.paginate(page, posts_on_page)
+    tags = tags_prepare(posts.items)
 
     flash(parse_args())
-    # flash(posts)
+    # flash(posts.items)
     # flash(tags)
 
-    return render_template('index.html', posts=posts, tags=tags)
+    return render_template('index.html', posts=posts.items, tags=tags, pagination=posts, query_replace=query_replace)
 
 @bp.route('/post/show/<id>')
 def post_show(id):

yadc/static/default.scss

@@ -354,7 +354,10 @@ header {
 
         .pagin {
             margin: 10px 0;
-            margin-right: calc(#{$side-panel-width}/2);
+            
+            @include media($bp-desktop) {
+                margin-right: calc(#{$side-panel-width}*3/4);
+            }
 
             display: flex;
             flex-flow: row nowrap;

yadc/templates/_includes.html

@@ -1,4 +1,4 @@
-{% macro tags(tags) %}
+{% macro render_tags() %}
 <article class="tags">
     <h3>Tags</h3>
     <div class="tag_container">
@@ -14,6 +14,29 @@
 </article>
 {% endmacro %}
 
+<!-- https://flask-sqlalchemy.palletsprojects.com/en/2.x/api/#flask_sqlalchemy.Pagination.iter_pages -->
+{% macro render_pagination(endpoint) %}
+<div class="pagin">
+    {% if pagination.has_prev %}
+    <a href="{{ query_replace({}, url_for(endpoint, page=pagination.prev_num)) }}"><span class="fa fa-chevron-left"></span></a>
+    {% endif %}
+    {% for page in pagination.iter_pages(left_edge=1, left_current=1, right_current=2, right_edge=1) %}
+      {% if page %}
+        {% if page != pagination.page %}
+    <a href="{{ query_replace({}, url_for(endpoint, page=page)) }}">{{ page }}</a>
+        {% else %}
+    <a><strong>{{ page }}</strong></a>
+        {% endif %}
+      {% else %}
+    <span class=ellipsis>…</span>
+      {% endif %}
+    {% endfor %}
+    {% if pagination.has_next %}
+    <a href="{{ query_replace({}, url_for(endpoint, page=pagination.next_num)) }}"><span class="fa fa-chevron-right"></span></a>
+    {% endif %}
+</div>
+{% endmacro %}
+
 <!-- {% macro rating(rating) %}
 <article class="rating">
     <h3>Rating</h3>

yadc/templates/index.html

@@ -1,10 +1,10 @@
 {% extends 'base.html' %}
-{% from '_includes.html' import tags as tags_block %}
+{% from '_includes.html' import render_tags, render_pagination with context %}
 
 {% block content %}
         <div class="important_subwrap">
             <section class="side_panel">
-                {{ tags_block(tags) }}
+                {{ render_tags() }}
             </section>
             <section class="post_list">
                 <div class="posts">
@@ -27,15 +27,7 @@
                         </div>
                     </figure> -->
                 </div>
-                <div class="pagin">
-                    <a href="#"><span class="fa fa-chevron-left"></span></a>
-                    <a href="#">1</a>
-                    <a href="#">2</a>
-                    <a href="#">3</a>
-                    <a href="#">4</a>
-                    <a href="#">5</a>
-                    <a href="#"><span class="fa fa-chevron-right"></span></a>
-                </div>
+                {{ render_pagination('main.posts') }}
             </section>
         </div>
 {% endblock content %}