source: tailbone/tailbone/templates/users/vue_index.mako @ 316ed83

Last change on this file since 316ed83 was 316ed83, checked in by Lance Edgar <ledgar@…>, 9 months ago

Add view, edit links to vue.js users index

  • Property mode set to 100644
File size: 4.3 KB
Line 
1## -*- coding: utf-8; -*-
2<%inherit file="/users/index.mako" />
3
4## <%def name="head_tags()">
5##   ${parent.head_tags()}
6##   ## TODO: this is needed according to Bulma docs?
7##   ## https://bulma.io/documentation/overview/start/#code-requirements
8##   <meta name="viewport" content="width=device-width, initial-scale=1">
9## </%def>
10
11<%def name="extra_javascript()">
12  ${parent.extra_javascript()}
13
14  <!-- vue -->
15  ${h.javascript_link('https://cdn.jsdelivr.net/npm/vue')}
16
17  <!-- vuex -->
18  ${h.javascript_link('https://unpkg.com/vuex')}
19
20  <!-- vue-tables-2 -->
21  ${h.javascript_link('https://cdn.jsdelivr.net/npm/vue-tables-2@1.4.70/dist/vue-tables-2.min.js')}
22  ## ${h.javascript_link(request.static_url('tailbone:static/js/lib/vue-tables.js'))}
23
24  <!-- bulma -->
25  ${h.stylesheet_link('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css')}
26
27  <!-- fontawesome -->
28  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
29
30  <style type="text/css">
31    /* workaround for header logo, needed for Bulma (ugh) */
32    ## TODO: this img should be 49px for height, what gives here?
33    .home img { height: 59px; }
34  </style>
35
36</%def>
37
38<div id="vue-app">
39
40  ## TODO: need to make endpoint a bit more configurable somehow
41  <v-server-table name="users" url="/api/users" :columns="columns" :options="options">
42
43    ## TODO: make URLs more flexible / configurable... also perms?
44    % if request.has_perm('users.view'):
45        <span slot="username" slot-scope="props"><a :href="'/users/'+props.row.uuid">{{ props.row.username }}</a></span>
46        <span slot="person_display_name" slot-scope="props"><a :href="'/users/'+props.row.uuid">{{ props.row.person_display_name }}</a></span>
47    % endif
48
49    ## TODO: why on earth doesn't it render bool as string by default?
50    <span slot="active" slot-scope="props">{{ props.row.active }}</span>
51
52    ## TODO: make URLs more flexible / configurable... also perms?
53    <span slot="actions" slot-scope="props">
54      % if request.has_perm('users.view'):
55          <a :href="'/users/'+props.row.uuid">View</a>
56      % endif
57      % if request.has_perm('users.edit'):
58          | <a :href="'/users/'+props.row.uuid+'/edit'">Edit</a>
59      % endif
60    </span>
61
62  </v-server-table>
63</div>
64
65<script type="text/javascript">
66
67// Vue.use(Vuex);
68
69var store = new Vuex.Store({
70  // state: {
71  //     appVersion: null,
72  //     // TODO: is this really needed or can we just always check appsettings?
73  //     production: appsettings.production,
74  //     user: null,
75  //     pageTitle: null
76  // },
77  // mutations: {
78  //     setAppVersion(state, payload) {
79  //         state.appVersion = payload;
80  //     },
81  //     setPageTitle(state, payload) {
82  //         state.pageTitle = payload;
83  //     },
84  //     setUser(state, payload)  {
85  //         state.user = payload;
86  //     }
87  // },
88  // actions: {
89  // }
90})
91
92Vue.use(VueTables.ServerTable, {
93    sortIcon: {
94        is: 'fa-sort',
95        base: 'fas',
96        up: 'fa-sort-up',
97        down: 'fa-sort-down'
98    }
99}, true, 'bulma', 'default');
100
101<%
102   columns = [
103       'username',
104       'person_display_name',
105       'active',
106   ]
107   if request.has_any_perm('users.view', 'users.edit'):
108       columns.append('actions')
109%>
110
111var app = new Vue({
112    el: '#vue-app',
113    store: store,
114    data: {
115        columns: ${json.dumps(columns)|n},
116        options: {
117            columnsDropdown: true,
118            filterable: false,
119            headings: {
120                person_display_name: "Person"
121            },
122            sortable: [
123                'username',
124                'person_display_name',
125                'active'
126            ],
127            orderBy: {
128                column: 'username',
129                ascending: true
130            },
131            perPageValues: [10, 25, 50, 100, 200],
132            // preserveState: true,
133            saveState: true,
134            // TODO: why doesn't local storage work?  but alas, table does not
135            // properly submit the 'orderBy' param, and results aren't paginated
136            storage: 'session'
137        }
138    }
139});
140
141// $.get('/api/users', {sort: 'username|desc', page: 1, per_page: 10}, function(data) {
142//     app.users = data.users;
143// });
144
145</script>
Note: See TracBrowser for help on using the repository browser.