@wg-npm/survey-response 0.5.1 → 0.5.123

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

@@ -2,58 +2,43 @@
   <div>
     <!-- question slider -->
     <Row v-if="showQuestionScoreSlider">
-      <div style="margin-right: 134px; margin-bottom: 18px">
-        <Slider
-          style="float: left; width: 562px; margin-right: 16px"
+      <Col
+        :xs="24"
+        :sm="$rootComponent.layout === 'vertical' ? 24 : 12"
+        :xl="$rootComponent.layout === 'vertical' ? 24 : 12"
+        :md="$rootComponent.layout === 'vertical' ? 24 : 12"
+        :lg="$rootComponent.layout === 'vertical' ? 24 : 12"
+      >
+        <slider-input-number
           v-model="value.score"
           :min="question.options.minRange"
           :max="question.options.maxRange"
-          :step="sliderStep"
-          show-tips="always"
+          :slider-step="sliderStep"
+          :form-item-prop="answerProp"
           :disabled="question.options.readonly || question.options.disabled"
-        ></Slider>
-        <FormItem
-          style="display: flex"
-          :prop="`answers[${index}].score`"
-          :rules="[
-            {
-              required: question.options.required && !question.options.disabled,
-              message: t('survey_response.question.question_required'),
-            },
-          ]"
-        >
-          <InputNumber
-            style="float: left"
-            v-model="value.score"
-            :precision="question.options.decimalPlaces"
-            :min="question.options.minRange"
-            :max="question.options.maxRange"
-          >
-          </InputNumber>
-        </FormItem>
-        <div v-show="extremeValueLabelSelected">
-          <span style="float: left; margin-left: 36px">
-            {{
-              t(
-                `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.minValue`
-              )
-            }}
-          </span>
-          <span style="float: right; align-items: flex-end; margin-right: 88px">
-            {{
-              t(
-                `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.maxValue`
-              )
-            }}
-          </span>
-        </div>
-      </div>
+          :precision="question.options.decimalPlaces"
+          :show-label="extremeValueLabelSelected"
+          :required="question.options.required && !question.options.disabled"
+          :required-desc="t('survey_response.question.question_required')"
+          :min-label="
+            t(
+              `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.minValue`
+            )
+          "
+          :max-label="
+            t(
+              `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.maxValue`
+            )
+          "
+        />
+      </Col>
     </Row>
     <div
       v-else
       v-for="(subQuestion, subIndex) in question.subQuestions"
       :key="subIndex"
       class="sub-question"
+      :class="subIndex > 0 ? 'score-sub-question' : ''"
     >
       <span class="number">
         {{ question.header.number }}-{{ subQuestion.number }}.</span
@@ -61,57 +46,38 @@
       <span class="title"> {{ i18nText(subQuestion.text) }} </span>
       <!-- sub question slider -->
       <Row>
-        <div style="margin-right: 134px; margin-bottom: 18px">
-          <Slider
-            style="float: left; width: 562px; margin-right: 16px"
+        <Col
+          :xs="24"
+          :sm="$rootComponent.layout === 'vertical' ? 24 : 12"
+          :xl="$rootComponent.layout === 'vertical' ? 24 : 12"
+          :md="$rootComponent.layout === 'vertical' ? 24 : 12"
+          :lg="$rootComponent.layout === 'vertical' ? 24 : 12"
+        >
+          <slider-input-number
             v-model="value.answer[subIndex].score"
             :min="question.options.minRange"
             :max="question.options.maxRange"
-            :step="sliderStep"
-            show-tips="always"
+            :slider-step="sliderStep"
+            :form-item-prop="subAnswerProp(subIndex)"
             :disabled="
               subQuestion.options.readonly || question.options.disabled
             "
