Work for surveyjs/survey-creator#3390: implement ranking item wrapper

surveyjs · Oct 3, 2022 · 903f32f · 903f32f
1 parent ca20978
commit 903f32f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/packages/survey-angular-ui/src/questions/ranking-item.component.ts b/packages/survey-angular-ui/src/questions/ranking-item.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input } from "@angular/core";
 import { BaseAngular } from "../base-angular";
 import { ItemValue, QuestionRankingModel } from "survey-core";
+import { AngularComponentFactory } from "../component-factory";
 
 @Component({
   selector: "sv-ng-ranking-item",
@@ -14,3 +15,4 @@ export class RankingItemComponent extends BaseAngular<ItemValue> {
     return this.model;
   }
 }
+AngularComponentFactory.Instance.registerComponent("sv-ng-ranking-item", RankingItemComponent);
diff --git a/packages/survey-angular-ui/src/questions/ranking.component.html b/packages/survey-angular-ui/src/questions/ranking.component.html
@@ -1,8 +1,5 @@
 <div [class]="model.rootClass" #contentElement>
-  <sv-ng-ranking-item
-    *ngFor="let item of model.rankingChoices; index as index; trackBy: trackItemBy"
-    [index]="index"
-    [question]="model"
-    [model]="item"
-  ></sv-ng-ranking-item>
+  <ng-container *ngFor="let item of model.rankingChoices; index as index; trackBy: trackItemBy">
+    <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }"></ng-template>
+  </ng-container>
 </div>
diff --git a/packages/survey-angular-ui/src/questions/ranking.component.ts b/packages/survey-angular-ui/src/questions/ranking.component.ts
@@ -1,16 +1,24 @@
 import { Component } from "@angular/core";
-import { QuestionAngular } from "../question";
 import { ItemValue, QuestionRankingModel } from "survey-core";
 import { AngularComponentFactory } from "../component-factory";
+import { SelectBaseComponent } from "./selectbase.component";
 
 @Component({
   selector: "sv-ng-ranking-question",
   templateUrl: "./ranking.component.html",
 })
-export class RankingQuestionComponent extends QuestionAngular<QuestionRankingModel> {
+export class RankingQuestionComponent extends SelectBaseComponent<QuestionRankingModel> {
+  public override inputType: string = "";
   trackItemBy = (index: number, item: ItemValue): string => {
     return item.value + "-" + index + "-item";
   }
+  public override getDefaultComponentName(): string {
+    return "sv-ng-ranking-item";
+  }
+  public override getItemValueComponentData(item: ItemValue, index?: number): any {
+    const res = super.getItemValueComponentData(item);
+    res.componentData.index = index;
+    return res;
+  }
 }
-
 AngularComponentFactory.Instance.registerComponent("ranking-question", RankingQuestionComponent);
diff --git a/packages/survey-angular-ui/src/questions/selectbase.component.ts b/packages/survey-angular-ui/src/questions/selectbase.component.ts
@@ -13,12 +13,17 @@ export class SelectBaseComponent<T extends QuestionSelectBase> extends QuestionA
 
   public inputType: string = "checkbox";
   public showLegend: boolean = true;
+
+  public getDefaultComponentName(): string {
+    return "sv-ng-selectbase-item";
+  }
+
   public getItemValueComponentName(item: ItemValue): string {
-    return this.model.getItemValueWrapperComponentName(item) || "sv-ng-selectbase-item";
+    return this.model.getItemValueWrapperComponentName(item) || this.getDefaultComponentName();
   }
   public getItemValueComponentData(item: ItemValue): any {
     return {
-      componentName: "sv-ng-selectbase-item",
+      componentName: this.getDefaultComponentName(),
       componentData: {
         question: this.model,
         model: item,