New tag selector component

src/dispatch/database/revisions/tenant/versions/2023-12-18_6c1a250b1e4b.py

@@ -0,0 +1,39 @@
+"""Adds new columns to the tag_type table to support new UI
+
+Revision ID: 6c1a250b1e4b
+Revises: 99d317cbc848
+Create Date: 2023-12-18 10:22:13.668372
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = "6c1a250b1e4b"
+down_revision = "99d317cbc848"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column("tag_type", sa.Column("discoverable_case", sa.Boolean(), nullable=True, server_default="t", default=True))
+    op.add_column("tag_type", sa.Column("discoverable_incident", sa.Boolean(), nullable=True, server_default="t", default=True))
+    op.add_column("tag_type", sa.Column("discoverable_query", sa.Boolean(), nullable=True, server_default="t", default=True))
+    op.add_column("tag_type", sa.Column("discoverable_signal", sa.Boolean(), nullable=True, server_default="t", default=True))
+    op.add_column("tag_type", sa.Column("discoverable_source", sa.Boolean(), nullable=True, server_default="t", default=True))
+    op.add_column("tag_type", sa.Column("color", sa.String(), nullable=True))
+    op.add_column("tag_type", sa.Column("icon", sa.String(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column("tag_type", "icon")
+    op.drop_column("tag_type", "color")
+    op.drop_column("tag_type", "discoverable_case")
+    op.drop_column("tag_type", "discoverable_incident")
+    op.drop_column("tag_type", "discoverable_query")
+    op.drop_column("tag_type", "discoverable_signal")
+    op.drop_column("tag_type", "discoverable_source")
+    # ### end Alembic commands ###

src/dispatch/static/dispatch/components.d.ts

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     DefaultLayout: typeof import('./src/components/layouts/DefaultLayout.vue')['default']
     DMenu: typeof import('./src/components/DMenu.vue')['default']
     DTooltip: typeof import('./src/components/DTooltip.vue')['default']
+    IconPickerInput: typeof import('./src/components/IconPickerInput.vue')['default']
     InfoWidget: typeof import('./src/components/InfoWidget.vue')['default']
     Loading: typeof import('./src/components/Loading.vue')['default']
     LockButton: typeof import('./src/components/LockButton.vue')['default']

src/dispatch/static/dispatch/src/case/DetailsTab.vue

@@ -137,7 +137,7 @@ import DateTimePickerMenu from "@/components/DateTimePickerMenu.vue"
 import IncidentFilterCombobox from "@/incident/IncidentFilterCombobox.vue"
 import ProjectSelect from "@/project/ProjectSelect.vue"
 import ParticipantSelect from "@/components/ParticipantSelect.vue"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 
 export default {
   setup() {

src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue

@@ -69,7 +69,12 @@
               <case-priority-select :project="project" v-model="case_priority" />
             </v-col>
             <v-col cols="12">
-              <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
+              <tag-filter-auto-complete
+                :project="project"
+                v-model="tags"
+                label="Tags"
+                model="case"
+              />
             </v-col>
           </v-row>
         </v-container>
@@ -104,7 +109,7 @@ import CaseTypeSelect from "@/case/type/CaseTypeSelect.vue"
 import CasePrioritySelect from "@/case/priority/CasePrioritySelect.vue"
 import ProjectSelect from "@/project/ProjectSelect.vue"
 import DocumentApi from "@/document/api"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 import SearchUtils from "@/search/utils"
 import CaseTypeApi from "@/case/type/api"
 

src/dispatch/static/dispatch/src/case/TableExportDialog.vue

@@ -26,7 +26,7 @@
                   <project-combobox v-model="project" label="Projects" />
                 </v-list-item>
                 <v-list-item>
-                  <tag-filter-auto-complete v-model="tag" label="Tags" />
+                  <tag-filter-auto-complete v-model="tag" label="Tags" model="case" />
                 </v-list-item>
                 <v-list-item>
                   <tag-type-filter-combobox v-model="tag_type" label="Tag Types" />
@@ -112,7 +112,7 @@ import CaseStatusMultiSelect from "@/case/CaseStatusMultiSelect.vue"
 import CaseTypeCombobox from "@/case/type/CaseTypeCombobox.vue"
 import DateWindowInput from "@/components/DateWindowInput.vue"
 import ProjectCombobox from "@/project/ProjectCombobox.vue"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 import TagTypeFilterCombobox from "@/tag_type/TagTypeFilterCombobox.vue"
 
 export default {

src/dispatch/static/dispatch/src/case/TableFilterDialog.vue

@@ -35,7 +35,7 @@
           <tag-type-filter-combobox v-model="local_tag_type" label="Tag Types" />
         </v-list-item>
         <v-list-item>
-          <tag-filter-auto-complete v-model="local_tag" label="Tags" />
+          <tag-filter-auto-complete v-model="local_tag" label="Tags" model="case" />
         </v-list-item>
       </v-list>
       <v-card-actions>
@@ -57,7 +57,7 @@ import CaseStatusMultiSelect from "@/case/CaseStatusMultiSelect.vue"
 import CaseTypeCombobox from "@/case/type/CaseTypeCombobox.vue"
 import DateWindowInput from "@/components/DateWindowInput.vue"
 import ProjectCombobox from "@/project/ProjectCombobox.vue"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 import TagTypeFilterCombobox from "@/tag_type/TagTypeFilterCombobox.vue"
 
 const store = useStore()

src/dispatch/static/dispatch/src/components/ColorPickerInput.vue

@@ -30,6 +30,12 @@ export default {
         return "Color"
       },
     },
+    default: {
+      type: String,
+      default: function () {
+        return "#1976D2FF"
+      },
+    },
   },
 
   data() {
@@ -41,7 +47,7 @@ export default {
   computed: {
     color: {
       get() {
-        return this.modelValue || "#1976D2FF"
+        return this.modelValue || this.default || "#1976D2FF"
       },
       set(value) {
         this.$emit("update:modelValue", value)

src/dispatch/static/dispatch/src/components/IconPickerInput.vue

@@ -0,0 +1,145 @@
+<template>
+  <v-text-field :label="label" v-model="icon">
+    <template #append>
+      <v-menu v-model="menu" location="top" :close-on-content-click="false">
+        <template #activator="{ props }">
+          <div :style="swatchStyle" v-bind="props">
+            <v-icon
+              :icon="prepended(icon)"
+              style="margin-top: 3px; margin-left: 3px"
+              color="white"
+            />
+          </div>
+        </template>
+        <v-card>
+          <v-card-text class="pa-0">
+            <div>
+              <div>
+                <div>
+                  <label for="iconSearch" style="display: none">Search for Icon</label>
+                  <input
+                    id="iconSearch"
+                    placeholder="Search for Icon"
+                    v-model="searchText"
+                    @input="searchTextChanged"
+                  />
+                </div>
+              </div>
+              <div>
+                <h4 class="icon-title">Regular Icons</h4>
+
+                <ul v-if="allIcons.length > 0">
+                  <li v-for="iconName in allIcons" :key="iconName">
+                    <v-btn @click="selectIcon(iconName)">
+                      <div class="text-center">
+                        <v-icon :icon="prepended(iconName)" />
+                        {{ iconName }}
+                      </div>
+                    </v-btn>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-menu>
+    </template>
+  </v-text-field>
+</template>
+
+<script>
+import materialIcons from "../assets/icons"
+
+export default {
+  name: "IconPickerInput",
+
+  props: {
+    modelValue: {
+      type: String,
+      default: null,
+    },
+    label: {
+      type: String,
+      default: function () {
+        return "Icon"
+      },
+    },
+    color: {
+      type: String,
+      default: function () {
+        return "#1976D2FF"
+      },
+    },
+  },
+
+  data() {
+    return {
+      menu: false,
+      allIcons: [],
+      searchText: "",
+      loading: true,
+      searchIconNotFound: false,
+    }
+  },
+
+  methods: {
+    selectIcon(icon) {
+      this.menu = false
+      this.$emit("update:modelValue", icon)
+    },
+    searchTextChanged() {
+      this.searchIcon(this.searchText)
+    },
+    setDefaultIcons() {
+      // get the names attribute from the list of allIcons
+      this.allIcons = materialIcons.map((icon) => icon.name).slice(0, 10)
+    },
+    searchIcon(txt) {
+      this.loading = true
+      if (txt && txt.length > 0) {
+        setTimeout(() => {
+          this.loading = false
+        }, 950)
+
+        txt = txt.toLowerCase()
+        this.allIcons = materialIcons
+          .map((icon) => icon.name)
+          .filter((icon) => icon.toLowerCase().includes(txt))
+      } else {
+        setTimeout(() => {
+          this.setDefaultIcons()
+          this.loading = false
+        }, 950)
+      }
+    },
+    prepended(icon) {
+      return icon ? `mdi-${icon}` : ""
+    },
+  },
+  created() {
+    this.setDefaultIcons()
+  },
+
+  computed: {
+    icon: {
+      get() {
+        return this.modelValue || null
+      },
+      set(value) {
+        this.$emit("update:modelValue", value)
+      },
+    },
+    swatchStyle() {
+      return {
+        // set the color to the color prop
+        backgroundColor: this.color || "#000000",
+        cursor: "pointer",
+        height: "30px",
+        width: "30px",
+        borderRadius: "4px",
+        transition: "border-radius 200ms ease-in-out",
+      }
+    },
+  },
+}
+</script>

src/dispatch/static/dispatch/src/dashboard/case/CaseDialogFilter.vue

@@ -20,7 +20,7 @@
           <project-combobox v-model="filters.project" label="Projects" />
         </v-list-item>
         <v-list-item>
-          <tag-filter-auto-complete v-model="filters.tag" label="Tags" />
+          <tag-filter-auto-complete v-model="filters.tag" label="Tags" model="case" />
         </v-list-item>
         <v-list-item>
           <case-type-combobox v-model="filters.case_type" />
@@ -54,7 +54,7 @@ import DateWindowInput from "@/components/DateWindowInput.vue"
 import ProjectCombobox from "@/project/ProjectCombobox.vue"
 import RouterUtils from "@/router/utils"
 import SearchUtils from "@/search/utils"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 
 let today = function () {
   let now = new Date()

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

@@ -20,7 +20,7 @@
           <project-combobox v-model="filters.project" label="Projects" />
         </v-list-item>
         <v-list-item>
-          <tag-filter-auto-complete v-model="filters.tag" label="Tags" />
+          <tag-filter-auto-complete v-model="filters.tag" label="Tags" model="incident" />
         </v-list-item>
         <v-list-item>
           <incident-type-combobox v-model="filters.incident_type" />
@@ -74,7 +74,7 @@ import IncidentTypeCombobox from "@/incident/type/IncidentTypeCombobox.vue"
 import ProjectCombobox from "@/project/ProjectCombobox.vue"
 import RouterUtils from "@/router/utils"
 import SearchUtils from "@/search/utils"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 import ParticipantSelect from "@/components/ParticipantSelect.vue"
 
 let today = function () {

src/dispatch/static/dispatch/src/data/query/EditBasicInfoTab.vue

@@ -46,7 +46,7 @@
 import { required } from "@/util/form"
 import { mapFields } from "vuex-map-fields"
 
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 import ProjectSelect from "@/project/ProjectSelect.vue"
 import SourceSelect from "@/data/source/SourceSelect.vue"
 

src/dispatch/static/dispatch/src/data/query/TableFilterDialog.vue

@@ -17,7 +17,7 @@
           <tag-type-filter-combobox v-model="local_tag_type" label="Tag Types" />
         </v-list-item>
         <v-list-item>
-          <tag-filter-auto-complete v-model="local_tag" label="Tags" />
+          <tag-filter-auto-complete v-model="local_tag" label="Tags" model="query" />
         </v-list-item>
       </v-list>
       <v-card-actions>
@@ -33,7 +33,7 @@ import { sum } from "lodash"
 import { mapFields } from "vuex-map-fields"
 
 import ProjectCombobox from "@/project/ProjectCombobox.vue"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 import TagTypeFilterCombobox from "@/tag_type/TagTypeFilterCombobox.vue"
 
 export default {

src/dispatch/static/dispatch/src/data/source/EditBasicInfoTab.vue

@@ -100,7 +100,7 @@ import { required } from "@/util/form"
 import { mapFields } from "vuex-map-fields"
 
 import ServiceSelect from "@/service/ServiceSelect.vue"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 import ProjectSelect from "@/project/ProjectSelect.vue"
 import EnvironmentSelect from "@/data/source/environment/EnvironmentSelect.vue"
 import StatusSelect from "@/data/source/status/StatusSelect.vue"

src/dispatch/static/dispatch/src/data/source/TableFilterDialog.vue

@@ -29,7 +29,7 @@
           <project-combobox v-model="local_project" label="Projects" />
         </v-list-item>
         <v-list-item>
-          <tag-filter-auto-complete v-model="local_tag" label="Tags" />
+          <tag-filter-auto-complete v-model="local_tag" label="Tags" model="source" />
         </v-list-item>
         <v-list-item>
           <tag-type-filter-combobox v-model="local_tag_type" label="Tag Types" />
@@ -51,7 +51,7 @@ import DataFormatCombobox from "@/data/source/dataFormat/DataFormatCombobox.vue"
 import EnvironmentCombobox from "@/data/source/environment/EnvironmentCombobox.vue"
 import ProjectCombobox from "@/project/ProjectCombobox.vue"
 import StatusCombobox from "@/data/source/status/StatusCombobox.vue"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 import TagTypeFilterCombobox from "@/tag_type/TagTypeFilterCombobox.vue"
 import TransportCombobox from "@/data/source/transport/TransportCombobox.vue"
 import TypeCombobox from "@/data/source/type/TypeCombobox.vue"

src/dispatch/static/dispatch/src/incident/DetailsTab.vue

@@ -127,7 +127,7 @@ import IncidentSeveritySelect from "@/incident/severity/IncidentSeveritySelect.v
 import IncidentTypeSelect from "@/incident/type/IncidentTypeSelect.vue"
 import ParticipantSelect from "@/components/ParticipantSelect.vue"
 import ProjectSelect from "@/project/ProjectSelect.vue"
-import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import TagFilterAutoComplete from "@/tag/TagPicker.vue"
 
 export default {
   setup() {