added right sidebar

app/__init__.py

@@ -21,6 +21,7 @@ def create_app(environment="development"):
         main_blueprint,
         auth_blueprint,
         user_blueprint,
+        books_blueprint,
     )
     from app.models import (
         User,
@@ -46,6 +47,7 @@ def create_app(environment="development"):
     app.register_blueprint(auth_blueprint)
     app.register_blueprint(main_blueprint)
     app.register_blueprint(user_blueprint)
+    app.register_blueprint(books_blueprint)
 
     # Set up flask login.
     @login_manager.user_loader

app/templates/base.html

@@ -74,6 +74,7 @@
     <!-- SideBar -->
     <!-- prettier-ignore -->
     {% include 'sidebar.html' %}
+    {% include 'right_sidebar.html' %}
 
     <div class="sm:ml-64 mt-14 h-full overflow-x-scroll">
       <!-- Main Content -->

app/templates/books/index.html

@@ -0,0 +1,10 @@
+<!-- prettier-ignore -->
+{% extends 'base.html' %}
+{% block content %}
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5"></div>
+{% include 'user/add.html' %}
+<!-- prettier-ignore -->
+{% endblock %}
+<!-- prettier-ignore -->
+{% block scripts %}
+{% endblock %}

app/templates/right_sidebar.html

@@ -0,0 +1,115 @@
+<aside
+  id="logo-sidebar"
+  class="fixed top-0 right-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+  aria-label="Sidebar">
+  <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
+    <ul class="space-y-4 font-medium">
+      <li>
+        <a
+          href="#"
+          class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+          <!-- prettier-ignore -->
+          <button type="button" class="text-white w-full bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> New book </button>
+        </a>
+      </li>
+      <li>
+        <button
+          id="dropdownDelayButton"
+          data-dropdown-toggle="dropdownDelay"
+          data-dropdown-delay="500"
+          data-dropdown-trigger="hover"
+          class="text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          type="button">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
+          </svg>
+          Filters
+        </button>
+        <!-- Dropdown menu -->
+        <!-- prettier-ignore -->
+        <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+          <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
+            <!-- prettier-ignore -->
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Dashboard</a > </li>
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Settings</a > </li>
+          </ul>
+        </div>
+      </li>
+      <li>
+        <button
+          id="dropdownDelayButton"
+          data-dropdown-toggle="dropdownDelay"
+          data-dropdown-delay="500"
+          data-dropdown-trigger="hover"
+          class="text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          type="button">
+          Tags
+          <svg
+            class="w-4 h-4 ml-auto"
+            aria-hidden="true"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </button>
+        <!-- Dropdown menu -->
+        <!-- prettier-ignore -->
+        <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+          <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
+            <!-- prettier-ignore -->
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Dashboard</a > </li>
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Settings</a > </li>
+          </ul>
+        </div>
+      </li>
+      <li>
+        <button
+          id="dropdownDelayButton"
+          data-dropdown-toggle="dropdownDelay"
+          data-dropdown-delay="500"
+          data-dropdown-trigger="hover"
+          class="text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          type="button">
+          Sort by
+          <svg
+            class="w-4 h-4 ml-auto"
+            aria-hidden="true"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </button>
+        <!-- Dropdown menu -->
+        <!-- prettier-ignore -->
+        <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+          <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
+            <!-- prettier-ignore -->
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Dashboard</a > </li>
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Settings</a > </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+</aside>

app/templates/sidebar.html

@@ -15,7 +15,7 @@
       </li>
       <li>
         <a
-          href="#"
+          href="{{ url_for('books.get_all') }}"
           class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
           <!-- prettier-ignore -->
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>

app/views/__init__.py

@@ -2,3 +2,4 @@
 from .auth import auth_blueprint
 from .main import main_blueprint
 from .user import bp as user_blueprint
+from .books import bp as books_blueprint

app/views/books.py

@@ -0,0 +1,47 @@
+from flask import (
+    Blueprint,
+    render_template,
+    request,
+    flash,
+    redirect,
+    url_for,
+)
+from flask_login import login_required
+from app.controllers import create_pagination
+
+from app import models as m
+from app import forms as f
+from app.logger import log
+
+bp = Blueprint("books", __name__, url_prefix="/books")
+
+
+@bp.route("/", methods=["GET"])
+def get_all():
+    q = request.args.get("q", type=str, default=None)
+    books = m.Book.query.order_by(m.Book.id)
+    if q:
+        books = books.filter(m.Book.label.like(f"{q}"))
+
+    pagination = create_pagination(total=books.count())
+
+    return render_template(
+        "books/index.html",
+        books=books.paginate(page=pagination.page, per_page=pagination.per_page),
+        page=pagination,
+        search_query=q,
+    )
+
+
+@bp.route("/create", methods=["POST"])
+@login_required
+def create():
+    form = f.NewBookForm()
+    if form.validate_on_submit():
+        book = m.Book(
+            label=form.label.data,
+        )
+        log(log.INFO, "Form submitted. User: [%s]", book)
+        flash("Book added!", "success")
+        book.save()
+        return redirect(url_for("books.get_all"))