Make TagsDropdown component more flexible and reusable

• Make createTag prop optional
• Add eventBus prop to TagsDropdown
• Update TagsInput to use TagsDropdown
• Remove unnecessary class in TagsInput
• Adjust prop types and imports
This commit is contained in:
Oleg Ivaniv 2024-11-12 16:46:00 +01:00
parent 4155ae8d5a
commit 26d7fa7378
No known key found for this signature in database
2 changed files with 6 additions and 2 deletions

View file

@ -12,11 +12,11 @@ import { useToast } from '@/composables/useToast';
interface TagsDropdownProps {
placeholder: string;
modelValue: string[];
createTag: (name: string) => Promise<ITag>;
eventBus: EventBus | null;
allTags: ITag[];
isLoading: boolean;
tagsById: Record<string, ITag>;
createTag?: (name: string) => Promise<ITag>;
}
const i18n = useI18n();
@ -109,6 +109,8 @@ function filterOptions(value = '') {
}
async function onCreate() {
if (!props.createTag) return;
const name = filter.value;
try {
const newTag = await props.createTag(name);

View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import type { ITag } from '@/Interface';
import { createEventBus } from 'n8n-design-system';
import { computed } from 'vue';
export interface TagsInputProps {
@ -25,6 +26,7 @@ const props = withDefaults(defineProps<TagsInputProps>(), {
const emit = defineEmits<{ 'update:modelValue': [value: TagsInputProps['modelValue']] }>();
const tagsEventBus = createEventBus();
const getTagName = computed(() => (tagId: string) => {
return props.tagsById[tagId]?.name ?? '';
});
@ -60,8 +62,8 @@ function updateTags(tags: string[]) {
:all-tags="allTags"
:is-loading="isLoading"
:tags-by-id="tagsById"
class="tags-edit"
data-test-id="workflow-tags-dropdown"
:event-bus="tagsEventBus"
@update:model-value="updateTags"
@esc="cancelEditing('tags')"
@blur="saveChanges('tags')"