Update users

myapp/ns_page/templates/user/pages.html

@@ -5,11 +5,14 @@
 <div class="float-right">
 <a class="btn btn-outline-success" href="/page/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' %}
+
 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>
 
 <div class="row" v-if="firstAlpha">
@@ -35,10 +38,38 @@
 var app = new Vue({
     el: '#app',
     data: {
+        filter: '',
         pages: [],
         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 = '';
+        },
+        filterPage: function(page) {
+            let vm = this;
+            if ( vm.filter.length<1 ) {
+                return true;
+            }
+            if ( page.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
+                return true;
+            }
+            return false;
+        },
         getPages: function() {
             /* Получить список статей */
             let vm = this;
@@ -60,6 +91,10 @@ var app = new Vue({
                 }
             );
         },
+        showPanel: function(panel) {
+            /* Показать/скрыть панель */
+            panel.visible = !panel.visible;
+        },
     },
     created: function() {
         let vm = this;
@@ -93,6 +128,12 @@ var app = new Vue({
         );
     },
     computed: {
+        filteredPages: function() {
+            /* Отфильтрованный список */
+            let vm = this;
+            var result = vm.pages.filter(vm.filterPage);
+            return result; 
+        },
         firstAlpha: function() {
             /* Получить первый символ */
             let vm = this;