Fixing case and incident form fill from url (#5323)

* Fixing case and incident form fill from url

* Fix linting

---------

Co-authored-by: Jason Schroth <[email protected]>

Author: kevgliss

src/dispatch/static/dispatch/src/case/type/CaseTypeSelect.vue

@@ -37,8 +37,6 @@
 </template>
 
 <script>
-import { cloneDeep } from "lodash"
-
 import SearchUtils from "@/search/utils"
 import CaseTypeApi from "@/case/type/api"
 
@@ -48,25 +46,19 @@ export default {
   props: {
     modelValue: {
       type: Object,
-      default: function () {
-        return {}
-      },
+      default: () => ({}),
     },
     project: {
-      type: [Object],
+      type: Object,
       default: null,
     },
     hint: {
       type: String,
-      default: function () {
-        return "Case Type to associate"
-      },
+      default: () => "Case Type to associate",
     },
     label: {
       type: String,
-      default: function () {
-        return "Case Type"
-      },
+      default: () => "Case Type",
     },
   },
 
@@ -80,6 +72,7 @@ export default {
       numItems: 40,
       error: null,
       categories: [],
+      selectedCaseType: null,
       is_type_in_project: () => {
         this.validateType()
         return this.error
@@ -90,9 +83,10 @@ export default {
   computed: {
     case_type: {
       get() {
-        return cloneDeep(this.modelValue)
+        return this.selectedCaseType || this.modelValue
       },
       set(value) {
+        this.selectedCaseType = value
         this.$emit("update:modelValue", value)
         this.validateType()
       },
@@ -130,7 +124,7 @@ export default {
     },
     fetchData() {
       this.error = null
-      this.loading = "error"
+      this.loading = true
 
       let filterOptions = {
         sortBy: ["name"],
@@ -182,6 +176,14 @@ export default {
         } else {
           this.more = false
         }
+
+        // Set the selected case type if it exists in the fetched items
+        if (this.modelValue && this.modelValue.id) {
+          const selectedItem = this.items.find((item) => item.id === this.modelValue.id)
+          if (selectedItem) {
+            this.selectedCaseType = selectedItem
+          }
+        }
       })
     },
   },
@@ -190,9 +192,18 @@ export default {
     search(val) {
       val && val !== this.select && this.fetchData()
     },
-    value(val) {
-      if (!val) return
-      this.items.push(val)
+    modelValue: {
+      handler(newValue) {
+        if (newValue && newValue.id) {
+          const selectedItem = this.items.find((item) => item.id === newValue.id)
+          if (selectedItem) {
+            this.selectedCaseType = selectedItem
+          }
+        } else {
+          this.selectedCaseType = null
+        }
+      },
+      immediate: true,
     },
     case_type(newCaseType) {
       if (newCaseType) {

src/dispatch/static/dispatch/src/incident/priority/IncidentPrioritySelect.vue

@@ -1,6 +1,6 @@
 <template>
   <v-select
-    v-model="incident_priorities"
+    v-model="selectedPriority"
     :items="items"
     item-title="name"
     :item-props="(item) => ({ subtitle: item.description })"
@@ -14,8 +14,6 @@
 </template>
 
 <script>
-import { cloneDeep } from "lodash"
-
 import SearchUtils from "@/search/utils"
 import IncidentPriorityApi from "@/incident/priority/api"
 
@@ -24,12 +22,10 @@ export default {
   props: {
     modelValue: {
       type: Object,
-      default: function () {
-        return {}
-      },
+      default: () => ({}),
     },
     project: {
-      type: [Object],
+      type: Object,
       default: null,
     },
     status: {
@@ -51,9 +47,17 @@ export default {
   },
 
   computed: {
-    incident_priorities: {
+    selectedPriority: {
       get() {
-        return cloneDeep(this.modelValue)
+        if (!this.modelValue) return null
+        if (this.modelValue.id) {
+          return this.items.find((item) => item.id === this.modelValue.id) || null
+        }
+        // If we only have a name (e.g., from URL params), find by name
+        if (this.modelValue.name) {
+          return this.items.find((item) => item.name === this.modelValue.name) || null
+        }
+        return null
       },
       set(value) {
         this.$emit("update:modelValue", value)
@@ -64,7 +68,7 @@ export default {
       if (!this.project) return null
       const stablePriority = this.project.stable_priority
       if (!stablePriority) return null
-      if (this.status == "Stable" && this.modelValue.name != stablePriority.name) {
+      if (this.status == "Stable" && this.selectedPriority?.name != stablePriority.name) {
         return `Priority must be ${stablePriority.name} for Stable incidents`
       }
       return null
@@ -74,7 +78,7 @@ export default {
   methods: {
     validatePriority() {
       const project_id = this.project?.id || 0
-      const in_project = this.incident_priorities?.project?.id == project_id
+      const in_project = this.selectedPriority?.project?.id == project_id
       if (in_project) {
         this.error = true
       } else {
@@ -83,7 +87,7 @@ export default {
     },
     fetchData() {
       this.error = null
-      this.loading = "error"
+      this.loading = true
 
       let filterOptions = {
         sortBy: ["view_order"],
@@ -121,16 +125,21 @@ export default {
     },
   },
 
-  created() {
-    this.fetchData()
-    this.$watch(
-      (vm) => [vm.project, vm.status],
-      () => {
+  watch: {
+    project: {
+      handler() {
         this.fetchData()
         this.validatePriority()
-        this.$emit("update:modelValue", this.incident_priorities)
-      }
-    )
+      },
+      deep: true,
+    },
+    status() {
+      this.validatePriority()
+    },
+  },
+
+  created() {
+    this.fetchData()
   },
 }
 </script>

src/dispatch/static/dispatch/src/incident/type/IncidentTypeSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <v-select
-    v-model="incident_type"
+    v-model="selectedIncidentType"
     :items="items"
     :menu-props="{ maxHeight: '400' }"
     item-title="name"
@@ -32,7 +32,6 @@
 
 <script>
 import { cloneDeep } from "lodash"
-
 import SearchUtils from "@/search/utils"
 import IncidentTypeApi from "@/incident/type/api"
 
@@ -42,19 +41,15 @@ export default {
   props: {
     modelValue: {
       type: Object,
-      default: function () {
-        return {}
-      },
+      default: () => ({}),
     },
     project: {
-      type: [Object],
+      type: Object,
       default: null,
     },
     label: {
       type: String,
-      default: function () {
-        return "Type"
-      },
+      default: () => "Type",
     },
   },
 
@@ -65,20 +60,28 @@ export default {
       more: false,
       numItems: 5,
       error: null,
+      selectedIncidentType: null,
       is_type_in_project: () => {
         this.validateType()
         return this.error
       },
     }
   },
 
-  computed: {
-    incident_type: {
-      get() {
-        return cloneDeep(this.modelValue)
+  watch: {
+    modelValue: {
+      immediate: true,
+      handler(newValue) {
+        this.selectedIncidentType = cloneDeep(newValue)
       },
-      set(value) {
-        this.$emit("update:modelValue", value)
+    },
+    selectedIncidentType(newValue) {
+      this.$emit("update:modelValue", newValue)
+      this.validateType()
+    },
+    project: {
+      handler() {
+        this.fetchData()
         this.validateType()
       },
     },
@@ -91,7 +94,7 @@ export default {
     },
     validateType() {
       const project_id = this.project?.id || 0
-      const in_project = this.incident_type?.project?.id == project_id
+      const in_project = this.selectedIncidentType?.project?.id == project_id
       if (in_project) {
         this.error = true
       } else {
@@ -137,14 +140,6 @@ export default {
 
   created() {
     this.fetchData()
-    this.$watch(
-      (vm) => [vm.project],
-      () => {
-        this.fetchData()
-        this.validateType()
-        this.$emit("update:modelValue", this.incident_type)
-      }
-    )
   },
 }
 </script>