-          ></Slider>
-          <FormItem
-            style="display: flex"
-            :prop="`answers[${index}].answer[${subIndex}].score`"
-            :rules="[
-              {
-                required:
-                  question.options.required && !question.options.disabled,
-                message: t('survey_response.question.question_required'),
-              },
-            ]"
-          >
-            <InputNumber
-              style="float: left"
-              v-model="value.answer[subIndex].score"
-              :precision="question.options.decimalPlaces"
-              :min="question.options.minRange"
-              :max="question.options.maxRange"
-            >
-            </InputNumber>
-          </FormItem>
-          <div v-show="extremeValueLabelSelected">
-            <span style="float: left; margin-left: 36px">
-              {{
-                t(
-                  `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.minValue`
-                )
-              }}
-            </span>
-            <span
-              style="float: right; align-items: flex-end; margin-right: 88px"
-            >
-              {{
-                t(
-                  `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.maxValue`
-                )
-              }}
-            </span>
-          </div>
-        </div>
+            :precision="question.options.decimalPlaces"
+            :show-label="extremeValueLabelSelected"
+            :required="question.options.required && !question.options.disabled"
+            :required-desc="t('survey_response.question.question_required')"
+            :min-label="
+              t(
+                `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.minValue`
+              )
+            "
+            :max-label="
+              t(
+                `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.maxValue`
+              )
+            "
+          />
+        </Col>
       </Row>
     </div>
   </div>
@@ -120,7 +86,8 @@
 <script lang="ts">
 import Vue from "vue";
 import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
