From bfc319cff9527e1db159d8d499695b9be325b4aa Mon Sep 17 00:00:00 2001 From: Jamie Curnow Date: Wed, 20 Jun 2018 16:51:18 +1000 Subject: [PATCH] Frontend user list and modal dialog fixes --- src/frontend/js/app/api.js | 19 +++-- src/frontend/js/app/controller.js | 36 ++++----- src/frontend/js/app/main.js | 6 +- src/frontend/js/app/ui/footer/main.ejs | 2 +- src/frontend/js/app/ui/header/main.ejs | 4 +- src/frontend/js/app/ui/main.ejs | 5 +- src/frontend/js/app/ui/main.js | 62 +++++++++++++++- src/frontend/js/app/ui/menu/main.ejs | 13 +++- src/frontend/js/app/ui/menu/main.js | 35 ++++++++- src/frontend/js/app/user/form.ejs | 53 +++++++++++++ src/frontend/js/app/user/form.js | 99 +++++++++++++++++++++++++ src/frontend/js/app/users/list/item.ejs | 31 ++++++++ src/frontend/js/app/users/list/item.js | 66 +++++++++++++++++ src/frontend/js/app/users/list/main.ejs | 10 +++ src/frontend/js/app/users/list/main.js | 29 ++++++++ src/frontend/js/app/users/main.ejs | 17 +++++ src/frontend/js/app/users/main.js | 51 +++++++++++++ src/frontend/scss/custom.scss | 25 +++++++ src/frontend/scss/styles.scss | 4 +- src/frontend/scss/tabler-extra.scss | 26 +++++++ 20 files changed, 549 insertions(+), 44 deletions(-) create mode 100644 src/frontend/js/app/user/form.ejs create mode 100644 src/frontend/js/app/user/form.js create mode 100644 src/frontend/js/app/users/list/item.ejs create mode 100644 src/frontend/js/app/users/list/item.js create mode 100644 src/frontend/js/app/users/list/main.ejs create mode 100644 src/frontend/js/app/users/list/main.js create mode 100644 src/frontend/js/app/users/main.ejs create mode 100644 src/frontend/js/app/users/main.js create mode 100644 src/frontend/scss/custom.scss create mode 100644 src/frontend/scss/tabler-extra.scss diff --git a/src/frontend/js/app/api.js b/src/frontend/js/app/api.js index d6c4764..26886ef 100644 --- a/src/frontend/js/app/api.js +++ b/src/frontend/js/app/api.js @@ -163,17 +163,22 @@ module.exports = { }, /** - * @param {Integer} [offset] - * @param {Integer} [limit] - * @param {String} [sort] * @param {Array} [expand] * @param {String} [query] * @returns {Promise} */ - getAll: function (offset, limit, sort, expand, query) { - return fetch('get', 'users?offset=' + (offset ? offset : 0) + '&limit=' + (limit ? limit : 20) + (sort ? '&sort=' + sort : '') + - (typeof expand === 'object' && expand !== null && expand.length ? '&expand=' + makeExpansionString(expand) : '') + - (typeof query === 'string' ? '&query=' + query : '')); + getAll: function (expand, query) { + let params = []; + + if (typeof expand === 'object' && expand !== null && expand.length) { + params.push('expand=' + makeExpansionString(expand)); + } + + if (typeof query === 'string') { + params.push('query=' + query); + } + + return fetch('get', 'users' + (params.length ? '?' + params.join('&') : '')); }, /** diff --git a/src/frontend/js/app/controller.js b/src/frontend/js/app/controller.js index e217d1d..2802d59 100644 --- a/src/frontend/js/app/controller.js +++ b/src/frontend/js/app/controller.js @@ -26,34 +26,30 @@ module.exports = { /** * Users - * - * @param {Number} [offset] - * @param {Number} [limit] - * @param {String} [sort] */ - showUsers: function (offset, limit, sort) { - /* + showUsers: function () { let controller = this; if (Cache.User.isAdmin()) { require(['./main', './users/main'], (App, View) => { controller.navigate('/users'); - App.UI.showMainLoading(); - let view = new View({ - sort: (typeof sort !== 'undefined' && sort ? sort : Cache.Session.Users.sort), - offset: (typeof offset !== 'undefined' ? offset : Cache.Session.Users.offset), - limit: (typeof limit !== 'undefined' && limit ? limit : Cache.Session.Users.limit) - }); - - view.on('loaded', function () { - App.UI.hideMainLoading(); - }); - - App.UI.showAppContent(view); + App.UI.showAppContent(new View()); }); } else { - this.showRules(); + this.showDashboard(); + } + }, + + /** + * User Form + * + * @param model + */ + showUserForm: function (model) { + if (Cache.User.isAdmin()) { + require(['./main', './user/form'], function (App, View) { + App.UI.showModalDialog(new View({model: model})); + }); } - */ }, /** diff --git a/src/frontend/js/app/main.js b/src/frontend/js/app/main.js index 4ef25c6..3fe2210 100644 --- a/src/frontend/js/app/main.js +++ b/src/frontend/js/app/main.js @@ -12,13 +12,17 @@ const UI = require('./ui/main'); const App = Mn.Application.extend({ - region: '#app', Cache: Cache, Api: Api, UI: null, Controller: Controller, version: null, + region: { + el: '#app', + replaceElement: true + }, + onStart: function (app, options) { console.log('Welcome to Nginx Proxy Manager'); diff --git a/src/frontend/js/app/ui/footer/main.ejs b/src/frontend/js/app/ui/footer/main.ejs index eeea09e..2a16c68 100644 --- a/src/frontend/js/app/ui/footer/main.ejs +++ b/src/frontend/js/app/ui/footer/main.ejs @@ -9,6 +9,6 @@
- v<%- getVersion() %> © 2018 jc21.com. Theme by Tabler + v<%- getVersion() %> © 2018 jc21.com. Theme by Tabler
diff --git a/src/frontend/js/app/ui/header/main.ejs b/src/frontend/js/app/ui/header/main.ejs index eba23e3..ced7414 100644 --- a/src/frontend/js/app/ui/header/main.ejs +++ b/src/frontend/js/app/ui/header/main.ejs @@ -1,7 +1,7 @@
-   Docker Registry +   Nginx Proxy Manager
@@ -9,7 +9,7 @@ - <%- getUserField('name', 'Unknown User') %> + <%- getUserField('nickname', null) || getUserField('name', 'Unknown User') %> <%- getRole() %> diff --git a/src/frontend/js/app/ui/main.ejs b/src/frontend/js/app/ui/main.ejs index 5d8b656..853e111 100644 --- a/src/frontend/js/app/ui/main.ejs +++ b/src/frontend/js/app/ui/main.ejs @@ -1,5 +1,4 @@
- @@ -15,4 +14,6 @@
-
\ No newline at end of file + + + diff --git a/src/frontend/js/app/ui/main.js b/src/frontend/js/app/ui/main.js index b013cd4..4783358 100644 --- a/src/frontend/js/app/ui/main.js +++ b/src/frontend/js/app/ui/main.js @@ -8,8 +8,16 @@ const FooterView = require('./footer/main'); const Cache = require('../cache'); module.exports = Mn.View.extend({ - className: 'page', - template: template, + id: 'app', + className: 'page', + template: template, + modal_setup: false, + + modal: null, + + ui: { + modal: '#modal-dialog' + }, regions: { header_region: { @@ -21,13 +29,60 @@ module.exports = Mn.View.extend({ replaceElement: true }, footer_region: '.footer', - app_content_region: '#app-content' + app_content_region: '#app-content', + modal_region: '#modal-dialog' }, + /** + * @param {Object} view + */ showAppContent: function (view) { this.showChildView('app_content_region', view); }, + /** + * @param {Object} view + * @param {Function} [show_callback] + * @param {Function} [shown_callback] + */ + showModalDialog: function (view, show_callback, shown_callback) { + this.showChildView('modal_region', view); + let modal = this.getRegion('modal_region').$el.modal('show'); + + modal.on('hidden.bs.modal', function (/*e*/) { + if (show_callback) { + modal.off('show.bs.modal', show_callback); + } + + if (shown_callback) { + modal.off('shown.bs.modal', shown_callback); + } + + modal.off('hidden.bs.modal'); + view.destroy(); + }); + + if (show_callback) { + modal.on('show.bs.modal', show_callback); + } + + if (shown_callback) { + modal.on('shown.bs.modal', shown_callback); + } + }, + + /** + * + * @param {Function} [hidden_callback] + */ + closeModal: function (hidden_callback) { + let modal = this.getRegion('modal_region').$el.modal('hide'); + + if (hidden_callback) { + modal.on('hidden.bs.modal', hidden_callback); + } + }, + onRender: function () { this.showChildView('header_region', new HeaderView({ model: Cache.User @@ -40,5 +95,6 @@ module.exports = Mn.View.extend({ reset: function () { this.getRegion('header_region').reset(); this.getRegion('footer_region').reset(); + this.getRegion('modal_region').reset(); } }); diff --git a/src/frontend/js/app/ui/menu/main.ejs b/src/frontend/js/app/ui/menu/main.ejs index d4b975c..bdb065f 100644 --- a/src/frontend/js/app/ui/menu/main.ejs +++ b/src/frontend/js/app/ui/menu/main.ejs @@ -3,10 +3,15 @@
  • - Home + Home
    • + <% if (showUsers()) { %>
  • - Interface + Users +
    • + <% } %> +
  • + Interface
    Cards design Charts @@ -14,7 +19,7 @@
  • - Components + Components
    Maps Icons @@ -24,7 +29,7 @@
  • - Pages + Pages
    Profile Login diff --git a/src/frontend/js/app/ui/menu/main.js b/src/frontend/js/app/ui/menu/main.js index b9fdf17..a7c45a1 100644 --- a/src/frontend/js/app/ui/menu/main.js +++ b/src/frontend/js/app/ui/menu/main.js @@ -1,10 +1,39 @@ 'use strict'; -const Mn = require('backbone.marionette'); -const template = require('./main.ejs'); +const $ = require('jquery'); +const Mn = require('backbone.marionette'); +const Controller = require('../../controller'); +const Cache = require('../../cache'); +const template = require('./main.ejs'); module.exports = Mn.View.extend({ id: 'menu', className: 'header collapse d-lg-flex p-0', - template: template + template: template, + + ui: { + link: 'a' + }, + + events: { + 'click @ui.link': function (e) { + e.preventDefault(); + let href = $(e.currentTarget).attr('href'); + + switch (href) { + case '/': + Controller.showDashboard(); + break; + case '/users': + Controller.showUsers(); + break; + } + } + }, + + templateContext: { + showUsers: function () { + return Cache.User.isAdmin(); + } + } }); diff --git a/src/frontend/js/app/user/form.ejs b/src/frontend/js/app/user/form.ejs new file mode 100644 index 0000000..401c344 --- /dev/null +++ b/src/frontend/js/app/user/form.ejs @@ -0,0 +1,53 @@ +
    +
    +
    <% if (typeof id !== 'undefined') { %>Edit<% } else { %>New<% } %> User
    + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    + <% if (!isSelf()) { %> +
    +
    +
    Switches
    +
    + + +
    +
    +
    + <% } %> +
    +
    +
    +
    + + +
    +
    diff --git a/src/frontend/js/app/user/form.js b/src/frontend/js/app/user/form.js new file mode 100644 index 0000000..4a750e6 --- /dev/null +++ b/src/frontend/js/app/user/form.js @@ -0,0 +1,99 @@ +'use strict'; + +const Mn = require('backbone.marionette'); +const template = require('./form.ejs'); +const Controller = require('../controller'); +const Cache = require('../cache'); +const Api = require('../api'); +const App = require('../main'); +const UserModel = require('../../models/user'); + +require('jquery-serializejson'); + +module.exports = Mn.View.extend({ + template: template, + className: 'modal-dialog', + + ui: { + form: 'form', + buttons: '.modal-footer button', + cancel: 'button.cancel', + save: 'button.save' + }, + + events: { + /* + 'click @ui.cancel': function (e) { + e.preventDefault(); + App.UI.closeModal(); + }, + */ + + 'submit @ui.form': function (e) { + e.preventDefault(); + let view = this; + let data = this.ui.form.serializeJSON(); + + // Manipulate + data.roles = []; + if ( + (this.model.get('id') === Cache.User.get('id') && this.model.isAdmin()) || + (typeof data.is_admin !== 'undefined' && data.is_admin)) { + data.roles.push('admin'); + delete data.is_admin; + } + + data.is_disabled = typeof data.is_disabled !== 'undefined' ? !!data.is_disabled : false; + this.ui.buttons.prop('disabled', true).addClass('btn-disabled'); + let method = Api.Users.create; + + if (this.model.get('id')) { + // edit + method = Api.Users.update; + data.id = this.model.get('id'); + } + + method(data) + .then(result => { + if (result.id === Cache.User.get('id')) { + Cache.User.set(result); + } + + view.model.set(result); + App.UI.closeModal(); + + if (view.model.get('id') !== Cache.User.get('id')) { + Controller.showUsers(); + } + }) + .catch(err => { + alert(err.message); + this.ui.buttons.prop('disabled', false).removeClass('btn-disabled'); + }); + } + }, + + templateContext: function () { + let view = this; + + return { + isSelf: function () { + return view.model.get('id') === Cache.User.get('id'); + }, + + isAdmin: function () { + return view.model.isAdmin(); + }, + + isDisabled: function () { + return view.model.isDisabled(); + } + }; + }, + + initialize: function (options) { + if (typeof options.model === 'undefined' || !options.model) { + this.model = new UserModel.Model(); + } + } +}); diff --git a/src/frontend/js/app/users/list/item.ejs b/src/frontend/js/app/users/list/item.ejs new file mode 100644 index 0000000..b83f03d --- /dev/null +++ b/src/frontend/js/app/users/list/item.ejs @@ -0,0 +1,31 @@ + +
    + +
    + + +
    <%- name %>
    +
    + Created: Mar 19, 2018 +
    + + +
    <%- email %>
    + + +
    <%- roles.join(', ') %>
    + + +
    + +
    + Edit User + Set Password + <% if (!isSelf()) { %> + +
    + Delete User + <% } %> +
    +
    + diff --git a/src/frontend/js/app/users/list/item.js b/src/frontend/js/app/users/list/item.js new file mode 100644 index 0000000..a74bbde --- /dev/null +++ b/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); + } +}); diff --git a/src/frontend/js/app/users/list/main.ejs b/src/frontend/js/app/users/list/main.ejs new file mode 100644 index 0000000..ce89341 --- /dev/null +++ b/src/frontend/js/app/users/list/main.ejs @@ -0,0 +1,10 @@ + +   + Name + Email + Roles +   + + + + diff --git a/src/frontend/js/app/users/list/main.js b/src/frontend/js/app/users/list/main.js new file mode 100644 index 0000000..80b7bd5 --- /dev/null +++ b/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 + })); + } +}); diff --git a/src/frontend/js/app/users/main.ejs b/src/frontend/js/app/users/main.ejs new file mode 100644 index 0000000..336682b --- /dev/null +++ b/src/frontend/js/app/users/main.ejs @@ -0,0 +1,17 @@ +
    +
    +

    Users

    +
    + Add User +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    diff --git a/src/frontend/js/app/users/main.js b/src/frontend/js/app/users/main.js new file mode 100644 index 0000000..9f77fa1 --- /dev/null +++ b/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'); + }); + } +}); diff --git a/src/frontend/scss/custom.scss b/src/frontend/scss/custom.scss new file mode 100644 index 0000000..7541383 --- /dev/null +++ b/src/frontend/scss/custom.scss @@ -0,0 +1,25 @@ +$primary-color: #2bcbba; + +.loader { + color: $primary-color; +} + +a { + color: $primary-color; +} + +a:hover { + color: darken($primary-color, 10%); +} + +.dropdown-item.active, .dropdown-item:active { + background-color: $primary-color; +} + +.custom-switch-input:checked ~ .custom-switch-indicator { + background: $primary-color; +} + +.min-100 { + min-height: 100px; +} \ No newline at end of file diff --git a/src/frontend/scss/styles.scss b/src/frontend/scss/styles.scss index ac3bf72..9028e0b 100644 --- a/src/frontend/scss/styles.scss +++ b/src/frontend/scss/styles.scss @@ -1,4 +1,6 @@ @import "~tabler-ui/dist/assets/css/dashboard"; +@import "tabler-extra"; +@import "custom"; /* Before any JS content is loaded */ #app > .loader, #login > .loader, .container > .loader { @@ -10,4 +12,4 @@ .no-js-warning { margin-top: 100px; -} \ No newline at end of file +} diff --git a/src/frontend/scss/tabler-extra.scss b/src/frontend/scss/tabler-extra.scss new file mode 100644 index 0000000..cf95d04 --- /dev/null +++ b/src/frontend/scss/tabler-extra.scss @@ -0,0 +1,26 @@ +$teal: #2bcbba; + +/* For Card bodies where I don't want padding */ +.card-body.no-padding { + padding: 0; +} + +/* Teal Outline Buttons */ +.btn-outline-teal { + color: $teal; + background-color: transparent; + background-image: none; + border-color: $teal; +} + +.btn-outline-teal:hover { + color: #fff; + background-color: $teal; + border-color: $teal; +} + +.btn-outline-teal:not(:disabled):not(.disabled):active, .btn-outline-teal:not(:disabled):not(.disabled).active, .show > .btn-outline-teal.dropdown-toggle { + color: #fff; + background-color: $teal; + border-color: $teal; +}