strolch-wc-inspector/strolch-wc-role.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-privilege.html">

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

    <template>

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

            :host {
                display: block;
                margin: 0;
                padding: 0;
            }

            paper-material {
                background-color: white;
            }

            .content {
                border-top: 1px black solid;
                background: #eeeeee;
            }

        </style>

        <paper-material elevation="2">
            <h3 class="g-m-3 g-pt-2 g-pl-2 g-pr-2" on-tap="_toggleOpened">
                <template is="dom-if" if="[[!opened]]">
                    <paper-icon-button icon="arrow-drop-down"></paper-icon-button>
                </template>
                <template is="dom-if" if="[[opened]]">
                    <paper-icon-button icon="arrow-drop-up"></paper-icon-button>
                </template>
                [[role.name]]
                <paper-icon-button on-tap="_removeRole" class="g-pull-right" icon="delete"></paper-icon-button>
            </h3>

            <template is="dom-if" if="[[opened]]">
                <div class="content">
                    <template is="dom-repeat" items="[[role.privileges]]" as="privilege">
                        <strolch-wc-role-privilege base-path="[[basePath]]"
                                                   role="[[role]]"
                                                   privilege="[[privilege]]"
                                                   on-strolch-changed="onChanged"
                                                   on-strolch-remove-privilege="onRemovePrivilege"></strolch-wc-role-privilege>
                    </template>


                    <div class="g-pt-2 g-pb-2">
                        <paper-button on-tap="reload" autofocus disabled="[[!changed]]">Cancel</paper-button>
                        <paper-button on-tap="_addOrUpdateRole" disabled="[[!changed]]">Save</paper-button>
                        <paper-button on-tap="_openAddPrivilegeDlg">Add Privilege</paper-button>
                    </div>
                </div>

            </template>

        </paper-material>

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

            <paper-input value="{{privilegeName}}"></paper-input>

            <div class="buttons">
                <paper-button dialog-confirm autofocus>Close</paper-button>
                <paper-button on-tap="_addPrivilege">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-role',

            behaviors: [
                StrolchInspectorBehavior
            ],

            properties: {
                opened: {
                    type: Boolean,
                    value: false
                },
                role: {
                    type: Object,
                    observer: 'roleChanged'
                },
                privilegeName: {
                    type: String
                },
                changed: {
                    type: Boolean,
                    value: false
                }
            },

            ready: function () {
                //
            },

            roleChanged: function (newValue, oldValue) {
                if (newValue != null && newValue.isNew) {
                    this.changed = true;
                }

                if ((newValue != null && oldValue == null)
                    || (newValue != null && newValue.name != oldValue.name)) {
                    this.opened = false;
                }
            },

            reload: function () {

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

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

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

            _toggleOpened: function (e) {
                this.opened = !this.opened;
            },

            _openAddPrivilegeDlg: function (e) {
                this.dlgTitle = "Add Privilege";
                this.$.dlg.open();
            },
            _addPrivilege: function (e) {
                if (this.isEmptyString(this.privilegeName)) {
                    return;
                }

                this.push('role.privileges', {
                    name: this.privilegeName,
                    policy: "DefaultPrivilege",
                    allAllowed: false,
                    allowList: [],
                    denyList: []
                });
                this.changed = true;

                this.privilegeName = '';
                this.$.dlg.close();
            },

            _addOrUpdateRole: function (e) {

                this.dlgTitle = 'Save role failed';
                this._handleAjaxResponse = function (data) {
                    this.changed = false;
                    this.fire('strolch-role-reload-needed');
                };

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

            _removeRole: function (e) {
                e.stopPropagation();
                this.fire('strolch-remove-role', {role: this.role})
            },

            onChanged: function (e) {
                this.changed = true;
            },

            onRemovePrivilege: function (e) {
                var privilege = e.detail.privilege;
                var index = this.role.privileges.indexOf(privilege);
                if (index >= 0) {
                    this.role.privileges.splice(index, 1);
                    this.notifySplices('role.privileges', [
                        {
                            index: index,
                            removed: [privilege],
                            addedCount: 0,
                            obect: this.role.privileges,
                            type: 'splice'
                        }
                    ]);
                    this.changed = true;
                }
            }
        });

    </script>

</dom-module>