-import { Row, Slider, FormItem, InputNumber } from "view-design";
+import { Row, Col } from "view-design";
+import SliderInputNumber from "../../../components/slider-input-number.vue";
 import _ from "lodash";
 
 export default Vue.extend({
@@ -130,9 +97,8 @@ export default Vue.extend({
 
   components: {
     Row,
-    Slider,
-    FormItem,
-    InputNumber,
+    Col,
+    SliderInputNumber,
   },
   props: {
     question: {
@@ -140,6 +106,12 @@ export default Vue.extend({
       required: true,
     },
     index: Number,
+    surveyIndex: Number,
+    isMoreSurvey: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     answer: {
       type: Object,
       required: true,
@@ -173,8 +145,19 @@ export default Vue.extend({
       this.value.answer.push(_answer);
     });
   },
-  methods: {},
+  methods: {
+    subAnswerProp(subIndex) {
+      return this.isMoreSurvey
+        ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].answer[${subIndex}].score`
+        : `answers[${this.index}].answer[${subIndex}].score`;
+    },
+  },
   computed: {
+    answerProp() {
+      return this.isMoreSurvey
+        ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].score`
+        : `answers[${this.index}].score`;
+    },
     showQuestionScoreSlider() {
       return !(
         this.question.subQuestions && this.question.subQuestions.length > 0
@@ -194,6 +177,15 @@ export default Vue.extend({
         _.forEach(this.value.answer, (a) => (a.score = 0));
       }
     },
+    answer(n) {
+      this.value = n;
+    },
   },
 });
 </script>
+
+<style lang="less" scoped>
+.score-sub-question {
+  padding-top: 24px;
+}
+</style>

package/src/components/question/type/short-answer.vue

@@ -1,36 +1,19 @@
 <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
-        v-if="question.options && question.options.wordLimit"
+      <quill-rich-text
         v-model.trim="value.answer"
-        type="textarea"
-        :rows="4"
-        show-word-limit
+        :disabled="readonly || question.options.readonly"
         :placeholder="placeholder"
         :maxlength="question.options.wordLimit"
-        :disabled="question.options.readonly"
-      />
-      <Input
-        v-else
-        v-model.trim="value.answer"
-        type="textarea"
-        :rows="4"
-        :placeholder="placeholder"
-        :disabled="question.options.readonly"
-      />
+      ></quill-rich-text>
+      <div></div>
     </FormItem>
   </div>
 </template>
@@ -38,19 +21,22 @@
 <script lang="ts">
 import Vue from "vue";
 import { FormItem, Input } from "view-design";
+import QuestionMixin from "../../../mixins/question-mixin";
+import QuillRichText from "./quill-rich-text.vue";
 
 export default Vue.extend({
   name: "short-answer",
+  mixins: [QuestionMixin],
   components: {
+    QuillRichText,
     FormItem,
-    Input,
   },
+  inject: ["$rootComponent"],
   props: {
     question: {
       type: Object,
       required: true,
     },
-    index: Number,
     answer: {
       type: Object,
       required: true,

package/src/components/question/type/single-selection.vue

@@ -1,6 +1,6 @@
 <template>
   <FormItem
-    :prop="`answers[${index}].answer`"
+    :prop="answerProp"
     :rules="{
       required: question.options.required && !question.options.disabled,
       message: t('survey_response.question.question_required'),
@@ -11,18 +11,18 @@
       @on-change="selChange"
       class="question-choice"
     >
-      <Row type="flex" justify="start" :gutter="60">
+      <Row :type="flexOrBlock" justify="start" :gutter="60" :style="{'display':(isMobile()?'inline-block':'flex')}">
         <Col
           v-for="choice in question.choices"
           :key="choice.id"
           :class="optionLayout"
-          style="display: flex"
+          :style="{'display':(isMobile()?'inline-block':'flex')}"
         >
-          <Radio
-            :disabled="question.options.readonly || question.options.disabled"
-            :label="choice.id"
-            :key="choice.id"
-            @click.native="
+          <Radio :style="{'display':(isMobile()?'inline-block':'flex'),'align-items':(isMobile()?'':'center')}"
+                 :disabled="question.options.readonly || question.options.disabled"
+                 :label="choice.id"
+                 :key="choice.id"
+                 @click.native="
               toggleAnswer($event, choice.id, question.options.disabled)
             "
           >
@@ -39,7 +39,7 @@
               v-if="
                 choice.id === inputAnswer.choiceId && choice.id === value.answer
               "
-              :prop="`answers[${index}].inputAnswers[${inputIndex}].inputText`"
+              :prop="inputAnswerProp(inputIndex)"
               :rules="[
                 {
                   required: true,
@@ -56,11 +56,10 @@
                 },
               ]"
             >
-              <Input
-                :disabled="
-                  question.options.readonly || question.options.disabled
-                "
-                v-model.trim="inputAnswer.inputText"
+              <Span v-if="responseStatus=='ENABLED'">
+                    {{ inputAnswer.inputText }}</Span>
+              <Input v-if="responseStatus=='DRAFT'"
+                     v-model.trim="inputAnswer.inputText"
               />
             </FormItem>
           </div>
@@ -71,120 +70,126 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
-import {
-  Col,
-  FormItem,
-  Icon,
-  Radio,
-  RadioGroup,
-  Row,
-  Input,
-} from "view-design";
-import _ from "lodash";
-import { SurveyLayout } from "@wg-npm/survey-core";
-
-export default Vue.extend({
-  name: "single-selection",
-  components: {
+  import Vue from "vue";
+  import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
+  import {
+    Col,
     FormItem,
-    RadioGroup,
+    Icon,
     Radio,
+    RadioGroup,
     Row,
-    Col,
-    Icon,
-    Input,
-  },
-  mixins: [OptionLayoutMixin],
-  inject: ["responseStatus", "$rootComponent"],
-  props: {
-    question: {
-      type: Object,
-      required: true,
-    },
-    index: Number,
-    answer: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      value: this.answer,
-      // @ts-ignore
-      choiceClasses: this.buildChoiceClasses(),
-    };
-  },
-  watch: {
-    "question.options.layout"() {
-      this.choiceClasses = this.buildChoiceClasses();
-    },
-    answer(n) {
-      this.value = n;
-    },
-  },
-  methods: {
-    selChange(id) {
-      // @ts-ignore
-      _.each(this.question.choices, (choice) => {
-        if (choice.id == id) {
-          // @ts-ignore
-          this.answer.score = parseInt(choice?.options?.score ?? 0);
-          this.answer.star = parseInt(choice?.options?.starCount ?? 0);
-        }
-      });
+    Input
+  } from "view-design";
+  import _ from "lodash";
+  import { SurveyLayout } from "@wg-npm/survey-core";
+  import QuestionMixin from "../../../mixins/question-mixin";
+
+  export default Vue.extend({
+    name: "single-selection",
+    components: {
+      FormItem,
+      RadioGroup,
+      Radio,
+      Row,
+      Col,
+      Icon,
+      Input
     },
-    buildChoiceClasses() {
-      return [
-        `question-choice`,
-        `question-choice-${_.lowerCase(
-          this.question.options.layout || SurveyLayout.HORIZONTAL
-        )}`,
-      ];
+    mixins: [OptionLayoutMixin, QuestionMixin],
+    inject: ["responseStatus", "$rootComponent"],
+    props: {
+      question: {
+        type: Object,
+        required: true
+      },
+      answer: {
+        type: Object,
+        required: true
+      }
     },
-    haveStar(choice) {
-      return choice.options?.star ?? false;
+    data() {
+      return {
+        value: this.answer,
+        // @ts-ignore
+        choiceClasses: this.buildChoiceClasses()
+      };
     },
-    toggleAnswer(e, value, disabled) {
-      if (
-        this.question.options.readonly ||
-        disabled ||
-        e.target.tagName !== "INPUT"
-      ) {
-        return;
+    watch: {
+      "question.options.layout"() {
+        this.choiceClasses = this.buildChoiceClasses();
+      },
+      answer(n) {
+        this.value = n;
       }
-      if (this.responseStatus == this.$consts.STATUS_DRAFT) {
-        if (this.value.answer && this.value.answer === value) {
-          this.value.answer = null;
-          _.forEach(this.value.inputAnswers, (input) => {
-            input.inputText = null;
-          });
+    },
+    computed: {
+      flexOrBlock() {
+        if (this.isMobile()) {
+          return "inline-block";
         } else {
-          this.value.answer = value;
+          return "flex";
         }
       }
-      this.$emit("singleQuestion", {
-        questionId: this.question.id,
-        choiceId: this.value.answer,
-      });
     },
-  },
-});
+    methods: {
+      inputAnswerProp(inputIndex) {
+        return this.isMoreSurvey
+          ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].inputAnswers[${inputIndex}].inputText`
+          : `answers[${this.index}].inputAnswers[${inputIndex}].inputText`;
+      },
+      selChange(id) {
+        // @ts-ignore
+        _.each(this.question.choices, (choice) => {
+          if (choice.id == id) {
+            // @ts-ignore
+            this.answer.score = parseInt(choice?.options?.score ?? 0);
+            this.answer.star = parseInt(choice?.options?.starCount ?? 0);
+          }
+        });
+      },
+      buildChoiceClasses() {
+        return [
+          `question-choice`,
+          `question-choice-${_.lowerCase(
+            this.question.options.layout || SurveyLayout.HORIZONTAL
+          )}`
+        ];
+      },
+      haveStar(choice) {
+        return choice.options?.star ?? false;
+      },
+      toggleAnswer(e, value, disabled) {
+        if (
+          this.question.options.readonly ||
+          disabled ||
+          e.target.tagName !== "INPUT"
+        ) {
+          return;
+        }
+        if (this.responseStatus == this.$consts.STATUS_DRAFT) {
+          if (this.value.answer && this.value.answer === value) {
+            this.value.answer = null;
+            _.forEach(this.value.inputAnswers, (input) => {
+              input.inputText = null;
+            });
+          } else {
+            this.value.answer = value;
+          }
+        }
+        this.$emit("singleQuestion", {
+          questionId: this.question.id,
+          choiceId: this.value.answer
+        });
+      }
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-.ivu-row-flex-start {
-  align-items: center;
-}
-.ivu-radio-group-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
+  .choice-title {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
 
-.choice-title {
-  margin-left: 8px;
-  margin-right: 8px;
-}
 </style>