Fixes to editor sdk.

6 years ago · 8cf72582f8
4 changed files with 168 additions and 35 deletions
--- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
+++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
@ -3,7 +3,7 @@ function SquidexFormField() {
    var initHandler;
    var initCalled = false;
    var disabledHandler;
-    var disabled;
+    var disabled = false;
    var valueHandler;
    var value;
    var formValueHandler;
@ -42,9 +42,11 @@ function SquidexFormField() {
            var type = event.data.type;

            if (type === 'disabled') {
-                disabled = event.data.isDisabled;
+                if (disabled !== event.data.isDisabled) {
+                    disabled = event.data.isDisabled;

-                raiseDisabled();
+                    raiseDisabled();
+                }
            } else if (type === 'valueChanged') {
                value = event.data.value;

@ -113,9 +115,11 @@ function SquidexFormField() {
        /**
         * Notifies the control container that the value has been changed.
         */
-        valueChanged: function (value) {
+        valueChanged: function (newValue) {
+            value = newValue;
+
            if (window.parent) {
-                window.parent.postMessage({ type: 'valueChanged', value: value }, '*');
+                window.parent.postMessage({ type: 'valueChanged', value: newValue }, '*');
            }
        },

--- a/backend/src/Squidex/wwwroot/scripts/simple-log.html
+++ b/backend/src/Squidex/wwwroot/scripts/simple-log.html
@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+</head>
+
+<body>
+    <button id="button">New Value</button>
+
+    <script>
+        var numberGenerator = 1;
+
+        var button = document.getElementById('button');
+
+        var field = new SquidexFormField();
+
+        function logState(message) {
+            console.log(`${message}. Value: <${JSON.stringify(field.getValue(), 2)}>, Form Value: <${JSON.stringify(field.getFormValue())}>`);
+        }
+        
+        logState('Init');
+
+        if (button) {
+            button.addEventListener('click', function () {
+                numberGenerator++;
+
+                field.valueChanged(numberGenerator);
+
+                logState('Click');
+            });
+        }
+
+        // Handle the value change event and set the text to the editor.
+        field.onValueChanged(function (value) {
+            logState(`Value changed: <${JSON.stringify(value, 2)}>`);
+        });
+
+        // Disable the editor when it should be disabled.
+        field.onDisabled(function (disabled) {
+            logState(`Disabled: <${JSON.stringify(disabled, 2)}>`);
+        });
+    </script>
+</body>
+
+</html>
--- a/frontend/app/framework/angular/http/http-extensions.spec.ts
+++ b/frontend/app/framework/angular/http/http-extensions.spec.ts
@ -0,0 +1,76 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { parseError } from './http-extensions';
+
+import { ErrorDto } from './../../utils/error';
+
+describe('ErrorParsing', () => {
+    it('should return default when error is javascript exception', () => {
+        const response: any = new Error();
+        const result = parseError(response, 'Fallback');
+
+        expect(result).toEqual(new ErrorDto(500, 'Fallback', [], response));
+    });
+
+    it('should just forward error dto', () => {
+        const response: any = new ErrorDto(500, 'error', []);
+        const result = parseError(response, 'Fallback');
+
+        expect(result).toBe(response);
+    });
+
+    it('should return default 412 error', () => {
+        const response: any = { status: 412 };
+        const result = parseError(response, 'Fallback');
+
+        expect(result).toEqual(new ErrorDto(412, 'Failed to make the update. Another user has made a change. Please reload.', [], response));
+    });
+
+    it('should return default 429 error', () => {
+        const response: any = { status: 429 };
+        const result = parseError(response, 'Fallback');
+
+        expect(result).toEqual(new ErrorDto(429, 'You have exceeded the maximum limit of API calls.', [], response));
+    });
+
+    it('should return error from error object', () => {
+        const error = { message: 'My-Message', details: ['My-Detail'] };
+
+        const response: any = { status: 400, error };
+        const result = parseError(response, 'Fallback');
+
+        expect(result).toEqual(new ErrorDto(400, 'My-Message', ['My-Detail'], response));
+    });
+
+    it('should return error from error json', () => {
+        const error = { message: 'My-Message', details: ['My-Detail'] };
+
+        const response: any = { status: 400, error: JSON.stringify(error) };
+        const result = parseError(response, 'Fallback');
+
+        expect(result).toEqual(new ErrorDto(400, 'My-Message', ['My-Detail'], response));
+    });
+
+    it('should return default when object is invalid', () => {
+        const error = { text: 'invalid' };
+
+        const response: any = { status: 400, error };
+        const result = parseError(response, 'Fallback');
+
+        expect(result).toEqual(new ErrorDto(500, 'Fallback', [], response));
+    });
+
+    it('should return default when json is invalid', () => {
+        const error = '{{';
+
+        const response: any = { status: 400, error };
+        const result = parseError(response, 'Fallback');
+
+        expect(result).toEqual(new ErrorDto(500, 'Fallback', [], response));
+    });
+});
--- a/frontend/app/framework/angular/http/http-extensions.ts
+++ b/frontend/app/framework/angular/http/http-extensions.ts
@ -86,37 +86,41 @@ export module HTTP {

 export const pretifyError = (message: string) => <T>(source: Observable<T>) =>
    source.pipe(catchError((response: HttpErrorResponse) => {
-        if (Types.is(response, ErrorDto)) {
-            return throwError(response);
-        }
+        const error = parseError(response, message);
+
+        return throwError(error);
+    }));
+
+export function parseError(response: HttpErrorResponse, fallback: string) {
+    if (Types.is(response, ErrorDto)) {
+        return response;
+    }
+
+    const { error, status } = response;
+
+    if (status === 412) {
+        return new ErrorDto(412, 'Failed to make the update. Another user has made a change. Please reload.', [], response);
+    }
+
+    if (status === 429) {
+        return new ErrorDto(429, 'You have exceeded the maximum limit of API calls.', [], response);
+    }

-        let result: ErrorDto | null = null;
-
-        if (!Types.is(response.error, Error)) {
-            try {
-                let errorDto = Types.isObject(response.error) ? response.error : JSON.parse(response.error);
-
-                if (!errorDto) {
-                    errorDto = { message: 'Failed to make the request.', details: [] };
-                }
-
-                switch (response.status) {
-                    case 412:
-                        result = new ErrorDto(response.status, 'Failed to make the update. Another user has made a change. Please reload.', [], response);
-                        break;
-                    case 429:
-                        result = new ErrorDto(response.status, 'You have exceeded the maximum limit of API calls.', [], response);
-                        break;
-                    case 500:
-                        result = new ErrorDto(response.status, errorDto.message, errorDto.details, response);
-                        break;
-                }
-            } catch (e) {
-                result = new ErrorDto(500, 'Failed to make the request.', [], response);
-            }
+    let parsed: any;
+
+    if (Types.isObject(error)) {
+        parsed = error;
+    } else if (Types.isString(error)) {
+        try {
+            parsed = JSON.parse(error);
+        } catch (e) {
+            parsed = undefined;
        }
+    }

-        result = result || new ErrorDto(500, message);
+    if (parsed && Types.isString(parsed.message)) {
+        return new ErrorDto(status, parsed.message, parsed.details, response);
+    }

-        return throwError(result);
-    }));
+    return new ErrorDto(500, fallback, [], response);
+}