add stamp, cont filter orders list

Dockerfile

@@ -55,7 +55,6 @@ RUN apk update && apk add --update --no-cache --progress \
         libwebp-dev \
         libffi-dev \
         ttf-freefont \
-        # font-bh-ttf \
 		python3-dev \
 
 	&& python3 -m ensurepip \

bower.json

@@ -24,6 +24,7 @@
     "jquery-ui": "1.10.3",
     "blockUI": "*",
     "django-dynamic-formset": "*",
-    "jquery-form": "3.37.0"
+    "jquery-form": "3.37.0",
+    "list.js": "^1.5.0"
   }
 }

static/css/style.css

@@ -578,6 +578,19 @@ table.list tr th a {font-size:12px;color:#646669;text-decoration:none;}
 table.list tr td a {text-decoration:none;}
 table.list tr td {font-size:14px;color:#313942;padding:7px;word-break: break-all;}
 
+.docs-content-wrapper table.orders {border:none;}
+table.orders {border-collapse: collapse;border:#dedede 1px solid;width: 100%;}
+.docs-content-wrapper table.orders tr.doc-row {height:50px;}
+table.orders tr:nth-child(odd) {background: #f7f7f7;}
+table.orders tr:nth-child(even) {background: #fff;}
+table.orders tfoot tr:nth-child(odd) {background: #fff;}
+table.orders tr th {text-align: left;font-size:12px;color:#646669;padding:7px 10px 7px 10px;border-right:#dedede 1px solid;border-bottom:#dedede 1px solid;border-top:none;background: #f7f7f7;}
+table.orders tr th:last-child {border-right:none;}
+table.orders tr th a {font-size:12px;color:#646669;text-decoration:none;}
+table.orders tr td a {text-decoration:none;}
+table.orders tr td {font-size:14px;color:#313942;padding:7px;word-break: break-all;}
+
+
 .filters-header {background: #f7f7f7;overflow:hidden;margin:0;}
 .filters-header span {color: #646669;padding: 7px 0 7px 20px;font-size:12px;font-weight:bold;display:block;width:100%;box-sizing:border-box;border-bottom:#dedede 1px solid;}
 
@@ -1048,3 +1061,64 @@ input[type=number] {
 .status-license {
 	opacity: 0.5;
 }
+
+#history {
+	float: left;
+	width: 80%;
+}
+
+#history a:hover{
+	text-decoration: underline;
+}
+
+.filter__table {
+	float: right;
+	padding-left: 15px;
+	width: 16%;
+	border-left: 1px solid #dedede;
+}
+
+.filter__title {
+	width: 80%;
+	font-weight: bold;
+	padding-bottom: 10px;
+	border-bottom: 1px solid #dedede;
+}
+
+.table__content:after {
+	display: block;
+	content: '';
+	clear: both;
+}
+
+.filter__account,
+.filter__license,
+.filter__period,
+.filter__clean {
+	padding: 10px 0;
+}
+
+.account__title,
+.license__title,
+.period__title {
+	font-weight: bold;
+	padding: 5px 0;
+}
+
+.account__item,
+.license__item,
+.period__item {
+	padding: 1px 0;
+}
+
+.account__link,
+.license__link,
+.clean__link {
+	text-decoration: none;
+}
+
+.account__link:hover,
+.license__link:hover,
+.clean__link:hover {
+	text-decoration: underline;
+}

static/js/orders.js

@@ -1,23 +1,100 @@
 $(document).ready(function() {
 
-    $('.delete_license').click(function(e){
-        e.preventDefault();
-        var accountID = $(this).data('id');
-
-        $('#dialogs').html('Удалить счет на оплату?');
-        $('#dialogs').dialog({
-            buttons: {
-                "Да": function(){
-                    $.post('/my/delete_license/' + accountID + '/', function(data){
-                        $('.account_' + data['id']).remove()
-                    });
-                    $(this).dialog("close");
-                },
-                "Нет": function(){
-                    $(this).dialog("close");
-                }
-            }
-        })
-    })
+  $('.delete_license').click(function(e){
+      e.preventDefault();
+      var accountID = $(this).data('id');
+
+      $('#dialogs').html('Удалить счет на оплату?');
+      $('#dialogs').dialog({
+          buttons: {
+              "Да": function(){
+                  $.post('/my/delete_license/' + accountID + '/', function(data){
+                      $('.account_' + data['id']).remove()
+                  });
+                  $(this).dialog("close");
+              },
+              "Нет": function(){
+                  $(this).dialog("close");
+              }
+          }
+      })
+  });
+
+  var options = {
+    valueNames: [
+      { data: ['id'] },
+      'order-date',
+      { data: ['type']},
+      { data: ['status']}
+    ]
+  };
+
+  var orderList = new List('listData', options);
+
+  console.log(orderList);
+
+  $('#filterNone').click(function() {
+    event.preventDefault();
+    orderList.filter();
+    return false;
+  });
+
+  $('#filterAccountsNone').click(function() {
+    event.preventDefault();
+    orderList.filter(function(item) {
+      return item.values().type === "account";
+    });
+    return false;
+  });
+
+  $('#filterAccountsPay').click(function() {
+    event.preventDefault();
+    orderList.filter(function(item) {
+      // console.log(item.values());
+      return item.values().type === "account" && item.values().status === "2";
+    });
+    return false;
+  });
+
+  $('#filterAccountsWaitPay').click(function() {
+    event.preventDefault();
+    orderList.filter(function(item) {
+      return item.values().type === "account" && item.values().status === "0";
+    });
+    return false;
+  });
+
+  $('#filterAccountsFreezePay').click(function() {
+    event.preventDefault();
+    orderList.filter(function(item) {
+      return item.values().type === "account" && item.values().status === "4";
+    });
+    return false;
+  });
+
+  $('#filterLicenseNone').click(function() {
+    event.preventDefault();
+    orderList.filter(function(item) {
+      return item.values().type === "license";
+    });
+    return false;
+  });
+
+  $('#filterLicenseNow').click(function() {
+    event.preventDefault();
+    orderList.filter(function(item) {
+      return item.values().type === "license" && item.values().status === "2";
+    });
+    return false;
+  });
+
+  $('#filterLicenseOld').click(function() {
+    event.preventDefault();
+    orderList.filter(function(item) {
+      return item.values().type === "license" && item.values().status === "3";
+    });
+    return false;
+  });
+
 });
 

templates/customer/profile/orders_list.html

@@ -5,11 +5,14 @@
 {% block content %}
 <h1>Лицензии и расчёты</h1>
 <div class="btn yellow-btn docs-btn"><a href="{% url 'customer_order_license' %}">Купить лицензию</a></div>
-<table id="history" class="list">
+<div class="table__content" id="listData">
+<table id="history" class="orders">
+  <tbody class="list">
   {% for object in object_list %}
-  <tr class='{% if object.type %}account_{% else %}license_{% endif %}{{ object.id }}'>
-    <td>{{ object.order_date }}</td>
-    <td>
+  <tr data-id='{{ object.id }}' data-type="{% if object.type %}account{% else %}license{% endif %}"
+      data-status="{{ object.status }}" class="list-item type">
+    <td width="15%" class="order-date">{{ object.order_date }}</td>
+    <td width="40%">
     {% if object.type %}
       <div class="col__account-main">
         <p>Счет № {{object.id}} - Лицензия на {{ object.get_term }},
@@ -24,7 +27,7 @@
       </div>
     {% endif %}
     </td>
-    <td>
+    <td width="5%">
       {% if 'активна' in object.get_paid_status and not object.type %}
         <div class="status-license">
           <svg width="20" height="20">
@@ -40,7 +43,7 @@
         </div>
       {% endif %}
     </td>
-    <td>
+    <td width="35%">
     {% if object.type %}
       <div class="col__account-detail">
         {% if object.pay_sum == 0 %}
@@ -57,71 +60,7 @@
       </div>
     {% endif %}
     </td>
-    <td>
-      {% if object.status == 0 %}
-        <a class="delete_license" data-id="{{ object.pk }}" href="#" title="Удалить счёт на оплату">
-          <svg width="20" height="20">
-            <image xlink:href="{% static 'img/delete.svg' %}" src="{% static 'img/delete.png' %}" width="20" height="20"/>
-          </svg>
-        </a>
-      {% endif %}
-    </td>
-  </tr>
-  {% endfor %}
-</table>
-<table id="history" class="list">
-  {% for object in filters.qs %}
-  <tr class='{% if object.type %}account_{% else %}license_{% endif %}{{ object.id }}'>
-    <td>{{ object.order_date }}</td>
-    <td>
-    {% if object.type %}
-      <div class="col__account-main">
-        <p>Счет № {{object.id}} - Лицензия на {{ object.get_term }},
-        {% if object.pay_sum > 0 %}{{ object.pay_sum|get_plural:"рубль,рубля,рублей" }}{% else %}бесплатно{% endif %}</p>
-        <p>{% if object.paid_date %}{{ object.get_payform_display }}{% else %}{{ object.get_action_link|safe }}{% endif %}</p>
-      </div>
-    {% else %}
-      <div class="col__lic-main">
-        <p>Лицензия № {{object.id}} на {{ object.get_term }},
-        {% if object.pay_sum > 0 %}{{ object.pay_sum|get_plural:"рубль,рубля,рублей" }}{% else %}бесплатно{% endif %}</p>
-        <p>{% if object.term > 0 %}{{ object.get_action_link|safe  }}{% else %}Пробный период{% endif %}</p>
-      </div>
-    {% endif %}
-    </td>
-    <td>
-      {% if 'активна' in object.get_paid_status and not object.type %}
-        <div class="status-license">
-          <svg width="20" height="20">
-            <image xlink:href="{% static 'img/check.svg' %}" src="{% static 'img/check.png' %}" width="20" height="20"/>
-          </svg>
-        </div>
-      {% endif %}
-      {% if 'выдана' in object.get_paid_status and not object.type %}
-        <div class="status-license">
-         <svg width="20" height="20">
-            <image xlink:href="{% static 'img/not-check.svg' %}" src="{% static 'img/not-check.png' %}" width="20" height="20"/>
-         </svg>
-        </div>
-      {% endif %}
-    </td>
-    <td>
-    {% if object.type %}
-      <div class="col__account-detail">
-        {% if object.pay_sum == 0 %}
-        <!-- free -->
-        {% else %}
-        <p>{{ object.account_status }} {% if object.paid_date %}{{ object.paid_date }}{% endif %}</p>
-        <p>{% if object.paid_date %}Выдана лицензия № {{ object.id }}{% else %}{{ object.account_sub_status }}{% endif %}</p>
-        {% endif %}
-      </div>
-    {% else %}
-      <div class="col__lic-detail">
-        <p>{{ object.get_paid_status }}</p>
-        <p>Период действия: {% if object.date_from %}{{ object.date_from }} - {{ object.date_to }}{% else %}-{% endif %}</p>
-      </div>
-    {% endif %}
-    </td>
-    <td>
+    <td width="5%">
       {% if object.status == 0 %}
         <a class="delete_license" data-id="{{ object.pk }}" href="#" title="Удалить счёт на оплату">
           <svg width="20" height="20">
@@ -132,14 +71,49 @@
     </td>
   </tr>
   {% endfor %}
+  </tbody>
 </table>
 
 <div class="filter__table">
-
+  <div class="filter__title">Фильтр списка</div>
+  <div class="filter__account">
+    <div class="account__title">Счета</div>
+    <ul class="account__list">
+      <li class="account__item"><a class="account__link" href="#" id="filterAccountsNone">Все счета</a></li>
+      <li class="account__item"><a class="account__link" href="#" id="filterAccountsPay">Оплаченные</a></li>
+      <li class="account__item"><a class="account__link" href="#" id="filterAccountsWaitPay">Ожидают оплаты</a></li>
+      <li class="account__item"><a class="account__link" href="#" id="filterAccountsFreezePay">Замороженные</a></li>
+    </ul>
+  </div>
+  <div class="filter__license">
+    <div class="license__title">Лицензии</div>
+    <ul class="license__list">
+      <li class="license__item"><a class="license__link" href="#" id="filterLicenseNone">Все лицензии</a></li>
+      <li class="license__item"><a class="license__link" href="#" id="filterLicenseNow">Актуальные</a></li>
+      <li class="license__item"><a class="license__link" href="#" id="filterLicenseOld">С истёкшим сроком</a></li>
+    </ul>
+  </div>
+  <div class="filter__period">
+    <div class="period__title">По времени создания</div>
+    <ul class="period__list">
+      <li class="period__item">Все время</li>
+      <li class="period__item">Этот месяц</li>
+      <li class="period__item">Прошлый месяц</li>
+      <li class="period__item">Этот квартал</li>
+      <li class="period__item">Прошлый квартал</li>
+      <li class="period__item">Этот год</li>
+      <li class="period__item">Прошлый год</li>
+    </ul>
+  </div>
+  <div class="filter__clean">
+    <a class="clean__link" href="#" id="filterNone">Сбросить фильтр</a>
+  </div>
 </div>
 
+</div>
 {% endblock content %}
 
 {% block js %}
+    <script src="{% static 'vendor/list.js/dist/list.min.js' %}"></script>
     <script src="{% static 'js/orders.js' %}"></script>
 {% endblock %}