✨ Visualization of write-in fields in Review (#363)

Parent issue: sequentech/meta#151
sequentech · Jul 20, 2023 · 726b210 · 726b210
1 parent 8026390
commit 726b210
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/avBooth/review-ballot-v2-directive/review-ballot-v2-directive.html b/avBooth/review-ballot-v2-directive/review-ballot-v2-directive.html
@@ -74,7 +74,8 @@ <h1 aria-level="2" class="text-brand-success question-title">
               'flex-col-12': (question.extra_options.answer_group_columns_size === 12),
               'flex-col-6': (question.extra_options.answer_group_columns_size === 6),
               'flex-col-4': (question.extra_options.answer_group_columns_size === 4),
-              'flex-col-3': (question.extra_options.answer_group_columns_size === 3)
+              'flex-col-3': (question.extra_options.answer_group_columns_size === 3),
+              'empty-category': !category.title
             }"
           >
           </div>

diff --git a/.../simultaneous-question-answer-v2-directive/simultaneous-question-answer-v2-directive.html b/.../simultaneous-question-answer-v2-directive/simultaneous-question-answer-v2-directive.html
@@ -86,11 +86,13 @@
           ng-click="$event.stopPropagation()"
         />
 
-        <div class="extra-field-writeins-wrapper">
+        <div
+          class="extra-field-writeins-wrapper"
+          ng-if="(!hideCheck() || !showWriteInString) && withWriteInConfig"
+        >
           <div
             class="write-in-input-wrapper"
             ng-repeat="(fieldId, field) in answer.writeInFields"
-            ng-if="!hideCheck() && withWriteInConfig"
           >
             <div
               class="write-in-label"
@@ -100,6 +102,7 @@
             </div>
             <input
               type="text"
+              ng-readonly="!!hideCheck()"
               class="form-control write-in-extra-field-input"
               autocomplete="off"
               id="question_{{question.index}}_answer_{{answer.id}}_{{field.id}}"
@@ -121,13 +124,13 @@
         <span
           class="answer-text"
           ng-i18next="avBooth.showWriteIn"
-          ng-if="!!hideCheck()"
+          ng-if="!!hideCheck() && showWriteInString"
         ></span>
 
         <span
           id="question_{{question.index}}_answer_blank"
           class="answer-text"
-          ng-if="!!hideCheck()"
+          ng-if="!!hideCheck() && (!isWriteIn || showWriteInString)"
         >{{answer | customI18n : 'text'}}</span>
         <div 
           class="bytes-left help-block"

diff --git a/...th/simultaneous-question-answer-v2-directive/simultaneous-question-answer-v2-directive.js b/...th/simultaneous-question-answer-v2-directive/simultaneous-question-answer-v2-directive.js
@@ -29,7 +29,7 @@ angular.module('avBooth')
       function interpolateWriteIn(template, fields) {
         var interpolatedText = template;
         Object.values(fields).map(function (field) {
-          var regex = new RegExp(`{${field.id}}`, "g");
+          var regex = new RegExp("{" + field.id + "}", "g");
           interpolatedText = interpolatedText.replace(regex, _.isString(field.value)? field.value : "");
         });
 
@@ -47,6 +47,10 @@ angular.module('avBooth')
         scope.withWriteInConfig = _.isObject(scope.question.extra_options) &&
           _.isObject(scope.question.extra_options.write_in_config);
 
+        scope.showWriteInString = !scope.question.extra_options ||
+          !scope.question.extra_options.write_in_config || 
+          scope.question.extra_options.write_in_config.review_screen_presentation === "string";
+
         if (scope.isWriteIn && scope.writeInTextChange) 
         {
           scope.$watch(
@@ -77,7 +81,7 @@ angular.module('avBooth')
             // watch changes for the write-in field values to update the templated text
             writeInFields.map(function (field) {
               scope.$watch(
-                `answer.writeInFields.${field.id}.value`,
+                "answer.writeInFields." + field.id + ".value",
                 function (newValue,_oldValue)
                 {
                   if (_.isUndefined(newValue)) {

diff --git a/.../simultaneous-question-answer-v2-directive/simultaneous-question-answer-v2-directive.less b/.../simultaneous-question-answer-v2-directive/simultaneous-question-answer-v2-directive.less
@@ -56,6 +56,17 @@
       font-weight: 400;
       color: black;
       height: unset;
+      background-color: inherit;
+    }
+
+    .write-in-extra-field-input.form-control[readonly] {
+      &:hover {
+        cursor: text;
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
     }
 
     .write-in-help {