Add code generator to admin part

Author: andrewtelnov

Data/nps-survey.json

@@ -1,4 +1,5 @@
 {
+  "name":  "NPSSurvey",
   "completedHtmlOnCondition": [
     {
       "expression": "{NPSScore} <= 6 or {Rebuy} = false",
@@ -181,7 +182,7 @@
         {
           "type": "text",
           "name": "Email",
-          "inputType":  "email",
+          "inputType": "email",
           "visibleIf": "{Testimonial} = 'yes'",
           "title": {
             "default": "What is your email address?",

Data/patient-assessment.json

@@ -1,4 +1,5 @@
 {
+  "name": "PatientAssessment",
   "title": "Patient Assessment Form",
   "logoPosition": "right",
   "focusFirstQuestionAutomatic": false,
@@ -429,7 +430,7 @@
           "name": "FamilyHistory",
           "cellType": "text",
           "titleLocation": "hidden",
-          "rowCount":  1,
+          "rowCount": 1,
           "columns": [
             {
               "name": "Relation"
@@ -507,7 +508,7 @@
               "columns": [
                 {
                   "name": "Name",
-                  "isRequired":  true,
+                  "isRequired": true,
                   "cellType": "dropdown",
                   "choices": [
                     {
@@ -534,8 +535,8 @@
                 },
                 {
                   "name": "Date",
-                  "cellType":  "text",
-                  "inputType":  "date"
+                  "cellType": "text",
+                  "inputType": "date"
                 },
                 {
                   "name": "Place",

Views/Home/EditForm.cshtml

@@ -10,6 +10,7 @@
 <link rel="stylesheet" href="https://unpkg.com/survey-creator-core/survey-creator-core.css" />
 <script src="~/js/form_api.js" asp-append-version="true"></script>
 <script src="~/js/creatorjs.js" asp-append-version="true"></script>
+<script src="~/js/codegenerator.js" asp-append-version="true"></script>
 @{
     ViewData["Title"] = "Edit Form: " + Model.FormName;
 }

wwwroot/js/codegenerator.js

@@ -0,0 +1,48 @@
+function isNameCorrect(name) {
+    return /^@?[a-zA-Z_]\w*(\.@?[a-zA-Z_]\w*)*$/.test(name);
+}
+
+function isListQuestionType(el) {
+    return ["paneldynamic", "matrixdynamic", "matrixdropdown"].indexOf(el.getType()) > -1;
+}
+
+function getNestedItemClassName(name) {
+    return name + "Item";
+}
+
+function getElementTypeName(el) {
+    if (isListQuestionType(el)) return "IList<" + getNestedItemClassName(el.name) + ">";
+    if (el.getType() === "text") {
+        if (el.inputType === "number") return "int";
+        if (el.inputType === "date" || el.inputType === "localedate") return "DateTime";
+    }
+    if (el.getType() === "boolean") return "bool"
+    return "string";
+}
+function getCodePadding() { return "    "; }
+
+function generateClassByElements(className, elements, lines) {
+    lines.push("public class " + className + " {");
+    elements.forEach(el => {
+        if (el.isQuestion || el.getType() === "matrixdropdowncolumn") {
+            lines.push(getCodePadding() + getElementTypeName(el) + " " + el.name + " { get; set; }")
+        }
+    });
+    lines.push("}")
+}
+
+function generateDomainModelsCode(survey) {
+    const lines = [];
+    generateClassByElements(survey.name, survey.getAllQuestions(), lines);
+    survey.getAllQuestions().forEach(q => {
+        if (!isListQuestionType(q)) return;
+        if (q.getType() === "paneldynamic") {
+            lines.push("");
+            generateClassByElements(getNestedItemClassName(q.name), q.elements, lines);
+        } else {
+            lines.push("");
+            generateClassByElements(getNestedItemClassName(q.name), q.columns, lines);
+        }
+    });
+    return lines.join("\n");
+}

wwwroot/js/creatorjs.js

@@ -1,4 +1,9 @@
-function getCreatorOptions(isAdmin) {
+//Add survey name property and set the maximum length for question and column names
+Survey.Serializer.addProperty("survey", { name: "name", maxLength: 50, required: true, category: "general", visibleIndex: 0 });
+Survey.Serializer.findProperty("question", "name").maxLength = 50;
+Survey.Serializer.findProperty("matrixdropdown", "name").maxLength = 50;
+
+function getCreatorOptions(isAdmin) {
     return {
         showLogicTab: true,
         isAutoSave: true,
@@ -12,8 +17,10 @@ function setupCreator(creator, formName, isAdmin) {
     }
     creator.readOnly = true;
     SurveyCreator.settings.designer.showAddQuestionButton = isAdmin;
-    if (!isAdmin) {
-        //Setup Creator for a content manager
+    if (isAdmin) {
+        setupCreatorForProductManager(creator);
+    }
+    else {
         setupCreatorForContentManager(creator);
     }
     loadForm(formName, creator);
@@ -52,6 +59,38 @@ function setupCreatorForContentManager(creator) {
         }
     });
 }
+function setupCreatorForProductManager(creator) {
+    ko.components.register("svc-tab-servercode", {
+        viewModel: {
+            createViewModel: (params, componentInfo) => {
+                const creator = params.creator;
+                var model = {
+                    generatedCode: generateDomainModelsCode(creator.survey)
+                };
+                return model;
+            }
+        },
+        template: `
+<textarea data-bind="value:generatedCode" style="width:100%;height:100%;padding:'5px'">
+</textarea>
+`
+    });
+    creator.onPropertyValidationCustomError.add((sender, options) => {
+        if (options.propertyName !== "name") return;
+        //We need to validate the name property for a question, the survey and a matrix column
+        if (options.obj.isQuestion || ["survey", "matrixdropdowncolumn"].indexOf(options.obj.getType()) > -1) {
+            if (!isNameCorrect(options.value)) {
+                options.error = "The current name can't be used as a property in the server code. Please correct it.";
+            }
+        }
+    })
+    const templatesPlugin = {
+        activate: () => { },
+        deactivate: () => { return true; }
+    };
+    //Add plug-in. We do nothing on activate/deactivate. Place it as first tab and set to "svc-tab-servercode" the component name
+    creator.addPluginTab("servercode", templatesPlugin, "Domain Models Code", "svc-tab-servercode", 0);
+}
 function isObjColumn(obj) {
     return !!obj && obj.getType() === "matrixdropdowncolumn";
 }