Update

myapp/ns_user/templates/guest/user.html

@@ -0,0 +1,46 @@
+{% extends "skeleton.html" %}
+{% block content %}
+
+{% raw %}
+<h3>
+<a class="btn btn-outline-secondary" href="/users"><i class="fa fa-chevron-left"></i></a>
+{{ user.name }}</h3>
+<hr />
+{% endraw %}
+
+{% include 'user_menu.html' %}
+{% raw %}
+
+Зарегистрирован: {{ user.created }}
+
+{% endraw %}
+
+
+{% endblock %}
+
+{% block breadcrumb %}
+{% raw %}
+<ol class="breadcrumb mt-3">
+    <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
+    <li class="breadcrumb-item"><a href="/user">Список пользователей</a></li>
+    <li class="breadcrumb-item">{{ user.name }}</li>
+</ol>
+{% 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">
+var app = new Vue({
+    el: '#app',
+    data: {
+        menuitem: null,
+        user: {{ pagedata['user']|tojson|safe }},
+    },
+    methods: {
+    },
+})
+</script>
+{% endblock %}

myapp/ns_user/templates/guest/user_menu.html

@@ -0,0 +1,13 @@
+<div class="row">
+<div class="col">
+
+<div class="btn btn-primary mb-2" v-if="menuitem===null"><i class="fa fa-bars"></i></div>
+<a class="btn btn-outline-secondary mb-2" :href="'/user/' + user.id" v-else><i class="fa fa-bars"></i></a>
+
+
+<div class="btn btn-primary mb-2" v-if="menuitem==='pages'">Статьи</div>
+<a class="btn btn-outline-secondary mb-2" :href="'/user/' + user.id + '/pages'" v-else>Статьи</a>
+
+</div>
+</div>
+<hr />

myapp/ns_user/templates/guest/user_pages.html

@@ -0,0 +1,123 @@
+{% extends "skeleton.html" %}
+{% block content %}
+
+{% raw %}
+<h3>
+<a class="btn btn-outline-secondary" href="/users"><i class="fa fa-chevron-left"></i></a>
+{{ user.name }}</h3>
+<hr />
+{% endraw %}
+
+{% include 'user_menu.html' %}
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>
+
+{% include 'inc/pages.html' %}
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>
+
+<backtotop-component></backtotop-component>
+
+{% endblock %}
+
+{% block breadcrumb %}
+{% raw %}
+<ol class="breadcrumb mt-3">
+    <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
+    <li class="breadcrumb-item"><a href="/user">Список пользователей</a></li>
+    <li class="breadcrumb-item">{{ user.name }}</li>
+</ol>
+{% 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 type="text/javascript">
+Object.assign(root.data, {
+    menuitem: 'pages',
+    user: {{ pagedata['user']|tojson|safe }},
+    raw_pages: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    filterApply: function() {},
+    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;
+        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": "user.pages",
+                "params": {
+                    "id": vm.user.id,
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "user.pages.count",
+                "params": {
+                    "id": vm.user.id,
+                },
+                "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'];
+            }
+        }
+    );
+};
+    computed: {
+        pages: function() {
+            /* Отфильтрованный список */
+            let vm = this;
+            var result = vm.raw_pages.filter(vm.filterPage);
+            return result; 
+        },
+    },
+})
+</script>
+{% endblock %}

myapp/ns_user/templates/guest/users.html

