@wg-npm/survey-response 0.5.1 → 0.5.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wg-npm/survey-response",
-  "version": "0.5.1",
+  "version": "0.5.123",
   "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.1",
-    "@wg-npm/survey-service-api": "0.5.1",
+    "@wg-npm/survey-core": "0.5.123",
+    "@wg-npm/survey-service-api": "0.5.123",
     "axios": "^0.19.2",
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.15",
@@ -34,8 +34,8 @@
     "@typescript-eslint/parser": "^3.6.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@wg-npm/survey-core": "0.5.1",
-    "@wg-npm/survey-service-api": "0.5.1",
+    "@wg-npm/survey-core": "0.5.123",
+    "@wg-npm/survey-service-api": "0.5.123",
     "acorn": "^7.3.1",
     "axios": "^0.19.2",
     "babelrc-rollup": "^3.0.0",
@@ -46,7 +46,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^6.2.2",
     "lodash": "^4.17.15",
-    "rollup": "^2.20.0",
+    "rollup": "2.20.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-img": "^1.1.0",
     "rollup-plugin-terser": "^6.1.0",
@@ -72,7 +72,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ecd5a545a11f95650a95c087dbee5281e65d5dbd",
+  "gitHead": "a3ea2c0de00a2487db9d0254ff0b85c897fe2837",
   "rollup": {
     "external": [
       "vue",
@@ -86,5 +86,8 @@
     "output": {
       "name": "SurveyResponsePlugin"
     }
+  },
+  "dependencies": {
+    "quill": "^2.0.2"
   }
 }

package/src/components/more-survey-response.vue

