Re-implement ParticipantSelect Component with v-autocomplete

src/dispatch/static/dispatch/src/incident/ParticipantSelect.vue

@@ -1,5 +1,46 @@
 <template>
+  <v-autocomplete
+    v-if="currentUser().experimental_features"
+    :items="items"
+    :label="label"
+    :loading="loading"
+    :filter="customFilter"
+    :search-input.sync="search"
+    chips
+    clearable
+    deletable-chips
+    hide-selected
+    item-text="individual.name"
+    item-value="individual"
+    return-object
+    cache-items
+    v-model="participant"
+  >
+    <template #no-data>
+      <v-list-item>
+        <v-list-item-content>
+          <v-list-item-title>
+            No individuals matching "
+            <strong>{{ search }}</strong
+            >".
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+    <template #item="data">
+      <v-list-item-content>
+        <v-list-item-title>👤 {{ data.item.individual.name }}</v-list-item-title>
+        <v-list-item-subtitle>{{ data.item.individual.email }}</v-list-item-subtitle>
+      </v-list-item-content>
+    </template>
+    <template #selection="{ attr, on, item, selected }">
+      <v-chip v-bind="attr" :input-value="selected" v-on="on">
+        <span v-text="item.individual.name" />
+      </v-chip>
+    </template>
+  </v-autocomplete>
   <v-combobox
+    v-else
     :items="items"
     :label="label"
     :loading="loading"
@@ -48,6 +89,8 @@
 
 <script>
 import { cloneDeep, debounce } from "lodash"
+import { mapState } from "vuex"
+import UserApi from "@/auth/api"
 
 import SearchUtils from "@/search/utils"
 import IndividualApi from "@/individual/api"
@@ -76,6 +119,7 @@ export default {
       more: false,
       numItems: 5,
       search: null,
+      experimental_features: false,
     }
   },
 
@@ -91,14 +135,60 @@ export default {
   },
 
   created() {
-    this.fetchData()
+    UserApi.getUserInfo()
+      .then((response) => {
+        this.experimental_features = response.data.experimental_features
+        if (this.experimental_features) {
+          this.fetchDataExperimental()
+        } else {
+          this.fetchData()
+        }
+      })
+      .catch((error) => {
+        console.error("Error occurred while updating experimental features: ", error)
+        this.fetchData()
+      })
   },
 
   methods: {
+    ...mapState("auth", ["currentUser"]),
+    customFilter(item, queryText) {
+      const name = item.individual.name.toLowerCase()
+      const email = item.individual.email.toLowerCase()
+      const searchText = queryText.toLowerCase()
+
+      return name.indexOf(searchText) > -1 || email.indexOf(searchText) > -1
+    },
     loadMore() {
       this.numItems = this.numItems + 5
       this.fetchData()
     },
+    fetchDataExperimental() {
+      this.loading = "error"
+      let filterOptions = {
+        q: this.search,
+        sortBy: ["name"],
+        descending: [false],
+        itemsPerPage: -1,
+      }
+
+      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.loading = false
+      })
+    },
     fetchData() {
       this.loading = "error"
       let filterOptions = {
@@ -133,6 +223,10 @@ export default {
         this.loading = false
       })
     },
+
+    getFilteredDataExperimental: debounce(function () {
+      this.fetchDataExperimental()
+    }, 500),
     getFilteredData: debounce(function () {
       this.fetchData()
     }, 500),