strolch-wc-inspector/strolch-wc-inspector-objects.html

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

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

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

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

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

<dom-module id="strolch-wc-inspector-objects">

    <template>

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

            :host {
                display: block;
                margin: 0;
                padding: 0;
                height: 100%;
                --focus-color: white;
                --regular-color: lightgrey;
                --disabled-color: darkgrey;
            }

            .title {
                margin-top: 2em;
                font-weight: bold;
                font-size: 1rem;
            }

            .card {
                background-color: #ffffff;
                cursor: pointer;
                border-style: none;
            }

            .toolbar {
                background-color: var(--paper-blue-900);
                color: rgba(255, 255, 255, 0.8);
                height: 42px;
            }

            .toolbar-title {
                line-height: 42px;
            }

            paper-input {

                --paper-input-container: {
                    padding-top: 12px;
                };
                --paper-input-container-color: var(--regular-color);
                --paper-input-container-focus-color: var(--focus-color);
                --paper-input-container-input-color: var(--focus-color);
                --paper-input-container-input: {
                    font-size: 18px;
                };
                --paper-input-container-underline-disabled: {
                    border-bottom-style: solid;
                }
            }

            paper-input::shadow input::-ms-clear {
                display: none;
                width: 0;
                height: 0;
            }

            paper-input:not([focused]) iron-icon {
                color: var(--regular-color);
            }

            paper-input[focused] iron-icon {
                color: var(--focus-color);
            }

            .toolbar-icon {
                margin-top: 4px;
            }

            #clear {
                cursor: pointer;
            }

            textarea {
                padding: 10px;
                margin: 10px;
                width: calc(100% - 40px);
                height: 100%;
                min-height: 300px;
            }

            paper-dialog {
                width: 600px;
            }

            .g-container {
                margin: 0 10px 50px 10px;
                width: calc(100% - 40px);
            }

            .card-import-btn {
                background-color: #faebd7;
            }

            .card-export-btn {
                background-color: #faa193;
            }

        </style>

        <template is="dom-if" if="[[_noElements(objectSummaries)]]" restamp>
            <p class="title g-center">No [[objectType]] objects exists.</p>
        </template>

        <template is="dom-if" if="[[!_noElements(objectSummaries)]]" restamp>

            <iron-pages selected="{{section}}" attr-for-selected="name">

                <section name="typesSummary" class="g-pt-4">

                    <div class="g-row">
                        <div class="g-offset-4 g-2">
                            <paper-material class="card card-import-btn g-m-2 g-p-4"
                                            elevation="1"
                                            on-tap="onImportTapped">
                                <iron-icon icon="cloud-upload"></iron-icon>
                                Import
                            </paper-material>
                        </div>
                        <div class="g-2">
                            <paper-material class="card card-export-btn g-m-2 g-p-4"
                                            elevation="1"
                                            on-tap="onExportTapped">
                                <iron-icon icon="cloud-download"></iron-icon>
                                Export
                            </paper-material>
                        </div>
                    </div>


                    <template is="dom-repeat" items="[[objectSummaries.types]]">
                        <div class="g-row">
                            <div class="g-offset-4 g-4">
                                <paper-material class="card g-m-2 g-p-4" elevation="1" on-tap="_showTypeDetails">
                                    <p class="g-mb-0">[[objectType]] of type <b>[[item.type]]</b> ([[item.size]])</p>
                                </paper-material>
                            </div>
                        </div>
                    </template>
                </section>

                <section name="typeDetails">

                    <div class="g-row toolbar">
                        <div class="g-1">
                            <paper-icon-button icon="arrow-back" on-tap="_closeTypeDetails"></paper-icon-button>
                        </div>
                        <div class="g-7">
                            <span class="toolbar-title">[[selectedType]] types</span>
                        </div>
                        <div class="g-3">
                            <paper-input no-label-float value="{{searchTerm}}" class="searchField">
                                <template is="dom-if" if="[[isEmptyString(searchTerm)]]">
                                    <iron-icon suffix icon="search"></iron-icon>
                                </template>
                                <template is="dom-if" if="[[!isEmptyString(searchTerm)]]">
                                    <iron-icon suffix icon="clear" id="clear" on-tap="onClearTapped"></iron-icon>
                                </template>
                            </paper-input>
                        </div>
                        <div class="g-1">
                            <paper-icon-button class="toolbar-icon"
                                               icon="cloud-download"
                                               title="Download queried elements"
                                               on-tap="onExportQueriedElements"></paper-icon-button>
                        </div>
                    </div>

                    <div class="g-row">
                        <div class="g-12">
                            <template is="dom-repeat" items="[[objects.data]]">
                                <strolch-wc-inspector-object base-path="[[basePath]]"
                                                             realm="[[realm]]"
                                                             is-root-element="true"
                                                             on-strolch-wc-obj-remove="onRemoveElement"
                                                             object="[[item]]"></strolch-wc-inspector-object>
                            </template>
                        </div>
                    </div>

                    <div class="g-row">
                        <div class="g-12">
                            <div class="g-m-2 g-center">
                                <paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
                                <paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
                                <span>[[objects.offset]] to [[_getEnd(objects)]] of [[objects.size]]</span>
                                <paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
                                <paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
                            </div>
                        </div>
                    </div>

                </section>

            </iron-pages>

        </template>

        <paper-dialog class="addDlg" opened="[[addDlgOpen]]" modal>
            <h3>[[importDlgTitle]]</h3>

            <textarea value="{{modelAsText::input}}"></textarea>

            <div class="g-container">
                <paper-button class="g-pull-right" on-tap="onSaveTap" raised>
                    <iron-icon icon="add"></iron-icon>
                    Add
                </paper-button>
                <paper-button class="g-pull-right" on-tap="onCancelTap" raised>
                    <iron-icon icon="close"></iron-icon>
                    Cancel
                </paper-button>
            </div>
        </paper-dialog>

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

        <iron-ajax id="ajaxXml"
                   content-type="application/xml"
                   handle-as="text"
                   method="GET"
                   on-response="_handleAjaxResponse"
                   on-error="_handleAjaxError"></iron-ajax>

    </template>

    <script>

        Polymer({

            is: 'strolch-wc-inspector-objects',

            properties: {
                basePath: {
                    type: String,
                    value: './'
                },
                dlgTitle: {
                    type: String
                },
                realm: {
                    type: String,
                    value: function () {
                        return null;
                    }
                },
                searchTerm: {
                    type: String,
                    observer: "observeSearchTerm",
                    value: function () {
                        return "";
                    }
                },
                objectType: {
                    type: String,
                    value: function () {
                        return null;
                    }
                },
                objectSummaries: {
                    type: Object,
                    value: function () {
                        return null;
                    },
                    observer: "_objectSummariesChanged"
                },
                section: {
                    type: String,
                    value: function () {
                        return 'typesSummary';
                    }
                },
                selectedType: {
                    type: String,
                    value: function () {
                        return null;
                    }
                },
                objects: {
                    type: Object,
                    value: function () {
                        return null;
                    }
                },
                offset: {
                    type: Number,
                    value: function () {
                        return 0;
                    }
                },
                limit: {
                    type: Number,
                    value: function () {
                        return 20;
                    }
                },

                addDlgOpen: {
                    type: Boolean,
                    value: false
                },
                importType: {
                    type: String,
                    value: 'import'
                },
                modelAsText: {
                    type: String,
                    value: ''
                },
                modelType: {
                    type: String,
                    value: function () {
                        return 'xml';
                    }
                }
            },

            isEmptyString: function (s) {
                return s == null || s.length == 0;
            },

            onClearTapped: function (event) {
                this.set("searchTerm", "");
            },

            observeSearchTerm: function (newValue, oldValue) {
                if (this.realm == null || this.objectType == null || this.selectedType == null) {
                    return;
                }

                this.debounce("doSearch", function () {
                    this.offset = 0;
                    this.reloadTypeDetails();
                }, 500);
            },

            _objectSummariesChanged: function (newValue, oldValue) {
                this.selectedType = null;
                this.section = 'typesSummary';
                this.selectedType = null;
                this.objects = null;
                Strolch.setQueryParamValue('type', null);
            },

            _noElements: function (objectSummaries) {
                return objectSummaries == null || objectSummaries.types.length == 0;
            },

            _showTypeDetails: function (evt) {
                this.selectedType = evt.model.item.type;
                this.section = 'typeDetails';
                this.objects = null;
                console.log('Showing type ' + this.selectedType);
                Strolch.setQueryParamValue('type', this.selectedType);
                this.reloadTypeDetails();
            },

            _closeTypeDetails: function () {
                this.section = 'typesSummary';
                this.selectedType = null;
                this.objects = null;
                Strolch.setQueryParamValue('type', null);
            },

            _typeSubPath: function (selectedType) {
                if (selectedType == 'Resource') {
                    return 'resources';
                } else if (selectedType == 'Order') {
                    return 'orders';
                } else if (selectedType == 'Activity') {
                    return 'activities';
                } else {
                    throw 'Unhandled selected type ' + selectedType;
                }
            },

            _hasNext: function (objects) {
                return objects != null && objects.nextOffset > objects.offset;
            },
            _hasPrevious: function (objects) {
                return objects != null && objects.previousOffset < objects.offset;
            },

            _getEnd: function (objects) {
                if (this._hasNext(objects)) return objects.nextOffset;
                return objects == null ? 0 : objects.size;
            },

            _toFirstPage: function () {
                this.offset = 0;
                this.reloadTypeDetails();
            },
            _toPreviousPage: function () {
                this.offset = this.objects.previousOffset;
                this.reloadTypeDetails();
            },
            _toNextPage: function () {
                this.offset = this.objects.nextOffset;
                this.reloadTypeDetails(this.objects.nextOffset);
            },
            _toLastPage: function () {
                this.offset = this.objects.lastOffset;
                this.reloadTypeDetails(this.objects.lastOffset);
            },

            onImportTapped: function (event) {
                this.set('importDlgTitle', 'Import Elements as XML');
                this.importType = 'import';
                this.addDlgOpen = true;
            },
            onExportTapped: function (event) {
                this.dlgTitle = 'Export failed';
                this._handleAjaxResponse = function (data) {
                    var response = data.detail.response;
                    var fileName = this.realm + '_' + this.objectType + '_' + Strolch.toDateTimeNoDelim(new Date()) + '.xml';
                    Strolch.handleAjaxFileDownload(response, fileName, 'application/xml');
                };

                this.$.ajaxXml.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.objectType) + '/xml';
                this.$.ajaxXml.headers = {'Accept': 'application/xml'};
                this.$.ajaxXml.method = 'GET';
                this.$.ajaxXml.generateRequest();

            },
            onExportQueriedElements: function (event) {
                this.dlgTitle = 'Export failed';
                this._handleAjaxResponse = function (data) {
                    var response = data.detail.response;
                    var fileName = this.realm + '_' + this.objectType + '_' + this.selectedType + '_' + Strolch.toDateTimeNoDelim(new Date()) + '.xml';
                    Strolch.handleAjaxFileDownload(response, fileName, 'application/xml');
                };

                var url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.objectType) + '/' + this.selectedType + '/xml';
                url += '?query=' + this.searchTerm;

                this.$.ajaxXml.url = url;
                this.$.ajaxXml.headers = {'Accept': 'application/xml'};
                this.$.ajaxXml.method = 'GET';
                this.$.ajaxXml.generateRequest();
            },

            onAddTapped: function (event) {
                this.set('importDlgTitle', 'Add ' + this.objectType + ' of type ' + this.selectedType);
                this.importType = 'add';
                this.addDlgOpen = true;
            },
            onCancelTap: function (event) {
                this.modelAsText = '';
                this.addDlgOpen = false;
            },
            onSaveTap: function (event) {
                if (!this.modelAsText || this.modelAsText == null || this.modelAsText == '') {
                    this.fire('strolch-show-dialog', {
                        title: 'Model empty',
                        text: 'Model can not be empty!'
                    });
                    return;
                }

                this.dlgTitle = 'Import failed';
                if (this.importType == 'import') {

                    this._handleAjaxResponse = function (data) {
                        this.modelAsText = '';
                        this.addDlgOpen = false;
                        this.fire('strolch-import', {msg: data.detail.response.msg});
                    };

                    this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/import';
                    this.$.ajax.headers = {
                        'Accept': 'application/xml',
                        'Content-Type': 'application/xml'
                    };
                    this.$.ajax.handleAs = 'json';
                    this.$.ajax.method = 'POST';
                    this.$.ajax.body = this.modelAsText;
                    this.$.ajax.generateRequest();
                } else {

                    var accept = this._getAcceptHeader();
                    var url = this._getObjectUrl();
                    if (this.modelType == 'json-flat') {
                        url += '?flat=true';
                    }

                    this._handleAjaxResponse = function (data) {
                        console.log(data);
                    };

                    this.$.ajax.url = url;
                    this.$.ajax.headers = {
                        'Accept': accept,
                        'Content-Type': accept
                    };
                    this.$.ajax.handleAs = 'text';
                    this.$.ajax.method = 'POST';
                    this.$.ajax.body = this.modelAsText;
                    this.$.ajax.generateRequest();
                }
            },

            _getAcceptHeader: function () {
                if (this.modelType == 'xml') {
                    return 'application/xml'
                } else if (this.modelType == 'json') {
                    return 'application/json'
                } else if (this.modelType == 'json-flat') {
                    return 'application/json';
                } else {
                    return 'application/xml';
                }
            },

            _getObjectUrl: function () {
                var objectType = this.objectType;
                var type = this.selectedType;
                var url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(objectType);
                if (this.modelType == 'json-flat') {
                    url += '/' + type + '/';
                }
                return url;
            },

            onRemoveElement: function (event) {
                console.log("Delete element " + event.detail.object.id);

                var id = event.detail.object.id;
                var index = null;
                for (var i = 0; i < this.objects.data.length; i++) {
                    if (this.objects.data[i].id == id) {
                        index = i;
                        break;
                    }
                }

                if (index != null) {
                    this.splice("objects.data", index, 1);
                }
            },

            reloadTypeDetails: function () {
                this.dlgTitle = 'Reload failed';
                this._handleAjaxResponse = function (data) {
                    this.set('objects', data.detail.response);
                };

                var url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.objectType) + '/' + this.selectedType;
                url += '?offset=' + this.offset + '&limit=' + this.limit + "&orderBy=id&query=" + this.searchTerm;

                this.$.ajax.url = url;
                this.$.ajax.method = 'GET';
                this.$.ajax.handleAs = 'json';
                this.$.ajax.headers = {
                    'Accept': 'application/json'
                };
                this.$.ajax.contentType = 'application/json';
                this.$.ajax.generateRequest();
            },

            ready: function () {

            },

            reload: function () {

            },

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

            _handleAjaxError: function (data) {
                this.fire('strolch-handle-ajax-error', {
                    title: this.dlgTitle,
                    detail: data.detail
                });
            }
        });

    </script>

</dom-module>