From 67efcd84dfbe7e723b21b7d770130b0268efcefc Mon Sep 17 00:00:00 2001
From: Kevin Glisson <kevgliss@gmail.com>
Date: Thu, 2 Nov 2023 09:29:05 -0700
Subject: [PATCH] Fixing participant select and centralizes component

---
 src/dispatch/static/dispatch/components.d.ts  |   1 +
 .../static/dispatch/src/case/DetailsTab.vue   |   2 +-
 .../dispatch/src/case/HandoffDialog.vue       |   2 +-
 .../dispatch/src/case/ParticipantSelect.vue   | 127 -----------------
 .../incident/IncidentDialogFilter.vue         |   2 +-
 .../dispatch/src/incident/DetailsTab.vue      |   2 +-
 .../dispatch/src/incident/HandoffDialog.vue   |   2 +-
 .../src/incident/ParticipantSelect.vue        | 128 ------------------
 .../src/incident/TableFilterDialog.vue        |   2 +-
 .../static/dispatch/src/task/NewEditSheet.vue |   2 +-
 10 files changed, 8 insertions(+), 262 deletions(-)
 delete mode 100644 src/dispatch/static/dispatch/src/case/ParticipantSelect.vue
 delete mode 100644 src/dispatch/static/dispatch/src/incident/ParticipantSelect.vue

