From a9504b0b717511de27727e89418475be07474ac6 Mon Sep 17 00:00:00 2001
From: Cayo Puigdefabregas <cayo@ribaguifi.com>
Date: Wed, 23 Nov 2022 13:36:34 +0100
Subject: [PATCH] first step for pagination

---
 ereuse_devicehub/inventory/views.py           |   7 +
 .../templates/inventory/erasure_list.html     | 175 +++++++-----------
 2 files changed, 79 insertions(+), 103 deletions(-)

diff --git a/ereuse_devicehub/inventory/views.py b/ereuse_devicehub/inventory/views.py
index 1d34a7b3..56eaab1d 100644
--- a/ereuse_devicehub/inventory/views.py
+++ b/ereuse_devicehub/inventory/views.py
@@ -128,6 +128,13 @@ class ErasureListView(DeviceListMixin):
         )
         if orphans:
             erasure = [e for e in erasure if e.device.orphan]
+
+        page = int(request.args.get('page', 1))
+        per_page = int(request.args.get('per_page', 5))
+
+        erasure = erasure.paginate(page=page, per_page=per_page)
+        erasure.first = per_page * erasure.page - per_page + 1
+        erasure.last = len(erasure.items) + erasure.first - 1
         self.context['erasure'] = erasure
 
 
diff --git a/ereuse_devicehub/templates/inventory/erasure_list.html b/ereuse_devicehub/templates/inventory/erasure_list.html
index adaec94f..57f660b8 100644
--- a/ereuse_devicehub/templates/inventory/erasure_list.html
+++ b/ereuse_devicehub/templates/inventory/erasure_list.html
@@ -110,6 +110,37 @@
               {% endif %}
 
               <div class="tab-content pt-2">
+                <div class="dataTable-top">
+                  <div class="dataTable-dropdown">
+                    <label>
+                      <select class="dataTable-selector">
+                        <option value="5"{% if erasure.per_page == 5 %} selected="selected"{% endif %}>
+                          5
+                        </option>
+                        <option value="10"{% if erasure.per_page == 10 %} selected="selected"{% endif %}>
+                          10
+                        </option>
+                        <option value="15"{% if erasure.per_page == 15 %} selected="selected"{% endif %}>
+                          15
+                        </option>
+                        <option value="20"{% if erasure.per_page == 20 %} selected="selected"{% endif %}>
+                          20
+                        </option>
+                        <option value="25"{% if erasure.per_page == 25 %} selected="selected"{% endif %}>
+                          25
+                        </option>
+                        <option value="50"{% if erasure.per_page == 50 %} selected="selected"{% endif %}>
+                          50
+                        </option>
+                        <option value="100"{% if erasure.per_page == 100 %} selected="selected"{% endif %}>
+                          100
+                        </option>
+                      </select> entries per page
+                    </label>
+                  </div>
+                  <div class="dataTable-search">
+                  </div>
+                </div>
                 <table class="table">
                   <thead>
                     <tr>
@@ -125,7 +156,7 @@
                     </tr>
                   </thead>
                   <tbody>
-                    {% for ac in erasure %}
+                    {% for ac in erasure.items %}
                     <tr>
                       <td>
                           <input type="checkbox" class="deviceSelect" data="{{ ac.device.id }}"
@@ -170,7 +201,7 @@
                       </td>
                       <td>
                         <a href="{{ url_for('inventory.export', export_id='snapshot') }}?id={{ ac.snapshot.uuid }}">
-                          {{ ac.snapshot.uuid }}
+                         {{ ac.snapshot.uuid }}
                         </a>
                       </td>
                       <td>
@@ -196,6 +227,38 @@
                 </table>
 
                 </div>
+                <div class="dataTable-bottom">
+                  <div class="dataTable-info">
+                    Showing {{ erasure.first }} to {{ erasure.last }} of {{ erasure.total }} entries
+                  </div>
+                  <nav class="dataTable-pagination">
+                    <ul class="dataTable-pagination-list">
+                      {% if erasure.has_prev %}
+                        <li class="pager">
+                          <a href="{{ url_for('inventory.device_erasure_list', page=erasure.prev_num, per_page=erasure.per_page) }}">‹</a>
+                        </li>
+                      {% endif %}
+                      {% for page in erasure.iter_pages() %}
+                        {% if page %}
+                          {% if page == erasure.page %}
+                            <li class="active"><a href="javascript:void()">{{ page }}</a></li>
+                          {% else %}
+                            <li class="">
+                              <a href="{{ url_for('inventory.device_erasure_list', page=page, per_page=erasure.per_page) }}">
+                                {{ page }}
+                              </a>
+                            </li>
+                          {% endif %}
+                        {% endif %}
+                      {% endfor %}
+                      {% if erasure.has_next %}
+                        <li class="pager">
+                          <a href="{{ url_for('inventory.device_erasure_list', page=erasure.next_num, per_page=erasure.per_page) }}">›</a>
+                        </li>
+                      {% endif %}
+                    </ul>
+                  </nav>
+                </div>
               </div>
               {% if lot and not lot.is_temporary %}
               <div id="trade-documents-list" class="tab-pane fade trade-documents-list">
