From 85e6cc8a9f71cd7db475794810515343a901d94f Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 17 Nov 2023 16:45:30 -0800
Subject: [PATCH 1/4] Working on ParticipantSelect

---
 .../static/dispatch/src/case/DetailsTab.vue   | 11 ++++++
 .../src/components/ParticipantSelect.vue      | 36 +++++++++++++++----
 .../dispatch/src/incident/DetailsTab.vue      | 13 +++++--
 .../static/dispatch/src/incident/store.js     |  7 ++++
 4 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/case/DetailsTab.vue b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
index e9a92feb0333..f5e78ac0a0c4 100644
--- a/src/dispatch/static/dispatch/src/case/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
@@ -46,6 +46,8 @@
           hint="The organization member to which the case is assigned."
           clearable
           :project="project"
+          name="Assignee"
+          :rules="[only_one]"
         />
       </v-col>
       <v-col cols="12">
@@ -55,6 +57,8 @@
           hint="The organization member who reported the case."
           clearable
           :project="project"
+          name="Reporter"
+          :rules="[only_one]"
         />
       </v-col>
       <v-col cols="6">
@@ -160,6 +164,13 @@ export default {
       statuses: ["New", "Triage", "Escalated", "Closed"],
       visibilities: ["Open", "Restricted"],
       resolutionReasons: ["False Positive", "User Acknowledged", "Mitigated", "Escalated"],
+      only_one: (value) => {
+        console.log(`**** the participant rules is ${value}`)
+        if (value && value.length > 1) {
+          return "Only one is allowed"
+        }
+        return true
+      },
     }
   },
 
diff --git a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
index a4ff901b074c..4118d23574ed 100644
--- a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
+++ b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
@@ -4,15 +4,15 @@
     :label="label"
     :loading="loading"
     v-model:search="search"
-    clearable
+    closable-chips
     hide-selected
     item-title="individual.name"
     item-value="individual.id"
     return-object
-    chips
-    :hide-no-data="false"
     v-model="participant"
+    chips
     @update:model-value="handleClear"
+    :menu-props="{ closeOnContentClick: true }"
   >
     <template #no-data>
       <v-list-item v-if="!loading">
@@ -32,9 +32,9 @@
     <template #chip="data">
       <v-chip v-bind="data.props" pill>
         <template #prepend>
-          <v-avatar color="teal" start> {{ initials(data.item.title) }} </v-avatar>
+          <v-avatar color="teal" start> {{ initials(data.item.raw.individual.name) }} </v-avatar>
         </template>
-        {{ data.item.title }}
+        {{ data.item.raw.individual.name }}
       </v-chip>
     </template>
   </v-autocomplete>
@@ -44,7 +44,7 @@
 import { ref, watch, onMounted } from "vue"
 import { initials } from "@/filters"
 import { debounce } from "lodash"
