myapp-full/myapp/ns_page/templates/guest/pages.html

{% extends "skeleton.html" %}
{% block content %}

<h3>Статьи</h3>
<hr />

<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

<div class="row" v-if="firstAlpha">
<div class="col py-2 text-center">
от <span class="text-danger" v-html="firstAlpha"></span> до <span class="text-danger" v-html="lastAlpha"></span>
</div>
</div>

{% include 'inc/pages.html' %}

<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

<backtotop-component></backtotop-component>

{% endblock %}

{% block script %}
<script type="text/javascript" src="/static/components/backtotop.js"></script>
<link rel="stylesheet" href="/static/components/backtotop.css"></link>
<script type="text/javascript" src="/static/components/pagination.js"></script>

<script>
var app = new Vue({
    el: '#app',
    data: {
        pages: [],
        pagination: {{ pagedata['pagination']|tojson|safe }},
    },
    methods: {
        getPages: function() {
            /* Получить список статей */
            let vm = this;
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": "pages",
                    "params": {
                        "page": vm.pagination.page
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        vm.pages = response.data['result'];
                    }
                }
            );
        },
    },
    created: function() {
        let vm = this;
        axios.post(
            '/api',
            [
                {
                    "jsonrpc": "2.0",
                    "method": "pages",
                    "params": {
                        "page": vm.pagination.page
                    },
                    "id": 1
                },
                {
                    "jsonrpc": "2.0",
                    "method": "pages.count",
                    "params": {},
                    "id": 1
                }
            ]
        ).then(
            function(response) {
                if ('result' in response.data[0]) {
                    vm.pages = response.data[0]['result'];
                }
                if ('result' in response.data[1]) {
                    vm.pagination.size = response.data[1]['result'];
                }
            }
        );
    },
    computed: {
        firstAlpha: function() {
            /* Получить первый символ */
            let vm = this;
            let result = null;
            if (vm.pages.length>0) {
                result = vm.pages[0].title.charAt(0);
            }
            return result;
        },
        lastAlpha: function() {
            /* Получить последний символ */
            let vm = this;
            let result = null;
            if (vm.pages.length>0) {
                let title = vm.pages[vm.pages.length-1].title;
                result = title.charAt(0);
            }
            return result;
        }
    }
})
</script>
{% endblock %}