From 55d0dc5061c8470dfd9bfca8d2f77a1e78c06729 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 9 Apr 2021 22:45:20 +0200
Subject: [PATCH] Provide index to array.

---
 .../Squidex/wwwroot/scripts/editor-log.html   |  66 ++++++++-
 .../src/Squidex/wwwroot/scripts/editor-sdk.js | 140 +++++++++++++++---
 .../shared/forms/array-item.component.html    |   1 +
 .../shared/forms/array-section.component.html |   1 +
 .../shared/forms/array-section.component.ts   |   3 +
 .../shared/forms/field-editor.component.html  |   1 +
 .../shared/forms/field-editor.component.ts    |   3 +
 .../shared/forms/iframe-editor.component.ts   |  14 ++
 8 files changed, 203 insertions(+), 26 deletions(-)
diff --git a/backend/src/Squidex/wwwroot/scripts/editor-log.html b/backend/src/Squidex/wwwroot/scripts/editor-log.html
index 16be55e0c..8e99c2cba 100644
--- a/backend/src/Squidex/wwwroot/scripts/editor-log.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-log.html
@@ -6,23 +6,81 @@
 
     <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
     <script src="editor-sdk.js"></script>
+
+    <style>
+        #textarea {
+            box-sizing: border-box;
+            min-width: 100%;
+            min-height: 200px;
+            margin-top: 10px;
+        }
+    </style>
 </head>
 
 <body>
-    <button id="button">New Value</button>
+    <div>
+        <button id="button">Generate New Value</button>
+    </div>
+
+    <textarea id="textarea"></textarea>
 
     <script>
         var numberGenerator = 1;
 
         var button = document.getElementById('button');
 
+        var textarea = document.getElementById('textarea');
+
         // When the field is instantiated it notifies the UI that it has been loaded.
         // 
         // Furthermore it sends the current size to the parent.
         var field = new SquidexFormField();
 
         function logState(message) {
-            console.log(`${message}.\n\Language: ${field.getLanguage()}\n\nValue\n<${JSON.stringify(field.getValue(), 2)}>\n\nForm Value\n<${JSON.stringify(field.getFormValue())}>\n\nDisabled: ${field.isDisabled()}`);
+            var text = '';
+
+            function append(value) {
+                text += value;
+            }
+
+            function appendLine(value) {
+                if (value !== undefined) {
+                    append(value);
+                }
+
+                text += '\n';
+            }
+
+            appendLine(message);
+            appendLine();
+
+            append('Language: ');
+            appendLine(field.getLanguage());
+            appendLine();
+
+            append('Disabled: ');
+            appendLine(field.isDisabled());
+            appendLine();
+
+            append('FullScreen: ');
+            appendLine(field.isFullscreen());
+            appendLine();
+
+            append('Index: ');
+            appendLine(field.getIndex());
+            appendLine();
+
+            appendLine('Value');
+            appendLine(`<${JSON.stringify(field.getValue(), 2)}>`);
+            appendLine();
+
+            appendLine('Form Value');
+            appendLine(`<${JSON.stringify(field.getFormValue(), 2)}>`);
+            appendLine();
+
+            console.log(text);
+
+            textarea.value = text;
         }
 
         logState('Setup');
@@ -49,6 +107,10 @@
             logState('Form value changed');
         });
 
+        field.onMoved(function (index) {
+            logState('Form value moved');
+        })
+
         field.onLanguageChanged(function () {
             logState('Field language changed');
         });
diff --git a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
index 95e2216a0..746926661 100644
--- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
+++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
@@ -27,6 +27,18 @@ function measureAndNotifyParent() {
     }, 50);
 }
 
