From 6448c068736d66494b22072002a475fb801fa208 Mon Sep 17 00:00:00 2001
From: David Whittaker <84562015+whitdog47@users.noreply.github.com>
Date: Wed, 9 Oct 2024 15:16:47 -0700
Subject: [PATCH] fix(ui/ux): use the custom incident severity color and the
 custom priority and severity colors for cases (#5303)

---
 .../dispatch/src/case/CaseSummaryTable.vue    |  4 +--
 .../static/dispatch/src/case/Table.vue        |  8 ++---
 .../dispatch/src/case/TableExportDialog.vue   | 10 +++++--
 .../src/case/priority/CasePriority.vue        | 13 ++-------
 .../src/case/severity/CaseSeverity.vue        | 29 +++++--------------
 .../src/incident/IncidentSummaryTable.vue     |  4 +--
 .../src/incident/ReportReceiptResources.vue   |  5 +++-
 .../static/dispatch/src/incident/Table.vue    |  4 +--
 .../src/incident/TableExportDialog.vue        | 10 +++++--
 .../incident/severity/IncidentSeverity.vue    | 29 +++++--------------
 .../src/search/SearchFilterCreateDialog.vue   |  5 +++-
 .../dispatch/src/task/TableExportDialog.vue   |  5 +++-
 .../dispatch/src/task/TaskSummaryTable.vue    |  4 +--
 13 files changed, 57 insertions(+), 73 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/case/CaseSummaryTable.vue b/src/dispatch/static/dispatch/src/case/CaseSummaryTable.vue
index 0bea914b3a95..e6a186679bca 100644
--- a/src/dispatch/static/dispatch/src/case/CaseSummaryTable.vue
+++ b/src/dispatch/static/dispatch/src/case/CaseSummaryTable.vue
@@ -1,7 +1,7 @@
 <template>
   <v-data-table :headers="headers" :items="items" :loading="loading">
-    <template #item.case_priority.name="{ value }">
-      <case-priority :priority="value" />
+    <template #item.case_priority.name="{ item, value }">
+      <case-priority :priority="value" :color="item.case_priority.color" />
     </template>
     <template #item.status="{ item, value }">
       <case-status :status="value" :id="item.id" />
diff --git a/src/dispatch/static/dispatch/src/case/Table.vue b/src/dispatch/static/dispatch/src/case/Table.vue
index c65451da1a5b..3485aeb1f0d9 100644
--- a/src/dispatch/static/dispatch/src/case/Table.vue
+++ b/src/dispatch/static/dispatch/src/case/Table.vue
@@ -65,11 +65,11 @@
               'items-per-page-options': [10, 25, 50, 100],
             }"
           >
-            <template #item.case_severity.name="{ value }">
-              <case-severity :severity="value" />
+            <template #item.case_severity.name="{ item, value }">
+              <case-severity :severity="value" :color="item.case_severity.color" />
             </template>
-            <template #item.case_priority.name="{ value }">
-              <case-priority :priority="value" />
+            <template #item.case_priority.name="{ item, value }">
+              <case-priority :priority="value" :color="item.case_priority.color" />
             </template>
             <template #item.status="{ item }">
               <case-status
diff --git a/src/dispatch/static/dispatch/src/case/TableExportDialog.vue b/src/dispatch/static/dispatch/src/case/TableExportDialog.vue
index 99a6b216d606..60fb16242f0f 100644
--- a/src/dispatch/static/dispatch/src/case/TableExportDialog.vue
+++ b/src/dispatch/static/dispatch/src/case/TableExportDialog.vue
@@ -78,10 +78,16 @@
                 :loading="previewRowsLoading"
               >
                 <template #item.case_severity.name="{ item }">
-                  <case-severity :severity="item.case_severity.name" />
+                  <case-severity
+                    :severity="item.case_severity.name"
+                    :color="item.case_severity.color"
+                  />
                 </template>
                 <template #item.case_priority.name="{ item }">
-                  <case-priority :priority="item.case_priority.name" />
+                  <case-priority
+                    :priority="item.case_priority.name"
+                    :color="item.case_priority.color"
+                  />
                 </template>
                 <template #item.status="{ item }">
                   <case-status :status="item.status" :id="item.id" />
diff --git a/src/dispatch/static/dispatch/src/case/priority/CasePriority.vue b/src/dispatch/static/dispatch/src/case/priority/CasePriority.vue
index 0e71858b9098..a13c82a750a1 100644
--- a/src/dispatch/static/dispatch/src/case/priority/CasePriority.vue
+++ b/src/dispatch/static/dispatch/src/case/priority/CasePriority.vue
@@ -13,17 +13,10 @@ export default {
       type: String,
       required: true,
     },
-  },
 
-  computed: {
-    color() {
-      return (
-        {
-          Low: "green",
-          Medium: "orange",
-          High: "red",
-        }[this.priority] || "red"
-      )
+    color: {
+      type: String,
+      default: "grey",
     },
   },
 }
