strolch-wc-notification-edit-dlg.html

<!-- Components -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-input/paper-textarea.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../strolch-wc-styles/strolch-wc-app-style.html">
<link rel="import" href="../strolch-wc-util-behavior/strolch-wc-component-behavior.html">
<link rel="import" href="../strolch-wc-raw-text/strolch-wc-raw-text.html">
<link rel="import" href="../strolch-wc-date-time/strolch-wc-date-picker.html">

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

<dom-module id="strolch-wc-notification-edit-dlg">
    <template>
        <!-- Style -->
        <style is="custom-style" include="strolch-wc-app-style">
            :host {

            }

            paper-dialog {
                width: 700px;
            }

            .dialog-headline {
                margin-top: 0;
            }

            div.visibility {
                margin-top: 0;
            }

            p.visibility {
                margin-top: 0;
            }

            .inline-blk {
                display: inline-block;
            }

            paper-textarea {
                border: 1px solid black;
                /*margin: 0 24px;*/
                padding: 0 8px;
                --paper-input-container: {
                    padding: 0;
                };
                --paper-input-container-underline-focus: {
                    display: none;
                };
                --paper-input-container-underline: {
                    display: none;
                };
            }

            paper-listbox {
                padding-top: 0;
                max-height: 210px;
                overflow: auto;
            }

            .roles-locations-div {
                display: flex;
                flex-direction: row;
            }

            .roles-locations-div div {
                flex-basis: 200px;
                flex-grow: 1;
                flex-shrink: 1;
            }

            .roles-locations-div div p {
                margin-bottom: 0;
            }

        </style>

        <!-- Content -->
        <paper-dialog id="dlg" modal>
            <iron-a11y-keys keys="esc" on-keys-pressed="close"></iron-a11y-keys>
            <div class="dialog-headline">
                <h2>
                    <paper-icon-button icon="icons:close" on-tap="close"></paper-icon-button>
                    [[localize('notification')]]
                </h2>
            </div>

            <paper-dialog-scrollable class="dialog-content">

                <paper-tabs selected="{{selectedLanguageTab}}" attr-for-selected="name" fit-container>
                    <template is="dom-repeat" items="[[supportedLanguages]]" as="language">
                        <paper-tab name="[[language.locale]]">[[language.name]]</paper-tab>
                    </template>
                </paper-tabs>

                <template is="dom-if" if="[[selectedLanguageTab]]">
                    <paper-input label="[[localize('title')]]" value="{{selectedLanguageText.title}}"></paper-input>
                    <paper-textarea rows="8" value="{{selectedLanguageText.text}}"
                                    label="[[localize('text')]]"></paper-textarea>
                    <p class="visibility"><i>[[localize('textWithSimpleHtmlTagsAllowed')]]</i></p>
                </template>

                <paper-checkbox checked="{{notification.visibility.enabled}}">[[localize('enabled')]]</paper-checkbox>
                <paper-checkbox checked="{{notification.visibility.forAll}}">[[localize('forAll')]]</paper-checkbox>

                <!-- on-iron-select="onListSelect" on-iron-deselect="onListDeselect" -->
                <div class="roles-locations-div">
                    <div>
                        <p><b>[[localize('roles')]]</b></p>
                        <paper-listbox multi selected-values="{{selectedRoleIndices}}">
                            <template is="dom-repeat" items="[[roles]]" as="role">
                                <paper-item name="[[role.name]]">[[role.name]]</paper-item>
                            </template>
                        </paper-listbox>
                    </div>
                    <template is="dom-if" if="[[locations]]">
                        <div>
                            <p><b>[[localize('locations')]]</b></p>
                            <paper-listbox multi selected-values="{{selectedLocationIndices}}">
                                <template is="dom-repeat" items="[[locations]]" as="location">
                                    <paper-item name="[[location.name]]">[[location.name]]</paper-item>
                                </template>
                            </paper-listbox>
                        </div>
                    </template>
                </div>

                <div class="visibility">
                    <strolch-wc-date-picker class="inline-blk" id="startDate" label="[[localize('visibleFrom')]]"
                                            value="{{visibleDateFrom}}"></strolch-wc-date-picker>
                    <strolch-wc-editable-time-picker id="timeFrom" class="inline-blk" id="startTime"
                                                     label="[[localize('time')]]"
                                                     increments="30"
                                                     value="{{visibleTimeFrom}}"></strolch-wc-editable-time-picker>
                </div>
                <div>
                    <strolch-wc-date-picker class="inline-blk" id="endDate" label="[[localize('visibleTo')]]"
                                            value="{{visibleDateTo}}"></strolch-wc-date-picker>
                    <strolch-wc-editable-time-picker id="timeTo" class="inline-blk" id="endTime"
                                                     label="[[localize('time')]]"
                                                     increments="30"
                                                     value="{{visibleTimeTo}}"></strolch-wc-editable-time-picker>
                </div>

            </paper-dialog-scrollable>

            <div class="buttons">
                <paper-button on-tap="close">[[localize('cancel')]]</paper-button>
                <paper-button autofocus on-tap="onSave">[[localize('save')]]</paper-button>
            </div>
        </paper-dialog>

        <iron-ajax id="ajaxGetRoles" url="[[baseRestPath]]/strolch/privilege/roles"
                   content-type="application/json" handle-as="json" method="GET"
                   on-response="onGetRolesResponse" on-error="onRequestError"></iron-ajax>

    </template>

    <script>
        Polymer({
            <!-- Settings -->
            is: "strolch-wc-notification-edit-dlg",

            <!-- Behaviors -->
            behaviors: [
                StrolchNotificationsBehavior
            ],

            <!-- Properties -->
            properties: {
                supportedLanguages: {
                    type: Array,
                    value: []
                },
                locations: {
                    type: Array
                },
                selectedLocationIndices: {
                    type: Array,
                    value: []
                },
                roles: {
                    type: Array,
                    value: []
                },
                selectedRoleIndices: {
                    type: Array,
                    value: []
                },
                selectedLanguageTab: {
                    type: String,
                    observer: "selectedLanguageTabChanged"
                },
                notification: {
                    type: Object
                },
                selectedLanguageText: {
                    type: Object
                },
                visibleDateFrom: {
                    type: Date,
                    value: null
                },
                visibleDateTo: {
                    type: Date,
                    value: null
                },
                visibleTimeFrom: {
                    type: String,
                    value: null
                },
                visibleTimeTo: {
                    type: String,
                    value: null
                }
            },

            selectedLanguageTabChanged: function (newValue) {
                if (newValue == null || newValue.length === 0) {
                    this.selectedLanguageText = {};
                } else {
                    if (this.notification[newValue] == null) {
                        this.notification[newValue] = {title: "", text: ""};
                    }
                    this.selectedLanguageText = this.notification[newValue];
                }
            },

            <!-- Functions -->

            open: function (notification) {
                if (notification != null) {
                    notification = JSON.parse(JSON.stringify(notification));
                } else {
                    var date = new Date();
                    date.setSeconds(0);
                    date.setMilliseconds(0);
                    date.setMinutes(0);
                    notification = {
                        visibility: {
                            roles: "",
                            locations: "",
                            enabled: true,
                            forAll: false,
                            visibleFrom: date.toISOString(),
                            visibleTo: date.toISOString(),
                        }
                    };
                }

                this.notification = notification;
                var visibility = notification.visibility;
                visibility.roles = visibility.roles.split(",").map(function (s) {
                    return s.trim()
                });
                visibility.locations = visibility.locations.split(",").map(function (s) {
                    return s.trim()
                });
                this.visibleDateFrom = new Date(visibility.visibleFrom);
                this.visibleDateTo = new Date(visibility.visibleTo);
                var s = visibility.visibleFrom;
                this.visibleTimeFrom = s.substring(s.indexOf("T") + 1).substring(0, 5);
                s = visibility.visibleTo;
                this.visibleTimeTo = s.substring(s.indexOf("T") + 1).substring(0, 5);

                this.$.ajaxGetRoles.generateRequest();
                this.selectedRoleIndices = [];
                this.selectedLanguageTab = null;
                this.selectedLanguageTab = this.supportedLanguages[0].locale;

                // find selected locations
                var locations = this.locations;
                var selectedLocations = this.notification.visibility.locations;
                if (selectedLocations == null || selectedLocations.length === 0 || this.locations.length === 0) {
                    this.selectedLocationIndices = [];
                } else {
                    this.selectedLocationIndices = selectedLocations.map(function (value) {
                        return locations.findIndex(function (v) {
                            return v.id === value
                        });
                    }).filter(function (value) {
                        return value > 0
                    });
                }

                this.$.dlg.open();
            },

            close: function () {
                this.$.dlg.close();
                this.notification = null;
                this.selectedLanguageText = {};
                this.visibleDateFrom = null;
                this.visibleDateTo = null;
                this.visibleTimeFrom = null;
                this.visibleTimeTo = null;
                this.selectedRoleIndices = [];
                this.selectedLanguageTab = null;
                this.selectedLocationIndices = [];
            },

            onSave: function () {
                var from = this.$.timeFrom.getValueWithDate(this.visibleDateFrom).toISOString();
                var to = this.$.timeTo.getValueWithDate(this.visibleDateTo).toISOString();

                var visibility = this.notification.visibility;
                visibility.visibleFrom = from;
                visibility.visibleTo = to;

                visibility.roles = this.selectedRoleIndices.map(function (index) {
                    return this.roles[index].name
                }.bind(this)).join(", ");
                visibility.locations = this.selectedLocationIndices.map(function (index) {
                    return this.locations[index].id
                }.bind(this)).join(", ");
                this.fire("save", this.notification);
            },

            onGetRolesResponse: function (e) {
                var roles = e.detail.response;
                this.roles = roles;

                // find selected roles
                this.selectedRoleIndices = this.notification.visibility.roles.map(function (value) {
                    return roles.findIndex(function (v) {
                        return v.name === value
                    });
                }).filter(function (value) {
                    return value > 0
                });

                this.$.dlg.notifyResize();
            }
        });
    </script>
</dom-module>