Merge pull request #9145 from surveyjs/features/9144-pages-container

Introduce page container for preview mode #9144
surveyjs · Dec 17, 2024 · 1accd5c · 1accd5c
2 parents 227e522 + 0deabb7
commit 1accd5c
Show file tree

Hide file tree

Showing 21 changed files with 613 additions and 496 deletions.
diff --git a/packages/survey-core/src/base-interfaces.ts b/packages/survey-core/src/base-interfaces.ts
@@ -108,6 +108,7 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
   isDisplayMode: boolean;
   isDesignMode: boolean;
   areInvisibleElementsShowing: boolean;
+  currentSingleQuestion: IQuestion;
   areEmptyElementsHidden: boolean;
   isLoadingFromJson: boolean;
   isUpdateValueTextOnTyping: boolean;

diff --git a/packages/survey-core/src/page.ts b/packages/survey-core/src/page.ts
@@ -5,10 +5,10 @@ import {
   IPanel,
   IElement,
   ISurveyElement,
-  IQuestion,
+  ISurveyImpl,
   ISurvey,
 } from "./base-interfaces";
-import { PanelModelBase, QuestionRowModel } from "./panel";
+import { PanelModelBase, PanelModel } from "./panel";
 import { LocalizableString } from "./localizablestring";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { DragDropPageHelperV1 } from "./drag-drop-page-helper-v1";
@@ -18,9 +18,10 @@ import { DragDropPageHelperV1 } from "./drag-drop-page-helper-v1";
  *
  * [View Demo](https://surveyjs.io/form-library/examples/nps-question/ (linkStyle))
  */
-export class PageModel extends PanelModelBase implements IPage {
+export class PageModel extends PanelModel implements IPage {
   private hasShownValue: boolean = false;
   private dragDropPageHelper: DragDropPageHelperV1;
+  public isPageContainer: boolean;
 
   constructor(name: string = "") {
     super(name);
@@ -34,8 +35,42 @@ export class PageModel extends PanelModelBase implements IPage {
     return this.name;
   }
   public get isPage(): boolean {
+    return !this.isPanel;
+  }
+  public get isPanel(): boolean {
+    return !!this.parent;
+  }
+  public get showPanelAsPage(): boolean {
     return true;
   }
+  public get hasEditButton(): boolean {
+    return this.isPanel && this.survey && this.survey.state === "preview"
+     && !!this.parent && !this.parent.isPanel;
+  }
+  protected getElementsForRows(): Array<IElement> {
+    const q = this.survey?.currentSingleQuestion;
+    if(!!q) {
+      if((<any>q).page === this) return [q];
+      return [];
+    }
+    return super.getElementsForRows();
+  }
+  protected disposeElements(): void {
+    if(!this.isPageContainer) {
+      super.disposeElements();
+    }
+  }
+  protected onRemoveElement(element: IElement): void {
+    if(this.isPageContainer) {
+      element.parent = null;
+      this.unregisterElementPropertiesChanged(element);
+    } else {
+      super.onRemoveElement(element);
+    }
+  }
+  public getTemplate(): string {
+    return this.isPanel ? "panel" : super.getTemplate();
+  }
   public get no(): string {
     if(!this.canShowPageNumber() || !this.survey) return "";
     let no = this.isStartPage ? "" : this.num + ". ";
@@ -132,6 +167,7 @@ export class PageModel extends PanelModelBase implements IPage {
   }
   public get isStarted(): boolean { return this.isStartPage; }
   protected calcCssClasses(css: any): any {
+    if(this.isPanel) return super.calcCssClasses(css);
     const classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "", rowEnter: "", rowLeave: "", rowDelayedEnter: "", rowReplace: "" };
     this.copyCssClasses(classes.page, css.page);
     this.copyCssClasses(classes.error, css.error);
@@ -170,21 +206,23 @@ export class PageModel extends PanelModelBase implements IPage {
     }
     return classes;
   }
-  public get cssTitle(): string {
+  protected getCssPanelTitle(): string {
+    if(this.isPanel) return super.getCssPanelTitle();
     if(!this.cssClasses.page) return "";
     return new CssClassBuilder()
       .append(this.cssClasses.page.title)
       .toString();
   }
   public get cssRoot(): string {
-    if(!this.cssClasses.page || !this.survey) return "";
+    if(this.isPanel || !this.cssClasses.page || !this.survey) return "";
     return new CssClassBuilder()
       .append(this.cssClasses.page.root)
       .append(this.cssClasses.page.emptyHeaderRoot, !(<any>this.survey).renderedHasHeader &&
         !((<any>this.survey).isShowProgressBarOnTop && !(<any>this.survey).isStaring))
       .toString();
   }
   protected getCssError(cssClasses: any): string {
+    if(this.isPanel) return super.getCssError(cssClasses);
     return new CssClassBuilder()
       .append(super.getCssError(cssClasses))
       .append(cssClasses.page.errorsContainer).toString();
@@ -365,9 +403,25 @@ Serializer.addClass(
     },
     { name: "title:text", serializationProperty: "locTitle" },
     { name: "description:text", serializationProperty: "locDescription" },
+    { name: "state", visible: false },
+    { name: "isRequired", visible: false },
+    { name: "startWithNewLine", visible: false },
+    { name: "width", visible: false },
+    { name: "minWidth", visible: false },
+    { name: "maxWidth", visible: false },
+    { name: "colSpan", visible: false, isSerializable: false },
+    { name: "effectiveColSpan:number", visible: false, isSerializable: false },
+    { name: "innerIndent", visible: false },
+    { name: "indent", visible: false },
+    { name: "page", visible: false, isSerializable: false },
+    { name: "showNumber", visible: false },
+    { name: "showQuestionNumbers", visible: false },
+    { name: "questionStartIndex", visible: false },
+    { name: "allowAdaptiveActions", visible: false },
+    { name: "requiredErrorText:text", serializationProperty: "locRequiredErrorText", visible: false },
   ],
   function () {
     return new PageModel();
   },
-  "panelbase"
+  "panel"
 );