From 5a12a4bb68479c5a85bdb043e97807fc6a2e93ff Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Fri, 27 Sep 2024 22:53:51 +0300 Subject: [PATCH 1/4] #8861 Rating Scale in Mobile/Dropdown mode - The minRateDescription and maxRateDescription labels do not appear for custom rating items Fixes #8861 --- packages/survey-core/src/question_rating.ts | 28 +++++--- tests/markup/etalon_rating.ts | 31 +++++++++ .../rating-as-dropdown-description.snap.html | 65 +++++++++++++++++++ 3 files changed, 115 insertions(+), 9 deletions(-) create mode 100644 tests/markup/snapshots/rating-as-dropdown-description.snap.html diff --git a/packages/survey-core/src/question_rating.ts b/packages/survey-core/src/question_rating.ts index a8a11e508c..11b0c0dc39 100644 --- a/packages/survey-core/src/question_rating.ts +++ b/packages/survey-core/src/question_rating.ts @@ -365,6 +365,7 @@ export class QuestionRatingModel extends Question { } if (this.rateType == "smileys" && rateValues.length > 10) rateValues = rateValues.slice(0, 10); + this.visibleChoicesValue = rateValues.map((i, idx) => this.getRatingItemValue(i, idx)); this.renderedRateItems = rateValues.map((v, i) => { let renderedItem = null; if (this.displayRateDescriptionsAsExtremeItems) { @@ -383,15 +384,8 @@ export class QuestionRatingModel extends Question { var step = this.rateStep; while (value <= this.rateMax && res.length < settings.ratingMaximumRateValueCount) { - let description: LocalizableString; - if (value === this.rateMin) { - description = this.minRateDescription && this.locMinRateDescription; - } - if (value === this.rateMax || res.length === settings.ratingMaximumRateValueCount) { - description = this.maxRateDescription && this.locMaxRateDescription; - } - let item = new RatingItemValue(value, description); + let item = new ItemValue(value); item.locOwner = this; item.ownerPropertyName = "rateValues"; res.push(item); @@ -399,6 +393,21 @@ export class QuestionRatingModel extends Question { } return res; } + private getRatingItemValue(item, index) { + if (!item) return null; + const value = item.value; + let description: LocalizableString; + if (value === this.rateMin) { + description = this.minRateDescription && this.locMinRateDescription; + } + if (value === this.rateMax || index === settings.ratingMaximumRateValueCount) { + description = this.maxRateDescription && this.locMaxRateDescription; + } + let newItem = new RatingItemValue(value, description); + newItem.locOwner = item.locOwner; + newItem.ownerPropertyName = item.ownerPropertyName; + return newItem; + } private correctValue(value: number, step: number): number { if (!value) return value; @@ -835,8 +844,9 @@ export class QuestionRatingModel extends Question { public isItemSelected(item: ItemValue): boolean { return item.value == this.value; } + private visibleChoicesValue: ItemValue[]; public get visibleChoices(): ItemValue[] { - return this.visibleRateValues; + return this.visibleChoicesValue; } public get readOnlyText() { if (this.readOnly) return (this.displayValue || this.placeholder); diff --git a/tests/markup/etalon_rating.ts b/tests/markup/etalon_rating.ts index 32987145df..10c4fa8cb0 100644 --- a/tests/markup/etalon_rating.ts +++ b/tests/markup/etalon_rating.ts @@ -104,6 +104,37 @@ registerMarkupTests( after: () => StylesManager.applyTheme("default"), snapshot: "rating-as-dropdown", }, + { + name: "Test Rating question as dropdown with description", + json: { + questions: [ + { + name: "name", + type: "rating", + title: "Question title", + titleLocation: "hidden", + minRateDescription: "mimimi", + maxRateDescription: "mamama", + displayMode: "dropdown", + rateValues: [ + 1, + 2, + 3, + 4 + ] + } + ] + }, + initSurvey: (survey) => { + let q1 = survey.getQuestionByName("name"); + const dropdownListModel = new DropdownListModel(q1); + q1["dropdownListModel"] = dropdownListModel; + dropdownListModel["popupModel"].isVisible = true; + }, + before: () => StylesManager.applyTheme("defaultV2"), + after: () => StylesManager.applyTheme("default"), + snapshot: "rating-as-dropdown-description", + }, { name: "Test Rating question as dropdown readonly", json: { diff --git a/tests/markup/snapshots/rating-as-dropdown-description.snap.html b/tests/markup/snapshots/rating-as-dropdown-description.snap.html new file mode 100644 index 0000000000..cd819c93e3 --- /dev/null +++ b/tests/markup/snapshots/rating-as-dropdown-description.snap.html @@ -0,0 +1,65 @@ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
    +
  • +
    +
    + 1 +
    + mimimi +
    +
    +
    +
    • +
  • +
    +
    + 2 +
    +
    +
    • +
  • +
    +
    + 3 +
    +
    +
    • +
  • +
    +
    + 4 +
    +
    +
    • +