-
+import SearchUtils from "@/search/utils"
 import IndividualApi from "@/individual/api"
 
 export default {
@@ -58,6 +58,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    project: {
+      type: [Object],
+      default: null,
+    },
   },
   setup(props) {
     let loading = ref(false)
@@ -79,6 +83,16 @@ export default {
         itemsPerPage: numItems.value * page,
       }
 
+      if (props.project) {
+        filterOptions = {
+          filters: {
+            project: [props.project],
+          },
+          ...filterOptions,
+        }
+      }
+      filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
+
       await IndividualApi.getAll(filterOptions).then((response) => {
         items.value = response.data.items.map(function (x) {
           return { individual: x }
@@ -101,6 +115,7 @@ export default {
     }
 
     const handleClear = (newValue) => {
+      search.value = null
       if (!newValue) {
         items.value = []
         search.value = null
@@ -129,5 +144,14 @@ export default {
       total,
     }
   },
+  watch: {
+    project(val) {
+      console.log(`**** the project is ${JSON.stringify(val)}`)
+      this.getIndividualData()
+    },
+    participant(val,oldval) {
+      console.log(`**** the model is ${JSON.stringify(val)}`)
+    },
+  },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/incident/DetailsTab.vue b/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
index 4a8914fc5561..e3777d715af5 100644
--- a/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/incident/DetailsTab.vue
@@ -40,7 +40,7 @@
           required
           :project="project"
           name="Reporter"
-          :rules="[rules.required]"
+          :rules="[required_and_only_one]"
         />
       </v-col>
       <v-col cols="6">
@@ -52,7 +52,7 @@
           required
           :project="project"
           name="Incident Commander"
-          :rules="[rules.required]"
+          :rules="[required_and_only_one]"
         />
       </v-col>
       <v-col cols="6">
@@ -153,6 +153,15 @@ export default {
     return {
       statuses: ["Active", "Stable", "Closed"],
       visibilities: ["Open", "Restricted"],
+      required_and_only_one: (value) => {
+        if (!value || value.length == 0) {
+          return "This field is required"
+        }
+        if (value && value.length > 1) {
+          return "Only one is allowed"
+        }
+        return true
+      },
     }
   },
 
diff --git a/src/dispatch/static/dispatch/src/incident/store.js b/src/dispatch/static/dispatch/src/incident/store.js
index 82d0713a3ce0..4a72ae64030e 100644
--- a/src/dispatch/static/dispatch/src/incident/store.js
+++ b/src/dispatch/static/dispatch/src/incident/store.js
@@ -354,6 +354,13 @@ const actions = {
   },
   save({ commit, dispatch }) {
     commit("SET_SELECTED_LOADING", true)
+    if (Array.isArray(state.selected.reporter)) {
+      state.selected.reporter = state.selected.reporter[0]
+    }
+    if (Array.isArray(state.selected.commander)) {
+      state.selected.commander = state.selected.commander[0]
+    }
+    console.log(`**** the new commander is ${JSON.stringify(state.selected.commander)}`)
     if (!state.selected.id) {
       return IncidentApi.create(state.selected)
         .then(() => {

From a991ffd42e2b8e805898fe7ed17a5dad84f73e67 Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Mon, 20 Nov 2023 09:06:47 -0800
Subject: [PATCH 2/4] Flowing participant select through other modules

---
 src/dispatch/incident/flows.py                |  2 +
 .../dispatch/src/case/HandoffDialog.vue       | 80 +++++++++++-----
 .../static/dispatch/src/case/Participant.vue  | 43 +++++----
 .../static/dispatch/src/case/store.js         |  6 ++
 .../src/components/ParticipantSelect.vue      | 21 ++++-
 .../incident/IncidentDialogFilter.vue         |  4 +
 .../dispatch/src/incident/HandoffDialog.vue   | 94 ++++++++++++-------
 .../dispatch/src/incident/Participant.vue     | 43 +++++----
 .../src/incident/TableFilterDialog.vue        |  3 +
 .../static/dispatch/src/incident/store.js     |  2 +-
 .../static/dispatch/src/task/NewEditSheet.vue | 11 ++-
 .../static/dispatch/src/task/store.js         |  3 +
 12 files changed, 210 insertions(+), 102 deletions(-)

diff --git a/src/dispatch/incident/flows.py b/src/dispatch/incident/flows.py
index 8976eec03aec..83e54a21010f 100644
--- a/src/dispatch/incident/flows.py
+++ b/src/dispatch/incident/flows.py
@@ -920,6 +920,7 @@ def incident_add_or_reactivate_participant_flow(
     participant = participant_service.get_by_incident_id_and_email(
         db_session=db_session, incident_id=incident.id, email=user_email
     )
+    log.debug(f"**** the participant is {participant}")
 
     if participant:
         if participant.active_roles:
@@ -935,6 +936,7 @@ def incident_add_or_reactivate_participant_flow(
         participant = participant_flows.add_participant(
             user_email, incident, db_session, service_id=service_id, role=participant_role
         )
+        log.debug(f"**** the participant added and now is {participant}")
 
     # we add the participant to the tactical group
     group_flows.update_group(
diff --git a/src/dispatch/static/dispatch/src/case/HandoffDialog.vue b/src/dispatch/static/dispatch/src/case/HandoffDialog.vue
index b786ff8b54a8..6bdf4d663774 100644
--- a/src/dispatch/static/dispatch/src/case/HandoffDialog.vue
+++ b/src/dispatch/static/dispatch/src/case/HandoffDialog.vue
@@ -1,29 +1,37 @@
 <template>
   <v-dialog v-model="showHandoffDialog" persistent max-width="800px">
-    <v-card>
-      <v-card-title>
-        <span class="text-h5">Handoff Cases</span>
-      </v-card-title>
-      <v-card-text> Select the new assignee for the selected cases. </v-card-text>
-      <v-card-actions>
-        <v-container>
-          <v-row>
-            <v-col cols="12">
-              <participant-select v-model="assignee" label="Case Assignee" :project="project" />
-            </v-col>
-            <v-btn color="blue en-1" variant="text" @click="closeHandoffDialog()"> Cancel </v-btn>
-            <v-btn
-              color="red en-1"
-              variant="text"
-              :loading="loading"
-              @click="saveBulk({ assignee: assignee })"
-            >
-              Handoff
-            </v-btn>
-          </v-row>
-        </v-container>
-      </v-card-actions>
-    </v-card>
+    <v-form @submit.prevent v-slot="{ isValid }">
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Handoff Cases</span>
+        </v-card-title>
+        <v-card-text> Select the new assignee for the selected cases. </v-card-text>
+        <v-card-actions>
+          <v-container>
+            <v-row>
+              <v-col cols="12">
+                <participant-select
+                  v-model="assignee"
+                  label="Case Assignee"
+                  :project="project"
+                  :rules="[required_and_only_one]"
+                />
+              </v-col>
+              <v-btn color="blue en-1" variant="text" @click="closeHandoffDialog()"> Cancel </v-btn>
+              <v-btn
+                color="red en-1"
+                variant="text"
+                :loading="loading"
+                :disabled="!isValid.value"
+                @click="saveBulk({ assignee: assignee[0] })"
+              >
+                Handoff
+              </v-btn>
+            </v-row>
+          </v-container>
+        </v-card-actions>
+      </v-card>
+    </v-form>
   </v-dialog>
 </template>
 
@@ -38,7 +46,17 @@ export default {
 
   data() {
     return {
-      assignee: { individual: { name: "Assignee Name" } },
+      assignee: null,
+      project: null,
+      required_and_only_one: (value) => {
+        if (!value || value.length == 0) {
+          return "This field is required"
+        }
+        if (value && value.length > 1) {
+          return "Only one is allowed"
+        }
+        return true
+      },
     }
   },
 
@@ -50,12 +68,22 @@ export default {
     ...mapFields("case_management", [
       "dialogs.showHandoffDialog",
       "selected.loading",
-      "selected.project",
+      "table.rows.selected",
     ]),
   },
 
   methods: {
     ...mapActions("case_management", ["closeHandoffDialog", "saveBulk", "resetSelected"]),
   },
+
+  watch: {
+    selected(val) {
+      this.project = val.map((i) => i.project)
+    },
+  },
+
+  created: function () {
+    this.project = this.selected.map((i) => i.project)
+  },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/case/Participant.vue b/src/dispatch/static/dispatch/src/case/Participant.vue
index 83c0218fbedd..3f95b9e13f52 100644
--- a/src/dispatch/static/dispatch/src/case/Participant.vue
+++ b/src/dispatch/static/dispatch/src/case/Participant.vue
@@ -2,24 +2,24 @@
   <div>
     <v-menu v-model="menu" origin="overlap">
       <template #activator="{ props }">
-        <v-chip pill size="small" v-bind="props" v-if="participant.individual">
+        <v-chip pill size="small" v-bind="props" v-if="local_participant.individual">
           <v-avatar color="teal" start>
-            <span class="text-white">{{ initials(participant.individual.name) }}</span>
+            <span class="text-white">{{ initials(local_participant.individual.name) }}</span>
           </v-avatar>
-          {{ participant.individual.name }}
+          {{ local_participant.individual.name }}
         </v-chip>
       </template>
       <v-card width="300">
         <v-list dark>
-          <v-list-item v-if="participant.individual">
+          <v-list-item v-if="local_participant.individual">
             <template #prepend>
               <v-avatar color="teal">
-                <span class="text-white">{{ initials(participant.individual.name) }}</span>
+                <span class="text-white">{{ initials(local_participant.individual.name) }}</span>
               </v-avatar>
             </template>
 
-            <v-list-item-title>{{ participant.individual.name }}</v-list-item-title>
-            <v-list-item-subtitle>{{ participant.individual.email }}</v-list-item-subtitle>
+            <v-list-item-title>{{ local_participant.individual.name }}</v-list-item-title>
+            <v-list-item-subtitle>{{ local_participant.individual.email }}</v-list-item-subtitle>
 
             <template #append>
               <v-btn icon variant="text" @click="menu = false">
@@ -34,39 +34,39 @@
               <v-icon>mdi-briefcase</v-icon>
             </template>
 
-            <v-list-item-subtitle>{{ participant.individual.email }}</v-list-item-subtitle>
+            <v-list-item-subtitle>{{ local_participant.individual.email }}</v-list-item-subtitle>
           </v-list-item>
-          <v-list-item v-if="participant.individual.company">
+          <v-list-item v-if="local_participant.individual.company">
             <template #prepend>
               <v-icon>mdi-domain</v-icon>
             </template>
 
-            <v-list-item-subtitle>{{ participant.individual.company }}</v-list-item-subtitle>
+            <v-list-item-subtitle>{{ local_participant.individual.company }}</v-list-item-subtitle>
           </v-list-item>
-          <v-list-item v-if="participant.location">
+          <v-list-item v-if="local_participant.location">
             <template #prepend>
               <v-icon>mdi-earth</v-icon>
             </template>
 
-            <v-list-item-subtitle>{{ participant.location }}</v-list-item-subtitle>
+            <v-list-item-subtitle>{{ local_participant.location }}</v-list-item-subtitle>
           </v-list-item>
-          <v-list-item v-if="participant.department">
+          <v-list-item v-if="local_participant.department">
             <template #prepend>
               <v-icon>mdi-account-group-outline</v-icon>
             </template>
 
-            <v-list-item-subtitle>{{ participant.department }}</v-list-item-subtitle>
+            <v-list-item-subtitle>{{ local_participant.department }}</v-list-item-subtitle>
           </v-list-item>
-          <v-list-item v-if="participant.team">
+          <v-list-item v-if="local_participant.team">
             <template #prepend>
               <v-icon>mdi-account-multiple-outline</v-icon>
             </template>
 
-            <v-list-item-subtitle>{{ participant.team }}</v-list-item-subtitle>
+            <v-list-item-subtitle>{{ local_participant.team }}</v-list-item-subtitle>
           </v-list-item>
           <v-list-item
-            v-if="participant.individual.weblink"
-            :href="participant.individual.weblink"
+            v-if="local_participant.individual.weblink"
+            :href="local_participant.individual.weblink"
             target="_blank"
           >
             <template #prepend>
@@ -89,6 +89,7 @@ export default {
 
   data: () => ({
     menu: false,
+    local_participant: { individual: {} },
   }),
 
   setup() {
@@ -103,5 +104,11 @@ export default {
       },
     },
   },
+
+  created: function () {
+    if (this.participant?.individual) {
+      this.local_participant = this.participant
+    }
+  },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/case/store.js b/src/dispatch/static/dispatch/src/case/store.js
index 9ae868619f90..cc8288963f90 100644
--- a/src/dispatch/static/dispatch/src/case/store.js
+++ b/src/dispatch/static/dispatch/src/case/store.js
@@ -289,6 +289,12 @@ const actions = {
       })
   },
   save({ commit, dispatch }) {
+    if (Array.isArray(state.selected.reporter)) {
+      state.selected.reporter = state.selected.reporter[0]
+    }
+    if (Array.isArray(state.selected.assignee)) {
+      state.selected.assignee = state.selected.assignee[0]
+    }
     commit("SET_SELECTED_LOADING", true)
     if (!state.selected.id) {
       return CaseApi.create(state.selected)
diff --git a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
index 4118d23574ed..cd072967e20e 100644
--- a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
+++ b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
@@ -11,6 +11,7 @@
     return-object
     v-model="participant"
     chips
+    multiple
     @update:model-value="handleClear"
     :menu-props="{ closeOnContentClick: true }"
   >
@@ -84,11 +85,21 @@ export default {
       }
 
       if (props.project) {
-        filterOptions = {
-          filters: {
-            project: [props.project],
-          },
-          ...filterOptions,
+        if (Array.isArray(props.project) && props.project.length > 0) {
+          console.log(`**** the project is ${JSON.stringify(props.project)}`)
+          filterOptions = {
+            filters: {
+              project: props.project,
+            },
+            ...filterOptions,
+          }
+        } else {
+          filterOptions = {
+            filters: {
+              project: [props.project],
+            },
+            ...filterOptions,
+          }
         }
       }
       filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
diff --git a/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue b/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue
index 97875ed28629..3423e5b65d25 100644
--- a/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue
+++ b/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue
@@ -148,6 +148,10 @@ export default {
   methods: {
     applyFilters() {
       if (this.local_participant) {
+        if (Array.isArray(this.local_participant)) {
+          this.local_participant = this.local_participant[0]
+        }
+        console.log(`**** the local_participant is ${JSON.stringify(this.local_participant)}`)
         if (this.local_participant_is_commander) {
           this.filters.commander = this.local_participant
           this.filters.participant = null
diff --git a/src/dispatch/static/dispatch/src/incident/HandoffDialog.vue b/src/dispatch/static/dispatch/src/incident/HandoffDialog.vue
index b7756a990b0d..b22eed394d4d 100644
--- a/src/dispatch/static/dispatch/src/incident/HandoffDialog.vue
+++ b/src/dispatch/static/dispatch/src/incident/HandoffDialog.vue
@@ -1,36 +1,40 @@
 <template>
   <v-dialog v-model="showHandoffDialog" persistent max-width="800px">
-    <v-card>
-      <v-card-title>
-        <span class="text-h5">Handoff Incidents</span>
-      </v-card-title>
-      <v-card-text> Select the new commander for the selected incidents. </v-card-text>
-      <v-card-actions>
-        <v-container>
-          <v-row>
-            <v-col cols="12">
-              <participant-select
-                v-model="commander"
-                label="Incident Commander"
-                :project="project"
-              />
-            </v-col>
-            <!-- <v-col cols="12"> -->
-            <!--   <v-checkbox v-model="report" label="Generate Report"/> -->
-            <!-- </v-col> -->
-            <v-btn color="blue en-1" variant="text" @click="closeHandoffDialog()"> Cancel </v-btn>
-            <v-btn
-              color="red en-1"
-              variant="text"
-              :loading="loading"
-              @click="saveBulk({ commander: commander })"
-            >
-              Handoff
-            </v-btn>
-          </v-row>
-        </v-container>
-      </v-card-actions>
-    </v-card>
+    <v-form @submit.prevent v-slot="{ isValid }">
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Handoff Incidents</span>
+        </v-card-title>
+        <v-card-text> Select the new commander for the selected incidents. </v-card-text>
+        <v-card-actions>
+          <v-container>
+            <v-row>
+              <v-col cols="12">
+                <participant-select
+                  v-model="commander"
+                  label="Incident Commander"
+                  :project="project"
+                  :rules="[required_and_only_one]"
+                />
+              </v-col>
+              <!-- <v-col cols="12"> -->
+              <!--   <v-checkbox v-model="report" label="Generate Report"/> -->
+              <!-- </v-col> -->
+              <v-btn color="blue en-1" variant="text" @click="closeHandoffDialog()"> Cancel </v-btn>
+              <v-btn
+                color="red en-1"
+                variant="text"
+                :loading="loading"
+                :disabled="!isValid.value"
+                @click="saveBulk({ commander: commander[0] })"
+              >
+                Handoff
+              </v-btn>
+            </v-row>
+          </v-container>
+        </v-card-actions>
+      </v-card>
+    </v-form>
   </v-dialog>
 </template>
 
@@ -45,8 +49,18 @@ export default {
 
   data() {
     return {
-      commander: { individual: { name: "Commander Name" } },
+      commander: null,
       report: false,
+      project: null,
+      required_and_only_one: (value) => {
+        if (!value || value.length == 0) {
+          return "This field is required"
+        }
+        if (value && value.length > 1) {
+          return "Only one is allowed"
+        }
+        return true
+      },
     }
   },
 
@@ -55,11 +69,25 @@ export default {
   },
 
   computed: {
-    ...mapFields("incident", ["dialogs.showHandoffDialog", "selected.loading", "selected.project"]),
+    ...mapFields("incident", [
+      "dialogs.showHandoffDialog",
+      "selected.loading",
+      "table.rows.selected",
+    ]),
   },
 
   methods: {
     ...mapActions("incident", ["closeHandoffDialog", "saveBulk", "resetSelected"]),
   },
+
+  watch: {
+    selected(val) {
+      this.project = val.map((i) => i.project)
+    },
+  },
+
+  created: function () {
+    this.project = this.selected.map((i) => i.project)
+  },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/incident/Participant.vue b/src/dispatch/static/dispatch/src/incident/Participant.vue
index 79666f7fcea1..ab44cf5e756b 100644
--- a/src/dispatch/static/dispatch/src/incident/Participant.vue
+++ b/src/dispatch/static/dispatch/src/incident/Participant.vue
@@ -1,24 +1,24 @@
 <template>
   <v-menu v-model="menu" location="top" origin="overlap">
     <template #activator="{ props }">
-      <v-chip pill size="small" v-bind="props" v-if="participant.individual">
+      <v-chip pill size="small" v-bind="props" v-if="local_participant.individual">
         <v-avatar color="teal" start>
-          <span class="text-white">{{ initials(participant.individual.name) }}</span>
+          <span class="text-white">{{ initials(local_participant.individual.name) }}</span>
         </v-avatar>
-        {{ participant.individual.name }}
+        {{ local_participant.individual.name }}
       </v-chip>
     </template>
     <v-card width="300">
       <v-list theme="dark">
-        <v-list-item v-if="participant.individual">
+        <v-list-item v-if="local_participant.individual">
           <template #prepend>
             <v-avatar color="teal">
-              {{ initials(participant.individual.name) }}
+              {{ initials(local_participant.individual.name) }}
             </v-avatar>
           </template>
 
-          <v-list-item-title>{{ participant.individual.name }}</v-list-item-title>
-          <v-list-item-subtitle>{{ participant.individual.email }}</v-list-item-subtitle>
+          <v-list-item-title>{{ local_participant.individual.name }}</v-list-item-title>
+          <v-list-item-subtitle>{{ local_participant.individual.email }}</v-list-item-subtitle>
 
           <template #append>
             <v-btn
@@ -32,23 +32,23 @@
       </v-list>
       <v-list>
         <v-list-item prepend-icon="mdi-briefcase">
-          <v-list-item-subtitle>{{ participant.individual.email }}</v-list-item-subtitle>
+          <v-list-item-subtitle>{{ local_participant.individual.email }}</v-list-item-subtitle>
         </v-list-item>
-        <v-list-item v-if="participant.individual.company" prepend-icon="mdi-domain">
-          <v-list-item-subtitle>{{ participant.individual.company }}</v-list-item-subtitle>
+        <v-list-item v-if="local_participant.individual.company" prepend-icon="mdi-domain">
+          <v-list-item-subtitle>{{ local_participant.individual.company }}</v-list-item-subtitle>
         </v-list-item>
-        <v-list-item v-if="participant.location" prepend-icon="mdi-earth">
-          <v-list-item-subtitle>{{ participant.location }}</v-list-item-subtitle>
+        <v-list-item v-if="local_participant.location" prepend-icon="mdi-earth">
+          <v-list-item-subtitle>{{ local_participant.location }}</v-list-item-subtitle>
         </v-list-item>
-        <v-list-item v-if="participant.department" prepend-icon="mdi-account-group">
-          <v-list-item-subtitle>{{ participant.department }}</v-list-item-subtitle>
+        <v-list-item v-if="local_participant.department" prepend-icon="mdi-account-group">
+          <v-list-item-subtitle>{{ local_participant.department }}</v-list-item-subtitle>
         </v-list-item>
-        <v-list-item v-if="participant.team" prepend-icon="mdi-account-multiple">
-          <v-list-item-subtitle>{{ participant.team }}</v-list-item-subtitle>
+        <v-list-item v-if="local_participant.team" prepend-icon="mdi-account-multiple">
+          <v-list-item-subtitle>{{ local_participant.team }}</v-list-item-subtitle>
         </v-list-item>
         <v-list-item
-          v-if="participant.individual.weblink"
-          :href="participant.individual.weblink"
+          v-if="local_participant.individual.weblink"
+          :href="local_participant.individual.weblink"
           target="_blank"
           prepend-icon="mdi-open-in-new"
         >
@@ -67,6 +67,7 @@ export default {
 
   data: () => ({
     menu: false,
+    local_participant: { individual: {} },
   }),
 
   setup() {
@@ -81,5 +82,11 @@ export default {
       },
     },
   },
+
+  created: function () {
+    if (this.participant?.individual) {
+      this.local_participant = this.participant
+    }
+  },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/incident/TableFilterDialog.vue b/src/dispatch/static/dispatch/src/incident/TableFilterDialog.vue
index 6d03d3b392cb..0b167ed94a19 100644
--- a/src/dispatch/static/dispatch/src/incident/TableFilterDialog.vue
+++ b/src/dispatch/static/dispatch/src/incident/TableFilterDialog.vue
@@ -161,6 +161,9 @@ export default {
       this.status = this.local_status
       this.tag = this.local_tag
       this.tag_type = this.local_tag_type
+      if (Array.isArray(this.local_participant)) {
+        this.local_participant = this.local_participant[0]
+      }
       this.participant = this.local_participant
       if (this.local_participant_is_commander) {
         this.commander = this.local_participant
diff --git a/src/dispatch/static/dispatch/src/incident/store.js b/src/dispatch/static/dispatch/src/incident/store.js
index 4a72ae64030e..fe4ab4b157f9 100644
--- a/src/dispatch/static/dispatch/src/incident/store.js
+++ b/src/dispatch/static/dispatch/src/incident/store.js
@@ -240,8 +240,8 @@ const actions = {
     commit("SET_DIALOG_SHOW_EXPORT", false)
   },
   showHandoffDialog({ commit }, value) {
-    commit("SET_DIALOG_SHOW_HANDOFF", true)
     commit("SET_SELECTED", value)
+    commit("SET_DIALOG_SHOW_HANDOFF", true)
   },
   closeHandoffDialog({ commit }) {
     commit("SET_DIALOG_SHOW_HANDOFF", false)
diff --git a/src/dispatch/static/dispatch/src/task/NewEditSheet.vue b/src/dispatch/static/dispatch/src/task/NewEditSheet.vue
index 6e39e33928e9..6f0bccb6a95a 100644
--- a/src/dispatch/static/dispatch/src/task/NewEditSheet.vue
+++ b/src/dispatch/static/dispatch/src/task/NewEditSheet.vue
@@ -68,7 +68,7 @@
                   clearable
                   required
                   name="owner"
-                  :rules="[rules.required]"
+                  :rules="[required_and_only_one]"
                 />
               </v-col>
               <v-col cols="12">
@@ -130,6 +130,15 @@ export default {
   data() {
     return {
       statuses: ["Open", "Resolved"],
+      required_and_only_one: (value) => {
+        if (!value || value.length == 0) {
+          return "This field is required"
+        }
+        if (value && value.length > 1) {
+          return "Only one is allowed"
+        }
+        return true
+      },
     }
   },
 
diff --git a/src/dispatch/static/dispatch/src/task/store.js b/src/dispatch/static/dispatch/src/task/store.js
index 0e476f88799f..9848687be51d 100644
--- a/src/dispatch/static/dispatch/src/task/store.js
+++ b/src/dispatch/static/dispatch/src/task/store.js
@@ -101,6 +101,9 @@ const actions = {
     commit("SET_DIALOG_SHOW_EXPORT", false)
   },
   save({ commit, dispatch }) {
+    if (Array.isArray(state.selected.owner)) {
+      state.selected.owner = state.selected.owner[0]
+    }
     commit("SET_SELECTED_LOADING", true)
     if (!state.selected.id) {
       return TaskApi.create(state.selected)

From bf433dce627933eaa99a08d4d271a26d05584cba Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Mon, 20 Nov 2023 09:45:37 -0800
Subject: [PATCH 3/4] Removing debug logs

---
 src/dispatch/incident/flows.py                               | 2 --
 src/dispatch/static/dispatch/src/case/DetailsTab.vue         | 1 -
 .../static/dispatch/src/components/ParticipantSelect.vue     | 5 -----
 .../dispatch/src/dashboard/incident/IncidentDialogFilter.vue | 1 -
 src/dispatch/static/dispatch/src/incident/store.js           | 1 -
 5 files changed, 10 deletions(-)

diff --git a/src/dispatch/incident/flows.py b/src/dispatch/incident/flows.py
index 83e54a21010f..8976eec03aec 100644
--- a/src/dispatch/incident/flows.py
+++ b/src/dispatch/incident/flows.py
@@ -920,7 +920,6 @@ def incident_add_or_reactivate_participant_flow(
     participant = participant_service.get_by_incident_id_and_email(
         db_session=db_session, incident_id=incident.id, email=user_email
     )
-    log.debug(f"**** the participant is {participant}")
 
     if participant:
         if participant.active_roles:
@@ -936,7 +935,6 @@ def incident_add_or_reactivate_participant_flow(
         participant = participant_flows.add_participant(
             user_email, incident, db_session, service_id=service_id, role=participant_role
         )
-        log.debug(f"**** the participant added and now is {participant}")
 
     # we add the participant to the tactical group
     group_flows.update_group(
diff --git a/src/dispatch/static/dispatch/src/case/DetailsTab.vue b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
index f5e78ac0a0c4..73f202407efb 100644
--- a/src/dispatch/static/dispatch/src/case/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
@@ -165,7 +165,6 @@ export default {
       visibilities: ["Open", "Restricted"],
       resolutionReasons: ["False Positive", "User Acknowledged", "Mitigated", "Escalated"],
       only_one: (value) => {
-        console.log(`**** the participant rules is ${value}`)
         if (value && value.length > 1) {
           return "Only one is allowed"
         }
diff --git a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
index cd072967e20e..9ecf8c10b1e9 100644
--- a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
+++ b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
@@ -86,7 +86,6 @@ export default {
 
       if (props.project) {
         if (Array.isArray(props.project) && props.project.length > 0) {
-          console.log(`**** the project is ${JSON.stringify(props.project)}`)
           filterOptions = {
             filters: {
               project: props.project,
@@ -157,12 +156,8 @@ export default {
   },
   watch: {
     project(val) {
-      console.log(`**** the project is ${JSON.stringify(val)}`)
       this.getIndividualData()
     },
-    participant(val,oldval) {
-      console.log(`**** the model is ${JSON.stringify(val)}`)
-    },
   },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue b/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue
index 3423e5b65d25..9fefae4e17d0 100644
--- a/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue
+++ b/src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue
@@ -151,7 +151,6 @@ export default {
         if (Array.isArray(this.local_participant)) {
           this.local_participant = this.local_participant[0]
         }
-        console.log(`**** the local_participant is ${JSON.stringify(this.local_participant)}`)
         if (this.local_participant_is_commander) {
           this.filters.commander = this.local_participant
           this.filters.participant = null
diff --git a/src/dispatch/static/dispatch/src/incident/store.js b/src/dispatch/static/dispatch/src/incident/store.js
index fe4ab4b157f9..ef101c742cc4 100644
--- a/src/dispatch/static/dispatch/src/incident/store.js
+++ b/src/dispatch/static/dispatch/src/incident/store.js
@@ -360,7 +360,6 @@ const actions = {
     if (Array.isArray(state.selected.commander)) {
       state.selected.commander = state.selected.commander[0]
     }
-    console.log(`**** the new commander is ${JSON.stringify(state.selected.commander)}`)
     if (!state.selected.id) {
       return IncidentApi.create(state.selected)
         .then(() => {

From 195997417795f3c5e643ae6407916594adeec28f Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Mon, 20 Nov 2023 11:15:33 -0800
Subject: [PATCH 4/4] Fixing lint errors

---
 src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue   | 2 +-
 .../static/dispatch/src/case/ReportSubmissionCard.vue         | 4 ++--
 .../static/dispatch/src/components/ParticipantSelect.vue      | 2 +-
 .../static/dispatch/src/incident/ReportReceiptCard.vue        | 2 +-
 .../static/dispatch/src/incident/ReportSubmissionCard.vue     | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue b/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue
index a9a5abf12cb9..e08b6fb82e12 100644
--- a/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue
+++ b/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue
@@ -135,7 +135,7 @@
       </v-list>
     </v-card-text>
     <v-card-actions>
-      <v-spacer></v-spacer>
+      <v-spacer />
       <v-btn color="info" block variant="flat" @click="resetSelected()">
         Report Another Issue
       </v-btn>
diff --git a/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue b/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
index e00fa54d05cd..63ac38a36fc3 100644
--- a/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
+++ b/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
@@ -8,7 +8,7 @@
 "
       :loading="loading"
     >
-      <template v-slot:append>
+      <template #append>
         <v-tooltip location="bottom">
           <template #activator="{ props }">
             <v-btn icon variant="text" v-bind="props" @click="copyView">
@@ -78,7 +78,7 @@
         </v-form>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           color="info"
           variant="flat"
diff --git a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
index 9ecf8c10b1e9..065eb917c124 100644
--- a/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
+++ b/src/dispatch/static/dispatch/src/components/ParticipantSelect.vue
@@ -155,7 +155,7 @@ export default {
     }
   },
   watch: {
-    project(val) {
+    project() {
       this.getIndividualData()
     },
   },
diff --git a/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue b/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue
index 7a3fc0f16767..3bca2bb9ed9c 100644
--- a/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue
+++ b/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue
@@ -172,7 +172,7 @@
       </v-list>
     </v-card-text>
     <v-card-actions>
-      <v-spacer></v-spacer>
+      <v-spacer />
       <v-btn color="info" block variant="flat" @click="resetSelected()">
         Report Another Incident
       </v-btn>
diff --git a/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue b/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue
index fddf14371df4..066ea2ae2354 100644
--- a/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue
+++ b/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue
@@ -7,7 +7,7 @@
       variant="outlined"
       :loading="loading"
     >
-      <template v-slot:append>
+      <template #append>
         <v-tooltip location="bottom">
           <template #activator="{ props }">
             <v-btn icon variant="text" v-bind="props" @click="copyView">
@@ -71,7 +71,7 @@
         </v-row>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
+        <v-spacer />
 
         <v-btn
           color="info"