Refactor image picker choices editor

Author: andrewtelnov

packages/survey-creator-core/src/property-grid/index.ts

@@ -624,7 +624,7 @@ export class PropertyJSONGenerator {
     const propName = this.getClasPropName();
     if (!!propName) {
       className = this.obj.getType();
-      if (this.obj.isDescendantOf("itemvalue") && className !== "imageitemvalue") className += "[]";
+      if (this.obj.isDescendantOf("itemvalue")) className += "[]";
       className += "@" + propName;
     }
     var properties = new SurveyQuestionProperties(this.obj, null,

packages/survey-creator-core/src/question-editor/definition.ts

@@ -369,6 +369,9 @@ const defaultProperties: ISurveyPropertiesDefinition = {
     properties: [{ name: "visibleIf" }, { name: "enableIf" }],
     tabs: [{ name: "general" }]
   },
+  "imageitemvalue[]@choices": {
+    properties: ["value", "text", "visibleIf", "enableIf", "imageLink"]
+  },
   "itemvalue[]@rows": {
     properties: [{ name: "visibleIf" }, { name: "enableIf" }],
     tabs: [{ name: "general" }]

packages/survey-creator-core/tests/property-grid/property-grid-matrices.tests.ts

@@ -3,7 +3,8 @@ import {
   QuestionMatrixModel, QuestionMultipleTextModel, QuestionRatingModel, QuestionTextModel, QuestionBooleanModel, Serializer, SurveyModel,
   SurveyTriggerRunExpression, UrlConditionItem, settings as surveySettings,
   ItemValue,
-  QuestionCheckboxModel
+  QuestionCheckboxModel,
+  QuestionImagePickerModel
 } from "survey-core";
 import { PropertyGridModelTester } from "./property-grid.base";
 import { PropertyGridEditorMatrixMutlipleTextItems } from "../../src/property-grid/matrices";
@@ -470,6 +471,24 @@ test("QuestionCheckbox choices placeholder", () => {
   row.getQuestionByName("value").value = "item111";
   expect(row.getQuestionByName("text").placeholder).toBe("item111");
 });
+test("ImagePicker choices columns & detail panel", () => {
+  const question = new QuestionImagePickerModel("q1");
+  question.choices = ["item1"];
+  var propertyGrid = new PropertyGridModelTester(question);
+  var choicesQuestion = <QuestionMatrixDynamicModel>(
+    propertyGrid.survey.getQuestionByName("choices")
+  );
+  expect(choicesQuestion).toBeTruthy();
+  expect(choicesQuestion.columns).toHaveLength(3);
+  expect(choicesQuestion.columns[0].name).toBe("value");
+  expect(choicesQuestion.columns[1].name).toBe("text");
+  expect(choicesQuestion.columns[2].name).toBe("imageLink");
+  const row = choicesQuestion.visibleRows[0];
+  row.showDetailPanel();
+  expect(row.detailPanel.questions).toHaveLength(5);
+  const imageLinkQuestion = row.detailPanel.getQuestionByName("imageLink");
+  expect(imageLinkQuestion).toBeTruthy();
+});
 test("Triggers property editor, Bug #4454", () => {
   var survey = new SurveyModel();
   const completeTrigger = new SurveyTriggerComplete();