Skip to content

Commit

Permalink
New tag selector component (#4243)
Browse files Browse the repository at this point in the history
  • Loading branch information
whitdog47 authored Jan 17, 2024
1 parent f88385a commit 52f0c1c
Show file tree
Hide file tree
Showing 30 changed files with 7,963 additions and 34 deletions.
Original file line number Diff line number Diff line change
@@ -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 ###
1 change: 1 addition & 0 deletions src/dispatch/static/dispatch/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand Down
7,148 changes: 7,148 additions & 0 deletions src/dispatch/static/dispatch/src/assets/icons/index.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/dispatch/static/dispatch/src/case/DetailsTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions src/dispatch/static/dispatch/src/case/TableExportDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/dispatch/static/dispatch/src/case/TableFilterDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@ export default {
return "Color"
},
},
default: {
type: String,
default: function () {
return "#1976D2FF"
},
},
},
data() {
Expand All @@ -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)
Expand Down
145 changes: 145 additions & 0 deletions src/dispatch/static/dispatch/src/components/IconPickerInput.vue
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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 () {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/dispatch/static/dispatch/src/incident/DetailsTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
Loading

0 comments on commit 52f0c1c

Please sign in to comment.