Work for #3390: implement preview tab

packages/survey-creator-angular/src/angular-ui.module.ts

@@ -22,10 +22,14 @@ import { LinkValueQuestionComponent } from "./questions/question-link-value.comp
 import { EmbeddedSurveyQuestionComponent } from "./questions/question-embedded-survey.component";
 import { TranslationTabComponent } from "./tabs/translation/translation.component";
 import { TranslationSkeletonComponent } from "./tabs/translation/translation-line-skeleton.component";
-import { SimulatorComponent } from "./components/simulator.component";
+import { SimulatorComponent } from "./tabs/preview/simulator.component";
+import { TestAgainActionComponent } from "./tabs/preview/test-again.component";
+import { SurveyResultsComponent } from "./tabs/preview/survey-results.component";
+import { SurveyResultsTableRowComponent } from "./tabs/preview/survey-results-row.component";
+import { TestTabComponent } from "./tabs/preview/test.component";
 
 @NgModule({
-  declarations: [CreatorComponent, DesignerTabComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent],
+  declarations: [CreatorComponent, DesignerTabComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent],
   imports: [
     CommonModule, FormsModule, SurveyAngularModule
   ],

packages/survey-creator-angular/src/creator-model.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectorRef, Component, KeyValueDiffers, ViewContainerRef } from "@angular/core";
+import { BaseAngular } from "survey-angular-ui";
+import { Base } from "survey-core";
+
+@Component({
+  template: ""
+})
+export abstract class CreatorModelComponent<T extends Base> extends BaseAngular<T> {
+  public model!: T;
+  protected abstract createModel(): T;
+  protected abstract getPropertiesToTrack(): string[];
+
+  private hash: { [index: string]: any } = {};
+
+  private createHash() {
+    this.getPropertiesToTrack().forEach((prop: string) => {
+      this.hash[prop] = (<any>this)[prop];
+    });
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this.createHash();
+  }
+
+  getModel() {
+    if (this.needUpdateModel())
+      this.model = this.createModel();
+    return this.model;
+  }
+  needUpdateModel(): boolean {
+    if (!this.model) return true;
+    if (Object.keys(this.hash).some(key => this.hash[key] != (<any>this)[key])) {
+      return true;
+    }
+    return false;
+  }
+}

packages/survey-creator-angular/src/tabs/preview/simulator.component.html

@@ -0,0 +1,15 @@
+<ng-template #template>
+  <div [class]="'svd-simulator-main' + model.simulatorMainCssClass + (model.device === 'desktop' ? ' svd-simulator-main--desktop' : '')" (keydown)="model.tryToZoom($event, $event)" (mouseover)="activateZoom()" (mouseout)="deactivateZoom()">
+    <div *ngIf="model.hasFrame" class="svd-simulator-wrapper" id="svd-simulator-wrapper" [style.width]="simulatorFrame.frameWidth + 'px'" [style.height]="simulatorFrame.frameHeight + 'px'">
+      <div class="svd-simulator-frame" [style.width]="simulatorFrame.landscapedFrameWidth + 'px'" [style.height]="simulatorFrame.landscapedFrameHeight + 'px'" [class]="simulatorFrame.cssClass"></div>
+      <div class="svd-simulator" [style.width]="simulatorFrame.deviceWidth + 'px'" [style.height]="simulatorFrame.deviceHeight + 'px'" [style.transform]="'scale(' + simulatorFrame.scale + ') translate(-50%, -50%)'">
+        <div class="svd-simulator-content">
+          <ng-template [component]="{ name: 'survey-widget', data: { model: model.survey } }"></ng-template>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="!model.hasFrame" class="svd-simulator-content">
+      <ng-template [component]="{ name: 'survey-widget', data: { model: model.survey } }"></ng-template>
+    </div>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/tabs/preview/survey-results-row.component.html

@@ -0,0 +1,19 @@
+<ng-template #template>
+  <tr (click)="model.toggle()" [key2click]>
+    <td class="svd-dark-border-color"
+        [style.paddingLeft]="model.textMargin ">
+        <span *ngIf="model.isNode" class="svd-test-results__marker"
+              [class.svd-test-results__marker--expanded]="!model.collapsed"
+                         [style.left]="model.markerMargin">
+            <svg [iconName]="'icon-expand_16x16'" [size]="16" sv-ng-svg-icon></svg>
+        </span>
+        <span >{{model.title}}</span></td>
+    <td [class.svd-test-results__node-value]="model.isNode" [class.svd-dark-border-color]="!model.isNode">
+      {{model.getString(model.displayValue)}}
+    </td>
+  <ng-container *ngIf="model.isNode && !model.collapsed">
+    <ng-container *ngFor="let row of model.data">
+      <survey-results-table-row [model]="row"></survey-results-table-row>
+    </ng-container>
+  </ng-container>
+</ng-template>

packages/survey-creator-angular/src/tabs/preview/survey-results-row.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from "@angular/core";
+import { BaseAngular } from "survey-angular-ui";
+import { Action } from "survey-core";
+import { SurveyResultsItemModel } from "survey-creator-core";
+
+@Component({
+  selector: "survey-results-table-row",
+  templateUrl: "./survey-results-row.component.html",
+  styles: [":host { display: none; }"]
+})
+export class SurveyResultsTableRowComponent extends BaseAngular<SurveyResultsItemModel> {
+  @Input() model!: SurveyResultsItemModel;
+  protected getModel(): SurveyResultsItemModel {
+    return this.model;
+  }
+}

packages/survey-creator-angular/src/tabs/preview/survey-results.component.html

@@ -0,0 +1,29 @@
+<ng-template #template>
+<div class="svd-test-results">
+  <div class="svd-test-results__header">
+      <div class="svd-test-results__header-text">{{model.surveyResultsText}}</div>
+      <div class="svd-test-results__header-types">
+        <svc-action-button [text]="model.getLocString('ed.surveyResultsTable')" [click]="model.selectTableClick" [disabled]="false" [selected]="model.isTableSelected"></svc-action-button>
+        <svc-action-button [text]="model.getLocString('ed.surveyResultsJson')" [click]="model.selectJsonClick" [disabled]="false" [selected]="model.isJsonSelected"></svc-action-button>
+      </div>
+  </div>
+  <div class="svd-test-results__text svd-light-bg-color" [visible]="model.resultViewType === 'text'">
+      <div>{{model.resultText}}</div>
+  </div>
+  <div class="svd-test-results__table svd-light-bg-color" [visible]="model.resultViewType === 'table'">
+      <table>
+          <thead>
+              <tr class="svd-light-background-color">
+                  <th class="svd-dark-border-color">{{model.resultsTitle}}</th>
+                  <th class="svd-dark-border-color">{{model.resultsDisplayValue}}</th>
+              </tr>
+          </thead>
+          <tbody>
+            <ng-container *ngFor="let row of model.resultData">
+              <survey-results-table-row [model]="row"></survey-results-table-row>
+            </ng-container>
+          </tbody>
+      </table>
+  </div>
+</div>
+</ng-template>

packages/survey-creator-angular/src/tabs/preview/survey-results.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from "@angular/core";
+import { CreatorModelComponent } from "../../creator-model.component";
+import { SurveyModel } from "survey-core";
+import { SurveyResultsModel } from "survey-creator-core";
+
+@Component({
+  selector: "survey-results",
+  templateUrl: "./survey-results.component.html",
+  styles: [":host { display: none; }"]
+})
+export class SurveyResultsComponent extends CreatorModelComponent<SurveyResultsModel> {
+  @Input() survey!: SurveyModel;
+  protected createModel(): any {
+    if (!!this.survey) {
+      return new SurveyResultsModel(this.survey);
+    }
+    return null;
+  }
+  protected getPropertiesToTrack(): string[] {
+    return ["survey"];
+  }
+}

packages/survey-creator-angular/src/tabs/preview/test-again.component.html

@@ -0,0 +1,7 @@
+<ng-template #template>
+  <div role="button" class="svc-preview__test-again svc-btn" (click)="model.action()" [key2click]>
+    <span class="svc-text svc-text--normal svc-text--bold">
+      {{model.title}}
+    </span>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/tabs/preview/test-again.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from "@angular/core";
+import { BaseAngular } from "survey-angular-ui";
+import { Action } from "survey-core";
+
+@Component({
+  selector: "survey-test-again",
+  templateUrl: "./test-again.component.html",
+  styles: [":host { display: none; }"]
+})
+export class TestAgainActionComponent extends BaseAngular<Action> {
+  @Input() model!: Action;
+  protected getModel(): Action {
+    return this.model;
+  }
+}

packages/survey-creator-angular/src/tabs/preview/test.component.html

@@ -0,0 +1,14 @@
+<ng-template #template>
+  <div class="svc-creator-tab__content svc-test-tab__content" [class.svc-creator-tab__content--with-toolbar]="model.isPageToolbarVisible">
+    <div class="svc-plugin-tab__content">
+      <survey-simulator [model]="model.simulator"></survey-simulator>
+      <ng-container *ngIf="!model.isRunning">
+        <survey-test-again [model]="model.testAgainAction"></survey-test-again>
+        <survey-results [survey]="model.survey"></survey-results>
+      </ng-container>
+    </div>
+    <div *ngIf="model.isPageToolbarVisible" class="svc-plugin-tab__content-actions svc-test-tab__content-actions">
+      <sv-action-bar [model]="model.pages"></sv-action-bar>
+    </div>
+  </div>
+</ng-template>

packages/survey-creator-angular/src/tabs/preview/test.component.ts

@@ -0,0 +1,16 @@
+import { TestSurveyTabViewModel } from "survey-creator-core";
+import { Component, Input } from "@angular/core";
+import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
+
+@Component({
+  selector: "svc-tab-test",
+  templateUrl: "./test.component.html",
+  styles: [":host { display: none; }"]
+})
+export class TestTabComponent extends BaseAngular<TestSurveyTabViewModel> {
+  @Input() model!: TestSurveyTabViewModel;
+  protected getModel(): TestSurveyTabViewModel {
+    return this.model;
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-tab-test", TestTabComponent);