+function isNumber(value) {
+    return typeof value === 'number';
+}
+
+function isString(value) {
+    return typeof value === 'string';
+}
+
+function isFunction(value) {
+    return typeof value === 'function';
+}
+
 function SquidexPlugin() {
     var initHandler;
     var initCalled = false;
@@ -87,8 +99,14 @@ function SquidexPlugin() {
 
         /**
          * Register an function that is called when the sidebar is initialized.
+         *
+         * @param {Function} callback: The callback to invoke.
          */
         onInit: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
             initHandler = callback;
 
             raiseInit();
@@ -96,10 +114,14 @@ function SquidexPlugin() {
 
         /**
          * Register an function that is called whenever the value of the content has changed.
-         * 
-         * The callback has one argument with the value of the content (any).
+         *
+         * @param {Function} callback: The callback to invoke. Argument 1: Content value (any).
          */
         onContentChanged: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
             contentHandler = callback;
 
             raiseContentChanged();
@@ -128,12 +150,14 @@ function SquidexFormField() {
     var disabled = false;
     var fullscreen = false;
     var fullscreenHandler = false;
+    var movedHandler;
     var valueHandler;
     var value;
     var languageHandler;
     var language;
     var formValueHandler;
     var formValue;
+    var index;
     var currentConfirm;
     var currentPickAssets;
     var context;
@@ -145,6 +169,12 @@ function SquidexFormField() {
         }
     }
 
+    function raiseFullscreen() {
+        if (fullscreenHandler) {
+            fullscreenHandler(fullscreen);
+        }
+    }
+
     function raiseValueChanged() {
         if (valueHandler) {
             valueHandler(value);
@@ -158,14 +188,14 @@ function SquidexFormField() {
     }
 
     function raiseLanguageChanged() {
-        if (languageHandler && language) {
+        if (languageHandler && isString(language)) {
             languageHandler(language);
         }
     }
 
-    function raiseFullscreen() {
-        if (fullscreenHandler) {
-            fullscreenHandler(fullscreen);
+    function raisedMoved() {
+        if (movedHandler && isNumber(index)) {
+            movedHandler(index);
         }
     }
 
@@ -181,11 +211,29 @@ function SquidexFormField() {
             var type = event.data.type;
 
             if (type === 'disabled') {
-                if (disabled !== event.data.isDisabled) {
-                    disabled = event.data.isDisabled;
+                var newDisabled = event.data.isDisabled;
+
+                if (disabled !== newDisabled) {
+                    disabled = newDisabled;
 
                     raiseDisabled();
                 }
+            } else if (type === 'moved') {
+                var newIndex = event.data.index;
+
+                if (index !== newIndex) {
+                    index = newIndex;
+
+                    raisedMoved();
+                }
+            } else if (type === 'languageChanged') {
+                var newLanguage = event.data.language;
+
+                if (language !== newLanguage) {
+                    language = newLanguage;
+
+                    raiseLanguageChanged();
+                }
             } else if (type === 'valueChanged') {
                 value = event.data.value;
 
@@ -198,10 +246,6 @@ function SquidexFormField() {
                 fullscreen = event.data.fullscreen;
 
                 raiseFullscreen();
-            } else if (type === 'languageChanged') {
-                language = event.data.language;
-
-                raiseLanguageChanged();
             } else if (type === 'init') {
                 context = event.data.context;
 
@@ -259,6 +303,13 @@ function SquidexFormField() {
             return language;
         },
 
+        /**
+         * Get the current index when the field is an array item. 
+         */
+        getIndex: function () {
+            return index;
+        },
+
         /**
          * Get the disabled state.
          */
@@ -345,7 +396,7 @@ function SquidexFormField() {
          * @param {function} callback The callback to invoke when the dialog is completed or closed.
          */
         confirm: function (title, text, callback) {
-            if (!callback || typeof callback !== 'function') {
+            if (!isFunction(callback)) {
                 return;
             }
 
@@ -367,7 +418,7 @@ function SquidexFormField() {
          * @param {function} callback The callback to invoke when the dialog is completed or closed.
          */
         pickAssets: function (callback) {
-            if (!callback || typeof callback !== 'function') {
+            if (!isFunction(callback)) {
                 return;
             }
 
@@ -385,8 +436,29 @@ function SquidexFormField() {
 
         /**
          * Register an function that is called when the field is initialized.
+         * 
+         * @param {Function} callback: The callback to invoke.
          */
         onInit: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
+            initHandler = callback;
+
+            raiseInit();
+        },
+
+        /**
+         * Register an function that is called when the field is moved.
+         *
+         * @param {Function} callback: The callback to invoke. Argument 1: New position (number).
+         */
+        onInit: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
             initHandler = callback;
 
             raiseInit();
@@ -394,10 +466,14 @@ function SquidexFormField() {
 
         /**
          * Register an function that is called whenever the field is disabled or enabled.
-         * 
-         * The callback has one argument with disabled state (disabled = true, enabled = false).
+         *
+         * @param {Function} callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false).
          */
         onDisabled: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
             disabledHandler = callback;
 
             raiseDisabled();
@@ -405,10 +481,14 @@ function SquidexFormField() {
 
         /**
          * Register an function that is called whenever the field language is changed.
-         * 
-         * The callback has one argument with the language of the field (string).
+         *
+         * @param {Function} callback: The callback to invoke. Argument 1: Language code (string).
          */
         onLanguageChanged: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
             languageHandler = callback;
 
             raiseLanguageChanged();
@@ -416,10 +496,14 @@ function SquidexFormField() {
 
         /**
          * Register an function that is called whenever the value of the field has changed.
-         * 
-         * The callback has one argument with the value of the field (any).
+         *
+         * @param {Function} callback: The callback to invoke. Argument 1: Field value (any).
          */
         onValueChanged: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
             valueHandler = callback;
 
             raiseValueChanged();
@@ -427,10 +511,14 @@ function SquidexFormField() {
 
         /**
          * Register an function that is called whenever the value of the content has changed.
-         * 
-         * The callback has one argument with the value of the content (any).
+         *
+         * @param {Function} callback: The callback to invoke. Argument 1: Content value (any).
          */
         onFormValueChanged: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
             formValueHandler = callback;
 
             raiseFormValueChanged();
@@ -438,10 +526,14 @@ function SquidexFormField() {
 
         /**
          * Register an function that is called whenever the fullscreen mode has changed.
-         * 
-         * The callback has one argument with fullscreen state (fullscreen on = true, fullscreen off = false).
+         *
+         * @param {Function} callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false).
          */
         onFullscreen: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
             fullscreenHandler = callback;
 
             raiseFullscreen();
diff --git a/frontend/app/features/content/shared/forms/array-item.component.html b/frontend/app/features/content/shared/forms/array-item.component.html
index d0a3c849f..afa9ada76 100644
--- a/frontend/app/features/content/shared/forms/array-item.component.html
+++ b/frontend/app/features/content/shared/forms/array-item.component.html
@@ -49,6 +49,7 @@
                 [form]="form"
                 [formContext]="formContext"
                 [formSection]="section"
+                [index]="index"
                 [language]="language"
                 [languages]="languages">
             </sqx-array-section>
diff --git a/frontend/app/features/content/shared/forms/array-section.component.html b/frontend/app/features/content/shared/forms/array-section.component.html
index 6f720555e..2723c4fde 100644
--- a/frontend/app/features/content/shared/forms/array-section.component.html
+++ b/frontend/app/features/content/shared/forms/array-section.component.html
@@ -13,6 +13,7 @@
             [form]="form"
             [formContext]="formContext"
             [formModel]="child"
+            [index]="index"
             [canUnset]="canUnset"
             [language]="language"
             [languages]="languages">
diff --git a/frontend/app/features/content/shared/forms/array-section.component.ts b/frontend/app/features/content/shared/forms/array-section.component.ts
index 069ec01eb..f1812d123 100644
--- a/frontend/app/features/content/shared/forms/array-section.component.ts
+++ b/frontend/app/features/content/shared/forms/array-section.component.ts
@@ -31,6 +31,9 @@ export class ArraySectionComponent {
     @Input()
     public languages: ReadonlyArray<AppLanguageDto>;
 
+    @Input()
+    public index: number;
+
     @Input()
     public canUnset: boolean;
 
diff --git a/frontend/app/features/content/shared/forms/field-editor.component.html b/frontend/app/features/content/shared/forms/field-editor.component.html
index e7413299e..12ed71699 100644
--- a/frontend/app/features/content/shared/forms/field-editor.component.html
+++ b/frontend/app/features/content/shared/forms/field-editor.component.html
@@ -13,6 +13,7 @@
                 [context]="formContext"
                 [formControl]="editorControl"
                 [formValue]="form.valueChanges | async"
+                [formIndex]="index"
                 [language]="language?.iso2Code">
             </sqx-iframe-editor>
 		</ng-container>
diff --git a/frontend/app/features/content/shared/forms/field-editor.component.ts b/frontend/app/features/content/shared/forms/field-editor.component.ts
index 409ddca95..0040dd587 100644
--- a/frontend/app/features/content/shared/forms/field-editor.component.ts
+++ b/frontend/app/features/content/shared/forms/field-editor.component.ts
@@ -32,6 +32,9 @@ export class FieldEditorComponent implements OnChanges {
     @Input()
     public languages: ReadonlyArray<AppLanguageDto>;
 
+    @Input()
+    public index: number;
+
     @Input()
     public canUnset: boolean;
 
diff --git a/frontend/app/features/content/shared/forms/iframe-editor.component.ts b/frontend/app/features/content/shared/forms/iframe-editor.component.ts
index 8a4420472..f113aad92 100644
--- a/frontend/app/features/content/shared/forms/iframe-editor.component.ts
+++ b/frontend/app/features/content/shared/forms/iframe-editor.component.ts
@@ -49,6 +49,9 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
     @Input()
     public formValue: any;
 
+    @Input()
+    public formIndex?: number | null;
+
     @Input()
     public language: string;
 
@@ -86,6 +89,10 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
             if (changes['language']) {
                 this.sendLanguage();
             }
+
+            if (changes['formIndex']) {
+                this.sendMoved();
+            }
         }
     }
 
@@ -109,6 +116,7 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
                         this.sendFormValue();
                         this.sendLanguage();
                         this.sendDisabled();
+                        this.sendMoved();
                         this.sendValue();
                     } else if (type === 'resize') {
                         const { height } = event.data;
@@ -222,6 +230,12 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
         }
     }
 
+    private sendMoved() {
+        if (Types.isNumber(this.formIndex)) {
+            this.sendMessage('moved', { index: this.formIndex });
+        }
+    }
+
     private toggleFullscreen(isFullscreen: boolean) {
         this.next({ isFullscreen });
 
