Update templates

2020-02-08 05:05:43 +03:00
parent 5913836f53
commit db995990d4
14 changed files with 480 additions and 131 deletions
--- a/myapp/static/components/pagination.js
+++ b/myapp/static/components/pagination.js
@@ -0,0 +1,113 @@
+/*
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getRecipes"></pagination-component>
+<script type="text/javascript" src="/static/components/pagination.js"></script>
+
+Vue
+...
+data: {
+    pagination: {
+        page: 1,
+        per_page: {{ per_page }},
+        size: {{ pagedata['count'] }}
+    },
+}
+...
+
+Flask
+    pagedata['pagination'] = {
+        "page": page,
+        "per_page": app.config['ITEMS_ON_PAGE'],
+        "size": 0
+    }
+
+*/
+
+let paginationTemplate = `<div class="row">
+<div class="col py-2 text-center">
+<div class="btn btn-outline-secondary" v-if="pages()<=1">...</div>
+
+<template v-else>
+<button type="button" class="btn btn-outline-secondary pull-left" v-if="has_prev" v-on:click="handlePageSelected(pagination.page-1)">Предыдущая</button>
+
+<template v-for="page in iter_pages">
+<button type="button" class="btn btn-outline-secondary mr-1" v-if="page" v-on:click="handlePageSelected(page)">{{ page }}</button>
+<div class="btn btn-outline-secondary mr-1" v-else>...</div>
+</template>
+
+<button type="button" class="btn btn-outline-secondary float-right" v-if="has_next" v-on:click="handlePageSelected(pagination.page+1)">Следующая</button>
+</template>
+
+</div>
+</div>`;
+
+Vue.component('pagination-component', {
+    template: paginationTemplate,
+    data: function() {
+        return {
+        }
+    },
+    props:{
+        pagination: {
+            type: Array,
+            required: true,
+            default: {
+                page: 1,
+                per_page: 25,
+                size: 0
+            }
+        },
+        clickHandler: {
+            type: Function,
+            default: function() { }
+        },
+    },
+    methods: {
+        handlePageSelected: function(selected) {
+            /* Установить номер текущей страницы и вызвать функция обновления
+             * страницы
+             * 
+             * Аргументы:
+             * selected -- номер страницы
+             */
+            let vm = this;
+            vm.pagination.page = selected;
+            vm.clickHandler();
+        },
+        pages: function() {
+            let vm = this;
+            return Math.ceil(vm.pagination.size/vm.pagination.per_page);
+        },
+    },
+    computed: {
+        has_prev: function() {
+            let vm = this;
+            return vm.pagination.page > 1;
+        },
+        has_next: function() {
+            let vm = this;
+            return vm.pagination.page < vm.pages();
+        },
+        iter_pages: function() {
+            /* */
+            let vm = this;
+            let last = 0;
+            let left_edge=2, left_current=2,
+                   right_current=5, right_edge=2;
+            let result = [];
+            for (let num = 1; num < vm.pages()+1; num++) {
+                if (num <= left_edge ||
+                    (num > vm.pagination.page - left_current - 1 &&
+                    num < vm.pagination.page + right_current) ||
+                    num > vm.pages() - right_edge) {
+                    if (last + 1 != num) {
+                        result.push(null);
+                    } else {
+                        result.push(num);
+                    }
+                    last = num
+                }
+            };
+            return result;
+        },
+    }
+});