longitudinal report opt out changes

uwcirg · May 23, 2024 · 4861c17 · 4861c17
1 parent 4769b7a
commit 4861c17
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git a/portal/static/js/src/components/LongitudinalReport.vue b/portal/static/js/src/components/LongitudinalReport.vue
@@ -10,13 +10,12 @@
                         <span class="hard-trigger-legend" v-text="hardTriggerLegend" v-show="hasHardTriggers()"></span>
                         <span class="soft-trigger-legend" v-text="softTriggerLegend" v-show="hasSoftTriggers()"></span>
                         <span class="in-progress-legend" v-show="hasInProgressData()" v-text="inProgressLegend"></span>
-                        <span class="no-contact-legend" v-show="hasOptOutTriggers()">ⓘ (do not contact)</span>
                     </div>
                 </div>
             </div>
             <div class="table-container">
-                <span class="nav-arrow start" @click="setGoBackward()" v-show="!hasValue(errorMessage)" :class="{disabled: getToStartIndex()}">&lt;</span>
-                <span class="nav-arrow end" @click="setGoForward()" v-show="!hasValue(errorMessage)" :class="{disabled: getToEndIndex()}">&gt;</span>
+                <span class="nav-arrow start" @click="setGoBackward()" v-show="!hasValue(errorMessage)" :class="{disabled: getToStartIndex(), hide: shouldHideNav()}">&lt;</span>
+                <span class="nav-arrow end" @click="setGoForward()" v-show="!hasValue(errorMessage)" :class="{disabled: getToEndIndex(), hide: shouldHideNav()}">&gt;</span>
                 <table class="report-table" v-show="!hasValue(errorMessage)">
                     <THEAD>
                         <TH class="title">
@@ -54,6 +53,7 @@
         EMPRO_TRIGGER_STATE_OPTOUT_KEY,
         EMPRO_TRIGGER_PROCCESSED_STATES
     } from "../data/common/consts.js";
+    let resizeVisIntervalId = 0;
 	export default {
     data () {
         return {
@@ -113,9 +113,7 @@
             /*
              * display column(s) responsively based on viewport width
              */
-            if (bodyWidth >= 1400) {
-                this.maxToShow = 4;
-            } else if (bodyWidth >= 992) {
+            if (bodyWidth >= 992) {
                 this.maxToShow = 3;
             } else if (bodyWidth >= 699) {
                 this.maxToShow = 2;
@@ -124,12 +122,15 @@
             }
             return;
         },
+        shouldHideNav() {
+            return this.questionnaireDates.length <= 1;
+        },
         setNavIndexes() {
             /*
              * set initial indexes for start and end navigation buttons
              */
-            this.navEndIndex = this.maxToShow >= this.questionnaireDates.length ? this.questionnaireDates.length: this.maxToShow;
-            this.navStartIndex = 1;
+            this.navEndIndex = this.questionnaireDates.length > 0 ? this.questionnaireDates.length : 1;
+            this.navStartIndex = this.navEndIndex - this.maxToShow + 1;
         },
         setGoForward() {
             /*
@@ -327,19 +328,17 @@
                     let optionsLength = this.getQuestionOptions(entry.linkId);
                     let answerObj = {
                         q: q,
-                        a: a + (hardTriggers.length?" **": (softTriggers.length?" *": (optedOutTriggers.length? "&nbsp;&nbsp;<span class='sub'>ⓘ</span>":""))),
+                        a: a + (hardTriggers.length?" **": ((optedOutTriggers.length || softTriggers.length)?" *": (optedOutTriggers.length? "&nbsp;&nbsp;<span class='sub'>ⓘ</span>":""))),
                         linkId: entry.linkId,
                         value: answerValue,
-                        cssClass: 
-                        optedOutTriggers.length ?
-                            "warning" :
-                            //last
-                            (
-                                answerValue >= optionsLength.length ? "darkest" : 
+                        cssClass: (
+                            answerValue >= optionsLength.length ? 
+                                "darkest" : 
                                 //penultimate
-                                (answerValue >= optionsLength.length - 1 ? "darker": 
-                                (answerValue <= 1 ? "no-value": ""))
-                            )
+                                answerValue >= optionsLength.length - 1 ?
+                                    "darker" : 
+                                    (answerValue <= 1 ? "no-value": "")
+                        )
                     };
                     this.data[index].data.push(answerObj);
                     let currentDomain = "";
@@ -370,7 +369,11 @@
             }
             $(window).on("resize", () => {
                 window.requestAnimationFrame(() => {
-                    this.setInitVis();
+                    if (this.shouldHideNav()) return;
+                    clearTimeout(resizeVisIntervalId);
+                    resizeVisIntervalId = setTimeout(() => {
+                        this.setInitVis();
+                    }, 250);
                 });
             });
         },

diff --git a/portal/static/js/src/modules/TnthAjax.js b/portal/static/js/src/modules/TnthAjax.js
@@ -98,6 +98,7 @@ export default { /*global $ */
             ).fail(function() {
                 if (callback) {
                     callback({"error": DEFAULT_SERVER_DATA_ERROR});
+                    fieldHelper.showError(targetField);
                 }
             });
             return;
@@ -159,7 +160,7 @@ export default { /*global $ */
                     loadingField.animate({"opacity": 0}, __timeout, function() {
                         successField.animate({"opacity": 1}, __timeout, function() {
                             setTimeout(function() {
-                                successField.animate({"opacity": 0}, __timeout * 2);
+                                successField.animate({"opacity": 0}, __timeout * 4);
                             }, __timeout * 2);
                         });
                     });
@@ -182,7 +183,7 @@ export default { /*global $ */
                     loadingField.animate({"opacity": 0}, __timeout, function() {
                         errorField.animate({"opacity": 1}, __timeout, function() {
                             setTimeout(function() {
-                                errorField.animate({"opacity": 0}, __timeout * 2);
+                                errorField.animate({"opacity": 0}, __timeout * 4);
                             }, __timeout * 2);
                         });
                     });

diff --git a/portal/static/less/eproms.less b/portal/static/less/eproms.less
@@ -3805,11 +3805,11 @@ section.header {
     }
   }
   .answer {
-    border-radius: 32px;
+    border-radius: 50vmax;
     background: @muterColor;
     display: inline-block;
-    padding: 8px 16px;
-    min-width: 132px;
+    padding: 8px 24px;
+    min-width: 180px;
     text-align: center;
     &.warning {
       background-color: darken(@warningColor, 1%);