@@ -0,0 +1,232 @@
+<template>
+  <div v-if="!emptyQuestions" class="survey-response-wrapper">
+    <Form
+      ref="responseForm"
+      :model="responseSurveyAnswers"
+      :disabled="readonly"
+    >
+      <div :key="surveyIndex" v-for="(survey, surveyIndex) in surveys">
+        <div
+          :key="index"
+          v-for="(question, index) in getFilterSortQuestions(survey.id)"
+          class="question"
+        >
+          <question-title
+            :question="question"
+            :custom-question="getCustomQuestion(question.id)"
+            :index="index"
+          >
+          </question-title>
+          <question-body
+            :question="calculateQuestion(question, question.originalIndex)"
+            :answer="
+              responseSurveyAnswers.moreSurveyAnswers[surveyIndex].answers[
+                question.originalIndex
+              ]
+            "
+            :index="question.originalIndex"
+            :survey-index="surveyIndex"
+            :is-more-survey="true"
+            :options="options"
+            :readonly="readonly"
+            @singleQuestion="handleSelected"
+          >
+          </question-body>
+        </div>
+      </div>
+    </Form>
+  </div>
+  <empty-question v-else></empty-question>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import _ from "lodash";
+import EmptyQuestion from "./empty-question.vue";
+import QuestionTitle from "./question/question-title.vue";
+import QuestionBody from "./question/question-body.vue";
+import { Form } from "view-design";
+import SurveyResponseMixin from "../mixins/survey-response-mixin";
+import { QuestionType } from "@wg-npm/survey-core";
+import { EventBus } from "../event-bus.js";
+
+
+export default Vue.extend({
+  name: "MoreSurveyResponse",
+  mixins: [SurveyResponseMixin],
+  components: {
+    QuestionTitle,
+    QuestionBody,
+    EmptyQuestion,
+    Form,
+  },
+  provide() {
+    return {
+      responseStar:
+        this.response.status != this.$consts.STATUS_DRAFT
+          ? this.response.star
+          : null,
+      responseStatus: this.response.status,
+      $rootComponent: this,
+    };
+  },
+  props: {
+    surveys: {
+      type: Array,
+      required: true,
+    },
+    options: {
+      type: Object,
+    },
+    response: {
+      type: Object,
+      required: true,
+    },
+    responseSurveyAnswers: {
+      type: Object,
+      required: true,
+    },
+    customQuestions: {
+      type: Object,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      answers: {},
+      sortQuestions: null,
+      recordQuestionId: "",
+      screenshotData: {
+        type: Object,
+        required: false,
+      },
+    };
+  },
+  created() {
+    let number = 1;
+    this.surveys.forEach((survey) => {
+      survey.questions.forEach((item, index) => {
+        item.originalIndex = index;
+        item.surveyId = survey.id;
+        if (QuestionType.TEXT_TITLE !== item.type) {
+          item.header.number = number++;
+        }
+      });
+    });
+    this.sortQuestions = _.flatMap(this.surveys, "questions");
+    this.parseQuestionAnswers();
+    this.initDraftSortQuestions();
+  },
+  computed: {
+    emptyQuestions: function () {
+      return _.size(this.sortQuestions) == 0;
+    },
+  },
+  watch: {
+    screenshotData: {
+      deep: true,
+      handler(newValue) {
+        if (Array.isArray(newValue.urls) && newValue.urls.length > 0) {
+          EventBus.$emit("screen-shot-urls", newValue);
+        }
+      },
+    },
+  },
+  methods: {
+    getScreenShot(message) {
+      this.$emit("getScreenShot", message);
+    },
+    updateAnswerByQuestion(question, resetData) {
+      // @ts-ignore
+      let surveyId = _.find(
+        this.sortQuestions,
+        (q) => q.id === question.id
+      )?.surveyId;
+      let surveyIndex = _.findIndex(
+        this.surveys,
+        (s: any) => s.id === surveyId
+      );
+      this.$set(
+        this.responseSurveyAnswers.moreSurveyAnswers[surveyIndex].answers,
+        question.originalIndex,
+        resetData
+      );
+    },
+    getCustomQuestion(questionId) {
+      return _.find(
+          // @ts-ignore
+          _.get(this.customQuestions, "chosenQuestions", []),
+        (q) => q.id === questionId
+      );
+    },
+    getFilterSortQuestions(surveyId) {
+      return _.filter(this.sortQuestions, (s) => s.surveyId === surveyId);
+    },
+    parseQuestionAnswers() {
+      if (
+        _.isEmpty(
+            // @ts-ignore
+            _.get(this.responseSurveyAnswers, "moreSurveyAnswers", []))
+      ) {
+        _.each(this.surveys, (s) => {
+          let surveyAnswer = {
+            surveyId: s.id,
+            answers: [],
+          };
+          this.responseSurveyAnswers.moreSurveyAnswers.push(surveyAnswer);
+        });
+      }
+      _.each(this.responseSurveyAnswers.moreSurveyAnswers, (surveyAnswers) => {
+        _.each(surveyAnswers.answers, (data) => {
+          // @ts-ignore
+          _.set(this.answers, data.questionId, data);
+        });
+      });
+
+      // @ts-ignore
+      _.set(this.responseSurveyAnswers, "moreSurveyAnswers", []);
+
+      _.forEach(
+        _.groupBy(this.sortQuestions, (o) => {
+          return o.surveyId;
+        }),
+        (questions, surveyId) => {
+          let surveyAnswers: any = [];
+          _.each(questions, (question) => {
+            let input_answers: any = [];
+            let questionInputtedEnabled = question.options.inputtedEnabled;
+
+            // @ts-ignore
+            let answer: any = _.get(this.answers, question.id);
+            if (!answer) {
+              _.forEach(question.choices, (choice) => {
+                let choiceInputEnabled = choice.options.inputEnabled;
+                if (questionInputtedEnabled && choiceInputEnabled) {
+                  input_answers.push({
+                    choiceId: choice.id,
+                    inputText: null,
+                  });
+                }
+              });
+            }
+            answer = answer
+              ? answer
+              : {
+                  answer: question.type == "MULTI_SELECTION" ? [] : null,
+                  question_id: question.id,
+                  question_type: question.type,
+                  score: null,
+                  star: null,
+                  inputAnswers: input_answers,
+                };
+            surveyAnswers.push(answer);
+          });
+          this.responseSurveyAnswers.moreSurveyAnswers.push({
+            surveyId: surveyId,
+            answers: surveyAnswers,
+          });
+        }
+      );
+    },
+  },
+});
+</script>

package/src/components/question/question-body.vue

@@ -4,6 +4,8 @@
     :is="question.type"
     :answer="answer"
     :index="index"
