Fixing case/incident report selects. (#5332)

src/dispatch/static/dispatch/src/case/priority/CasePrioritySelect.vue

@@ -1,6 +1,6 @@
 <template>
   <v-select
-    v-model="case_priority"
+    v-model="selectedPriority"
     :items="items"
     item-title="name"
     :menu-props="{ maxHeight: '400' }"
@@ -14,7 +14,7 @@
     <template #item="data">
       <v-list-item v-bind="data.props" :title="null">
         <v-list-item-title>{{ data.item.raw.name }}</v-list-item-title>
-        <v-list-item-subtitle :title="data.item.raw.description">
+        <v-list-item-subtitle>
           {{ data.item.raw.description }}
         </v-list-item-subtitle>
       </v-list-item>
@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import { cloneDeep } from "lodash"
-
 import SearchUtils from "@/search/utils"
 import CasePriorityApi from "@/case/priority/api"
 
@@ -33,12 +31,10 @@ export default {
   props: {
     modelValue: {
       type: Object,
-      default: function () {
-        return {}
-      },
+      default: () => ({}),
     },
     project: {
-      type: [Object],
+      type: Object,
       default: null,
     },
   },
@@ -48,6 +44,7 @@ export default {
       loading: false,
       items: [],
       error: null,
+      lastProjectId: null,
       is_priority_in_project: () => {
         this.validatePriority()
         return this.error
@@ -56,9 +53,16 @@ export default {
   },
 
   computed: {
-    case_priority: {
+    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 (this.modelValue.name) {
+          return this.items.find((item) => item.name === this.modelValue.name) || null
+        }
+        return null
       },
       set(value) {
         this.$emit("update:modelValue", value)
@@ -67,7 +71,7 @@ export default {
     },
     show_error() {
       let items_names = this.items.map((item) => item.name)
-      let selected_item = this.case_priority?.name || ""
+      let selected_item = this.selectedPriority?.name || ""
       if (items_names.includes(selected_item) || selected_item == "") {
         return null
       }
@@ -77,15 +81,8 @@ export default {
 
   methods: {
     validatePriority() {
-      let in_project
-      if (this.project?.name) {
-        let project_name = this.project?.name || ""
-        in_project = this.case_priority?.project?.name == project_name
-      } else {
-        let project_id = this.project?.id || 0
-        in_project = this.case_priority?.project?.id == project_id
-      }
-
+      const project_id = this.project?.id || 0
+      const in_project = this.selectedPriority?.project?.id == project_id
       if (in_project) {
         this.error = true
       } else {
@@ -94,7 +91,7 @@ export default {
     },
     fetchData() {
       this.error = null
-      this.loading = "error"
+      this.loading = true
 
       let filterOptions = {
         sortBy: ["view_order"],
@@ -125,23 +122,39 @@ export default {
         enabledFilter
       )
 
-      CasePriorityApi.getAll(filterOptions).then((response) => {
-        this.items = response.data.items
-        this.loading = false
-      })
+      CasePriorityApi.getAll(filterOptions)
+        .then((response) => {
+          this.items = response.data.items
+        })
+        .catch((error) => {
+          console.error("Error fetching case priorities:", error)
+          this.error = "Failed to load case priorities"
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    resetSelection() {
+      this.$emit("update:modelValue", null)
+    },
+  },
+
+  watch: {
+    project: {
+      handler(newProject) {
+        if (newProject?.id !== this.lastProjectId) {
+          this.lastProjectId = newProject?.id
+          this.resetSelection()
+          this.fetchData()
+        }
+        this.validatePriority()
+      },
+      deep: true,
     },
   },
 
   created() {
     this.fetchData()
-    this.$watch(
-      (vm) => [vm.project],
-      () => {
-        this.fetchData()
-        this.validatePriority()
-        this.$emit("update:modelValue", this.case_priority)
-      }
-    )
   },
 }
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <v-select
-    v-model="case_type"
+    v-model="selectedCaseType"
     :items="items"
     :menu-props="{ maxHeight: '400' }"
     item-title="name"
@@ -30,9 +30,6 @@
         <v-list-item-subtitle> Load More </v-list-item-subtitle>
       </v-list-item>
     </template>
-    <v-col cols="12">
-      <p>Conversation Target: {{ conversation_target }}</p>
-    </v-col>
   </v-select>
 </template>
 
@@ -52,27 +49,24 @@ export default {
       type: Object,
       default: null,
     },
-    hint: {
+    label: {
       type: String,
-      default: () => "Case Type to associate",
+      default: () => "Type",
     },
-    label: {
+    hint: {
       type: String,
-      default: () => "Case Type",
+      default: () => "Case Type to associate",
     },
   },
 
   data() {
     return {
-      conversation_target: null,
       loading: false,
       items: [],
-      search: null,
       more: false,
       numItems: 40,
       error: null,
-      categories: [],
-      selectedCaseType: null,
+      lastProjectId: null,
       is_type_in_project: () => {
         this.validateType()
         return this.error
@@ -81,41 +75,35 @@ export default {
   },
 
   computed: {
-    case_type: {
+    selectedCaseType: {
       get() {
-        return this.selectedCaseType || this.modelValue
+        if (!this.modelValue) return null
+        if (this.modelValue.id) {
+          return this.items.find((item) => item.id === this.modelValue.id) || null
+        }
+        if (this.modelValue.name) {
+          return this.items.find((item) => item.name === this.modelValue.name) || null
+        }
+        return null
       },
       set(value) {
-        this.selectedCaseType = value
         this.$emit("update:modelValue", value)
         this.validateType()
       },
     },
     show_error() {
-      let items_names = this.items.map((item) => item.name)
-      let selected_item = this.case_type?.name || ""
-      if (items_names.includes(selected_item) || selected_item == "") {
-        return null
-      }
-      return "Not a valid case type"
+      return null // Implement any specific error logic here if needed
     },
   },
 
   methods: {
     loadMore() {
-      this.numItems = this.numItems + 5
+      this.numItems += 40
       this.fetchData()
     },
     validateType() {
-      let in_project
-      if (this.project?.name) {
-        let project_name = this.project?.name || ""
-        in_project = this.case_type?.project?.name == project_name
-      } else {
-        let project_id = this.project?.id || 0
-        in_project = this.case_type?.project?.id == project_id
-      }
-
+      const project_id = this.project?.id || 0
+      const in_project = this.selectedCaseType?.project?.id == project_id
       if (in_project) {
         this.error = true
       } else {
@@ -144,86 +132,58 @@ export default {
 
       filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
 
-      CaseTypeApi.getAll(filterOptions).then((response) => {
-        // re-sort items by oncall service
-        this.items = []
-        this.categories = []
-        let new_items = {}
-        response.data.items.forEach((item) => {
-          let category = "Team: " + (item.oncall_service?.name || "None")
-          new_items[category] = new_items[category] || []
-          new_items[category].push(item)
+      CaseTypeApi.getAll(filterOptions)
+        .then((response) => {
+          this.items = []
+          let new_items = {}
+          response.data.items.forEach((item) => {
+            let category = "Team: " + (item.oncall_service?.name || "None")
+            new_items[category] = new_items[category] || []
+            new_items[category].push(item)
+          })
+          let keys = Object.keys(new_items)
+          keys.sort((a, b) => {
+            if (a === "Team: None") return 1
+            if (b === "Team: None") return -1
+            return a.localeCompare(b)
+          })
+          keys.forEach((category) => {
+            this.items.push({ category: category })
+            for (let item of new_items[category]) {
+              this.items.push(item)
+            }
+          })
+          this.more = response.data.total > this.items.length
         })
-        let keys = Object.keys(new_items)
-        // ensure Team: None is always at the end
-        keys.sort((a, b) => {
-          if (a === "Team: None") return 1
-          if (b === "Team: None") return -1
-          return a.localeCompare(b)
+        .catch((error) => {
+          console.error("Error fetching case types:", error)
+          this.error = "Failed to load case types"
         })
-        keys.forEach((category) => {
-          this.items.push({ category: category })
-          for (let item of new_items[category]) {
-            this.items.push(item)
-          }
+        .finally(() => {
+          this.loading = false
         })
-
-        this.total = response.data.total
-        this.loading = false
-
-        if (this.items.length < this.total) {
-          this.more = true
-        } 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
-          }
-        }
-      })
+    },
+    resetSelection() {
+      this.$emit("update:modelValue", null)
     },
   },
 
   watch: {
-    search(val) {
-      val && val !== this.select && this.fetchData()
-    },
-    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
+    project: {
+      handler(newProject) {
+        if (newProject?.id !== this.lastProjectId) {
+          this.lastProjectId = newProject?.id
+          this.resetSelection()
+          this.fetchData()
         }
+        this.validateType()
       },
-      immediate: true,
-    },
-    case_type(newCaseType) {
-      if (newCaseType) {
-        this.conversation_target = newCaseType.conversation_target
-      } else {
-        this.conversation_target = null
-      }
+      deep: true,
     },
   },
 
   created() {
     this.fetchData()
-    this.$watch(
-      (vm) => [vm.project],
-      () => {
-        this.fetchData()
-        this.validateType()
-        this.$emit("update:modelValue", this.case_type)
-      }
-    )
   },
 }
 </script>