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

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

<h3>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" v-on:click="panel_show(panels.filter)"><i class="fa fa-filter"></i></button>
<button type="button" class="btn btn-outline-secondary" v-on:click="panel_show(panels.order_by)"><i class="fa fa-sort-alpha-asc"></i></button>
</div>
<div class="float-right">
<a class="btn btn-outline-success" href="/page/add"><i class="fa fa-plus"></i></a>
</div>

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

<!-- Начало: Панель сортировки -->
<div class="row" v-if="panels.order_by.visible">
<div class="col py-2">

<div class="input-group">
<button type="button" class="btn btn-outline-secondary" v-if="panels.order_by.order==='asc'" v-on:click="panels.order_by.order = 'desc'; getBriefcases();"><i class="fa fa-sort-alpha-asc"></i></button>
<button type="button" class="btn btn-outline-secondary" v-else v-on:click="panels.order_by.order = 'asc'; getBriefcases();"><i class="fa fa-sort-alpha-desc"></i></button>
<select class="form-select" v-model="panels.order_by.field" v-on:change="getBriefcases();">
<option value="id">ID</option>
<option value="title">заголовку</option>
<option value="created">дате создания</option>
<option value="updated">дате обновления</option>
</select>
</div>

</div>
</div>
<!-- Конец: Панель сортировки -->

<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>
Object.assign(root.data, {
    raw_pages: [],
    pagination: {{ pagedata['pagination']|tojson|safe }},
});
Object.assign(root.data.panels, {
    order_by: {
        visible: false,
        field: 'title',
        order: 'asc'
    },
});
Object.assign(root.methods, {
    filterApply: function() {},
    filterPage: function(page) {
        let vm = this;
        let value = vm.panels.filter.value;
        if ( value.length<1 ) {
            return true;
        }
        if ( page.title.toLowerCase().includes(value.toLowerCase()) ) {
            return true;
        }
        return false;
    },
    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.raw_pages = response.data['result'];
                }
            }
        );
    },
});
root.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.raw_pages = response.data[0]['result'];
            }
            if ('result' in response.data[1]) {
                vm.pagination.size = response.data[1]['result'];
            }
        }
    );
};
Object.assign(root.computed, {
    pages: function() {
        /* Отфильтрованный список */
        let vm = this;
        var result = vm.raw_pages.filter(vm.filterPage);
        return result; 
    },
    firstAlpha: function() {
        /* Получить первый символ */
        let vm = this;
        let result = null;
        if (vm.raw_pages.length>0) {
            result = vm.raw_pages[0].title.charAt(0);
        }
        return result;
    },
    lastAlpha: function() {
        /* Получить последний символ */
        let vm = this;
        let result = null;
        if (vm.raw_pages.length>0) {
            let title = vm.raw_pages[vm.raw_pages.length-1].title;
            result = title.charAt(0);
        }
        return result;
    }
});
</script>
{% endblock %}