Work for #3390: implement cell question component

surveyjs · Sep 27, 2022 · 3781cf8 · 3781cf8
1 parent 6dff7da
commit 3781cf8
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/packages/survey-creator-angular/src/adorners/cell-question-dropdown.component.ts b/packages/survey-creator-angular/src/adorners/cell-question-dropdown.component.ts
@@ -1,22 +1,14 @@
-import { Component, Input } from "@angular/core";
+import { Component } from "@angular/core";
 import { ItemValue, QuestionDropdownModel } from "survey-core";
-import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
-import { QuestionAdornerViewModel } from "survey-creator-core";
+import { AngularComponentFactory } from "survey-angular-ui";
+import { CellQuestionComponent } from "./cell-question.component";
 
 @Component({
   selector: "svc-cell-dropdown-question",
   templateUrl: "./cell-question-dropdown.component.html",
   styles: [":host { display: none; }"]
 })
-export class CellQuestionDropdownComponent extends BaseAngular<QuestionDropdownModel> {
-  @Input() componentName!: string;
-  @Input() componentData!: any;
-  protected getModel(): QuestionDropdownModel {
-    return this.model;
-  }
-  public get model(): QuestionDropdownModel {
-    return this.componentData.model;
-  }
+export class CellQuestionDropdownComponent extends CellQuestionComponent<QuestionDropdownModel> {
   public getItemValueComponentName(item: ItemValue): string {
     return this.model.getItemValueWrapperComponentName(item) || "sv-ng-selectbase-item";
   }

diff --git a/packages/survey-creator-angular/src/adorners/cell-question.component.html b/packages/survey-creator-angular/src/adorners/cell-question.component.html
@@ -0,0 +1,7 @@
+<ng-template #template>
+  <div class="svc-question__adorner">
+    <div class="svc-question__content svc-question__content--selected-no-border">
+      <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
+    </div>
+  </div>
+</ng-template>
diff --git a/packages/survey-creator-angular/src/adorners/cell-question.component.ts b/packages/survey-creator-angular/src/adorners/cell-question.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from "@angular/core";
+import { Question } from "survey-core";
+import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
+
+@Component({
+  selector: "svc-cell-question",
+  templateUrl: "./cell-question.component.html",
+  styles: [":host { display: none; }"]
+})
+export class CellQuestionComponent<T extends Question> extends BaseAngular<T> {
+  @Input() componentName!: string;
+  @Input() componentData!: any;
+  protected getModel(): T {
+    return this.model;
+  }
+  public get model(): T {
+    return this.componentData.model;
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-cell-question", CellQuestionComponent);
diff --git a/packages/survey-creator-angular/src/angular-ui.module.ts b/packages/survey-creator-angular/src/angular-ui.module.ts
@@ -49,12 +49,13 @@ import { CreatorRowComponent } from "./row.component";
 import { NotifierComponent } from "./notifier.component";
 import { DesignerPagesComponent } from "./tabs/designer/designer-pages.component";
 import { DesignerSurveyComponent } from "./tabs/designer/designer-survey.component";
+import { CellQuestionComponent } from "./adorners/cell-question.component";
 
 @NgModule({
   declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
     AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
     QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
-    ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, NotifierComponent, DesignerPagesComponent, DesignerSurveyComponent],
+    ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, NotifierComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent],
   imports: [
     CommonModule, FormsModule, SurveyAngularModule
   ],