@wg-npm/survey-creator 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wg-npm/survey-creator",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "",
   "license": "MIT",
   "scripts": {
@@ -12,8 +12,8 @@
     "lint-fix": "eslint \"**/*.ts\"  \"**/*.vue\" --fix --no-error-on-unmatched-pattern"
   },
   "peerDependencies": {
-    "@wg-npm/survey-core": "0.5.0",
-    "@wg-npm/survey-service-api": "0.5.0",
+    "@wg-npm/survey-core": "0.5.1",
+    "@wg-npm/survey-service-api": "0.5.1",
     "axios": "^0.19.2",
     "camelcase": "^6.0.0",
     "deepmerge": "^4.2.2",
@@ -38,8 +38,8 @@
     "@typescript-eslint/eslint-plugin": "^3.6.0",
     "@typescript-eslint/parser": "^3.6.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@wg-npm/survey-core": "0.5.0",
-    "@wg-npm/survey-service-api": "0.5.0",
+    "@wg-npm/survey-core": "0.5.1",
+    "@wg-npm/survey-service-api": "0.5.1",
     "acorn": "^7.3.1",
     "axios": "^0.19.2",
     "babelrc-rollup": "^3.0.0",
@@ -79,7 +79,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f23e8c46f4c8377fe82943b3ec66d71c37d4f013",
+  "gitHead": "ecd5a545a11f95650a95c087dbee5281e65d5dbd",
   "rollup": {
     "external": [
       "vue",

package/src/components/common/question-title.vue

@@ -1,19 +1,37 @@
 <template>
   <div class="question-title">
     <label class="star">{{ question.options.required ? "*" : "" }}</label>
-    <span class="number" v-if="question.header.number"
+    <span class="number pl-sm" v-if="question.header.number"
       >{{ question.header.number }}.</span
     >
-    <span
-      class="content"
-      v-html="formatTitle(translate(question.header.text, true))"
-    />
-    <span class="options-explain" v-if="haveMaxScore"
+
+    <div class="flex pl-sm" v-for="(title, index) in formatTitle" :key="index">
+      <span v-if="title !== ''" class="content">{{ title }}</span>
+      <div
+        v-for="customTitle in customFilledTitle"
+        :key="index + customTitle.index"
+      >
+        <Input
+          v-if="title === '' && index === customTitle.index"
+          v-model.trim="customTitle.title"
+        />
+
+        <div v-else>
+          <Input
+            class="pl-sm"
+            v-if="showInput(index) && index === customTitle.index"
+            v-model.trim="customTitle.title"
+          />
+        </div>
+      </div>
+    </div>
+
+    <span class="options-explain pl-sm" v-if="haveMaxScore"
       >({{
         t(`survey_creator.question.max_score`, $rootComponent.currentLanguage)
       }}{{ maxScore }})
     </span>
-    <span class="options-explain" v-if="haveScoreRange"
+    <span class="options-explain pl-sm" v-if="haveScoreRange"
       >({{
         t(
           `survey_creator.question.scoring.scoreRange`,
@@ -21,7 +39,7 @@
         )
       }}{{ scoreRange }})
     </span>
-    <span class="options-explain" v-if="haveStar">
+    <span class="options-explain pl-sm" v-if="haveStar">
       <span v-if="isSingleSelection">
         ({{
           t(
@@ -76,8 +94,25 @@ export default Vue.extend({
       type: Object as () => BaseQuestionModel,
       required: true,
     },
+    surveyCustomQuestions: {
+      type: Array,
+      required: false,
+    },
   },
   computed: {
+    customFilledTitle() {
+      return _.find(
+        this.surveyCustomQuestions,
+        (q) => q.id === this.question.id
+      ).filledTitle;
+    },
+    formatTitle() {
+      let title = this.translate(this.question.header.text, true);
+      if (!this.isRichText) {
+        return [title];
+      }
+      return title.split(/_{5,}/g);
+    },
     maxScore() {
       return BaseQuestionModel.getMaxScore(this.question);
     },
@@ -107,15 +142,26 @@ export default Vue.extend({
     },
   },
   methods: {
-    formatTitle(title) {
-      if (!this.isRichText) {
-        return title;
+    showInput(index) {
+      if (
+        index === this.formatTitle.length - 2 &&
+        this.formatTitle[this.formatTitle.length - 1] === ""
+      ) {
+        return false;
       }
-      const inputHtml = `<Input style="border: 1px solid #dcdee2;border-radius: 3px;font-size: 12px;margin: 0 16px 8px;padding: 4px;" placeholder="${this.t(
-        "survey_creator.question.rich_text.input_placeholder"
-      )}" />`;
-      return title.replace(/_{5,}/g, inputHtml);
+      return index < this.formatTitle.length - 1;
     },
   },
 });
 </script>
+
+<style lang="less" scoped>
+.flex {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.pl-sm {
+  padding-left: 4px;
+}
+</style>

package/src/components/previewer/previewer-question-row.vue

@@ -4,7 +4,10 @@
       <div class="question-row-container-left" v-if="enabledSelectQuestion">
         <Checkbox v-model="isSelectedQuestion" @on-change="onSelectQuestion" />
       </div>
-      <div class="question-row-container-right">
+      <div class="question-row-container-right" :class="getClassStyle">
+        <span class="incomplete-tips" v-show="!questionTitleIncomplete">
+          {{ t("survey_creator.question.incomplete_tips") }}
+        </span>
         <Divider orientation="left" class="question-type-desc">
           {{
             t(
@@ -13,7 +16,11 @@
             )
           }}
         </Divider>
-        <question-title :question="question" :max-score="true" />
+        <question-title
+          :question="question"
+          :max-score="true"
+          :survey-custom-questions="surveyCustomQuestions"
+        />
         <div class="question-row-content">
           <component
             class="question"
@@ -46,6 +53,7 @@ import TextTitle from "../common/question/text-title.vue";
 import Matrix from "../common/question/matrix.vue";
 import Scoring from "../common/question/scoring.vue";
 import Evaluation from "../common/question/evaluation.vue";
+import _ from "lodash";
 
 export default Vue.extend({
   name: "previewer-question-row",
@@ -76,12 +84,16 @@ export default Vue.extend({
       type: Object as () => SurveyModel,
       required: true,
     },
+    surveyCustomQuestions: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {
       enabledSelectQuestion: false,
-      isSelectedQuestion: false
-    }
+      isSelectedQuestion: false,
+    };
   },
   created() {
     // @ts-ignore
@@ -90,6 +102,30 @@ export default Vue.extend({
       "options.enabledSelectQuestion",
       false
     );
+    this.enabledQuestionTitleIncompleteTips = _.get(
+      this.$rootComponent,
+      "options.enabledQuestionTitleIncompleteTips",
+      false
+    );
+  },
+  computed: {
+    getClassStyle() {
+      return this.questionTitleIncomplete ? "" : "question-incomplete";
+    },
+    questionTitleIncomplete() {
+      if (!this.enabledQuestionTitleIncompleteTips) {
+        return true;
+      }
+      let filledTitle = _.find(
+        this.surveyCustomQuestions,
+        (q) => q.id === this.question.id
+      )?.filledTitle;
+      if (_.isEmpty(filledTitle)) {
+        return true;
+      } else {
+        return _.every(filledTitle, (t) => t.title !== "");
+      }
+    },
   },
   methods: {
     getJumpRules(val) {
@@ -104,3 +140,23 @@ export default Vue.extend({
   },
 });
 </script>
+
+<style lang="less" scoped>
+.question-incomplete {
+  border: 1px solid #ed4014;
+  border-radius: 4px;
+  .incomplete-tips {
+    position: absolute;
+    left: 15px;
+    top: 16px;
+    padding: 2px 4px;
+    background: #f85353;
+    border-radius: 4px 0px;
+
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    color: #ffffff;
+  }
+}
+</style>

package/src/components/previewer/survey-internal-previewer.vue

@@ -8,6 +8,7 @@
       :survey="survey"
       @singleQuestion="handleSelected"
       @onSelectQuestion="onSelectQuestion"
+      :survey-custom-questions="surveyCustomQuestions"
     ></previewer-question-row>
   </div>
 </template>
@@ -29,6 +30,10 @@ export default Vue.extend({
       type: Array,
       required: false,
     },
+    surveyCustomQuestions: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {
@@ -129,7 +134,8 @@ export default Vue.extend({
     },
     selectQuestionHandler(selected, question) {
       this.$refs[`question${question.id}`][0].selectQuestion(selected);
-      this.selectedQuestions.push(question);
+      this.selectedQuestions.find((i) => i.id === question.id) ||
+        this.selectedQuestions.push(question);
       if (Array.isArray(question.jumps) && question.jumps.length > 0) {
         question.jumps.forEach((item) => {
           const jumpItem = this.sortQuestions.find(

package/src/components/survey-previewer.vue

@@ -21,6 +21,7 @@
         :survey="currentSurvey"
         :init-question-ids="initQuestionIds"
         @selected-question-ids="selectedQuestionIds"
+        :survey-custom-questions="surveyCustomQuestions"
       ></survey-internal-previewer>
     </div>
   </div>
@@ -57,6 +58,10 @@ export default Vue.extend({
       type: Array,
       required: false,
     },
+    surveyCustomQuestions: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {
@@ -67,6 +72,7 @@ export default Vue.extend({
   },
   created() {
     this.setSurveyLanguage(this.survey);
+    this.prepareSurveyCustomQuestions();
   },
   methods: {
     onBack() {
@@ -80,6 +86,47 @@ export default Vue.extend({
     selectedQuestionIds(questionIds) {
       this.$emit("selected-question-ids", questionIds);
     },
+    formatTitle(question) {
+      let title = this.translate(question.header.text, true);
+      if (!_.get(question, "options.richTextEnabled", false)) {
+        return [title];
+      }
+      return title.split(/_{5,}/g);
+    },
+    showInput(index, formatTitle) {
+      if (
+        index === formatTitle.length - 2 &&
+        formatTitle[formatTitle.length - 1] === ""
+      ) {
+        return false;
+      }
+      return index < formatTitle.length - 1;
+    },
+    prepareSurveyCustomQuestions() {
+      if (_.isEmpty(this.surveyCustomQuestions)) {
+        this.surveyCustomQuestions = [];
+        _.each(this.survey.questions, (q) => {
+          let input_titles: any = [];
+          _.each(this.formatTitle(q), (t, index) => {
+            if (t === "" || this.showInput(index, this.formatTitle(q))) {
+              let title = {
+                title: "",
+                index: index,
+              };
+
+              input_titles.push(title);
+            }
+          });
+
+          let customQuestion = {
+            id: q.id,
+            surveyId: this.survey.id,
+            filledTitle: input_titles,
+          };
+          this.surveyCustomQuestions.push(customQuestion);
+        });
+      }
+    },
   },
 });
 </script>

package/src/locale/lang/en-US.ts

@@ -73,6 +73,7 @@ export default {
           "This question is involved in logical jump settings. After deletion, the related" +
           " logical jump relationships will be automatically cleared. Are you sure you want to delete?",
       },
+      incomplete_tips: "The title is not set completely",
       optional: "Optional",
       sub_questions: "Sub Question",
       score: "Score",

package/src/locale/lang/zh-CN.ts

@@ -72,6 +72,7 @@ export default {
         delete_question_desc:
           "该题目参与逻辑跳转设置，删除后，相关逻辑跳转关系会自动清除，是否确认要删除？",
       },
+      incomplete_tips: "题目未设置完整",
       optional: "选项",
       sub_questions: "子题",
       score: "分值",

package/src/styles/components/survey-preview.less

@@ -31,6 +31,7 @@
           }
 
           .question-row-container-right {
+            padding: 0px 16px;
             flex: 1;
 
             .question-type-desc {
@@ -39,7 +40,9 @@
             
             .question-title {
               padding: 16px 0;
-    
+              display: flex;
+              align-items: center;
+
               .star {
                 color: red;
               }