From 70643f637ca6d335207959374110343a331ca0a4 Mon Sep 17 00:00:00 2001 From: Andrew Telnov Date: Tue, 21 May 2024 16:46:36 +0300 Subject: [PATCH] Create CreatorPresetEditor class #5215 --- .../survey-creator-core/src/entries/index.ts | 1 + .../src/presets/presets-editor.ts | 97 ++++++++++++++ .../src/presets/presets-toolbox.ts | 3 +- .../src/presets/presets.ts | 84 ------------ ...urvey.tests.ts => presets-editor.tests.ts} | 125 +++++++++--------- packages/survey-creator-react/index.js | 83 ++++++------ 6 files changed, 206 insertions(+), 187 deletions(-) create mode 100644 packages/survey-creator-core/src/presets/presets-editor.ts rename packages/survey-creator-core/tests/{presets-edit-survey.tests.ts => presets-editor.tests.ts} (88%) diff --git a/packages/survey-creator-core/src/entries/index.ts b/packages/survey-creator-core/src/entries/index.ts index 4324ce8a15..2786bb2b03 100644 --- a/packages/survey-creator-core/src/entries/index.ts +++ b/packages/survey-creator-core/src/entries/index.ts @@ -89,6 +89,7 @@ export * from "../plugins/undo-redo"; export * from "../plugins/undo-redo/undo-redo-manager"; export * from "../pages-controller"; export * from "../presets/presets"; +export * from "../presets/presets-editor"; require("../components/property-panel/property-panel-item.scss"); require("../components/property-panel/property-panel.scss"); diff --git a/packages/survey-creator-core/src/presets/presets-editor.ts b/packages/survey-creator-core/src/presets/presets-editor.ts new file mode 100644 index 0000000000..09f5029f4f --- /dev/null +++ b/packages/survey-creator-core/src/presets/presets-editor.ts @@ -0,0 +1,97 @@ +import { SurveyCreatorModel } from "../creator-base"; +import { CreatorPreset, ICreatorPresetData } from "./presets"; +import { SurveyModel } from "survey-core"; +import { CreatorPresetEditableBase } from "./presets-base"; + +export class CreatorPresetEditor { + private presetValue: CreatorPreset; + private creatorValue: SurveyCreatorModel; + private modelValue: SurveyModel; + constructor(json?: ICreatorPresetData, creator?: SurveyCreatorModel) { + this.presetValue = new CreatorPreset(json); + this.creatorValue = creator || new SurveyCreatorModel({}); + this.modelValue = this.createModel(); + } + public get preset(): CreatorPreset { return this.presetValue; } + public get creator(): SurveyCreatorModel { return this.creatorValue; } + public get model(): SurveyModel { return this.modelValue; } + protected createModel(): SurveyModel { + const editablePresets = this.createEditablePresets(); + const model = new SurveyModel(this.getEditModelJson(editablePresets)); + model.editablePresets = editablePresets; + model.showCompleteButton = false; + model.keepIncorrectValues = true; + model.addNavigationItem({ + id: "preset_save", + title: "Save", //TODO + action: () => { + this.applyFromSurveyModel(); + } + }); + editablePresets.forEach(item => item.setupQuestions(model, this.creator)); + const json = this.preset.getJson() || {}; + editablePresets.forEach(item => item.setupQuestionsValue(model, json[item.path], this.creator)); + model.onCurrentPageChanged.add((sender, options) => { + editablePresets.forEach(item => item.setupOnCurrentPage(model, this.creator)); + }); + model.onValueChanged.add((sender, options) => { + editablePresets.forEach(item => item.updateOnValueChanged(model, this.creator, options.name)); + }); + model.onMatrixDetailPanelVisibleChanged.add((sender, options) => { + editablePresets.forEach(item => item.updateOnMatrixDetailPanelVisibleChanged(model, this.creator, options)); + }); + return model; + } + public applyFromSurveyModel(): boolean { + if(!this.validateEditableModel(this.model)) return false; + this.preset.setJson(this.getJsonFromSurveyModel()); + this.model.setValue("json_result", JSON.stringify(this.preset.getJson(), null, 2)); + this.preset.apply(this.creator); + return true; + } + public getJsonFromSurveyModel(): any { + const res: any = {}; + this.model.editablePresets.forEach(preset => { + const val = preset.getJsonValue(this.model); + if(!!val) { + res[preset.path] = val; + } + }); + return res; + } + private validateEditableModel(model: SurveyModel): boolean { + if(!model.validate(true, true)) return false; + const editablePresets = model.editablePresets; + for(let i = 0; i < editablePresets.length; i ++) { + if(!editablePresets[i].validate(model)) return false; + } + return true; + } + private createEditablePresets(): Array { + const res = []; + this.preset.children.forEach(preset => { + const editable = preset.createEditable(); + if (editable) { + res.push(editable); + } + }); + return res; + } + private getEditModelJson(editablePresets: Array): any { + const modelJson = { pages: [], showTOC: true, showQuestionNumbers: false }; + editablePresets.forEach(preset => { + const pages = preset.createPages(); + if (Array.isArray(pages)) { + pages.forEach(page => modelJson.pages.push(page)); + } + }); + modelJson.pages.push({ + name: "page_result", + title: "Preset JSON result", + elements: [ + { type: "comment", rows: 40, name: "json_result", titleLocation: "hidden", placeholder: "Please click on the 'Save' button" } + ] + }); + return modelJson; + } +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/presets/presets-toolbox.ts b/packages/survey-creator-core/src/presets/presets-toolbox.ts index a7d50afe9e..a77a57ceda 100644 --- a/packages/survey-creator-core/src/presets/presets-toolbox.ts +++ b/packages/survey-creator-core/src/presets/presets-toolbox.ts @@ -142,7 +142,8 @@ export class CreatorPresetToolboxDefinition extends CreatorPresetBase { private applyDefinition(creator: SurveyCreatorModel, defintion: Array): void { if (!Array.isArray(defintion)) return; const tb = creator.toolbox; - defintion.forEach(item => { + const def: Array = JSON.parse(JSON.stringify(defintion)); + def.forEach(item => { if (typeof item === "object" && !!item.name) { const action = tb.getItemByName(item.name); if (action) { diff --git a/packages/survey-creator-core/src/presets/presets.ts b/packages/survey-creator-core/src/presets/presets.ts index dbf7c3472e..28a31b6679 100644 --- a/packages/survey-creator-core/src/presets/presets.ts +++ b/packages/survey-creator-core/src/presets/presets.ts @@ -4,8 +4,6 @@ import { CreatorPresetTabs } from "./presets-tabs"; import { CreatorPresetPropertyGrid } from "./presets-properties"; import { IToolboxCategoryDefinition } from "../toolbox"; import { ISurveyPropertyGridDefinition } from "../question-editor/definition"; -import { SurveyModel } from "survey-core"; -import { SurveyCreatorModel } from "../creator-base"; export interface ICreatorPresetData { propertyGrid?: { @@ -35,86 +33,4 @@ export class CreatorPreset extends CreatorPresetBase { return [new CreatorPresetTabs(), new CreatorPresetToolbox(), new CreatorPresetPropertyGrid()]; } - public createEditModel(creator?: SurveyCreatorModel): SurveyModel { - const editablePresets = this.createEditablePresets(); - const model = new SurveyModel(this.getEditModelJson(editablePresets)); - model.editablePresets = editablePresets; - model.showCompleteButton = false; - model.keepIncorrectValues = true; - const editingCreator = !!creator ? creator : new SurveyCreatorModel({}); - model.addNavigationItem({ - id: "preset_save", - title: "Save", //TODO - action: () => { - this.applyFromSurveyModel(model, creator); - } - }); - editablePresets.forEach(item => item.setupQuestions(model, editingCreator)); - const json = this.json ? this.json : {}; - editablePresets.forEach(item => item.setupQuestionsValue(model, json[item.path], editingCreator)); - model.onCurrentPageChanged.add((sender, options) => { - editablePresets.forEach(item => item.setupOnCurrentPage(model, editingCreator)); - }); - model.onValueChanged.add((sender, options) => { - editablePresets.forEach(item => item.updateOnValueChanged(model, editingCreator, options.name)); - }); - model.onMatrixDetailPanelVisibleChanged.add((sender, options) => { - editablePresets.forEach(item => item.updateOnMatrixDetailPanelVisibleChanged(model, editingCreator, options)); - }); - return model; - } - public applyFromSurveyModel(model: SurveyModel, creator?: SurveyCreatorModel): boolean { - if(!this.validatEditableModel(model)) return false; - this.setJson(this.getJsonFromSurveyModel(model)); - model.setValue("json_result", JSON.stringify(this.getJson(), null, 2)); - if (creator) { - this.apply(creator); - } - return true; - } - private validatEditableModel(model: SurveyModel): boolean { - if(!model.validate(true, true)) return false; - const editablePresets = model.editablePresets; - for(let i = 0; i < editablePresets.length; i ++) { - if(!editablePresets[i].validate(model)) return false; - } - return true; - } - public getJsonFromSurveyModel(model: SurveyModel): any { - const res: any = {}; - model.editablePresets.forEach(preset => { - const val = preset.getJsonValue(model); - if(!!val) { - res[preset.path] = val; - } - }); - return res; - } - private createEditablePresets(): Array { - const res = []; - this.children.forEach(preset => { - const editable = preset.createEditable(); - if (editable) { - res.push(editable); - } - }); - return res; - } - private getEditModelJson(editablePresets: Array): any { - const modelJson = { pages: [], showTOC: true, showQuestionNumbers: false }; - editablePresets.forEach(preset => { - const pages = preset.createPages(); - if (Array.isArray(pages)) { - pages.forEach(page => modelJson.pages.push(page)); - } - }); - modelJson.pages.push({ - name: "page_result", - title: "Preset JSON result", - elements: [ - { type: "comment", rows: 40, name: "json_result", titleLocation: "hidden", placeholder: "Please click on the 'Save' button" } - ] - }); - return modelJson; - } } \ No newline at end of file diff --git a/packages/survey-creator-core/tests/presets-edit-survey.tests.ts b/packages/survey-creator-core/tests/presets-editor.tests.ts similarity index 88% rename from packages/survey-creator-core/tests/presets-edit-survey.tests.ts rename to packages/survey-creator-core/tests/presets-editor.tests.ts index 43c51643f0..0a9d8113bd 100644 --- a/packages/survey-creator-core/tests/presets-edit-survey.tests.ts +++ b/packages/survey-creator-core/tests/presets-editor.tests.ts @@ -5,11 +5,13 @@ import { ItemValue, QuestionDropdownModel, QuestionMatrixDynamicModel } from "su import { defaultPropertyGridDefinition, ISurveyPropertyGridDefinition } from "../src/question-editor/definition"; import { SurveyQuestionPresetPropertiesDetail } from "../src/presets/presets-properties"; import { QuestionEmbeddedSurveyModel } from "../src/components/embedded-survey"; +import { CreatorPresetEditor } from "../src/presets/presets-editor"; export * from "../src/components/embedded-survey"; test("Preset edit model, create pages", () => { - const survey = new CreatorPreset({ }).createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; expect(survey.pages).toHaveLength(5); expect(survey.visiblePages).toHaveLength(5); expect(survey.pages[0].name).toEqual("page_tabs"); @@ -19,8 +21,8 @@ test("Preset edit model, create pages", () => { expect(survey.pages[4].name).toEqual("page_result"); }); test("Preset edit model, page component", () => { - const preset = new CreatorPreset({ tabs: { items: [] } }); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor({ tabs: { items: [] } }); + const survey = editor.model; const boolQuestion = survey.getQuestionByName("tabs_show"); expect(boolQuestion).toBeTruthy(); expect(boolQuestion.value).toBeFalsy(); @@ -39,18 +41,18 @@ test("Preset edit model, page component", () => { itemsQuestion.value = ["designer", "translation"]; expect(activeTabQuestion.visibleChoices).toHaveLength(2); activeTabQuestion.value = "translation"; - const resJson1 = preset.getJsonFromSurveyModel(survey); + const resJson1 = editor.getJsonFromSurveyModel(); expect(resJson1).toEqual({ tabs: { items: ["designer", "translation"], activeTab: "translation" } }); boolQuestion.value = false; - const resJson2 = preset.getJsonFromSurveyModel(survey); + const resJson2 = editor.getJsonFromSurveyModel(); expect(resJson2).toEqual({}); }); test("Preset edit model, tabs page with creator, default items", () => { const creator = new CreatorTester(); - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(creator); + const editor = new CreatorPresetEditor({}, creator); + const survey = editor.model; const boolQuestion = survey.getQuestionByName("tabs_show"); boolQuestion.value = true; const itemsQuestion = survey.getQuestionByName("tabs_items"); @@ -59,15 +61,15 @@ test("Preset edit model, tabs page with creator, default items", () => { itemsQuestion.value = ["preview", "logic"]; const activeTabQuestion = survey.getQuestionByName("tabs_activeTab"); activeTabQuestion.value = "logic"; - preset.applyFromSurveyModel(survey, creator); + editor.applyFromSurveyModel(); expect(creator.tabs).toHaveLength(2); expect(creator.tabs[0].id).toEqual("test"); expect(creator.tabs[1].id).toEqual("logic"); expect(creator.activeTab).toBe("logic"); }); test("Preset edit model, tabs page with creator, default items", () => { - const preset = new CreatorPreset({ tabs: { items: ["designer", "logic"], activeTab: "logic" } }); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor({ tabs: { items: ["designer", "logic"], activeTab: "logic" } }); + const survey = editor.model; const boolQuestion = survey.getQuestionByName("tabs_show"); boolQuestion.value = true; const itemsQuestion = survey.getQuestionByName("tabs_items"); @@ -77,8 +79,8 @@ test("Preset edit model, tabs page with creator, default items", () => { expect(activeTabQuestion.value).toEqual("logic"); }); test("Preset edit model, toolbox page", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; const boolDefinitionQuestion = survey.getQuestionByName("toolbox_definition_show"); const boolSetupQuestion = survey.getQuestionByName("toolbox_show"); const boolSetupCategoriesQuestion = survey.getQuestionByName("toolbox_mode"); @@ -94,9 +96,8 @@ test("Preset edit model, toolbox page", () => { expect(boolSetupCategoriesQuestion.isVisible).toBeTruthy(); }); test("Preset edit model, toolbox definition page", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); - const boolDefinitionQuestion = survey.getQuestionByName("toolbox_definition_show"); + const editor = new CreatorPresetEditor(); + const survey = editor.model; const page = survey.getPageByName("page_toolbox_definition"); const matrixQuestion = survey.getQuestionByName("toolbox_definition_matrix"); expect(matrixQuestion).toBeTruthy(); @@ -104,8 +105,8 @@ test("Preset edit model, toolbox definition page", () => { expect(page.isVisible).toBeTruthy(); }); test("Preset edit model, toolbox definition page, validate name/json", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("toolbox_definition_show", true); const matrixQuestion = survey.getQuestionByName("toolbox_definition_matrix"); expect(matrixQuestion.visibleRows).toHaveLength(0); @@ -115,14 +116,14 @@ test("Preset edit model, toolbox definition page, validate name/json", () => { row.showDetailPanel(); const jsonQuestion = row.getQuestionByName("json"); jsonQuestion.value = "{."; - expect(preset.applyFromSurveyModel(survey)).toBeFalsy(); + expect(editor.applyFromSurveyModel()).toBeFalsy(); expect(nameQuestion.errors).toHaveLength(1); nameQuestion.value = "name1"; - expect(preset.applyFromSurveyModel(survey)).toBeFalsy(); + expect(editor.applyFromSurveyModel()).toBeFalsy(); expect(nameQuestion.errors).toHaveLength(0); expect(jsonQuestion.errors).toHaveLength(1); jsonQuestion.value = "{ type: \"text\", inputType: \"date\" }"; - expect(preset.applyFromSurveyModel(survey)).toBeTruthy(); + expect(editor.applyFromSurveyModel()).toBeTruthy(); expect(nameQuestion.errors).toHaveLength(0); expect(jsonQuestion.errors).toHaveLength(0); }); @@ -136,8 +137,8 @@ test("Preset edit model, toolbox definition page, default values", () => { ] } }; - const preset = new CreatorPreset(presetJson); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(presetJson); + const survey = editor.model; expect(survey.getValue("toolbox_definition_show")).toBeTruthy(); const matrixQuestion = survey.getQuestionByName("toolbox_definition_matrix"); const val = matrixQuestion.value; @@ -159,8 +160,8 @@ test("Preset edit model, toolbox definition page, default values", () => { expect(val[2]["json"]).toBeFalsy(); }); test("Preset edit model, toolbox definition page, apply", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("toolbox_definition_show", true); const matrixQuestion = survey.getQuestionByName("toolbox_definition_matrix"); matrixQuestion.addRow(); @@ -170,7 +171,7 @@ test("Preset edit model, toolbox definition page, apply", () => { row.showDetailPanel(); const jsonQuestion = row.getQuestionByName("json"); jsonQuestion.value = "{ type: \"text\", inputType: \"date\" }"; - expect(preset.applyFromSurveyModel(survey)).toBeTruthy(); + expect(editor.applyFromSurveyModel()).toBeTruthy(); const etalon: ICreatorPresetData = { toolbox: { definition: [ @@ -181,12 +182,12 @@ test("Preset edit model, toolbox definition page, apply", () => { ] } }; - const testJson = preset.getJson(); + const testJson = editor.preset.getJson(); expect(testJson).toEqual(etalon); }); test("Preset edit model, toolbox items, default value and apply", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("toolbox_show", true); survey.setValue("toolbox_mode", "items"); const question = survey.getQuestionByName("toolbox_items"); @@ -195,18 +196,18 @@ test("Preset edit model, toolbox items, default value and apply", () => { expect(question.choices).toHaveLength(defaultItems.length); expect(question.value).toHaveLength(defaultItems.length); question.value = ["boolean", "text", "checkbox"]; - expect(preset.applyFromSurveyModel(survey)).toBeTruthy(); + expect(editor.applyFromSurveyModel()).toBeTruthy(); const etalon: ICreatorPresetData = { toolbox: { items: ["boolean", "text", "checkbox"] } }; - const testJson = preset.getJson(); + const testJson = editor.preset.getJson(); expect(testJson).toEqual(etalon); }); test("Preset edit model, toolbox categories, default value and apply", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("toolbox_show", true); survey.setValue("toolbox_mode", "categories"); const question = survey.getQuestionByName("toolbox_categories"); @@ -233,8 +234,8 @@ test("Preset edit model, toolbox categories, default value and apply", () => { itemsQuestion = newRow.getQuestionByName("items"); expect(itemsQuestion.choices).toHaveLength(3); itemsQuestion.value = newValue; - expect(preset.applyFromSurveyModel(survey)).toBeTruthy(); - const json: any = preset.getJson(); + expect(editor.applyFromSurveyModel()).toBeTruthy(); + const json: any = editor.preset.getJson(); expect(json.toolbox.items).toBeFalsy(); expect(json.toolbox.categories).toHaveLength(categoryCount + 1); const category = json.toolbox?.categories[categoryCount]; @@ -243,8 +244,8 @@ test("Preset edit model, toolbox categories, default value and apply", () => { expect(category.count).toBeFalsy(); }); test("Preset edit model, toolbox items & definition page", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("toolbox_definition_show", true); survey.setValue("toolbox_show", true); survey.setValue("toolbox_mode", "categories"); @@ -270,8 +271,8 @@ test("Preset edit model, toolbox items & definition page", () => { expect(itemsQuestion.choices[0].text).toEqual("Radiogroup_New"); }); test("Preset edit model, property grid, setup", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; expect(survey.getPageByName("page_propertyGrid_definition").visible).toBeTruthy(); survey.setValue("propertyGrid_definition_show", true); expect(survey.getPageByName("page_propertyGrid_definition").visible).toBeTruthy(); @@ -306,8 +307,8 @@ test("Preset edit model, property grid, setup", () => { expect(itemsQuestion.choices.length >= itemsQuestion.value.length).toBeTruthy(); }); test("Preset edit model, property grid, setup items in detail panels => survey", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.setValue("propertyGrid_definition_selector", "survey"); const matrix = survey.getQuestionByName("propertyGrid_definition_matrix"); @@ -335,8 +336,8 @@ test("Preset edit model, property grid, SurveyQuestionPresetPropertiesDetail", ( expect(rows[0].selectbase).toBeFalsy(); }); test("Preset edit model, property grid, setup items in detail panels => radiogroup", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.setValue("propertyGrid_definition_selector", "radiogroup"); const matrix = survey.getQuestionByName("propertyGrid_definition_matrix"); @@ -348,17 +349,17 @@ test("Preset edit model, property grid, setup items in detail panels => radiogro expect(detailPanel.elements[0].name).toBe("items"); }); test("Preset edit model, property grid, apply", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.currentPage = survey.getPageByName("page_propertyGrid_definition"); survey.setValue("propertyGrid_definition_selector", "survey"); let matrix = survey.getQuestionByName("propertyGrid_definition_matrix"); matrix.value = [{ name: "general", items: ["title", "description"] }, { name: "second", items: ["pages", "locale"] }]; - const creator = new CreatorTester(); - expect(preset.applyFromSurveyModel(survey, creator)).toBeTruthy(); - const propDef = preset.getJson().propertyGrid?.definition; + const creator = editor.creator; + expect(editor.applyFromSurveyModel()).toBeTruthy(); + const propDef = editor.preset.getJson().propertyGrid?.definition; const surveyProps = propDef?.classes["survey"]; expect(propDef?.autoGenerateProperties).toStrictEqual(false); expect(surveyProps?.tabs).toHaveLength(1); @@ -375,7 +376,7 @@ test("Preset edit model, property grid, apply", () => { matrix = survey.getQuestionByName("propertyGrid_definition_matrix"); matrix.value = [{ name: "general", items: ["name", "title", "description"] }]; survey.setValue("propertyGrid_definition_selector", "survey"); - expect(preset.applyFromSurveyModel(survey, creator)).toBeTruthy(); + expect(editor.applyFromSurveyModel()).toBeTruthy(); const pageProps = propDef?.classes["page"]; expect(pageProps?.tabs).toHaveLength(0); expect(pageProps?.properties).toHaveLength(0); @@ -389,8 +390,8 @@ test("Preset edit model, property grid, apply", () => { expect(panels2[0].elements).toHaveLength(3); }); test("Preset edit model, live property grid", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.currentPage = survey.getPageByName("page_propertyGrid_definition"); survey.setValue("propertyGrid_definition_selector", "survey"); @@ -415,8 +416,8 @@ test("Preset edit model, live property grid", () => { expect(matrix.visibleRows[1].isDetailPanelShowing).toBeFalsy(); }); test("Preset edit model, live property grid & modify value", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.currentPage = survey.getPageByName("page_propertyGrid_definition"); survey.setValue("propertyGrid_definition_selector", "survey"); @@ -435,8 +436,8 @@ test("Preset edit model, live property grid & modify value", () => { expect(panels[0].elements[0].name).toBe("widthMode"); }); test("Preset edit model, live property grid & visible indexes", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.currentPage = survey.getPageByName("page_propertyGrid_definition"); survey.setValue("propertyGrid_definition_selector", "text"); @@ -456,8 +457,8 @@ test("Preset edit model, live property grid & visible indexes", () => { expect(elements[4].name).toBe("description"); }); test("Preset edit model, include columns types", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.currentPage = survey.getPageByName("page_propertyGrid_definition"); const question = survey.getQuestionByName("propertyGrid_definition_selector"); @@ -465,8 +466,8 @@ test("Preset edit model, include columns types", () => { expect(ItemValue.getItemByValue(question.choices, "matrixdropdowncolumn@checkbox")).toBeTruthy(); }); test("Preset edit model, edit matrixdropdowncolumn@default", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.currentPage = survey.getPageByName("page_propertyGrid_definition"); survey.setValue("propertyGrid_definition_selector", "matrixdropdowncolumn@default"); @@ -479,8 +480,8 @@ test("Preset edit model, edit matrixdropdowncolumn@default", () => { expect(rows[1].getQuestionByName("items").choices).toHaveLength(7); }); test("Preset edit model, live property grid & matrixdropdowncolumn@default", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.currentPage = survey.getPageByName("page_propertyGrid_definition"); survey.setValue("propertyGrid_definition_selector", "matrixdropdowncolumn@default"); @@ -501,8 +502,8 @@ test("Preset edit model, live property grid & matrixdropdowncolumn@default", () expect(panels[0].elements[0].name).toBe("cellType"); }); test("Preset edit model, live property grid & matrixdropdowncolumn@checkbox", () => { - const preset = new CreatorPreset({}); - const survey = preset.createEditModel(); + const editor = new CreatorPresetEditor(); + const survey = editor.model; survey.setValue("propertyGrid_definition_show", true); survey.currentPage = survey.getPageByName("page_propertyGrid_definition"); survey.setValue("propertyGrid_definition_selector", "matrixdropdowncolumn@checkbox"); diff --git a/packages/survey-creator-react/index.js b/packages/survey-creator-react/index.js index 6b3355d175..c0e1f0a43e 100644 --- a/packages/survey-creator-react/index.js +++ b/packages/survey-creator-react/index.js @@ -1,37 +1,6 @@ Survey.ComponentCollection.Instance.add({ name: "newrating", title: "SuperRating", elementsJSON: [{ "type": "rating", "name": "superrating", "title": "1", "isRequired": true, "rateMin": 0, "rateMax": 10, "minRateDescription": "1", "maxRateDescription": "2" }] }); Survey.ComponentCollection.Instance.add({ name: "d2", title: "DDD", questionJSON: { "type": "dropdown", "name": "superrating", "title": "1", "isRequired": true, choices: [1, 2, 3] } }); -let confSurvey; -function getConfSurvey() { - if (!confSurvey) { - const preset = new SurveyCreatorCore.CreatorPreset(); - confSurvey = preset.createEditModel(getCreator()); - preset.onApplied.add((sender, options) => { - const json = preset.getJson(); - if (!!json.tabs && !!json.tabs.items) { - const creator = getCreator(); - creator.addPluginTab("configurator", configuratorPlugin, "Configurator", "svc-tab-configurator", 0); - } - }); - } - return confSurvey; -} -class ConfiguratorTemplateComponent extends React.Component { - render() { - return ( - - ); - } -} - -SurveyReact.ReactElementFactory.Instance.registerElement( - "svc-tab-configurator", - (props) => { - return React.createElement(ConfiguratorTemplateComponent, props); - } -); - - let json = { completedHtml: "

