Fixes deleteable chips in various elements (#3458)

Netflix · Jun 2, 2023 · d76cacc · d76cacc
1 parent 2820136
commit d76cacc
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 13 deletions.
diff --git a/src/dispatch/static/dispatch/src/components/BaseCombobox.vue b/src/dispatch/static/dispatch/src/components/BaseCombobox.vue
@@ -12,6 +12,7 @@
     item-value="id"
     multiple
     no-filter
+    deletable-chips
     v-model="selectedItems"
   >
     <slot name="selection" v-bind="{ attr, item, selected }"></slot>

diff --git a/src/dispatch/static/dispatch/src/incident/IncidentCombobox.vue b/src/dispatch/static/dispatch/src/incident/IncidentCombobox.vue
@@ -17,7 +17,7 @@
     v-model="incident"
   >
     <template v-slot:selection="{ attr, on, item, selected }">
-      <v-chip v-bind="attr" :input-value="selected" v-on="on">
+      <v-chip v-bind="attr" :input-value="selected" v-on="on" close @click:close="remove(item)">
         <span v-text="item.name" />
       </v-chip>
     </template>
@@ -92,6 +92,9 @@ export default {
   },
 
   methods: {
+    remove(item) {
+      this.incident.splice(this.incident.indexOf(item), 1)
+    },
     fetchData(filterOptions) {
       this.error = null
       this.loading = "error"

diff --git a/src/dispatch/static/dispatch/src/search/SearchFilterCombobox.vue b/src/dispatch/static/dispatch/src/search/SearchFilterCombobox.vue
@@ -22,7 +22,14 @@
         <template v-slot:selection="{ attr, item, selected }">
           <v-menu v-model="menu" bottom right transition="scale-transition" origin="top left">
             <template v-slot:activator="{ on }">
-              <v-chip v-bind="attr" :input-value="selected" pill v-on="on">
+              <v-chip
+                v-bind="attr"
+                :input-value="selected"
+                pill
+                v-on="on"
+                close
+                @click:close="remove(item)"
+              >
                 {{ item.name }}
               </v-chip>
             </template>
@@ -149,11 +156,14 @@ export default {
   watch: {
     createdFilter: function (newVal) {
       this.items.push(newVal)
-      this.searchFilters = [newVal]
+      this.searchFilters.push(newVal)
     },
   },
 
   methods: {
+    remove(item) {
+      this.searchFilters.splice(this.searchFilters.indexOf(item), 1)
+    },
     fetchData() {
       this.error = null
       this.loading = "error"

diff --git a/src/dispatch/static/dispatch/src/signal/SignalDefinitionCombobox.vue b/src/dispatch/static/dispatch/src/signal/SignalDefinitionCombobox.vue
@@ -15,12 +15,19 @@
     item-value="id"
     multiple
     no-filter
-    v-model="filters"
+    v-model="signalDefinitions"
   >
     <template v-slot:selection="{ attr, item, selected }">
       <v-menu v-model="menu" bottom right transition="scale-transition" origin="top left">
         <template v-slot:activator="{ on }">
-          <v-chip v-bind="attr" :input-value="selected" pill v-on="on">
+          <v-chip
+            v-bind="attr"
+            :input-value="selected"
+            pill
+            v-on="on"
+            close
+            @click:close="remove(item)"
+          >
             {{ item.name }}
           </v-chip>
         </template>
@@ -115,24 +122,27 @@ export default {
   },
 
   computed: {
-    filters: {
+    signalDefinitions: {
       get() {
         return cloneDeep(this.value)
       },
       set(value) {
         this.search = null
-        this._filters = value.filter((v) => {
+        this._signalDefinitions = value.filter((v) => {
           if (typeof v === "string") {
             return false
           }
           return true
         })
-        this.$emit("input", this._filters)
+        this.$emit("input", this._signalDefinitions)
       },
     },
   },
 
   methods: {
+    remove(item) {
+      this.signalDefinitions.splice(this.signalDefinitions.indexOf(item), 1)
+    },
     fetchData() {
       this.error = null
       this.loading = "error"

diff --git a/src/dispatch/static/dispatch/src/signal/engagement/SignalEngagementCombobox.vue b/src/dispatch/static/dispatch/src/signal/engagement/SignalEngagementCombobox.vue
@@ -11,7 +11,14 @@
         <template #selection="{ attr, item, selected }">
           <v-menu bottom right transition="scale-transition" origin="top left">
             <template v-slot:activator="{ on }">
-              <v-chip v-bind="attr" :input-value="selected" pill v-on="on">
+              <v-chip
+                v-bind="attr"
+                :input-value="selected"
+                pill
+                v-on="on"
+                close
+                @click:close="remove(item)"
+              >
                 {{ item ? item.name : "Unknown" }}
               </v-chip>
             </template>
@@ -107,7 +114,7 @@ export default {
   watch: {
     createdItem: function (newVal) {
       this.items.push(newVal)
-      this.engagements = [newVal]
+      this.engagements.push(newVal)
     },
   },
 
@@ -119,6 +126,9 @@ export default {
       }
       return this.$options.filters.initials(item.name)
     },
+    remove(item) {
+      this.engagements.splice(this.engagements.indexOf(item), 1)
+    },
   },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/signal/filter/SignalFilterCombobox.vue b/src/dispatch/static/dispatch/src/signal/filter/SignalFilterCombobox.vue
@@ -22,7 +22,14 @@
         <template v-slot:selection="{ attr, item, selected }">
           <v-menu bottom right transition="scale-transition" origin="top left">
             <template v-slot:activator="{ on }">
-              <v-chip v-bind="attr" :input-value="selected" pill v-on="on">
+              <v-chip
+                v-bind="attr"
+                :input-value="selected"
+                pill
+                v-on="on"
+                close
+                @click:close="remove(item)"
+              >
                 {{ item.name }}
               </v-chip>
             </template>
@@ -156,11 +163,14 @@ export default {
   watch: {
     createdFilter: function (newVal) {
       this.items.push(newVal)
-      this.filters = [newVal]
+      this.filters.push(newVal)
     },
   },
 
   methods: {
+    remove(item) {
+      this.filters.splice(this.filters.indexOf(item), 1)
+    },
     fetchData() {
       this.error = null
       this.loading = "error"

diff --git a/src/dispatch/static/dispatch/src/workflow/WorkflowCombobox.vue b/src/dispatch/static/dispatch/src/workflow/WorkflowCombobox.vue
@@ -13,7 +13,14 @@
         <template #selection="{ attr, item, selected }">
           <v-menu bottom right transition="scale-transition" origin="top left">
             <template v-slot:activator="{ on }">
-              <v-chip v-bind="attr" :input-value="selected" pill v-on="on">
+              <v-chip
+                v-bind="attr"
+                :input-value="selected"
+                pill
+                v-on="on"
+                close
+                @click:close="remove(item)"
+              >
                 {{ item ? item.name : "Unknown" }}
               </v-chip>
             </template>
@@ -112,6 +119,9 @@ export default {
       }
       return this.$options.filters.initials(item.name)
     },
+    remove(item) {
+      this.workflows.splice(this.workflows.indexOf(item), 1)
+    },
   },
 }
 </script>