Fixing participant select and centralizes component (#3925)

* Fixing participant select and centralizes component

* Add component

* Removing spans

* Fix linting

* Fixes

* Switch to auto-complete

* Fixes autocomplete

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']

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"
 

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",

src/dispatch/static/dispatch/src/components/ParticipantSelect.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-autocomplete
+    :items="items"
+    :label="labelProp"
+    :loading="loading"
+    v-model:search="search"
+    clearable
+    hide-selected
+    item-title="individual.name"
+    item-value="individual.id"
+    return-object
+    chips
+    :hide-no-data="false"
+    v-model="participant"
+    @update:modelValue="handleClear"
+  >
+    <template #no-data>
+      <v-list-item v-if="!loading">
+        <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-if="items.length < total.value">
+      <v-list-item @click="loadMore()">
+        <v-list-item-subtitle> Load More </v-list-item-subtitle>
+      </v-list-item>
+    </template>
+    <template #chip="data">
+      <v-chip v-bind="data.props" pill>
+        <template #prepend>
+          <v-avatar color="teal" start> {{ initials(data.item.title) }} </v-avatar>
+        </template>
+        {{ data.item.title }}
+      </v-chip>
+    </template>
+  </v-autocomplete>
+</template>
+
+<script>
+import { ref, watch, toRefs, onMounted } from "vue"
+import { initials } from "@/filters"
+import { debounce } from "lodash"
+
+import IndividualApi from "@/individual/api"
+
+export default {
+  name: "ParticipantSelect",
+  props: {
+    labelProp: {
+      // Define the labelProp
+      type: String,
+      default: "Participant",
+    },
+    initialValue: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const { labelProp } = toRefs(props) // toRefs make props reactive
+
+    let loading = ref(false)
+    let items = ref([])
+    console.log(items)
+    let numItems = ref(10)
+    let participant = ref({ ...props.initialValue })
+    let currentPage = ref(1)
+    let total = ref(0)
+    const search = ref(props.initialValue.name)
+
+    let debouncedGetIndividualData = null
+
+    const getIndividualData = async (searchVal, page = currentPage.value) => {
+      loading.value = true
+      let filterOptions = {
+        q: searchVal,
+        sortBy: ["name"],
+        descending: [false],
+        itemsPerPage: numItems.value * page,
+      }
+
+      await IndividualApi.getAll(filterOptions).then((response) => {
+        console.log(response.data.items)
+        items.value = response.data.items.map(function (x) {
+          return { individual: x }
+        })
+        total.value = response.data.total
+      })
+
+      loading.value = false
+    }
+
+    onMounted(() => {
+      debouncedGetIndividualData = debounce(getIndividualData, 300)
+      debouncedGetIndividualData(search.value)
+    })
+
+    const loadMore = async () => {
+      currentPage.value++
+      numItems.value += 10
+      await debouncedGetIndividualData(search.value)
+    }
+
+    const handleClear = (newValue) => {
+      if (!newValue) {
+        items.value = []
+        search.value = null
+        participant.value = null
+        numItems.value = 10
+        currentPage.value = 1
+      }
+    }
+
+    watch(search, async (newVal, oldVal) => {
+      if (oldVal !== newVal) {
+        numItems.value = 10
+        await debouncedGetIndividualData(newVal)
+      }
+    })
+
+    return {
+      getIndividualData,
+      handleClear,
+      initials,
+      items,
+      labelProp,
+      loading,
+      loadMore,
+      participant,
+      search,
+      total,
+    }
+  },
+}
+</script>

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()

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"
 

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",