Bugfix/cant add assignee (#4017)

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,12 @@ export default {
       statuses: ["New", "Triage", "Escalated", "Closed"],
       visibilities: ["Open", "Restricted"],
       resolutionReasons: ["False Positive", "User Acknowledged", "Mitigated", "Escalated"],
+      only_one: (value) => {
+        if (value && value.length > 1) {
+          return "Only one is allowed"
+        }
+        return true
+      },
     }
   },
 

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>

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>

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>

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"

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)

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

@@ -4,15 +4,16 @@
     :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
+    multiple
     @update:model-value="handleClear"
+    :menu-props="{ closeOnContentClick: true }"
   >
     <template #no-data>
       <v-list-item v-if="!loading">
@@ -32,9 +33,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 +45,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 +59,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    project: {
+      type: [Object],
+      default: null,
+    },
   },
   setup(props) {
     let loading = ref(false)
@@ -79,6 +84,25 @@ export default {
         itemsPerPage: numItems.value * page,
       }
 
+      if (props.project) {
+        if (Array.isArray(props.project) && props.project.length > 0) {
+          filterOptions = {
+            filters: {
+              project: props.project,
+            },
+            ...filterOptions,
+          }
+        } else {
+          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 +125,7 @@ export default {
     }
 
     const handleClear = (newValue) => {
+      search.value = null
       if (!newValue) {
         items.value = []
         search.value = null
@@ -129,5 +154,10 @@ export default {
       total,
     }
   },
+  watch: {
+    project() {
+      this.getIndividualData()
+    },
+  },
 }
 </script>

src/dispatch/static/dispatch/src/dashboard/incident/IncidentDialogFilter.vue

@@ -148,6 +148,9 @@ export default {
   methods: {
     applyFilters() {
       if (this.local_participant) {
+        if (Array.isArray(this.local_participant)) {
+          this.local_participant = this.local_participant[0]
+        }
         if (this.local_participant_is_commander) {
           this.filters.commander = this.local_participant
           this.filters.participant = null