Merge pull request #621 from AmericanWhitewater/feature/restore-corre…

…lation-comments Feature/restore correlation comments
AmericanWhitewater · Jan 5, 2025 · 40162f1 · 40162f1
2 parents 345edb1 + ca6cf50
commit 40162f1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 28 deletions.
diff --git a/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue b/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue
@@ -3,13 +3,7 @@
     <div class="mb-xs">
       <h3>{{ correlation.gaugeInfo.name }} ({{ correlation.gaugeInfo.gaugeSource }}-{{  correlation.gaugeInfo.gaugeSourceIdentifier }})</h3>
     </div>
-    <div class="gauge-subheader">
-      <div>
-        <div>
-          <label for="isPrimary">Primary Gauge</label>
-          <input v-model="isPrimary" type="checkbox" :disabled="!editing" >
-        </div>
-      </div>
+    <div class="gauge-subheader mb-spacing-md">
       <div>
         <template v-if="editing">
           <cv-button
@@ -54,7 +48,6 @@
       </div>
     </div>
     <div>
-      <h4>Boating flow ranges</h4>
       <div v-if="correlation.migrationErrorExplanation" class="migration-errors">
         <p>
           <em>
@@ -71,26 +64,46 @@
           <li v-for="(e, i) in errors" :key="`error-${i}`" v-text="e" />
         </ul>
       </div>
-      <p>
-        <em>
-          Note: all range values are now required.
-        </em>
-      </p>
-      <div>
-        <cv-select
-          v-if="editing"
-          v-model="localCorrelationDetails.metric"
-          inline
-          label="Flow Metric"
-        >
-          <cv-select-option
-            v-for="metric in correlationMetrics"
-            :key="metric.key"
-            :value="metric.key"
-            >{{ metric.name }}
-          </cv-select-option>
-        </cv-select>
-        <label v-else for="metric">Flow Metric: {{ correlationDetails ? correlationMetrics[correlationDetails.metric].name : "none set" }}</label>
+
+      <div class="correlation-fields">
+        <div>
+          <label for="isPrimary" class="bx--label">Primary gauge</label>
+          <input v-model="isPrimary" type="checkbox" :disabled="!editing" >
+        </div>
+
+        <div class="mb-spacing-sm">
+          <cv-text-input v-if="editing" v-model="comment" label="Correlation comment:" class="correlation-comment" />
+          <template v-else-if="comment">
+            <label for="comment" class="bx--label">Correlation comment:</label>
+            <p v-text="comment" />
+          </template>
+        </div>
+
+        <hr>
+
+        <h4>Boating flow ranges</h4>
+        <p class="mb-spacing-md">
+          <em>
+            Note: all range values are now required and metric can only be set when flow ranges are set.
+          </em>
+        </p>
+
+        <div class="mb-spacing-sm">
+          <cv-select
+            v-if="editing"
+            v-model="localCorrelationDetails.metric"
+            inline
+            label="Flow Metric"
+          >
+            <cv-select-option
+              v-for="metric in correlationMetrics"
+              :key="metric.key"
+              :value="metric.key"
+              >{{ metric.name }}
+            </cv-select-option>
+          </cv-select>
+          <label v-else for="metric" class="bx--label">Flow Metric: {{ correlationDetails ? correlationMetrics[correlationDetails.metric].name : "none set" }}</label>
+        </div>
       </div>
 
       <p v-if="!correlationDetails && !editing">
@@ -189,6 +202,7 @@ export default {
         beginHighRunnable: null,
         endHighRunnable: null,
       },
+      comment: null,
       isPrimary: undefined,
       saving: false,
       errors: [],
@@ -270,6 +284,7 @@ export default {
         gaugeSource: this.correlation?.gaugeInfo.gaugeSource,
         gaugeSourceIdentifier: this.correlation?.gaugeInfo.gaugeSourceIdentifier,
         forcePrimary: this.isPrimary ? 'force-primary' : null,
+        comment: this.comment,
         correlationDetails: processedDetails || null
       }
     },
@@ -388,6 +403,7 @@ export default {
       }
 
       this.isPrimary = this.correlation.isPrimary;
+      this.comment = this.correlation.comment;
     }
   }
 }
@@ -430,6 +446,13 @@ export default {
     }
   }
 
+  .correlation-fields {
+    // carbon sets this transparent, but since it's on a grey background we need them visible
+    .cv-select .bx--select-input__wrapper select, .bx--text-input {
+      background-color: #ffffff;
+    }
+  }
+
   .ranges {
     align-items: center;
     flex-direction: column;

diff --git a/src/app/views/river-detail/components/flow-tab/flow-tab.vue b/src/app/views/river-detail/components/flow-tab/flow-tab.vue
@@ -97,6 +97,11 @@
                         <cv-skeleton-text headline/>
                       </template>
                       <template v-else>
+                        <div v-if="gauge.comment" class="gauge-comment bx--tile bx--type-caption">
+                          <label class="bx--label">Correlation comment</label>
+                          <br>
+                          <span v-text="gauge.comment" />
+                        </div>
                         <div v-if="gauge.gaugeInfo.externalSourceLinks" class="gauge-links">
                           <h6 class="mb-spacing-sm">View at source:</h6>
                           <cv-link v-if="gauge.gaugeInfo.externalSourceLinks.sourceLink"