From f3811bb8aea77f59ffdef5e21d03ee206778bd9d Mon Sep 17 00:00:00 2001
From: Kevin Glisson <kevgliss@gmail.com>
Date: Mon, 6 Nov 2023 09:28:54 -0800
Subject: [PATCH 1/2] Project autocomplete

---
 src/dispatch/static/dispatch/components.d.ts  |   3 +
 .../static/dispatch/src/case/DetailsTab.vue   |   6 +-
 .../dispatch/src/components/AutoComplete.vue  | 154 ++++++++++++++++++
 .../src/project/ProjectAutoComplete.vue       |  54 ++++++
 4 files changed, 214 insertions(+), 3 deletions(-)
 create mode 100644 src/dispatch/static/dispatch/src/components/AutoComplete.vue
 create mode 100644 src/dispatch/static/dispatch/src/project/ProjectAutoComplete.vue

diff --git a/src/dispatch/static/dispatch/components.d.ts b/src/dispatch/static/dispatch/components.d.ts
index 938f0eda76fa..5f5c864db1f8 100644
--- a/src/dispatch/static/dispatch/components.d.ts
+++ b/src/dispatch/static/dispatch/components.d.ts
@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     AnimatedNumber: typeof import('./src/components/AnimatedNumber.vue')['default']
     AppDrawer: typeof import('./src/components/AppDrawer.vue')['default']
     AppToolbar: typeof import('./src/components/AppToolbar.vue')['default']
+    AutoComplete: typeof import('./src/components/AutoComplete.vue')['default']
     BaseCombobox: typeof import('./src/components/BaseCombobox.vue')['default']
     BasicLayout: typeof import('./src/components/layouts/BasicLayout.vue')['default']
     ColorPickerInput: typeof import('./src/components/ColorPickerInput.vue')['default']
