From f6c485fe04580f07fdaba3be1bae1811254d69fe Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Mon, 20 Jul 2020 12:17:39 +0200
Subject: [PATCH] [New] Implemented new i18n-editor

---
 bower.json                         |   2 +-
 strolch-wc-i18n-editor.html        | 185 +++++++++++++++++++++++++++++
 strolch-wc-inspector-behavior.html |   3 +
 strolch-wc-inspector-menu.html     |   4 +
 4 files changed, 193 insertions(+), 1 deletion(-)
 create mode 100644 strolch-wc-i18n-editor.html

diff --git a/bower.json b/bower.json
index 731a4e9..19d5f97 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-inspector",
   "description": "Strolch WebComponent Inspector",
-  "version": "0.19.8",
+  "version": "0.20.0",
   "authors": ["Robert von Burg"],
   "keywords": [
     "strolch",
diff --git a/strolch-wc-i18n-editor.html b/strolch-wc-i18n-editor.html
new file mode 100644
index 0000000..687bd65
--- /dev/null
+++ b/strolch-wc-i18n-editor.html
@@ -0,0 +1,185 @@
+<link rel="import" href="../polymer/polymer.html">
+
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../paper-input/paper-input.html">
+
+<link rel="import" href="../strolch-wc-paging/strolch-wc-paging.html">
+
+<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
+<link rel="import" href="../strolch-wc-tree/strolch-wc-tree.html">
+<link rel="import" href="../strolch-wc-ws-observer/strolch-wc-ws-observer.html">
+
+<dom-module id="strolch-wc-i18n-editor">
+    <template>
+
+        <style is="custom-style" include="strolch-wc-styles">
+            :host {
+                display: block;
+                min-height: 100%;
+                padding: 10px 20px;
+            }
+
+            .actions {
+                padding: 10px;
+                display: flex;
+                justify-content: flex-end;
+            }
+
+            .cell-key {
+                flex-basis: 250px;
+                flex-grow: 0;
+            }
+
+            .header {
+                font-weight: bold;
+            }
+
+            paper-input {
+                width: 100%;
+                display: block;
+            }
+
+            paper-button {
+                background: white;
+            }
+
+        </style>
+
+        <div class="actions">
+            <paper-button on-tap="showRaw" raised>Raw</paper-button>
+            <paper-button on-tap="save" raised>Save</paper-button>
+            <paper-icon-button icon="icons:refresh" on-tap="reload"></paper-icon-button>
+        </div>
+
+        <div class="g-flex-table-row header">
+            <div class="g-flex-table-cell cell-key">Key</div>
+            <template is="dom-repeat" items="[[languages]]" as="language">
+                <div class="g-flex-table-cell">[[language]]</div>
+            </template>
+        </div>
+
+        <template is="dom-repeat" items="[[i18nRows]]" as="i18nRow">
+            <div class="g-flex-table-row">
+                <div class="g-flex-table-cell cell-key">[[i18nRow.key]]</div>
+                <template is="dom-repeat" items="[[i18nRow.i18nValues]]" as="i18nValue">
+                    <div class="g-flex-table-cell">
+                        <paper-input value="{{i18nValue}}" no-label-float></paper-input>
+                    </div>
+                </template>
+            </div>
+        </template>
+
+        <iron-ajax id="ajaxGetI18n"
+                   url="[[baseRestPath]]/i18n/data"
+                   content-type="application/json"
+                   handle-as="json"
+                   method="GET"
+                   on-response="onGetI18nDataResponse"
+                   on-error="onRequestError"></iron-ajax>
+
+        <iron-ajax id="ajax"
+                   url="[[baseRestPath]]/i18n/data"
+                   content-type="application/json"
+                   on-response="reload"
+                   on-error="onRequestError"></iron-ajax>
+
+    </template>
+
+    <script>
+        Polymer({
+            is: 'strolch-wc-i18n-editor',
+
+            behaviors: [
+                StrolchInspectorBehavior
+            ],
+
+            properties: {
+                languages: {
+                    type: Array
+                },
+                keys: {
+                    type: Array
+                },
+                i18nRows: {
+                    type: Array
+                }
+            },
+
+            observers: [],
+
+            reload: function () {
+                this.$.ajaxGetI18n.generateRequest();
+            },
+
+            onGetI18nDataResponse: function (e) {
+                var i18nData = e.detail.response.data;
+
+                var languages = Object.keys(i18nData);
+                var keys = Object.keys(i18nData[languages[0]]);
+                var i18nRows = [];
+                for (var i = 0; i < keys.length; i++) {
+                    var key = keys[i];
+                    var row = {
+                        key: key,
+                        i18nValues: []
+                    };
+                    i18nRows.push(row);
+
+                    for (var j = 0; j < languages.length; j++) {
+                        var lang = languages[j];
+
+                        var langValues = i18nData[lang];
+                        if (langValues == null) {
+                            row.i18nValues.push("");
+                            continue;
+                        }
+
+                        var langValue = langValues[key];
+                        if (langValue == null) {
+                            row.i18nValues.push("");
+                        } else {
+                            row.i18nValues.push(langValue);
+                        }
+                    }
+                }
+
+                this.languages = languages;
+                this.keys = keys;
+                this.i18nRows = i18nRows;
+            },
+
+            save: function (e) {
+
+                var data = {};
+                for (var langIndex = 0; langIndex < this.languages.length; langIndex++) {
+                    var lang = this.languages[langIndex];
+
+                    data[lang] = {};
+                    var langObj = data[lang];
+
+                    for (var i = 0; i < this.i18nRows.length; i++) {
+                        var row = this.i18nRows[i];
+                        var key = row.key;
+                        var value = row.i18nValues[langIndex];
+                        if (value != null && value.length > 0)
+                            langObj[key] = value;
+                    }
+                }
+
+                if (!confirm('Should the I18n Data really be deleted?')) {
+                    return;
+                }
+
+                this.$.ajax.url = this.baseRestPath + "/i18n/data";
+                this.$.ajax.method = "PUT";
+                this.$.ajax.body = data;
+                this.$.ajax.generateRequest();
+            },
+
+            showRaw: function (e) {
+                window.open(this.baseRestPath + "/i18n/data", '_blank');
+            }
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/strolch-wc-inspector-behavior.html b/strolch-wc-inspector-behavior.html
index cc71f82..49a3510 100644
--- a/strolch-wc-inspector-behavior.html
+++ b/strolch-wc-inspector-behavior.html
@@ -56,6 +56,9 @@
             });
         },
 
+        onRequestError: function (e) {
+            this.onAjaxError(e);
+        },
         onAjaxError: function (data) {
             var dlgText;
             if (data.detail.request.response) {
diff --git a/strolch-wc-inspector-menu.html b/strolch-wc-inspector-menu.html
index 6a4e76b..61cc938 100644
--- a/strolch-wc-inspector-menu.html
+++ b/strolch-wc-inspector-menu.html
@@ -75,6 +75,10 @@
                     <iron-icon icon="explore"></iron-icon>
                     </i> Inspector
                 </paper-item>
+                <paper-item id="i18n-editor" class="menu-item" on-tap="onMenuTap">
+                    <iron-icon icon="explore"></iron-icon>
+                    </i> I18n Editor
+                </paper-item>
             </paper-listbox>
         </paper-dropdown-menu>