myapp-full/myapp/ns_note/templates/notes.html

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

<h3>
<div class="float-right">
<a class="btn btn-outline-success" href="/note/add"><i class="fa fa-plus"></i></a>
</div>
<button type="button" class="btn btn-outline-secondary" v-on:click="showPanel(panels.filter)"><i class="fa fa-filter"></i></button>

Заметки
</h3>
<hr />

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

{% raw %}
<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getNotes"></pagination-component>

<div class="row" v-for="(note, noteIdx) in filteredNotes">
<div class="col py-2" :class="{'bg-light': noteIdx % 2}">

<a :href="'/note/' + note.id" v-html="note.title"></a>

<div class="row">
<div class="col small text-muted">
<span v-for="(tag, tagIdx) in note.tags">
<i class="fa fa-tag"></i> <a class="text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>&nbsp;
</span>
</div>
</div>

<div class="row">
<div class="col small text-muted">
Создано: {{ note.created }}&nbsp;
Обновлено: {{ note.updated }}
</div>
</div>

</div>
</div>

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

<backtotop-component></backtotop-component>

{% endraw %}
{% 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: {
        filter: '',
        notes: [],
        pagination: {{ pagedata['pagination']|tojson|safe }},
        panels: {
            filter: {
                visible: false
            }
        },
    },
    methods: {
        arrayRemove: function(arr, value) {
            /* Удаление элемента из списка */
            return arr.filter(function(ele){
                return ele != value;
            });
        },
        filterApply: function() {},
        filterClear: function() {
            /* Очистить фильтр */
            let vm = this;
            vm.filter = '';
        },
        filterNote: function(note) {
            let vm = this;
            if ( vm.filter.length<1 ) {
                return true;
            }
            if ( note.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
                return true;
            }
            return false;
        },
        getNotes: function() {
            /* Получить список заметок */
            let vm = this;
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": "notes",
                    "params": {
                        "page": vm.pagination.page
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        vm.notes = response.data['result'];
                    }
                }
            );
        },
        showPanel: function(panel) {
            /* Показать/скрыть панель */
            panel.visible = !panel.visible;
        },
    },
    created: function() {
        let vm = this;
        axios.post(
            '/api',
            [
                {
                    "jsonrpc": "2.0",
                    "method": "notes",
                    "params": {
                        "page": vm.pagination.page
                    },
                    "id": 1
                },
                {
                    "jsonrpc": "2.0",
                    "method": "notes.count",
                    "params": {},
                    "id": 1
                }
            ]
        ).then(
            function(response) {
                if ('result' in response.data[0]) {
                    vm.notes = response.data[0]['result'];
                }
                if ('result' in response.data[1]) {
                    vm.pagination.size = response.data[1]['result'];
                }
            }
        );
    },
    computed: {
        filteredNotes: function() {
            /* Отфильтрованный список */
            let vm = this;
            var result = vm.notes.filter(vm.filterNote);
            return result; 
        },
    }
})
</script>
{% endblock %}