@@ -25,6 +26,8 @@ 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']
+    ProjectAutoComplete: typeof import('./src/components/ProjectAutoComplete.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..e77bffd8601c 100644
--- a/src/dispatch/static/dispatch/src/case/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
@@ -58,7 +58,7 @@
         />
       </v-col>
       <v-col cols="6">
-        <project-select v-model="project" />
+        <project-auto-complete v-model="project" />
       </v-col>
       <v-col cols="6">
         <case-type-select v-model="case_type" :project="project" />
@@ -132,7 +132,7 @@ 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 ProjectSelect from "@/project/ProjectSelect.vue"
+import ProjectAutoComplete from "@/project/ProjectAutoComplete.vue"
 import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
 
 export default {
@@ -151,7 +151,7 @@ export default {
     DateTimePickerMenu,
     IncidentFilterCombobox,
     ParticipantSelect,
-    ProjectSelect,
+    ProjectAutoComplete,
     TagFilterAutoComplete,
   },
 
diff --git a/src/dispatch/static/dispatch/src/components/AutoComplete.vue b/src/dispatch/static/dispatch/src/components/AutoComplete.vue
new file mode 100644
index 000000000000..912cd93d0842
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/components/AutoComplete.vue
@@ -0,0 +1,154 @@
+<template>
+  <v-autocomplete
+    :items="items"
+    :label="label"
+    :loading="loading"
+    clearable
+    :item-title="title"
+    :item-value="identifier"
+    return-object
+    :hide-no-data="false"
+    v-model:search="search"
+    v-model="selectedModel"
+    @update:modelValue="handleClear"
+  >
+    <template #no-data>
+      <v-list-item v-if="!loading">
+        <v-list-item-title>
+          No {{ resource }} matching {{}}<strong>"{{ search }}".</strong>
+        </v-list-item-title>
+      </v-list-item>
+    </template>
+    <template #item="{ props, item }">
+      <slot name="item" :props="props" :item="item">
+        <v-list-item
+          v-bind="props"
+          :title="item.title"
+          :subtitle="item.raw[subtitle]"
+        ></v-list-item>
+      </slot>
+    </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>
+  </v-autocomplete>
+</template>
+
+<script>
+import { ref, watch, toRefs, onMounted } from "vue"
+import { initials } from "@/filters"
+import { debounce } from "lodash"
+import API from "@/api"
+
+export default {
+  name: "AutoComplete",
+  props: {
+    resource: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: "name",
+    },
+    identifier: {
+      type: String,
+      default: "id",
+    },
+    subtitle: {
+      type: String,
+      default: "description",
+    },
+    label: {
+      type: String,
+      default: "Select",
+    },
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { resource, title, identifier, subtitle, label, modelValue } = toRefs(props)
+
+    let loading = ref(false)
+    let items = ref([])
+    let numItems = ref(10)
+    let currentPage = ref(1)
+    let total = ref(0)
+    let selectedModel = ref(modelValue.value)
+    let search = ref(modelValue.value ? modelValue.value[title.value] : "")
+
+    let debouncedGetData = debounce((searchVal, page = currentPage.value) => {
+      loading.value = true
+      API.get(`/${resource.value}`, {
+        params: {
+          q: searchVal,
+          sortBy: ["name"],
+          descending: [false],
+          itemsPerPage: numItems.value * page,
+        },
+      }).then((response) => {
+        items.value = response.data.items
+        total.value = response.data.total
+        loading.value = false
+      })
+    }, 300)
+
+    onMounted(() => {
+      debouncedGetData(search.value)
+    })
+
+    const handleClear = (newValue) => {
+      if (!newValue) {
+        items.value = []
+        search.value = ""
+        selectedModel.value = null
+        numItems.value = 10
+        currentPage.value = 1
+      }
+    }
+
+    const loadMore = () => {
+      currentPage.value++
+      numItems.value += 10
+      debouncedGetData(search.value)
+    }
+
+    watch(search, (newVal, oldVal) => {
+      if (oldVal !== newVal) {
+        numItems.value = 10
+        currentPage.value = 1
+        debouncedGetData(newVal)
+      }
+    })
+
+    watch(selectedModel, (newVal) => {
+      emit(
+        "update:modelValue",
+        newVal
+          ? items.value.find((item) => item[identifier.value] == newVal[identifier.value])
+          : null
+      )
+    })
+
+    return {
+      initials,
+      items,
+      label,
+      title,
+      identifier,
+      subtitle,
+      loading,
+      handleClear,
+      loadMore,
+      selectedModel,
+      search,
+      total,
+    }
+  },
+}
+</script>
diff --git a/src/dispatch/static/dispatch/src/project/ProjectAutoComplete.vue b/src/dispatch/static/dispatch/src/project/ProjectAutoComplete.vue
new file mode 100644
index 000000000000..119459616289
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/project/ProjectAutoComplete.vue
@@ -0,0 +1,54 @@
+<template>
+  <AutoComplete
+    resource="projects"
+    title="name"
+    identifier="id"
+    subtitle="description"
+    v-model="modelValue"
+    :label="label"
+  >
+  </AutoComplete>
+</template>
+
+<script>
+import { ref, watch } from "vue"
+import AutoComplete from "@/components/AutoComplete.vue"
+
+export default {
+  name: "ProjectAutoComplete",
+  components: {
+    AutoComplete,
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => null,
+    },
+    label: {
+      type: String,
+      default: "Project",
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const internalModelValue = ref(props.modelValue)
+
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        internalModelValue.value = newVal
+      }
+    )
+
+    watch(internalModelValue, (newVal) => {
+      if (newVal !== props.modelValue) {
+        emit("update:modelValue", newVal)
+      }
+    })
+
+    return {
+      modelValue: internalModelValue,
+    }
+  },
+}
+</script>

From b366f5a132a9df6d8cd457741e2d1c73516d8e03 Mon Sep 17 00:00:00 2001
From: Kevin Glisson <kevgliss@gmail.com>
Date: Mon, 6 Nov 2023 11:24:22 -0800
Subject: [PATCH 2/2] Fixing linting

---
 src/dispatch/static/dispatch/components.d.ts  |  1 +
 .../dispatch/src/components/AutoComplete.vue  | 25 +++++++++----------
 .../src/components/ParticipantSelect.vue      | 14 +++--------
 .../src/project/ProjectAutoComplete.vue       |  9 +++----
 4 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/dispatch/static/dispatch/components.d.ts b/src/dispatch/static/dispatch/components.d.ts
index 5f5c864db1f8..499299563ebe 100644
--- a/src/dispatch/static/dispatch/components.d.ts
+++ b/src/dispatch/static/dispatch/components.d.ts
@@ -26,6 +26,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']
+    ParticipantAutoComplete: typeof import('./src/components/ParticipantAutoComplete.vue')['default']
     ParticipantSelect: typeof import('./src/components/ParticipantSelect.vue')['default']
     ProjectAutoComplete: typeof import('./src/components/ProjectAutoComplete.vue')['default']
     Refresh: typeof import('./src/components/Refresh.vue')['default']
