actindo-tree-detail-dialog.html

<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/actindo-combobox/actindo-combobox.html">
<dom-module id="actindo-tree-detail-dialog">
    <template>
        <style>
            paper-dialog.first
            {
                top: 10px;
            }
            paper-dialog
            {
                @apply(--paper-material-elevation-2);
                padding: 1em 0;
                width: calc(100% - 23px);
                margin-left: 4px;
                position: absolute;
                top: 0;
                left: 0;
            }
            .content,
            paper-input
            {
                margin-top: 0;
            }
            paper-button.save
            {
                color: white;
                background-color: var(--actindo-primary);
            }
            .content
            {
                margin-bottom: 1em;
            }
            .dialog-header
            {
                color: var(--actindo-secondary);
                font-size: var(--font-subheader_-_font-size);
                font-weight: normal;
                width: 100%;
                display: block;
            }
            .editing-false .btn-delete
            {
                display: none;
            }

            .btn-delete
            {
                padding: 0;
            }

            .editing-true .dialog-header
            {
                display: none;
            }

            .buttons
            {
                padding: 8px 8px 0px 12px;
                display: flex;
                justify-content: space-between;
            }
            .editing-false .buttons
            {
                justify-content: flex-end;
                padding-right: 20px;
            }
            .buttons > div
            {
                display: flex;
            }

            .buttons paper-icon-button
            {
                color: var(--actindo-secondary);
                opacity: 0.52;
            }

            .buttons paper-button
            {
                font-size: 0.9em;
            }

            paper-input[hidden]
            {
                display: none;
            }

            paper-icon-button[hidden] {
                visibility: hidden;
            }
            actindo-combobox
            {
                --paper-input-container-input-color: var(--actindo-primary);
                --paper-input-container_-_padding: 0;
                --paper-dropdown-menu-icon: {
                    color: var(--actindo-primary);
                };
                --paper-font-subhead_-_font-size: var(--font-menu_-_font-size);
                --paper-dropdown-menu-ripple:
                {
                    display: none;
                };
            }


        </style>
        <iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="onEnterPressed">
            <paper-dialog
                id="alignedDialog"
                class$="editing-[[editing]] [[class]]"
                no-cancel-on-outside-click="[[noCancelOnOutsideClick]]"
            >
                <span class="dialog-header">Add Element</span>
                <template is="dom-if" if="[[useTranslations]]">
                    <actindo-combobox
                            id="languageSwitch"
                            no-label-float
                            class="no-underline"
                            items="[[locales]]"
                            display-field="name"
                            value-field="key"
                            value="{{locale}}"
                    >
                    </actindo-combobox>
                </template>
                <div class="content">
                    <template is="dom-if" if="[[!useTranslations]]" restamp>
                        <paper-input
                            autofocus
                            value="{{name}}"
                            label="Name"
                            always-float-label
                            disabled="[[_isDisabledNameChange(data)]]"
                        >
                        </paper-input>
                    </template>
                    <template is="dom-if" if="[[useTranslations]]" restamp>
                        <template is="dom-repeat" items="[[locales]]">
                            <paper-input
                                    label="[[_getName(item)]]"
                                    data-field$="[[item.field]]"
                                    value="[[_getValue(item,data)]]"
                                    hidden$="[[_hidden(item, locale)]]"
                            ></paper-input>
                        </template>
                    </template>

                    <paper-input
                        value="{{key}}"
                        label="Key"
                        disabled="[[ _isDisabledKeyChange(data) ]]"
                    >
                    </paper-input>
                </div>
              <div class="buttons">

                <paper-icon-button hidden="[[ _isHiddenDeleteButton(data) ]]" class="btn-delete" on-click="delete" icon="delete" >
                </paper-icon-button>
                <div>
                    <paper-button dialog-dismiss on-click="cancel" id="cancel" >Cancel</paper-button>
                    <paper-button dialog-confirm disabled="[[disabled]]" raised on-click="submit" id="save" class="save">Save</paper-button>
                </div>

              </div>
            </paper-dialog>
        </iron-a11y-keys>
    </template>

    <script>
        class ActindoTreeDetailDialog extends Polymer.Element
        {
            static get is()
            {
                return "actindo-tree-detail-dialog";
            }

            static get properties() {
                return {
                    data: {
                        type: Object,
                        notify: true,
                        value: function() {
                            return {
                                key: ''
                            };
                        },
                    },
                    editing: {
                        type: Boolean,
                        value: false,
                    },
                    noCancelOnOutsideClick: {
                        type: Boolean,
                        value: false,
                    },
                    class: {
                        type: String
                    },
                    name: {
                        type: String
                    },
                    key: {
                        type: String,
                        value: ''
                    },
                    readOnly: {
                        type: Boolean,
                    },
                    disabled: {
                        type: Boolean,
                        computed: '_getDisabled(name)'
                    },
                    disableKeyChange: {
                        type: Boolean,
                    },
                    disableKeyChangeForReadOnly: {
                        type: Boolean,
                    },
                    disableNameChangeForReadOnly: {
                        type: Boolean,
                    },
                    disableDelete: {
                        type: Boolean,
                    },
                    disableDeleteForReadOnly: {
                        type: Boolean,
                    },
                    useTranslations: {
                        type: Boolean,
                        value: false
                    },
                    locales: {
                        type: Array,
                        value: () => [],
                        observer:"_localesChanged"
                    },
                    defaultLocale: {
                        type: String
                    },
                    locale: {
                        type: String
                    }
                }
            }

            _hidden(item, locale)
            {
                return item.key !== locale;
            }

            _getName(item)
            {
                return 'Name ('+item.name+')';
            }

            _getValue(item,data)
            {
                return Polymer.Path.get(data,item.field);
            }

            ensureSelected()
            {
                this._localesChanged(this.locales);
            }

            _localesChanged(newValue)
            {
                if(!Array.isArray(newValue) || !newValue.length)
                {
                    return;
                }
                if(!this.locale)
                {
                    this.locale = this.defaultLocale ? this.defaultLocale : newValue[0].key;
                }
            }

            _getDisabled(name)
            {
                return !name;
            }

            delete()
            {
                this.dispatchEvent( new CustomEvent("delete", {detail: this.data }));
                this.$.alignedDialog.close();
            }

            cancel()
            {
                this.dispatchEvent( new CustomEvent("cancel", {detail: {} }));
            }

            open()
            {
                this.name = this.data[this.nameField];
                this.key = this.data.key;
                this.$.alignedDialog.open();
            }

            _isDisabledNameChange(item)
            {
                if(item.id > 0)
                {
                    return this.disableNameChangeForReadOnly && item.readOnly;
                }

                return false;
            }

            _isDisabledKeyChange(item)
            {
                if((item.id > 0) && this.disableKeyChangeForReadOnly)
                {
                    return item.readOnly;
                }

                return (item.id > 0) && this.disableKeyChange;
            }

            _isHiddenDeleteButton(item)
            {
                if((item.id > 0) && this.disableDeleteForReadOnly)
                {
                    return item.readOnly;
                }

                return (item.id > 0) && this.disableDelete;
            }

            reset()
            {
                this.data = {
                    key: ''
                };
            }

            submit()
            {
                Object.assign(this.data, {
                  key: this.key
                });

                if(this.useTranslations)
                {
                    const translatableInputs = Polymer.dom(this.root).querySelectorAll('paper-input[data-field]');
                    translatableInputs.forEach( (translatableInput) => {
                        this.data[translatableInput.getAttribute('data-field')] = translatableInput.value;
                        }
                    );
                }
                else
                {
                    this.data[this.nameField] = this.name;
                }

                this.dispatchEvent( new CustomEvent("submit", {detail: this.data }));
            }

            onEnterPressed(e)
            {
                if (!this.name)
                {
                   return;
                }
                if(  e.detail.keyboardEvent.key === "Enter" )
                {
                    this.submit();
                    this.$.alignedDialog.close();
                }
            }
        }
        customElements.define(ActindoTreeDetailDialog.is, ActindoTreeDetailDialog);
    </script>
</dom-module>