diff --git a/src/dispatch/static/dispatch/components.d.ts b/src/dispatch/static/dispatch/components.d.ts
index 938f0eda76fa..20b7ce8714af 100644
--- a/src/dispatch/static/dispatch/components.d.ts
+++ b/src/dispatch/static/dispatch/components.d.ts
@@ -25,6 +25,7 @@ declare module '@vue/runtime-core' {
     MonacoEditor: typeof import('./src/components/MonacoEditor.vue')['default']
     NotificationSnackbarsWrapper: typeof import('./src/components/NotificationSnackbarsWrapper.vue')['default']
     PageHeader: typeof import('./src/components/PageHeader.vue')['default']
+    ParticipantSelect: typeof import('./src/components/ParticipantSelect.vue')['default']
     Refresh: typeof import('./src/components/Refresh.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/dispatch/static/dispatch/src/case/DetailsTab.vue b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
index 99786988c9d8..0dd2acc99f0d 100644
--- a/src/dispatch/static/dispatch/src/case/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
@@ -131,7 +131,7 @@ import CaseSeveritySelect from "@/case/severity/CaseSeveritySelect.vue"
 import CaseTypeSelect from "@/case/type/CaseTypeSelect.vue"
 import DateTimePickerMenu from "@/components/DateTimePickerMenu.vue"
 import IncidentFilterCombobox from "@/incident/IncidentFilterCombobox.vue"
-import ParticipantSelect from "@/incident/ParticipantSelect.vue"
+import ParticipantSelect from "@/components/ParticipantSelect.vue"
 import ProjectSelect from "@/project/ProjectSelect.vue"
 import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
 
diff --git a/src/dispatch/static/dispatch/src/case/HandoffDialog.vue b/src/dispatch/static/dispatch/src/case/HandoffDialog.vue
index 05e65c5801ba..b786ff8b54a8 100644
--- a/src/dispatch/static/dispatch/src/case/HandoffDialog.vue
+++ b/src/dispatch/static/dispatch/src/case/HandoffDialog.vue
@@ -31,7 +31,7 @@
 import { mapFields } from "vuex-map-fields"
 import { mapActions } from "vuex"
 
-import ParticipantSelect from "@/incident/ParticipantSelect.vue"
+import ParticipantSelect from "@/components/ParticipantSelect.vue"
 
 export default {
   name: "CaseHandoffDialog",
diff --git a/src/dispatch/static/dispatch/src/case/ParticipantSelect.vue b/src/dispatch/static/dispatch/src/case/ParticipantSelect.vue
deleted file mode 100644
index 0e8fbc57e67a..000000000000
--- a/src/dispatch/static/dispatch/src/case/ParticipantSelect.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <v-combobox
-    :items="items"
-    :label="label"
-    :loading="loading"
-    v-model:search="search"
-    @update:search="getFilteredData()"
-    chips
-    clearable
-    closable-chips
-    hide-selected
-    item-title="individual.name"
-    :item-props="(item) => ({ subtitle: item.individual.email })"
-    no-filter
-    return-object
-    v-model="participant"
-  >
-    <template #no-data>
-      <v-list-item>
-        <v-list-item-title>
-          No individuals matching "
-          <strong>{{ search }}</strong
-          >".
-        </v-list-item-title>
-      </v-list-item>
-    </template>
-    <template #append-item>
-      <v-list-item v-if="more" @click="loadMore()">
-        <v-list-item-subtitle> Load More </v-list-item-subtitle>
-      </v-list-item>
-    </template>
-  </v-combobox>
-</template>
-
-<script>
-import { cloneDeep, debounce } from "lodash"
-
-import SearchUtils from "@/search/utils"
-import IndividualApi from "@/individual/api"
-
-export default {
-  name: "ParticipantSelect",
-  props: {
-    modelValue: {
-      type: Object,
-      default: function () {
-        return null
-      },
-    },
-    label: {
-      type: String,
-      default: function () {
-        return "Participant"
-      },
-    },
-  },
-
-  data() {
-    return {
-      loading: false,
-      items: [],
-      more: false,
-      numItems: 5,
-      search: null,
-    }
-  },
-
-  computed: {
-    participant: {
-      get() {
-        return cloneDeep(this.modelValue)
-      },
-      set(value) {
-        this.$emit("update:modelValue", value)
-      },
-    },
-  },
-
-  created() {
-    this.fetchData()
-  },
-
-  methods: {
-    loadMore() {
-      this.numItems = this.numItems + 5
-      this.fetchData()
-    },
-    fetchData() {
-      this.loading = "error"
-      let filterOptions = {
-        q: this.search,
-        sortBy: ["name"],
-        descending: [false],
-        itemsPerPage: this.numItems,
-      }
-
-      if (this.project) {
-        filterOptions = {
-          ...filterOptions,
-          filters: {
-            project: [this.project],
-          },
-        }
-        filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
-      }
-
-      IndividualApi.getAll(filterOptions).then((response) => {
-        this.items = response.data.items.map(function (x) {
-          return { individual: x }
-        })
-        this.total = response.data.total
-
-        if (this.items.length < this.total) {
-          this.more = true
-        } else {
-          this.more = false
-        }
-
-        this.loading = false
-      })
-    },
-    getFilteredData: debounce(function () {
-      this.fetchData()
-    }, 500),
-  },
-}
-</script>
diff --git a/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue b/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue
index 7dac62efee00..97875ed28629 100644
--- a/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue
+++ b/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue
@@ -75,7 +75,7 @@ import ProjectCombobox from "@/project/ProjectCombobox.vue"
 import RouterUtils from "@/router/utils"
 import SearchUtils from "@/search/utils"
 import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
-import ParticipantSelect from "@/incident/ParticipantSelect.vue"
+import ParticipantSelect from "@/components/ParticipantSelect.vue"
 
 let today = function () {
   let now = new Date()
diff --git a/src/dispatch/static/dispatch/src/incident/DetailsTab.vue b/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
index cb646216cc9e..4a8914fc5561 100644
--- a/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
@@ -125,7 +125,7 @@ import IncidentFilterCombobox from "@/incident/IncidentFilterCombobox.vue"
 import IncidentPrioritySelect from "@/incident/priority/IncidentPrioritySelect.vue"
 import IncidentSeveritySelect from "@/incident/severity/IncidentSeveritySelect.vue"
 import IncidentTypeSelect from "@/incident/type/IncidentTypeSelect.vue"
-import ParticipantSelect from "@/incident/ParticipantSelect.vue"
+import ParticipantSelect from "@/components/ParticipantSelect.vue"
 import ProjectSelect from "@/project/ProjectSelect.vue"
 import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
 
diff --git a/src/dispatch/static/dispatch/src/incident/HandoffDialog.vue b/src/dispatch/static/dispatch/src/incident/HandoffDialog.vue
index 2cc96a6cc948..b7756a990b0d 100644
--- a/src/dispatch/static/dispatch/src/incident/HandoffDialog.vue
+++ b/src/dispatch/static/dispatch/src/incident/HandoffDialog.vue
@@ -38,7 +38,7 @@
 import { mapFields } from "vuex-map-fields"
 import { mapActions } from "vuex"
 
-import ParticipantSelect from "@/incident/ParticipantSelect.vue"
+import ParticipantSelect from "@/components/ParticipantSelect.vue"
 
 export default {
   name: "IncidentHandoffDialog",
diff --git a/src/dispatch/static/dispatch/src/incident/ParticipantSelect.vue b/src/dispatch/static/dispatch/src/incident/ParticipantSelect.vue
deleted file mode 100644
index ea5dbeaa1393..000000000000
--- a/src/dispatch/static/dispatch/src/incident/ParticipantSelect.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <v-combobox
-    :items="items"
-    :label="label"
-    :loading="loading"
-    v-model:search="search"
-    @update:search="getFilteredData()"
-    chips
-    clearable
-    hide-selected
-    item-title="individual.name"
-    no-filter
-    return-object
-    v-model="participant"
-  >
-    <template #no-data>
-      <v-list-item>
-        <v-list-item-title>
-          No individuals matching "
-          <strong>{{ search }}</strong
-          >".
-        </v-list-item-title>
-      </v-list-item>
-    </template>
-    <template #item="{ props, item }">
-      <v-list-item v-bind="props" :subtitle="item.raw.individual.email" />
-    </template>
-    <template #append-item>
-      <v-list-item v-if="more" @click="loadMore()">
-        <v-list-item-subtitle> Load More </v-list-item-subtitle>
-      </v-list-item>
-    </template>
-  </v-combobox>
-</template>
-
-<script>
-import { cloneDeep, debounce } from "lodash"
-
-import SearchUtils from "@/search/utils"
-import IndividualApi from "@/individual/api"
-
-export default {
-  name: "ParticipantSelect",
-  props: {
-    modelValue: {
-      type: Object,
-      default: function () {
-        return null
-      },
-    },
-    label: {
-      type: String,
-      default: function () {
-        return "Participant"
-      },
-    },
-  },
-
-  data() {
-    return {
-      loading: false,
-      items: [],
-      more: false,
-      numItems: 5,
-      search: null,
-    }
-  },
-
-  computed: {
-    participant: {
-      get() {
-        return cloneDeep(this.modelValue)
-      },
-      set(value) {
-        this.$emit("update:modelValue", value)
-      },
-    },
-  },
-
-  created() {
-    this.fetchData()
-  },
-
-  methods: {
-    loadMore() {
-      this.numItems = this.numItems + 5
-      this.fetchData()
-    },
-    fetchData() {
-      this.loading = "error"
-      let filterOptions = {
-        q: this.search,
-        sortBy: ["name"],
-        descending: [false],
-        itemsPerPage: this.numItems,
-      }
-
-      if (this.project) {
-        filterOptions = {
-          ...filterOptions,
-          filters: {
-            project: [this.project],
-          },
-        }
-        filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
-      }
-
-      IndividualApi.getAll(filterOptions).then((response) => {
-        this.items = response.data.items.map(function (x) {
-          return { individual: x }
-        })
-        this.total = response.data.total
-
-        if (this.items.length < this.total) {
-          this.more = true
-        } else {
-          this.more = false
-        }
-
-        this.loading = false
-      })
-    },
-    getFilteredData: debounce(function () {
-      this.fetchData()
-    }, 500),
-  },
-}
-</script>
diff --git a/src/dispatch/static/dispatch/src/incident/TableFilterDialog.vue b/src/dispatch/static/dispatch/src/incident/TableFilterDialog.vue
index 2357d35f3719..6d03d3b392cb 100644
--- a/src/dispatch/static/dispatch/src/incident/TableFilterDialog.vue
+++ b/src/dispatch/static/dispatch/src/incident/TableFilterDialog.vue
@@ -78,7 +78,7 @@ import IncidentTypeCombobox from "@/incident/type/IncidentTypeCombobox.vue"
 import ProjectCombobox from "@/project/ProjectCombobox.vue"
 import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
 import TagTypeFilterCombobox from "@/tag_type/TagTypeFilterCombobox.vue"
-import ParticipantSelect from "@/incident/ParticipantSelect.vue"
+import ParticipantSelect from "@/components/ParticipantSelect.vue"
 
 export default {
   name: "IncidentTableFilterDialog",
diff --git a/src/dispatch/static/dispatch/src/task/NewEditSheet.vue b/src/dispatch/static/dispatch/src/task/NewEditSheet.vue
index b67cbb63c5c9..6e39e33928e9 100644
--- a/src/dispatch/static/dispatch/src/task/NewEditSheet.vue
+++ b/src/dispatch/static/dispatch/src/task/NewEditSheet.vue
@@ -107,7 +107,7 @@ import { mapActions } from "vuex"
 
 import ProjectSelect from "@/project/ProjectSelect.vue"
 import IncidentSelect from "@/incident/IncidentSelect.vue"
-import ParticipantSelect from "@/incident/ParticipantSelect.vue"
+import ParticipantSelect from "@/components/ParticipantSelect.vue"
 import AssigneeCombobox from "@/task/AssigneeCombobox.vue"
 import DateTimePickerMenu from "@/components/DateTimePickerMenu.vue"