diff --git a/src/dispatch/static/dispatch/src/components/AutoComplete.vue b/src/dispatch/static/dispatch/src/components/AutoComplete.vue
index 912cd93d0842..bfdfcf1d7f87 100644
--- a/src/dispatch/static/dispatch/src/components/AutoComplete.vue
+++ b/src/dispatch/static/dispatch/src/components/AutoComplete.vue
@@ -10,7 +10,7 @@
     :hide-no-data="false"
     v-model:search="search"
     v-model="selectedModel"
-    @update:modelValue="handleClear"
+    @update:model-value="handleClear"
   >
     <template #no-data>
       <v-list-item v-if="!loading">
@@ -21,11 +21,7 @@
     </template>
     <template #item="{ props, item }">
       <slot name="item" :props="props" :item="item">
-        <v-list-item
-          v-bind="props"
-          :title="item.title"
-          :subtitle="item.raw[subtitle]"
-        ></v-list-item>
+        <v-list-item v-bind="props" :title="item.title" :subtitle="item.raw[subtitle]" />
       </slot>
     </template>
     <template #append-item v-if="items.length < total.value">
@@ -72,7 +68,7 @@ export default {
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { resource, title, identifier, subtitle, label, modelValue } = toRefs(props)
+    const { resource, modelValue } = toRefs(props)
 
     let loading = ref(false)
     let items = ref([])
@@ -80,7 +76,7 @@ export default {
     let currentPage = ref(1)
     let total = ref(0)
     let selectedModel = ref(modelValue.value)
-    let search = ref(modelValue.value ? modelValue.value[title.value] : "")
+    let search = ref(modelValue.value ? modelValue.value[props.title.value] : "")
 
     let debouncedGetData = debounce((searchVal, page = currentPage.value) => {
       loading.value = true
@@ -130,18 +126,21 @@ export default {
       emit(
         "update:modelValue",
         newVal
-          ? items.value.find((item) => item[identifier.value] == newVal[identifier.value])
+          ? items.value.find(
+              (item) => item[props.identifier.value] == newVal[props.identifier.value]
+            )
           : null
       )
     })
 
+    watch(modelValue, (newValue) => {
+      selectedModel.value = newValue
+      search.value = newValue ? newValue[props.title] : ""
+    })
+
     return {
       initials,
       items,
-      label,
-      title,
-      identifier,
-      subtitle,
       loading,
       handleClear,
       loadMore,
diff --git a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
index f7fc562aae18..a4ff901b074c 100644
--- a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
+++ b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <v-autocomplete
     :items="items"
-    :label="labelProp"
+    :label="label"
     :loading="loading"
     v-model:search="search"
     clearable
@@ -12,7 +12,7 @@
     chips
     :hide-no-data="false"
     v-model="participant"
-    @update:modelValue="handleClear"
+    @update:model-value="handleClear"
   >
     <template #no-data>
       <v-list-item v-if="!loading">
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { ref, watch, toRefs, onMounted } from "vue"
+import { ref, watch, onMounted } from "vue"
 import { initials } from "@/filters"
 import { debounce } from "lodash"
 
@@ -50,8 +50,7 @@ import IndividualApi from "@/individual/api"
 export default {
   name: "ParticipantSelect",
   props: {
-    labelProp: {
-      // Define the labelProp
+    label: {
       type: String,
       default: "Participant",
     },
@@ -61,11 +60,8 @@ export 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)
@@ -84,7 +80,6 @@ export default {
       }
 
       await IndividualApi.getAll(filterOptions).then((response) => {
-        console.log(response.data.items)
         items.value = response.data.items.map(function (x) {
           return { individual: x }
         })
@@ -127,7 +122,6 @@ export default {
       handleClear,
       initials,
       items,
-      labelProp,
       loading,
       loadMore,
       participant,
diff --git a/src/dispatch/static/dispatch/src/project/ProjectAutoComplete.vue b/src/dispatch/static/dispatch/src/project/ProjectAutoComplete.vue
index 119459616289..c9c1df1dadca 100644
--- a/src/dispatch/static/dispatch/src/project/ProjectAutoComplete.vue
+++ b/src/dispatch/static/dispatch/src/project/ProjectAutoComplete.vue
@@ -4,10 +4,9 @@
     title="name"
     identifier="id"
     subtitle="description"
-    v-model="modelValue"
+    v-model="internalModelValue"
     :label="label"
-  >
-  </AutoComplete>
+  />
 </template>
 
 <script>
@@ -22,7 +21,7 @@ export default {
   props: {
     modelValue: {
       type: Object,
-      default: () => null,
+      default: () => ({}),
     },
     label: {
       type: String,
@@ -47,7 +46,7 @@ export default {
     })
 
     return {
-      modelValue: internalModelValue,
+      internalModelValue,
     }
   },
 }