work for the surveyjs/private-tasks#240

surveyjs · Jul 10, 2023 · 30f6213 · 30f6213
1 parent 21c07a5
commit 30f6213
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss
@@ -105,6 +105,11 @@
   opacity: 0.25;
 }
 
+.sv-ranking-item--disabled .sv-ranking-item__text {
+  color: $foreground;
+  opacity: 0.25;
+}
+
 .sv-ranking-item__ghost.sv-ranking-item__ghost {
   display: none;
   background-color: $background-dim;

diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -589,6 +589,7 @@ export var defaultV2Css = {
     itemIndex: "sv-ranking-item__index sd-ranking-item__index",
     itemIndexEmptyMode: "sv-ranking-item__index--empty sd-ranking-item__index--empty",
     // itemText: "sv-ranking-item__text",
+    itemDisabled: "sv-ranking-item--disabled",
     controlLabel: "sv-ranking-item__text",
     itemGhostNode: "sv-ranking-item__ghost",
     itemIconContainer: "sv-ranking-item__icon-container",

diff --git a/src/question_ranking.ts b/src/question_ranking.ts
@@ -285,7 +285,7 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
 
     if (!this.isDragStartNodeValid(target)) return;
 
-    if (this.allowStartDrag) {
+    if (this.allowStartDrag && this.canStartDragDueMaxSelectedChoices(target)) {
       this.dragDropRankingChoices.startDrag(event, choice, this, node);
     }
   };
@@ -302,6 +302,23 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     return !this.isReadOnly && !this.isDesignMode;
   }
 
+  private canStartDragDueMaxSelectedChoices(target: HTMLElement):boolean {
+    if (!this.selectToRankEnabled) return true;
+
+    let fromContainer: HTMLElement = target.closest("[data-ranking='from-container']");
+    if (fromContainer) {
+      return this.checkMaxSelectedChoicesUnreached();
+    }
+    return true;
+  }
+
+  public checkMaxSelectedChoicesUnreached() {
+    if (this.maxSelectedChoices < 1) return true;
+    var val = this.value;
+    var len = !Array.isArray(val) ? 0 : val.length;
+    return len < this.maxSelectedChoices;
+  }
+
   //cross framework initialization
   public afterRenderQuestionElement(el: HTMLElement): void {
     this.domNode = el;

diff --git a/tests/question_ranking_tests.ts b/tests/question_ranking_tests.ts
@@ -355,4 +355,16 @@ QUnit.test("selectToRankEnabled : defaultValue", function (assert) {
   assert.equal(questionWithDefaultValueModel.unRankingChoices.length, 1, "unRankingChoices count");
   assert.equal(questionWithDefaultValueModel.rankingChoices.length, 2, "rankingChoices count");
 });
+
+QUnit.test("selectToRankEnabled : checkMaxSelectedChoicesUnreached", function (assert) {
+  const selectToRankEnabled = true;
+  const withDefaultValue = false;
+  const questionModel = createRankingQuestionModel(selectToRankEnabled, withDefaultValue);
+
+  assert.equal(questionModel.checkMaxSelectedChoicesUnreached(), true, "without MaxSelectedChoices");
+
+  questionModel.maxSelectedChoices = 2;
+  questionModel.value = ["11", "22"];
+  assert.equal(questionModel.checkMaxSelectedChoicesUnreached(), false, "MaxSelectedChoices limit reached");
+});
 // EO selectToRankEnabled