Thank you for your feedback.

Your thoughts and ideas will help us to create a great product!
", @@ -182,15 +151,49 @@ SurveyReact.ReactElementFactory.Instance.registerElement( } ); -const creator = new SurveyCreator.SurveyCreator(options); -function getCreator() { return creator; } -const configuratorPlugin = { - activate: () => { }, - deactivate: () => { return true; } -}; -//Add plug-in. We do nothing on activate/deactivate. Place it as first tab and set to "svc-tab-template" the component name -creator.addPluginTab("configurator", configuratorPlugin, "Configurator", "svc-tab-configurator", 0); +// class CustomPropertyGridWrapper extends React.Component { +// constructor(props) { +// super(props); +// this.btnClick = this +// .btnClick +// .bind(this); +// } +// btnClick() { +// alert("The Button is clicked"); +// } +// render() { +// const model = this.props.model; +// if (!model) +// return null; +// const btnStyle = { +// width: "100%", +// height: "32px" +// }; +// return
+// +// +//
; +// } +// } +// SurveyReact +// .ReactElementFactory +// .Instance +// .registerElement("svc-property-grid", (props) => { +// return React.createElement(CustomPropertyGridWrapper, props); +// }); +/* +class CreatorSurveyPageComponent2 extends SurveyCreator.CreatorSurveyPageComponent { + renderFooter() { + return (
Some Text {super.renderFooter()}
); + } +} + +SurveyReact.ReactElementFactory.Instance.registerElement("svc-page", (props) => { + return React.createElement(CreatorSurveyPageComponent2, props); +}); +*/ +const creator = new SurveyCreator.SurveyCreator(options); creator.onModified.add((sender, options) => { console.log(JSON.stringify(options, null, 3)); }); @@ -233,4 +236,4 @@ ReactDOM.render( // } // }) // ); -// creator.toolbox.isCompact = true; +// creator.toolbox.isCompact = true; \ No newline at end of file