strolch-wc-roles.html

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../iron-pages/iron-pages.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<link rel="import" href="../paper-styles/color.html">

<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">

<link rel="import" href="../paper-tabs/paper-tabs.html">

<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">

<link rel="import" href="strolch-wc-inspector-behavior.html">
<link rel="import" href="strolch-wc-role.html">

<dom-module id="strolch-wc-roles">

    <template>

        <style is="custom-style" include="strolch-wc-app-style">

            :host {
                display: block;
                margin: 0;
                padding: 0;
                height: 100%;
            }

            .g-table {
                font-size: small;
            }

            .g-table thead {
                font-weight: bold;
            }

            .g-table th, .g-table td {
                vertical-align: inherit;
            }

        </style>

        <div class="actions actions-right">
            <paper-button on-tap="_openAddRoleDlg" raised>Add</paper-button>
            <paper-icon-button icon="refresh" title="Refresh" on-tap="reload"></paper-icon-button>
        </div>

        <template is="dom-repeat" items="[[roles]]" as="role">
            <strolch-wc-role class="g-ml-3 g-mr-3"
                             base-path="[[basePath]]"
                             role="[[role]]"
                             on-strolch-remove-role="onRemoveRole"
                             on-strolch-role-reload-needed="onReload"></strolch-wc-role>
        </template>


        <paper-dialog id="dlg" modal>
            <h2>[[dlgTitle]]</h2>
            <p>[[dlgText]]</p>
            <div class="buttons">
                <paper-button dialog-confirm autofocus>Close</paper-button>
            </div>
        </paper-dialog>

        <paper-dialog id="addRoleDlg" modal>
            <h2>[[dlgTitle]]</h2>

            <paper-input label="role name" value="{{roleName}}"></paper-input>

            <div class="buttons">
                <paper-button dialog-confirm autofocus>Close</paper-button>
                <paper-button on-tap="_addRole">Add</paper-button>
            </div>
        </paper-dialog>

        <iron-ajax id="ajax"
                   content-type="application/json"
                   handle-as="json"
                   on-response="_handleAjaxResponse"
                   on-error="onAjaxError"></iron-ajax>

    </template>

    <script>

        Polymer({

            is: 'strolch-wc-roles',

            behaviors: [
                StrolchInspectorBehavior
            ],

            properties: {
                roles: {
                    type: Array
                },
                roleName: {
                    type: String
                },
                searchTerm: {
                    type: String,
                    observer: 'searchTermChanged'
                },
                propagateShowDialog: {
                    type: Boolean,
                    value: function () {
                        return false
                    }
                }
            },

            listeners: {
                "strolch-show-dialog": "onShowDialog"
            },
            onShowDialog: function (event) {
                if (!this.propagateShowDialog) {
                    event.cancelBubble = true;
                    event.stopPropagation();
                    this.showError(event.detail.title, event.detail.text);
                }
            },
            showError: function (title, text) {
                this.dlgTitle = title;
                this.dlgText = text;
                console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
                this.$.dlg.open();
            },

            searchTermChanged: function (newValue) {
                if (newValue != null)
                    this.reload();
            },

            ready: function () {
                //
            },

            onReload: function (e) {
                this.reload();
            },

            reload: function () {

                this.dlgTitle = 'Role query failed';
                this._handleAjaxResponse = function (data) {
                    this.roles = data.detail.response;
                };

                this.$.ajax.url = this.basePath + 'rest/strolch/privilege/roles';
                this.$.ajax.method = 'GET';
                this.$.ajax.params = {query: this.searchTerm};
                this.$.ajax.generateRequest();
            },

            _openAddRoleDlg: function (e) {
                this.dlgTitle = 'Add Role';
                this.$.addRoleDlg.open();
            },

            _addRole: function (e) {
                if (this.isEmptyString(this.roleName)) {
                    return;
                }

                this.push('roles', {
                    isNew: true,
                    name: this.roleName,
                    privileges: []
                });

                this.roleName = '';
                this.$.addRoleDlg.close();
            },

            onRemoveRole: function (e) {

                var role = e.detail.role;
                if (!confirm('Do you really want to delete role ' + role.name)) {
                    return;
                }

                this.dlgTitle = 'Remove role failed';
                this._handleAjaxResponse = function (data) {
                    this.reload();
                };

                this.$.ajax.url = this.basePath + 'rest/strolch/privilege/roles/' + role.name;
                this.$.ajax.method = 'DELETE';
                this.$.ajax.body = {};
                this.$.ajax.generateRequest();
            },

            _handleAjaxResponse: function (evt) {
                console.log('NOT YET DEFINED!');
            }
        });

    </script>

</dom-module>