Frontend user list and modal dialog fixes

src/frontend/js/app/users/list/item.ejs

@@ -0,0 +1,31 @@
+<td class="text-center">
+    <div class="avatar d-block" style="background-image: url(<%- avatar || '/images/default-avatar.jpg' %>)">
+        <span class="avatar-status <%- is_disabled ? 'bg-red' : 'bg-green' %>"></span>
+    </div>
+</td>
+<td>
+    <div><%- name %></div>
+    <div class="small text-muted">
+        Created: Mar 19, 2018
+    </div>
+</td>
+<td>
+    <div><%- email %></div>
+</td>
+<td>
+    <div><%- roles.join(', ') %></div>
+</td>
+<td class="text-center">
+    <div class="item-action dropdown">
+        <a href="#" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
+        <div class="dropdown-menu dropdown-menu-right">
+            <a href="#" class="edit-user dropdown-item"><i class="dropdown-icon fe fe-edit"></i> Edit User</a>
+            <a href="#" class="set-password dropdown-item"><i class="dropdown-icon fe fe-shield"></i> Set Password</a>
+            <% if (!isSelf()) { %>
+            <a href="#" class="login dropdown-item"><i class="dropdown-icon fe fe-log-in"></i> Sign in as User</a>
+            <div class="dropdown-divider"></div>
+            <a href="#" class="delete-user dropdown-item"><i class="dropdown-icon fe fe-trash-2"></i> Delete User</a>
+            <% } %>
+        </div>
+    </div>
+</td>

src/frontend/js/app/users/list/item.js

@@ -0,0 +1,66 @@
+'use strict';
+
+const Mn         = require('backbone.marionette');
+const Controller = require('../../controller');
+const Api        = require('../../api');
+const Cache      = require('../../cache');
+const Tokens     = require('../../tokens');
+const template   = require('./item.ejs');
+
+module.exports = Mn.View.extend({
+    template: template,
+    tagName:  'tr',
+
+    ui: {
+        edit:             'a.edit-user',
+        password:         'a.set-password',
+        login:            'a.login',
+        delete:           'a.delete-user'
+    },
+
+    events: {
+        'click @ui.edit': function (e) {
+            e.preventDefault();
+            Controller.showUserForm(this.model);
+        },
+
+        'click @ui.password': function (e) {
+            e.preventDefault();
+            //Controller.showUserPasswordForm(this.model);
+        },
+
+        'click @ui.delete': function (e) {
+            e.preventDefault();
+            //Controller.showUserDeleteConfirm(this.model);
+        },
+
+        'click @ui.login': function (e) {
+            e.preventDefault();
+
+            if (Cache.User.get('id') !== this.model.get('id')) {
+                this.ui.login.prop('disabled', true).addClass('btn-disabled');
+
+                Api.Users.loginAs(this.model.get('id'))
+                    .then(res => {
+                        Tokens.addToken(res.token, res.user.nickname || res.user.name);
+                        window.location = '/';
+                        window.location.reload();
+                    })
+                    .catch(err => {
+                        alert(err.message);
+                        this.ui.login.prop('disabled', false).removeClass('btn-disabled');
+                    });
+            }
+        }
+    },
+
+    templateContext: {
+        isSelf: function () {
+            return Cache.User.get('id') === this.id;
+        }
+    },
+
+    initialize: function () {
+        this.listenTo(this.model, 'change', this.render);
+    }
+});

src/frontend/js/app/users/list/main.ejs

@@ -0,0 +1,10 @@
+<thead>
+    <th width="30">&nbsp;</th>
+    <th>Name</th>
+    <th>Email</th>
+    <th>Roles</th>
+    <th>&nbsp;</th>
+</thead>
+<tbody>
+    <!-- items -->
+</tbody>

src/frontend/js/app/users/list/main.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const Mn         = require('backbone.marionette');
+const ItemView   = require('./item');
+const template   = require('./main.ejs');
+
+const TableBody = Mn.CollectionView.extend({
+    tagName:   'tbody',
+    childView: ItemView
+});
+
+module.exports = Mn.View.extend({
+    tagName:   'table',
+    className: 'table table-hover table-outline table-vcenter text-nowrap card-table',
+    template:  template,
+
+    regions: {
+        body: {
+            el:             'tbody',
+            replaceElement: true
+        }
+    },
+
+    onRender: function () {
+        this.showChildView('body', new TableBody({
+            collection: this.collection
+        }));
+    }
+});

src/frontend/js/app/users/main.ejs

@@ -0,0 +1,17 @@
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Users</h3>
+        <div class="card-options">
+            <a href="#" class="btn btn-outline-teal btn-sm ml-2 add-user">Add User</a>
+        </div>
+    </div>
+    <div class="card-body no-padding min-100">
+        <div class="dimmer active">
+            <div class="loader"></div>
+            <div class="dimmer-content list-region">
+                <!-- List Region -->
+            </div>
+        </div>
+
+    </div>
+</div>

src/frontend/js/app/users/main.js

@@ -0,0 +1,51 @@
+'use strict';
+
+const Mn         = require('backbone.marionette');
+const UserModel  = require('../../models/user');
+const Api        = require('../api');
+const Controller = require('../controller');
+const ListView   = require('./list/main');
+const template   = require('./main.ejs');
+
+module.exports = Mn.View.extend({
+    id:        'users',
+    template:  template,
+
+    ui: {
+        list_region: '.list-region',
+        add_user:    '.add-user',
+        dimmer:      '.dimmer'
+    },
+
+    regions: {
+        list_region: '@ui.list_region'
+    },
+
+    events: {
+        'click @ui.add_user': function (e) {
+            e.preventDefault();
+            Controller.showUserForm(new UserModel.Model());
+        }
+    },
+
+    onRender: function () {
+        let view = this;
+
+        Api.Users.getAll()
+            .then(response => {
+                if (!view.isDestroyed() && response && response.length) {
+                    view.showChildView('list_region', new ListView({
+                        collection: new UserModel.Collection(response)
+                    }));
+
+                    // Remove loader
+                    view.ui.dimmer.removeClass('active');
+                }
+            })
+            .catch(err => {
+                console.log(err);
+                //Controller.showError(err, 'Could not fetch Users');
+                //view.trigger('loaded');
+            });
+    }
+});