@@ -225,103 +288,6 @@
                   </tbody>
                 </table>
               </div>
-              <div id="edit-transfer" class="tab-pane fade edit-transfer">
-                <h5 class="card-title">Transfer</h5>
-                <form method="post" action="{{ url_for('inventory.edit_transfer', lot_id=lot.id) }}" class="row g-3 needs-validation" novalidate>
-                  {{ form_transfer.csrf_token }}
-
-                  {% for field in form_transfer %}
-                    {% if field != form_transfer.csrf_token %}
-                      <div class="col-12">
-                      {% if field != form_transfer.type %}
-                        {{ field.label(class_="form-label") }}
-                        {% if field == form_transfer.code %}
-                        <span class="text-danger">*</span>
-                        {% endif %}
-                        {{ field }}
-                        <small class="text-muted">{{ field.description }}</small>
-                        {% if field.errors %}
-                          <p class="text-danger">
-                            {% for error in field.errors %}
-                              {{ error }}<br/>
-                            {% endfor %}
-                          </p>
-                        {% endif %}
-                      {% endif %}
-                      </div>
-                    {% endif %}
-                  {% endfor %}
-
-                  <div>
-                    <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}" class="btn btn-danger">Cancel</a>
-                    <button class="btn btn-primary" type="submit">Save</button>
-                  </div>
-                </form>
-              </div>
-              <div id="edit-delivery-note" class="tab-pane fade edit-delivery-note">
-                <h5 class="card-title">Delivery Note</h5>
-                <form method="post" action="{{ url_for('inventory.delivery_note', lot_id=lot.id) }}" class="row g-3 needs-validation" novalidate>
-                  {{ form_delivery.csrf_token }}
-
-                  {% for field in form_delivery %}
-                    {% if field != form_delivery.csrf_token %}
-                      <div class="col-12">
-                      {% if field != form_delivery.type %}
-                        {{ field.label(class_="form-label") }}
-                        {{ field }}
-                        <small class="text-muted">{{ field.description }}</small>
-                        {% if field.errors %}
-                          <p class="text-danger">
-                            {% for error in field.errors %}
-                              {{ error }}<br/>
-                            {% endfor %}
-                          </p>
-                        {% endif %}
-                      {% endif %}
-                      </div>
-                    {% endif %}
-                  {% endfor %}
-
-                  {% if lot.transfer and form_receiver.is_editable() %}
-                  <div>
-                    <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}" class="btn btn-danger">Cancel</a>
-                    <button class="btn btn-primary" type="submit">Save</button>
-                  </div>
-                  {% endif %}
-                </form>
-              </div>
-              <div id="edit-receiver-note" class="tab-pane fade edit-receiver-note">
-                <h5 class="card-title">Receiver Note</h5>
-                <form method="post" action="{{ url_for('inventory.receiver_note', lot_id=lot.id) }}" class="row g-3 needs-validation" novalidate>
-                  {{ form_receiver.csrf_token }}
-
-                  {% for field in form_receiver %}
-                    {% if field != form_receiver.csrf_token %}
-                      <div class="col-12">
-                      {% if field != form_receiver.type %}
-                        {{ field.label(class_="form-label") }}
-                        {{ field }}
-                        <small class="text-muted">{{ field.description }}</small>
-                        {% if field.errors %}
-                          <p class="text-danger">
-                            {% for error in field.errors %}
-                              {{ error }}<br/>
-                            {% endfor %}
-                          </p>
-                        {% endif %}
-                      {% endif %}
-                      </div>
-                    {% endif %}
-                  {% endfor %}
-
-                  {% if lot.transfer and form_receiver.is_editable() %}
-                  <div>
-                    <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}" class="btn btn-danger">Cancel</a>
-                    <button class="btn btn-primary" type="submit">Save</button>
-                  </div>
-                  {% endif %}
-                </form>
-              </div>
               {% endif %}
 
             </div><!-- End Bordered Tabs -->
@@ -344,11 +310,14 @@
 
 <!-- Custom Code -->
 <script>
-  let table = new simpleDatatables.DataTable("table", {
-    perPageSelect: [5, 10, 15, 20, 25, 50, 100],
-    perPage: 20
-  })
+  $(document).ready(() => {
+    $(".dataTable-selector").on("change", function() {
+        const per_page = $('.dataTable-selector').val();
+        window.location.href = "{{ url_for('inventory.device_erasure_list', page=1) }}&per_page="+per_page;
+    });
+  });
 </script>
+
 {% if config['DEBUG'] %}
   <script src="{{ url_for('static', filename='js/main_inventory.js') }}"></script>
 {% else %}