+
+
+
+
+
+
+
+ +
+
\ No newline at end of file From 0b9dbfb48f4648d77155c450568a27b5ef0451d0 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Fri, 27 Sep 2024 23:50:04 +0300 Subject: [PATCH 2/4] #8861 fix typings Fixes #8861 --- packages/survey-core/src/question_rating.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/survey-core/src/question_rating.ts b/packages/survey-core/src/question_rating.ts index 11b0c0dc39..73505090a6 100644 --- a/packages/survey-core/src/question_rating.ts +++ b/packages/survey-core/src/question_rating.ts @@ -393,7 +393,7 @@ export class QuestionRatingModel extends Question { } return res; } - private getRatingItemValue(item, index) { + private getRatingItemValue(item: ItemValue, index: number) { if (!item) return null; const value = item.value; let description: LocalizableString; From ed9d80901ac1f1f342246457be7171a5445218bd Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Sat, 28 Sep 2024 11:50:26 +0300 Subject: [PATCH 3/4] #8861 fix markup test Fixes #8861 --- tests/markup/etalon_rating.ts | 1 + .../snapshots/rating-as-dropdown-description.snap.html | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/tests/markup/etalon_rating.ts b/tests/markup/etalon_rating.ts index 10c4fa8cb0..1ccad455e3 100644 --- a/tests/markup/etalon_rating.ts +++ b/tests/markup/etalon_rating.ts @@ -131,6 +131,7 @@ registerMarkupTests( q1["dropdownListModel"] = dropdownListModel; dropdownListModel["popupModel"].isVisible = true; }, + removeIds: true, before: () => StylesManager.applyTheme("defaultV2"), after: () => StylesManager.applyTheme("default"), snapshot: "rating-as-dropdown-description", diff --git a/tests/markup/snapshots/rating-as-dropdown-description.snap.html b/tests/markup/snapshots/rating-as-dropdown-description.snap.html index cd819c93e3..a2b3ff165a 100644 --- a/tests/markup/snapshots/rating-as-dropdown-description.snap.html +++ b/tests/markup/snapshots/rating-as-dropdown-description.snap.html @@ -1,8 +1,8 @@
-
+
- +
@@ -15,7 +15,7 @@ -
    +
    • From b0a654c6f8ccd502dfb30b914f1357a87ff8f4f8 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Sat, 28 Sep 2024 14:00:32 +0300 Subject: [PATCH 4/4] #8861 fixed vue3 item rendering Fixes #8861 --- .../survey-vue3-ui/src/components/rating/RatingDropdownItem.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue b/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue index db9be2c4d0..454e5e03d3 100644 --- a/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue +++ b/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue @@ -11,7 +11,7 @@ import SvComponent from "@/SvComponent.vue"; import { useBase } from "@/base"; -const props = defineProps<{ item: any }>(); +const props = defineProps<{ item: any; model: any }>(); useBase(() => props.item);