From 57a7988b9fe66a28e21fce3dc79e20d861304ca3 Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Thu, 1 Jun 2023 17:58:37 +0400 Subject: [PATCH 1/3] Implement readOnly property for survey --- src/survey.ts | 18 +++++++++++++++--- tests/surveytests.ts | 28 ++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/src/survey.ts b/src/survey.ts index 0eafa78be7..2d773978d4 100644 --- a/src/survey.ts +++ b/src/survey.ts @@ -2489,6 +2489,17 @@ export class SurveyModel extends SurveyElementCore if (value != "edit" && value != "display") return; this.setPropertyValue("mode", value); } + + public get readOnly(): boolean { + const mode = this.mode; + const readOnly = this.getPropertyValue("readOnly"); + return mode === "display" || readOnly; + } + + public set readOnly(val: boolean) { + this.setPropertyValue("readOnly", val); + } + private onModeChanged() { for (var i = 0; i < this.pages.length; i++) { var page = this.pages[i]; @@ -3229,7 +3240,7 @@ export class SurveyModel extends SurveyElementCore * @see mode */ public get isEditMode(): boolean { - return this.mode == "edit"; + return !this.readOnly; } /** * Returns `true` if the survey is in display mode or in preview mode. @@ -3237,7 +3248,7 @@ export class SurveyModel extends SurveyElementCore * @see showPreviewBeforeComplete */ public get isDisplayMode(): boolean { - return this.mode == "display" || this.state == "preview"; + return this.readOnly || this.state == "preview"; } public get isUpdateValueTextOnTyping(): boolean { return this.textUpdateMode == "onTyping"; @@ -4352,7 +4363,7 @@ export class SurveyModel extends SurveyElementCore return new CssClassBuilder() .append(this.css.root) .append(this.css.rootMobile, this.isMobile) - .append(this.css.rootReadOnly, this.mode === "display") + .append(this.css.rootReadOnly, this.readOnly) .toString(); } private resizeObserver: ResizeObserver; @@ -7107,6 +7118,7 @@ Serializer.addClass("survey", [ default: "left", choices: ["left", "right"], }, + { name: "readOnly:boolean", default: false }, { name: "mode", default: "edit", choices: ["edit", "display"] }, { name: "storeOthersAsComment:boolean", default: true }, { name: "maxTextLength:number", default: 0, minValue: 0 }, diff --git a/tests/surveytests.ts b/tests/surveytests.ts index 0b7e26231c..25fb26f78a 100644 --- a/tests/surveytests.ts +++ b/tests/surveytests.ts @@ -17027,3 +17027,31 @@ QUnit.test("Do not run onComplete twice if complete trigger and completeLastPage survey.completeLastPage(); assert.equal(counter, 1, "onComplete called one time"); }); + +QUnit.test("Check readOnly flag", function (assert) { + let survey = new SurveyModel({ + readOnly: true, + "elements": [ + { + "type": "text", + "name": "question1" + }, + ], + }); + assert.equal(survey.mode, "edit"); + assert.ok(survey.readOnly); + survey.readOnly = false; + assert.notOk(survey.readOnly); + survey = new SurveyModel({ + mode: "display", + "elements": [ + { + "type": "text", + "name": "question1" + }, + ], + }); + assert.ok(survey.readOnly); + survey.mode = "edit"; + assert.notOk(survey.readOnly); +}); From 5783c0ed45599a24def4f0febb0fe1cee6b53ebb Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Mon, 13 Jan 2025 15:42:15 +0400 Subject: [PATCH 2/3] Fix tests --- packages/survey-core/src/survey.ts | 24 ++++++++++------------- packages/survey-core/tests/surveytests.ts | 2 +- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts index dc8e7922ba..47899d7364 100644 --- a/packages/survey-core/src/survey.ts +++ b/packages/survey-core/src/survey.ts @@ -978,8 +978,8 @@ export class SurveyModel extends SurveyElementCore this.registerPropertyChangedHandlers(["firstPageIsStartPage"], () => { this.onFirstPageIsStartedChanged(); }); - this.registerPropertyChangedHandlers(["mode"], () => { - this.onModeChanged(); + this.registerPropertyChangedHandlers(["readOnly"], () => { + this.onReadOnlyChanged(); }); this.registerPropertyChangedHandlers(["progressBarType"], () => { this.updateProgressText(); @@ -991,7 +991,7 @@ export class SurveyModel extends SurveyElementCore } ); this.registerPropertyChangedHandlers( - ["isLoading", "isCompleted", "isCompletedBefore", "mode", "isStartedState", "currentPage", "isShowingPreview"], + ["isLoading", "isCompleted", "isCompletedBefore", "readOnly", "isStartedState", "currentPage", "isShowingPreview"], () => { this.updateState(); }); this.registerPropertyChangedHandlers(["state", "currentPage", "showPreviewBeforeComplete"], () => { this.onStateAndCurrentPageChanged(); }); @@ -3110,26 +3110,22 @@ export class SurveyModel extends SurveyElementCore * [View Demo](https://surveyjs.io/form-library/examples/survey-displaymode/ (linkStyle)) */ public get mode(): string { - return this.getPropertyValue("mode"); + return this.readOnly ? "display" : "edit"; } public set mode(value: string) { value = value.toLowerCase(); if (value == this.mode) return; if (value != "edit" && value != "display") return; - this.setPropertyValue("mode", value); + this.readOnly = value == "display"; } - public get readOnly(): boolean { - const mode = this.mode; - const readOnly = this.getPropertyValue("readOnly"); - return mode === "display" || readOnly; + return this.getPropertyValue("readOnly"); } - public set readOnly(val: boolean) { this.setPropertyValue("readOnly", val); } - private onModeChanged() { + private onReadOnlyChanged() { for (var i = 0; i < this.pages.length; i++) { var page = this.pages[i]; page.setPropertyValue("isReadOnly", page.isReadOnly); @@ -3959,7 +3955,7 @@ export class SurveyModel extends SurveyElementCore return !this.readOnly; } public get isDisplayMode(): boolean { // - return this.mode == "display" && !this.isDesignMode || this.state == "preview"; + return this.readOnly && !this.isDesignMode || this.state == "preview"; } public get isUpdateValueTextOnTyping(): boolean { return this.textUpdateMode == "onTyping"; @@ -5202,7 +5198,7 @@ export class SurveyModel extends SurveyElementCore .append(this.css.rootProgress + "--" + this.progressBarType) .append(this.css.rootMobile, this.isMobile) .append(this.css.rootAnimationDisabled, !settings.animationEnabled) - .append(this.css.rootReadOnly, this.mode === "display" && !this.isDesignMode) + .append(this.css.rootReadOnly, this.readOnly && !this.isDesignMode) .append(this.css.rootCompact, this.isCompact) .append(this.css.rootFitToContainer, this.fitToContainer) .toString(); @@ -8496,7 +8492,7 @@ Serializer.addClass("survey", [ visibleIf: (survey: any) => { return !!survey && survey.showTOC; } }, { name: "readOnly:boolean", default: false }, - { name: "mode", default: "edit", choices: ["edit", "display"] }, + { name: "mode", default: "edit", choices: ["edit", "display"], visible: false }, { name: "storeOthersAsComment:boolean", default: true }, { name: "maxTextLength:number", default: 0, minValue: 0 }, { name: "maxCommentLength:number", default: 0, minValue: 0, alternativeName: "maxOthersLength" }, diff --git a/packages/survey-core/tests/surveytests.ts b/packages/survey-core/tests/surveytests.ts index 3218050f97..d33cf58de3 100644 --- a/packages/survey-core/tests/surveytests.ts +++ b/packages/survey-core/tests/surveytests.ts @@ -18755,7 +18755,7 @@ QUnit.test("Check readOnly flag", function (assert) { }, ], }); - assert.equal(survey.mode, "edit"); + assert.equal(survey.mode, "display"); assert.ok(survey.readOnly); survey.readOnly = false; assert.notOk(survey.readOnly); From 0981fc92dc08b00699829e5b50742ac1e1ec311b Mon Sep 17 00:00:00 2001 From: RomanTsukanov Date: Mon, 13 Jan 2025 14:41:23 +0400 Subject: [PATCH 3/3] Update doccomments --- packages/survey-core/src/survey.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts index 47899d7364..2fc361039b 100644 --- a/packages/survey-core/src/survey.ts +++ b/packages/survey-core/src/survey.ts @@ -3100,14 +3100,8 @@ export class SurveyModel extends SurveyElementCore this.setPropertyValue("questionDescriptionLocation", value); } /** - * Specifies whether users can take the survey or only view it. - * - * Possible values: - * - * - `"edit"` (default) - Allows users to take the survey. - * - `"display"` - Makes the survey read-only. - * - * [View Demo](https://surveyjs.io/form-library/examples/survey-displaymode/ (linkStyle)) + * Obsolete. Use the [`readOnly`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#readOnly) property. + * @deprecated */ public get mode(): string { return this.readOnly ? "display" : "edit"; @@ -3118,6 +3112,13 @@ export class SurveyModel extends SurveyElementCore if (value != "edit" && value != "display") return; this.readOnly = value == "display"; } + /** + * Enables the read-only mode. If you set this property to `true`, users cannot take the survey. + * + * Default value: `false` + * + * [View Demo](https://surveyjs.io/form-library/examples/prevent-form-editing-with-read-only-mode/ (linkStyle)) + */ public get readOnly(): boolean { return this.getPropertyValue("readOnly"); }