+    :survey-index="surveyIndex"
+    :is-more-survey="isMoreSurvey"
     :options="options"
     :question="question"
     :readonly="readonly"
@@ -39,6 +41,7 @@ export default Vue.extend({
       required: true,
     },
     index: Number,
+    surveyIndex: Number,
     answer: {
       type: Object,
       required: true,
@@ -49,6 +52,9 @@ export default Vue.extend({
     readonly: {
       type: Boolean,
     },
+    isMoreSurvey: {
+      type: Boolean,
+    },
   },
   methods: {
     getJumpRules(val) {

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import Vue, { CreateElement } from "vue";
+    import { Input } from "view-design";
+    import _ from "lodash";
+    import { CUSTOM_INPUT_REG } from "@wg-npm/survey-core";
+    import {Component} from "vue/types/options";
+
+    export default Vue.component("question-title-dynamic", {
+        components: { Input },
+        props: {
+            splitedTitles: {
+                type: Array,
+                required: true,
+            },
+            customFilledTitle: {
+                type: Array,
+                required: false,
+            },
+        },
+        render(createElement: CreateElement) {
+
+            let childArr: Array<any> = [];
+            const self = this;
+
+            _.forEach(this.splitedTitles, (title: string, index: number) => {
+
+                if(CUSTOM_INPUT_REG.test(title)) {
+                    let corespondTitle = _.find(self.customFilledTitle, (title) => {
+                        return title.index === index;
+                    });
+                    if(corespondTitle!==undefined){
+                        childArr.push(createElement("input" as Component, {
+                            attrs:{
+                                class:"ivu-input ivu-input-default",
+                                style:"width:172px"
+                            },
+                            domProps: {
+                                // @ts-ignore
+                                value: corespondTitle.title
+                            },
+                            on: {
+                                input: function (value) {
+                                    // @ts-ignore
+                                    corespondTitle.title = value;
+                                }
+                            }
+                        }));}
+                } else {
+                    childArr.push(title);
+                }
+            });
+            return createElement("div", { class: "content pl-sm"}, childArr);
+        }
+    });
+</script>
+
+<style scoped lang="less">
+  /deep/ .ivu-input-wrapper {
+    width: auto;
+  }
+</style>

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

@@ -1,13 +1,13 @@
 <template>
   <div class="question-title">
-    <span v-if="question.type !== 'text_title'">
+    <span v-if="question.type !== 'text_title'" class="pr-sm">
       <label v-if="question.options.required" class="require-label">*</label>
       <label v-if="question.header.number" class="number"
         >{{ question.header.number }}.</label
       >
     </span>
-    <span class="content">{{ i18nText(question.header.text) }}</span>
-    <span class="options-explain" v-if="haveStar">
+    <question-title-dynamic v-if="question" :splitedTitles="getTitle(question)" :customFilledTitle="customFilledTitle"></question-title-dynamic>
+    <span class="options-explain" v-if="haveStar" :style="{'display':(isMobile()?'block':'')}">
       <span v-if="isSingleSelection">
         ({{
           t(
@@ -47,11 +47,18 @@
 <script lang="ts">
 import Vue from "vue";
 import { Icon } from "view-design";
-import { BaseQuestionModel, QuestionType } from "@wg-npm/survey-core";
+import {
+  formatTitle,
+  QuestionType,
+} from "@wg-npm/survey-core";
+import OptionLayoutMixin from "../../mixins/option-layout-mixin";
+import QuestionTitleDynamic from "./question-title-dynamic.vue";
+import QuestionMixin from "../../mixins/question-mixin";
 
 export default Vue.extend({
   name: "question-title",
-  components: { Icon },
+  components: { Icon, QuestionTitleDynamic },
+  mixins: [OptionLayoutMixin, QuestionMixin],
   inject: ["$rootComponent"],
   props: {
     index: {
@@ -65,8 +72,15 @@ export default Vue.extend({
     language: {
       type: String,
     },
+    customQuestion: {
+      type: Object,
+      required: false,
+    },
   },
   computed: {
+    customFilledTitle() {
+      return this.customQuestion?.filledTitle;
+    },
     haveStar() {
       return this.question?.options?.starEnabled ?? false;
     },
@@ -74,5 +88,21 @@ export default Vue.extend({
       return this.question.type == QuestionType.SINGLE_SELECTION;
     },
   },
+  methods: {
+    getTitle(question) {
+      return formatTitle(question, this.$rootComponent.currentLanguage);
+    },
+  },
 });
 </script>
+
+<style lang="less" scoped>
+.flex {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.pr-sm {
+  padding-right: 4px;
+}
+</style>

package/src/components/question/type/fill-blank.vue

@@ -1,43 +1,41 @@
 <template>
   <div>
-    <div
-      v-if="readonly || question.options.disabled"
-      class="processed-answer"
-      v-html="decodeHTML(value)"
-    />
     <FormItem
-      v-else
-      :prop="`answers[${index}].answer`"
+      :prop="answerProp"
       :rules="{
         required: question.options.required,
         message: t('survey_response.question.question_required'),
       }"
     >
-      <Input
+      <quill-rich-text
         v-model.trim="value.answer"
         :placeholder="placeholder"
-        :disabled="question.options.readonly"
-      />
+        :disabled="readonly || question.options.readonly"
+      ></quill-rich-text>
     </FormItem>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-import { FormItem, Input } from "view-design";
+import { FormItem } from "view-design";
+import QuestionMixin from "../../../mixins/question-mixin";
+import LocalMixin from "../../../mixins/locale-mixin";
+import QuillRichText from "./quill-rich-text.vue";
 
 export default Vue.extend({
   name: "fill-blank",
   components: {
     FormItem,
-    Input,
+    QuillRichText,
   },
+  inject: ["$rootComponent"],
+  mixins: [QuestionMixin, LocalMixin],
   props: {
     question: {
       type: Object,
       required: true,
     },
-    index: Number,
     answer: {
       type: Object,
       required: true,
@@ -86,7 +84,7 @@ export default Vue.extend({
   cursor: not-allowed;
   color: #ccc;
   width: 100%;
-  height: 32px;
+  min-height: 32px;
   border: 1px solid #dcdee2;
   border-radius: 4px;
   padding: 4px 8px;

package/src/components/question/type/matrix.vue

@@ -10,7 +10,7 @@
       >
       <span class="title"> {{ i18nText(subQuestion.text) }} </span>
       <FormItem
-        :prop="`answers[${index}].answer[${subIndex}].answer`"
+        :prop="answerProp(subIndex)"
         :rules="{
           required: question.options.required && !question.options.disabled,
           message: t('survey_response.question.question_required'),
@@ -29,7 +29,13 @@
               <Radio
                 :label="choice.id"
                 :key="choice.id"
-                @click.native="toggleAnswer(choice.id, subIndex)"
+                @click.native="
+                  toggleAnswer(
+                    choice.id,
+                    subIndex,
+                    subQuestion.options.readonly || question.options.disabled
+                  )
+                "
                 :disabled="
                   subQuestion.options.readonly || question.options.disabled
                 "
@@ -68,6 +74,12 @@ export default Vue.extend({
       required: true,
     },
     index: Number,
+    surveyIndex: Number,
+    isMoreSurvey: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     answer: {
       type: Object,
       required: true,
@@ -86,6 +98,11 @@ export default Vue.extend({
     },
   },
   methods: {
+    answerProp(subIndex) {
+      return this.isMoreSurvey
+        ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].answer[${subIndex}].answer`
+        : `answers[${this.index}].answer[${subIndex}].answer`;
+    },
     initData() {
       let subAnswers = {};
       // @ts-ignore
@@ -127,8 +144,8 @@ export default Vue.extend({
       // @ts-ignore
       this.value.score = score;
     },
-    toggleAnswer(subValue, subIndex) {
-      if (this.responseStatus == this.$consts.STATUS_DRAFT) {
+    toggleAnswer(subValue, subIndex, disabled) {
+      if (this.responseStatus == this.$consts.STATUS_DRAFT && !disabled) {
         let subAnswer = this.value.answer[subIndex].answer;
         this.value.answer[subIndex].answer = _.isEmpty(subAnswer)
           ? subValue