diff --git a/src/dispatch/static/dispatch/src/case/severity/CaseSeverity.vue b/src/dispatch/static/dispatch/src/case/severity/CaseSeverity.vue
index e148b1c16f26..9fd0b8ab5c73 100644
--- a/src/dispatch/static/dispatch/src/case/severity/CaseSeverity.vue
+++ b/src/dispatch/static/dispatch/src/case/severity/CaseSeverity.vue
@@ -1,27 +1,7 @@
 <template>
   <div class="pl-5">
-    <div v-if="severity == 'Low'">
-      <v-badge bordered color="green" dot location="left" offset-x="-10" offset-y="12">
-        {{ severity }}
-      </v-badge>
-    </div>
-    <div v-else-if="severity == 'Medium'">
-      <v-badge bordered color="orange" dot location="left" offset-x="-10" offset-y="12">
-        {{ severity }}
-      </v-badge>
-    </div>
-    <div v-else-if="severity == 'High'">
-      <v-badge bordered color="red" dot location="left" offset-x="-10" offset-y="12">
-        {{ severity }}
-      </v-badge>
-    </div>
-    <div v-else-if="severity == 'Critical'">
-      <v-badge bordered color="purple" dot location="left" offset-x="-10" offset-y="12">
-        {{ severity }}
-      </v-badge>
-    </div>
-    <div v-else>
-      <v-badge bordered color="grey" dot location="left" offset-x="-10" offset-y="12">
+    <div>
+      <v-badge bordered :color="color" dot location="left" offset-x="-10" offset-y="12">
         {{ severity }}
       </v-badge>
     </div>
@@ -37,6 +17,11 @@ export default {
       type: String,
       required: true,
     },
+
+    color: {
+      type: String,
+      default: "grey",
+    },
   },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/incident/IncidentSummaryTable.vue b/src/dispatch/static/dispatch/src/incident/IncidentSummaryTable.vue
index 00bbece37fd4..4dbbf869c940 100644
--- a/src/dispatch/static/dispatch/src/incident/IncidentSummaryTable.vue
+++ b/src/dispatch/static/dispatch/src/incident/IncidentSummaryTable.vue
@@ -1,7 +1,7 @@
 <template>
   <v-data-table hover :headers="headers" :items="items" :loading="loading">
-    <template #item.incident_priority.name="{ value }">
-      <incident-priority :priority="value" />
+    <template #item.incident_priority.name="{ item, value }">
+      <incident-priority :priority="value" :color="item.incident_priority.color" />
     </template>
     <template #item.status="{ item, value }">
       <incident-status :status="value" :id="item.id" />
diff --git a/src/dispatch/static/dispatch/src/incident/ReportReceiptResources.vue b/src/dispatch/static/dispatch/src/incident/ReportReceiptResources.vue
index 6847f13842f3..13367fcedbd6 100644
--- a/src/dispatch/static/dispatch/src/incident/ReportReceiptResources.vue
+++ b/src/dispatch/static/dispatch/src/incident/ReportReceiptResources.vue
@@ -22,7 +22,10 @@
             <v-list-item>
               <v-list-item-title>Priority</v-list-item-title>
               <v-list-item-subtitle class="text-right">
-                <incident-priority :priority="incident_priority.name" />
+                <incident-priority
+                  :priority="incident_priority.name"
+                  :color="incident_priority.color"
+                />
               </v-list-item-subtitle>
             </v-list-item>
             <v-list-item>
diff --git a/src/dispatch/static/dispatch/src/incident/Table.vue b/src/dispatch/static/dispatch/src/incident/Table.vue
index 2418fcdbd739..090e93c7b273 100644
--- a/src/dispatch/static/dispatch/src/incident/Table.vue
+++ b/src/dispatch/static/dispatch/src/incident/Table.vue
@@ -65,8 +65,8 @@
                 {{ value }}
               </v-chip>
             </template>
-            <template #item.incident_severity.name="{ value }">
-              <incident-severity :severity="value" />
+            <template #item.incident_severity.name="{ item, value }">
+              <incident-severity :severity="value" :color="item.incident_severity.color" />
             </template>
             <template #item.incident_priority.name="{ item, value }">
               <incident-priority :priority="value" :color="item.incident_priority.color" />
diff --git a/src/dispatch/static/dispatch/src/incident/TableExportDialog.vue b/src/dispatch/static/dispatch/src/incident/TableExportDialog.vue
index 5f199d7bd4f9..188bf02d8d71 100644
--- a/src/dispatch/static/dispatch/src/incident/TableExportDialog.vue
+++ b/src/dispatch/static/dispatch/src/incident/TableExportDialog.vue
@@ -79,10 +79,16 @@
                 :loading="previewRowsLoading"
               >
                 <template #item.incident_severity.name="{ item }">