@@ -0,0 +1,96 @@
+{% extends "skeleton.html" %}
+{% block content %}
+
+<h3>Список пользователей</h3>
+<hr />
+
+{% include '/inc/filter.html' %}
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getUsers"></pagination-component>
+
+{% include '/inc/users.html' %}
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getUsers"></pagination-component>
+
+<backtotop-component></backtotop-component>
+
+{% endblock %}
+
+{% block breadcrumb %}
+<ol class="breadcrumb mt-3">
+    <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
+    <li class="breadcrumb-item">Список пользователей</li>
+</ol>
+{% 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 type="text/javascript">
+Object.assign(root.data, {
+    raw_users: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    getUsers: function() {
+        let vm = this;
+        axios.post(
+            '/api',
+            {
+                "jsonrpc": "2.0",
+                "method": "users",
+                "params": {
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            }
+        ).then(
+            function(response) {
+                if ('result' in response.data) {
+                    vm.raw_users = response.data['result'];
+                }
+            }
+        );
+    }
+});
+Object.assign(root.computed, {
+    users: function() {
+        let vm = this;
+        return vm.raw_users;
+    }
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": 'users',
+                "params": {
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": 'users.count',
+                "params": {},
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_users = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
+        }
+    );
+};
+</script>
+{% endblock %}

myapp/ns_user/templates/user_pages.html

@@ -18,7 +18,6 @@
 
 <backtotop-component></backtotop-component>
 
-
 {% endblock %}
 
 {% block breadcrumb %}
@@ -37,93 +36,85 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>
 
 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        filter: '',
-        menuitem: 'pages',
-        user: {{ pagedata['user']|tojson|safe }},
-        pages: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
+Object.assign(root.data, {
+    menuitem: 'pages',
+    user: {{ pagedata['user']|tojson|safe }},
+    raw_pages: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    filterApply: function() {},
+    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;
     },
-    methods: {
-        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;
-            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() {
+    getPages: function() {
+        /* Получить список статей */
         let vm = this;
         axios.post(
             '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": "user.pages",
-                    "params": {
-                        "id": vm.user.id,
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "pages",
+                "params": {
+                    "page": vm.pagination.page
                 },
-                {
-                    "jsonrpc": "2.0",
-                    "method": "user.pages.count",
-                    "params": {
-                        "id": vm.user.id,
-                    },
-                    "id": 1
-                }
-            ]
+                "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'];
+                if ('result' in response.data) {
+                    vm.raw_pages = response.data['result'];
                 }
             }
         );
     },
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": "user.pages",
+                "params": {
+                    "id": vm.user.id,
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "user.pages.count",
+                "params": {
+                    "id": vm.user.id,
+                },
+                "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'];
+            }
+        }
+    );
+};
     computed: {
-        filteredPages: function() {
+        pages: function() {
             /* Отфильтрованный список */
             let vm = this;
-            var result = vm.pages.filter(vm.filterPage);
+            var result = vm.raw_pages.filter(vm.filterPage);
             return result; 
         },
     },

myapp/ns_user/templates/users.html

@@ -1,24 +1,14 @@
-{% extends "skeleton.html" %}
+{% extends "/private/skeleton.html" %}
 {% block content %}
 
 <h3>Список пользователей</h3>
 <hr />
 
-{% raw %}
+{% include '/inc/filter.html' %}
+
 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getUsers"></pagination-component>
 
-<div class="row" v-for="(user, userIdx) in users">
-<div class="col py-2">
-<a :href="'/user/' + user.id">{{ user.name }}</a>
-
-<small class="text-muted">
-<br />
-Создан: {{ user.created }}
-</small>
-
-</div>
-</div>
-{% endraw %}
+{% include '/inc/users.html' %}
 
 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getUsers"></pagination-component>
 
@@ -39,64 +29,68 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>
 
 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        users: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
-    },
-    methods: {
-        getUsers: function() {
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'users',
-                    "params": {
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.users = response.data['result'];
-                    }
-                }
-            );
-        }
-    },
-    created: function() {
+Object.assign(root.data, {
+    raw_users: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    getUsers: function() {
         let vm = this;
         axios.post(
             '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'users',
-                    "params": {
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "users",
+                "params": {
+                    "page": vm.pagination.page
                 },
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'users.count',
-                    "params": {},
-                    "id": 1
-                }
-            ]
+                "id": 1
+            }
         ).then(
             function(response) {
-                if ('result' in response.data[0]) {
-                    vm.users = response.data[0]['result'];
-                }
-                if ('result' in response.data[1]) {
-                    vm.pagination.size = response.data[1]['result'];
+                if ('result' in response.data) {
+                    vm.raw_users = response.data['result'];
                 }
             }
         );
     }
-})
+});
+Object.assign(root.computed, {
+    users: function() {
+        let vm = this;
+        return vm.raw_users;
+    }
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": 'users',
+                "params": {
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": 'users.count',
+                "params": {},
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_users = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
+        }
+    );
+};
 </script>
 {% endblock %}