-                  <incident-severity :severity="item.incident_severity.name" />
+                  <incident-severity
+                    :severity="item.incident_severity.name"
+                    :color="item.incident_severity.color"
+                  />
                 </template>
                 <template #item.incident_priority.name="{ item }">
-                  <incident-priority :priority="item.incident_priority.name" />
+                  <incident-priority
+                    :priority="item.incident_priority.name"
+                    :color="item.incident_priority.color"
+                  />
                 </template>
                 <template #item.status="{ item }">
                   <incident-status :status="item.status" :id="item.id" />
diff --git a/src/dispatch/static/dispatch/src/incident/severity/IncidentSeverity.vue b/src/dispatch/static/dispatch/src/incident/severity/IncidentSeverity.vue
index b81c710d7aeb..2f44a8aadaef 100644
--- a/src/dispatch/static/dispatch/src/incident/severity/IncidentSeverity.vue
+++ b/src/dispatch/static/dispatch/src/incident/severity/IncidentSeverity.vue
@@ -1,27 +1,7 @@
 <template>
   <div class="pl-5">
-    <div v-if="severity == 'Low'">
-      <v-badge bordered color="green" dot location="left" offset-x="-10" offset-y="12">
-        {{ severity }}
-      </v-badge>
-    </div>
-    <div v-else-if="severity == 'Medium'">
-      <v-badge bordered color="orange" dot location="left" offset-x="-10" offset-y="12">
-        {{ severity }}
-      </v-badge>
-    </div>
-    <div v-else-if="severity == 'High'">
-      <v-badge bordered color="red" dot location="left" offset-x="-10" offset-y="12">
-        {{ severity }}
-      </v-badge>
-    </div>
-    <div v-else-if="severity == 'Critical'">
-      <v-badge bordered color="purple" dot location="left" offset-x="-10" offset-y="12">
-        {{ severity }}
-      </v-badge>
-    </div>
-    <div v-else>
-      <v-badge bordered color="grey" dot location="left" offset-x="-10" offset-y="12">
+    <div>
+      <v-badge bordered :color="color" dot location="left" offset-x="-10" offset-y="12">
         {{ severity }}
       </v-badge>
     </div>
@@ -37,6 +17,11 @@ export default {
       type: String,
       required: true,
     },
+
+    color: {
+      type: String,
+      default: "grey",
+    },
   },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/search/SearchFilterCreateDialog.vue b/src/dispatch/static/dispatch/src/search/SearchFilterCreateDialog.vue
index dc076b6798f4..60ed249fc391 100644
--- a/src/dispatch/static/dispatch/src/search/SearchFilterCreateDialog.vue
+++ b/src/dispatch/static/dispatch/src/search/SearchFilterCreateDialog.vue
@@ -146,7 +146,10 @@
                   :loading="previewRowsLoading"
                 >
                   <template #item.incident_priority.name="{ item }">
-                    <incident-priority :priority="item.incident_priority.name" />
+                    <incident-priority
+                      :priority="item.incident_priority.name"
+                      :color="item.incident_priority.color"
+                    />
                   </template>
                   <template #item.status="{ item }">
                     <incident-status :status="item.status" :id="item.id" />
diff --git a/src/dispatch/static/dispatch/src/task/TableExportDialog.vue b/src/dispatch/static/dispatch/src/task/TableExportDialog.vue
index dd3e8076cc89..a44c07591d0e 100644
--- a/src/dispatch/static/dispatch/src/task/TableExportDialog.vue
+++ b/src/dispatch/static/dispatch/src/task/TableExportDialog.vue
@@ -81,7 +81,10 @@
                   <incident-status :status="item.incident.status" :id="item.id" />
                 </template>
                 <template #item.incident_priority.name="{ item }">
-                  <incident-priority :priority="item.incident.incident_priority.name" />
+                  <incident-priority
+                    :priority="item.incident.incident_priority.name"
+                    :color="item.incident.incident_priority.color"
+                  />
                 </template>
                 <template #item.creator.individual_contact.name="{ item }">
                   <participant :participant="item.creator" />
diff --git a/src/dispatch/static/dispatch/src/task/TaskSummaryTable.vue b/src/dispatch/static/dispatch/src/task/TaskSummaryTable.vue
index db05f9b7cbf1..2d4cad9a5652 100644
--- a/src/dispatch/static/dispatch/src/task/TaskSummaryTable.vue
+++ b/src/dispatch/static/dispatch/src/task/TaskSummaryTable.vue
@@ -11,8 +11,8 @@
         {{ value }}
       </v-chip>
     </template>
-    <template #item.incident_priority.name="{ value }">
-      <incident-priority :priority="value" />
+    <template #item.incident_priority.name="{ item, value }">
+      <incident-priority :priority="value" :color="item.incident_priority.color" />
     </template>
     <template #item.creator="{ value }">
       <participant :participant="value" />